Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
D
drawing-app
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Model registry
Operate
Environments
Monitor
Incidents
Service Desk
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
hlgr
drawing-app
Commits
80494a3f
Commit
80494a3f
authored
5 years ago
by
Yuriy Maksymets
Browse files
Options
Downloads
Patches
Plain Diff
New cursor style, addOrUpdatePathElem refactoring
parent
d3582653
No related branches found
Branches containing commit
No related tags found
Tags containing commit
No related merge requests found
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
public/cursor.svg
+2
-2
2 additions, 2 deletions
public/cursor.svg
public/styles.css
+2
-1
2 additions, 1 deletion
public/styles.css
src/app.js
+83
-77
83 additions, 77 deletions
src/app.js
with
87 additions
and
80 deletions
public/cursor.svg
+
2
−
2
View file @
80494a3f
<svg
viewBox=
"-
2 -2 6 6
"
xmlns=
"http://www.w3.org/2000/svg"
>
<circle
cx=
"
2
"
cy=
"
2
"
r=
"
2
"
/>
<svg
viewBox=
"-
10 -10 30 30
"
xmlns=
"http://www.w3.org/2000/svg"
>
<circle
cx=
"
10
"
cy=
"
10
"
r=
"
10
"
/>
</svg>
\ No newline at end of file
This diff is collapsed.
Click to expand it.
public/styles.css
+
2
−
1
View file @
80494a3f
html
,
body
{
height
:
100%
;
cursor
:
crosshair
;
cursor
:
url(cursor.svg)
15
15
,
pointer
;
/* /crosshair; */
}
body
{
...
...
This diff is collapsed.
Click to expand it.
src/app.js
+
83
−
77
View file @
80494a3f
...
...
@@ -25,13 +25,13 @@ const STROKECOLOUR = "blue"
const
STROKERADIUS
=
2
const
ERASERRADIUS
=
STROKERADIUS
*
10
function
interpolatedCoordinate
(
start
,
end
,
length
)
{
const
dx
=
end
[
0
]
-
start
[
0
]
const
dy
=
end
[
1
]
-
start
[
1
]
const
dist
=
getDistance
(
start
,
end
)
const
ratio
=
length
/
dist
return
[
start
[
0
]
+
dx
*
ratio
,
start
[
1
]
+
dy
*
ratio
]
}
//
function interpolatedCoordinate(start, end, length) {
//
const dx = end[0] - start[0]
//
const dy = end[1] - start[1]
//
const dist = getDistance(start, end)
//
const ratio = length / dist
//
return [start[0] + dx * ratio, start[1] + dy * ratio]
//
}
function
eraseAt
(
x
,
y
,
room
)
{
let
mousePos
=
[
x
,
y
]
...
...
@@ -47,11 +47,10 @@ function eraseAt(x, y, room) {
detail
:
{
id
:
pathID
,
points
},
}),
)
points
.
forEach
((
point
,
i
)
=>
{
points
.
forEach
((
point
)
=>
{
const
distanceToPoint
=
getDistance
(
mousePos
,
point
)
if
(
distanceToPoint
<=
ERASERRADIUS
)
{
room
.
erasePoint
(
pathID
,
i
)
// room.erasePoint(pathID, i)
// let prev, next
// if (i > 0) {
// prev = i - 1
...
...
@@ -59,7 +58,6 @@ function eraseAt(x, y, room) {
// if (i < points.length - 1) {
// next = i + 1
// }
// if (prev !== undefined) {
// const interpolatedPoint = interpolatedCoordinate(
// point,
...
...
@@ -68,7 +66,6 @@ function eraseAt(x, y, room) {
// )
// room.insertIntoPath(pathID, prev, interpolatedPoint)
// }
// if (next !== undefined) {
// const interpolatedPoint = interpolatedCoordinate(
// point,
...
...
@@ -93,9 +90,9 @@ const SVG = {
},
}
let
TEST_ERASE_INTERVAL
=
{}
// { 0: [[0.1, 0.3], [0.4, 0.8]] }
let
TEST_ERASE_INTERVAL
=
{}
function
erasurePoints
(
pointA
,
pointB
,
start
,
fin
)
{
function
erasurePoints
(
pointA
,
pointB
,
[
start
,
fin
]
)
{
if
(
start
>=
fin
)
return
if
(
start
<=
0
)
start
=
0
if
(
fin
>=
1
)
fin
=
1
...
...
@@ -110,7 +107,7 @@ function erasurePoints(pointA, pointB, start, fin) {
return
[
start
,
fin
].
map
(
pointOnLine
)
}
const
addOrUpdate
PathElem
=
(
pathElems
,
id
,
points
)
=>
{
function
getOrAdd
PathElem
(
pathElems
,
id
)
{
let
pathElem
=
pathElems
.
get
(
id
)
if
(
pathElem
==
null
)
{
...
...
@@ -128,92 +125,101 @@ const addOrUpdatePathElem = (pathElems, id, points) => {
}
pathElem
.
innerHTML
=
""
return
pathElem
}
if
(
points
.
length
==
0
)
{
return
pathElem
}
function
generateSvgPoint
(
subPath
)
{
const
subpathElem
=
SVG
.
create
.
circle
()
subpathElem
.
setAttribute
(
"
stroke
"
,
"
none
"
)
subpathElem
.
setAttribute
(
"
fill
"
,
STROKECOLOUR
)
subpathElem
.
setAttribute
(
"
cx
"
,
subPath
[
0
][
0
])
subpathElem
.
setAttribute
(
"
cy
"
,
subPath
[
0
][
1
])
subpathElem
.
setAttribute
(
"
r
"
,
STROKERADIUS
)
return
subpathElem
}
function
generateSvgPath
(
subPath
)
{
const
subpathElem
=
SVG
.
create
.
path
()
subpathElem
.
setAttribute
(
"
d
"
,
lineFn
(
subPath
))
return
subpathElem
}
function
generateSvgForSubpath
(
subPath
)
{
return
subPath
.
length
===
1
?
generateSvgPoint
(
subPath
)
:
generateSvgPath
(
subPath
)
}
function
isInvalidPoint
(
point
)
{
return
point
[
0
]
===
undefined
}
function
isEndPoint
(
point
)
{
return
point
[
2
]
===
"
end
"
}
function
getEraseIntervals
(
pathID
,
pointID
)
{
const
eraseIntervalsForPath
=
TEST_ERASE_INTERVAL
[
pathID
]
if
(
!
eraseIntervalsForPath
)
return
undefined
return
eraseIntervalsForPath
[
pointID
]
}
function
generatePointsForPathElem
(
pathElem
,
pathID
,
dataPoints
)
{
const
points
=
dataPoints
// Push a fake path split to generate the last path
points
.
push
([
-
1
,
-
1
,
false
])
points
.
push
([
-
1
,
-
1
,
"
end
"
])
let
subPath
=
[]
let
toAdd
=
undefined
for
(
let
i
=
0
;
i
<
points
.
length
;
i
++
)
{
const
point
=
points
[
i
]
if
(
toAdd
)
{
subPath
.
push
(
toAdd
)
toAdd
=
undefined
}
if
(
point
[
0
]
===
undefined
)
{
if
(
isInvalidPoint
(
point
))
{
continue
}
if
(
point
[
2
]
===
false
)
{
if
(
isEndPoint
(
point
)
)
{
// End of subpath
if
(
subPath
.
length
==
1
)
{
const
subpathElem
=
SVG
.
create
.
circle
()
subpathElem
.
setAttribute
(
"
stroke
"
,
"
none
"
)
subpathElem
.
setAttribute
(
"
fill
"
,
STROKECOLOUR
)
subpathElem
.
setAttribute
(
"
cx
"
,
subPath
[
0
][
0
])
subpathElem
.
setAttribute
(
"
cy
"
,
subPath
[
0
][
1
])
subpathElem
.
setAttribute
(
"
r
"
,
STROKERADIUS
)
pathElem
.
appendChild
(
subpathElem
)
}
else
if
(
subPath
.
length
>
0
)
{
const
subpathElem
=
SVG
.
create
.
path
()
subpathElem
.
setAttribute
(
"
d
"
,
lineFn
(
subPath
))
if
(
subPath
.
length
)
{
const
subpathElem
=
generateSvgForSubpath
(
subPath
)
pathElem
.
appendChild
(
subpathElem
)
subPath
=
[]
}
subPath
=
[]
continue
}
// Valid point inside a subpath
subPath
.
push
(
point
)
const
eraseIntervalsForPath
=
TEST_ERASE_INTERVAL
[
id
]
if
(
!
eraseIntervalsForPath
)
continue
const
eraseIntervals
=
TEST_ERASE_INTERVAL
[
id
][
i
]
if
(
!
eraseIntervals
)
continue
if
(
i
===
points
.
length
-
1
)
{
continue
}
const
nextPoint
=
points
[
i
+
1
]
const
eraseIntervals
=
getEraseIntervals
(
pathID
,
i
)
if
(
!
eraseIntervals
||
nextPoint
===
undefined
)
continue
for
(
const
eraseInterval
of
eraseIntervals
)
{
if
(
eraseInterval
)
{
if
(
toAdd
)
{
subPath
.
push
(
toAdd
)
toAdd
=
undefined
}
const
erp
=
erasurePoints
(
point
,
nextPoint
,
eraseInterval
[
0
],
eraseInterval
[
1
],
)
if
(
!
(
erp
&&
erp
.
length
))
continue
const
[
start
,
fin
]
=
erp
subPath
.
push
(
start
)
const
subpathElem
=
SVG
.
create
.
path
()
subpathElem
.
setAttribute
(
"
d
"
,
lineFn
(
subPath
))
pathElem
.
appendChild
(
subpathElem
)
subPath
=
[]
if
(
!
eraseInterval
)
continue
toAdd
=
fin
}
const
erasedIntervalBounds
=
erasurePoints
(
point
,
nextPoint
,
eraseInterval
,
)
if
(
!
(
erasedIntervalBounds
&&
erasedIntervalBounds
.
length
))
continue
const
[
endOfDrawnSegment
,
startOfNewSegment
]
=
erasedIntervalBounds
subPath
.
push
(
endOfDrawnSegment
)
const
subpathElem
=
generateSvgPath
(
subPath
)
pathElem
.
appendChild
(
subpathElem
)
subPath
=
[
startOfNewSegment
]
}
}
}
const
addOrUpdatePathElem
=
(
pathElems
,
id
,
points
)
=>
{
const
pathElem
=
getOrAddPathElem
(
pathElems
,
id
)
if
(
!
points
.
length
)
{
return
pathElem
}
generatePointsForPathElem
(
pathElem
,
id
,
points
)
return
pathElem
}
...
...
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment