diff --git a/src/lib/ide/Env.svelte b/src/lib/ide/Env.svelte deleted file mode 100644 index 306089d..0000000 --- a/src/lib/ide/Env.svelte +++ /dev/null @@ -1,434 +0,0 @@ - - - - -
-
- {#each tools as tool} - - {/each} -
-
- -
-
- - - - getBase64(files[0])} bind:this={file}> - -
-
\ No newline at end of file diff --git a/src/lib/ide/Color.svelte b/src/lib/vector/Color.svelte similarity index 100% rename from src/lib/ide/Color.svelte rename to src/lib/vector/Color.svelte diff --git a/src/lib/vector/Env.svelte b/src/lib/vector/Env.svelte new file mode 100644 index 0000000..fc72cc7 --- /dev/null +++ b/src/lib/vector/Env.svelte @@ -0,0 +1,266 @@ + + + + +
+
+ {#each tools as tool} + + {/each} +
+
+ +
+
+ + + + getBase64(files[0])} bind:this={settings.doc.file}> + +
+
\ No newline at end of file diff --git a/src/lib/ide/Slider.svelte b/src/lib/vector/Slider.svelte similarity index 100% rename from src/lib/ide/Slider.svelte rename to src/lib/vector/Slider.svelte diff --git a/src/lib/vector/tools/deleter.js b/src/lib/vector/tools/deleter.js new file mode 100644 index 0000000..606104f --- /dev/null +++ b/src/lib/vector/tools/deleter.js @@ -0,0 +1,10 @@ + +let toolData = { + run: ({ selectedItems }) => { + selectedItems.forEach(item => { + item.remove(); + }) + } +} + +export { toolData }; \ No newline at end of file diff --git a/src/lib/vector/tools/down.js b/src/lib/vector/tools/down.js new file mode 100644 index 0000000..885f15d --- /dev/null +++ b/src/lib/vector/tools/down.js @@ -0,0 +1,10 @@ + +let toolData = { + run: ({ selectedItems }) => { + selectedItems.reverse().forEach(item => { + item.sendToBack(); + }) + } +} + +export { toolData }; \ No newline at end of file diff --git a/src/lib/vector/tools/edit.js b/src/lib/vector/tools/edit.js new file mode 100644 index 0000000..2edc4a0 --- /dev/null +++ b/src/lib/vector/tools/edit.js @@ -0,0 +1,38 @@ +import pkg from 'paper'; +const { paper } = pkg; + +let lastPoint; + +let toolData = { + mouseDown: (settings) => { + let { innerGroup, mainPath, fill, stroke } = settings; + mainPath = new paper.Path(); + + mainPath.strokeColor = fill.stroke; + mainPath.fillColor = fill.color; + + mainPath.strokeWidth = stroke; + mainPath.strokeCap = 'butt'; + mainPath.strokeJoin = 'bevel'; + + innerGroup.addChild(mainPath); + + settings.mainPath = mainPath; + return settings; + + }, + + mouseDrag: ( {mainPath, point}) => { + lastPoint = point; + + mainPath.add(point); + }, + + mouseUp: ( {mainPath, nodeDist }) => { + if (mainPath.lastSegment.point.getDistance(mainPath.firstSegment.point) < nodeDist) { + mainPath.closePath(); + } + } +} + +export { toolData }; \ No newline at end of file diff --git a/src/lib/vector/tools/export.js b/src/lib/vector/tools/export.js new file mode 100644 index 0000000..bb2d9f8 --- /dev/null +++ b/src/lib/vector/tools/export.js @@ -0,0 +1,13 @@ + +let toolData = { + run: ({ innerGroup, doc }) => { + var data = new Blob(['' + innerGroup.exportSVG({asString: true}) + ''], {type: 'image/svg'}); + + var url = window.URL.createObjectURL(data); + + doc.download.href = url; + doc.download.click(); + } +} + +export { toolData }; \ No newline at end of file diff --git a/src/lib/vector/tools/group.js b/src/lib/vector/tools/group.js new file mode 100644 index 0000000..2e3301e --- /dev/null +++ b/src/lib/vector/tools/group.js @@ -0,0 +1,12 @@ + +import pkg from 'paper'; +const { paper } = pkg; + +let toolData = { + run: ({ selectedItems, innerGroup }) => { + var group = new paper.Group(selectedItems); + innerGroup.addChild(group); + } +} + +export { toolData }; \ No newline at end of file diff --git a/src/lib/vector/tools/import.js b/src/lib/vector/tools/import.js new file mode 100644 index 0000000..a6b3bf9 --- /dev/null +++ b/src/lib/vector/tools/import.js @@ -0,0 +1,7 @@ +let toolData = { + run: ({ doc }) => { + doc.file.click(); + } +} + +export { toolData }; \ No newline at end of file diff --git a/src/lib/vector/tools/node.js b/src/lib/vector/tools/node.js new file mode 100644 index 0000000..6c01642 --- /dev/null +++ b/src/lib/vector/tools/node.js @@ -0,0 +1,45 @@ +let toolData = { + doubleClickInner: (event) => { + var nearestPoint = event.target.getNearestPoint(event.point); + + if (nearestPoint.getDistance(event.point) > event.nodeDist) return; + + event.target.segments.forEach(segment => { + segment.selected = false; + }); + + let closestPoint = event.target.segments[0]; + let closestDist = 10000; + + event.target.segments.forEach(segment => { + let dist = segment.point.getDistance(nearestPoint); + if (dist < closestDist) { + closestDist = dist; + closestPoint = segment.point; + } + }); + + let newPoint; + + if (nearestPoint.getDistance(closestPoint) > event.grabDist) { + newPoint = event.target.divideAt(event.target.getLocationOf(nearestPoint)); + } else { + newPoint = closestPoint; + } + + newPoint.selected = true; + }, + + mouseDrag : ( {selectedItems, delta} ) => { + selectedItems.forEach(item => { + if (item.className == 'Path') { + item.segments.forEach(segment => { + if (segment.selected) + segment.point = segment.point.add(delta) + }) + } + }) + } +} + +export { toolData }; \ No newline at end of file diff --git a/src/lib/vector/tools/pan.js b/src/lib/vector/tools/pan.js new file mode 100644 index 0000000..a872ce5 --- /dev/null +++ b/src/lib/vector/tools/pan.js @@ -0,0 +1,7 @@ +let toolData = { + mouseDrag: ( { viewGroup, delta } ) => { + viewGroup.position = viewGroup.position.add(delta); + } +} + +export { toolData }; \ No newline at end of file diff --git a/src/lib/vector/tools/resize.js b/src/lib/vector/tools/resize.js new file mode 100644 index 0000000..2358e76 --- /dev/null +++ b/src/lib/vector/tools/resize.js @@ -0,0 +1,64 @@ +let toolData = { + doubleClickInner: ({ target }) => { + target.selected = !target.selected; + target.bounds.selected = target.selected; + }, + + mouseDrag: ( {selectedItems, point, delta, nodeDist} ) => { + selectedItems.forEach(item => { + var nearestPoint = point; + + if (!item.bounds.selected) return; + + + let seg = [ + item.bounds.topLeft, + item.bounds.topRight, + item.bounds.bottomLeft, + item.bounds.bottomRight, + item.bounds.topCenter, + item.bounds.bottomCenter, + item.bounds.leftCenter, + item.bounds.rightCenter + ]; + + let segOpp = [ + item.bounds.bottomRight, + item.bounds.bottomLeft, + item.bounds.topRight, + item.bounds.topLeft, + item.bounds.bottomCenter, + item.bounds.topCenter, + item.bounds.rightCenter, + item.bounds.leftCenter + ] + + let closestPoint = seg[0]; + let closestDist = 10000; + let i = -1; + + seg.forEach((segment,index) => { + let dist = segment.getDistance(nearestPoint); + if (dist < closestDist) { + closestDist = dist; + closestPoint = segOpp[index]; + i = index; + } + }); + + if (closestDist < nodeDist) { + var signX = (i == 1 || i == 3 || i == 7) ? 1 : -1; + var signY = (i == 1 || i == 0 || i == 4) ? -1 : 1; + if (i > 5) { + item.scale(1 + signX * delta.x / item.bounds.width, 1, closestPoint); + } else if (i > 3) { + item.scale(1, 1 + signY * delta.y / item.bounds.height, closestPoint); + } else { + item.scale(1 + signX * delta.x / item.bounds.width, 1 + signY * delta.y / item.bounds.height, closestPoint); + } + } + }) + } +} + +export { toolData }; \ No newline at end of file diff --git a/src/lib/vector/tools/rotate.js b/src/lib/vector/tools/rotate.js new file mode 100644 index 0000000..dce4ba9 --- /dev/null +++ b/src/lib/vector/tools/rotate.js @@ -0,0 +1,16 @@ +let toolData = { + doubleClickInner: ({ target }) => { + target.selected = !target.selected; + target.bounds.selected = target.selected; + }, + + mouseDrag: ( {selectedItems, point, delta} ) => { + selectedItems.forEach(item => { + if (!item.bounds.selected) return; + var rotAngle = point.subtract(item.bounds.center).angle - point.add(delta).subtract(item.bounds.center).angle; + item.rotate(-rotAngle); + }); + } +} + +export { toolData }; \ No newline at end of file diff --git a/src/lib/vector/tools/select.js b/src/lib/vector/tools/select.js new file mode 100644 index 0000000..8ea16d7 --- /dev/null +++ b/src/lib/vector/tools/select.js @@ -0,0 +1,16 @@ +let toolData = { + doubleClickInner: ({ target }) => { + target.selected = !target.selected; + }, + + mouseDragInner: ( {selectedItems, delta, innerGroup} ) => { + selectedItems.forEach(item => { + if ((item.parent != innerGroup)) return; + + item.position = item.position.add(delta) + }) + + } +} + +export { toolData }; \ No newline at end of file diff --git a/src/lib/vector/tools/ungroup.js b/src/lib/vector/tools/ungroup.js new file mode 100644 index 0000000..d8fbb35 --- /dev/null +++ b/src/lib/vector/tools/ungroup.js @@ -0,0 +1,14 @@ + +let toolData = { + run: ({ selectedItems, innerGroup }) => { + selectedItems.forEach(item => { + if (!item.children || item.className != 'Group' || item == innerGroup) return; + item.selected = false; + item.children.forEach(child => { + innerGroup.addChild(child); + }) + }) + } +} + +export { toolData }; \ No newline at end of file diff --git a/src/lib/vector/tools/up.js b/src/lib/vector/tools/up.js new file mode 100644 index 0000000..a23c93a --- /dev/null +++ b/src/lib/vector/tools/up.js @@ -0,0 +1,10 @@ + +let toolData = { + run: ({ selectedItems }) => { + selectedItems.forEach(item => { + item.bringToFront(); + }) + } +} + +export { toolData }; \ No newline at end of file diff --git a/src/routes/editor/+page.svelte b/src/routes/editor/+page.svelte index 07397d2..1fa5c06 100644 --- a/src/routes/editor/+page.svelte +++ b/src/routes/editor/+page.svelte @@ -1,5 +1,5 @@ \ No newline at end of file