Many changes
This commit is contained in:
tdgmdev
parent
7526940c83
commit
95b8cb9464
4 changed files with 328 additions and 12 deletions
|
|
@ -32,6 +32,8 @@
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
|
|
||||||
import { paper } from "paper";
|
import { paper } from "paper";
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
|
|
@ -40,6 +42,22 @@
|
||||||
import { Group } from "paper/dist/paper-core";
|
import { Group } from "paper/dist/paper-core";
|
||||||
import { group_outros } from "svelte/internal";
|
import { group_outros } from "svelte/internal";
|
||||||
|
|
||||||
|
let tools = [
|
||||||
|
'edit',
|
||||||
|
'pan',
|
||||||
|
'select',
|
||||||
|
'group',
|
||||||
|
'ungroup',
|
||||||
|
'resize',
|
||||||
|
'rotate',
|
||||||
|
'deleter',
|
||||||
|
'node',
|
||||||
|
'up',
|
||||||
|
'down',
|
||||||
|
'import',
|
||||||
|
'export',
|
||||||
|
]
|
||||||
|
|
||||||
let mode = 'edit';
|
let mode = 'edit';
|
||||||
let colorType = 'stroke';
|
let colorType = 'stroke';
|
||||||
|
|
||||||
|
|
@ -49,7 +67,7 @@
|
||||||
let darkStroke = '#d8d8d8';
|
let darkStroke = '#d8d8d8';
|
||||||
let white = 'white';
|
let white = 'white';
|
||||||
|
|
||||||
let nodeDist = 45;
|
let nodeDist = 25;
|
||||||
let grabDist = 15;
|
let grabDist = 15;
|
||||||
|
|
||||||
let color = strokeColor;
|
let color = strokeColor;
|
||||||
|
|
@ -98,6 +116,10 @@
|
||||||
exportFile();
|
exportFile();
|
||||||
} else if (mode == 'deleter') {
|
} else if (mode == 'deleter') {
|
||||||
deleter();
|
deleter();
|
||||||
|
} else if (mode == 'up') {
|
||||||
|
layerUp();
|
||||||
|
} else if (mode == 'down') {
|
||||||
|
layerDown();
|
||||||
}
|
}
|
||||||
|
|
||||||
return mode;
|
return mode;
|
||||||
|
|
@ -154,6 +176,18 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let layerDown = () => {
|
||||||
|
paper.project.selectedItems.reverse().forEach(item => {
|
||||||
|
item.sendToBack();
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
let layerUp = () => {
|
||||||
|
paper.project.selectedItems.forEach(item => {
|
||||||
|
item.bringToFront();
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
let group = () => {
|
let group = () => {
|
||||||
var group = new paper.Group(paper.project.selectedItems);
|
var group = new paper.Group(paper.project.selectedItems);
|
||||||
innerGroup.addChild(group);
|
innerGroup.addChild(group);
|
||||||
|
|
@ -219,7 +253,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
newPoint.selected = true;
|
newPoint.selected = true;
|
||||||
} else if (mode == 'resize') {
|
} else if (mode == 'resize' || mode == 'rotate') {
|
||||||
target.selected = !target.selected;
|
target.selected = !target.selected;
|
||||||
target.bounds.selected = target.selected;
|
target.bounds.selected = target.selected;
|
||||||
}
|
}
|
||||||
|
|
@ -302,6 +336,12 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
} else if (mode == 'rotate') {
|
||||||
|
paper.project.selectedItems.forEach(item => {
|
||||||
|
if (!item.bounds.selected) return;
|
||||||
|
var rotAngle = event.point.subtract(item.bounds.center).angle - event.point.add(event.delta).subtract(item.bounds.center).angle;
|
||||||
|
item.rotate(-rotAngle);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -374,16 +414,9 @@
|
||||||
|
|
||||||
<div class='ide'>
|
<div class='ide'>
|
||||||
<div class='ide-left'>
|
<div class='ide-left'>
|
||||||
<EditButton bindMode={setMode} modeIn={mode} mode={'edit'} />
|
{#each tools as tool}
|
||||||
<EditButton bindMode={setMode} modeIn={mode} mode={'pan'} />
|
<EditButton bindMode={setMode} modeIn={mode} mode={tool} />
|
||||||
<EditButton bindMode={setMode} modeIn={mode} mode={'select'} />
|
{/each}
|
||||||
<EditButton bindMode={setMode} modeIn={mode} mode={'group'} />
|
|
||||||
<EditButton bindMode={setMode} modeIn={mode} mode={'ungroup'} />
|
|
||||||
<EditButton bindMode={setMode} modeIn={mode} mode={'node'} />
|
|
||||||
<EditButton bindMode={setMode} modeIn={mode} mode={'import'} />
|
|
||||||
<EditButton bindMode={setMode} modeIn={mode} mode={'export'} />
|
|
||||||
<EditButton bindMode={setMode} modeIn={mode} mode={'deleter'} />
|
|
||||||
<EditButton bindMode={setMode} modeIn={mode} mode={'resize'} />
|
|
||||||
</div>
|
</div>
|
||||||
<div class='ide-mid'>
|
<div class='ide-mid'>
|
||||||
<canvas class='canvas' resize bind:this={canvas}></canvas>
|
<canvas class='canvas' resize bind:this={canvas}></canvas>
|
||||||
|
|
|
||||||
93
static/down.svg
Normal file
93
static/down.svg
Normal file
|
|
@ -0,0 +1,93 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="66.145836mm"
|
||||||
|
height="66.145836mm"
|
||||||
|
viewBox="0 0 66.145836 66.145836"
|
||||||
|
version="1.1"
|
||||||
|
id="svg5"
|
||||||
|
inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
|
||||||
|
sodipodi:docname="down.svg"
|
||||||
|
inkscape:export-filename="tdgmdev.png"
|
||||||
|
inkscape:export-xdpi="1031.03"
|
||||||
|
inkscape:export-ydpi="1031.03"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview7"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="2.0560856"
|
||||||
|
inkscape:cx="-33.072553"
|
||||||
|
inkscape:cy="116.96984"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="996"
|
||||||
|
inkscape:window-x="-8"
|
||||||
|
inkscape:window-y="-8"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="g9203" />
|
||||||
|
<defs
|
||||||
|
id="defs2">
|
||||||
|
<filter
|
||||||
|
inkscape:collect="always"
|
||||||
|
style="color-interpolation-filters:sRGB"
|
||||||
|
id="filter6867">
|
||||||
|
<feGaussianBlur
|
||||||
|
inkscape:collect="always"
|
||||||
|
stdDeviation="0.32949976"
|
||||||
|
id="feGaussianBlur6869" />
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1"
|
||||||
|
transform="translate(-60.055149,-48.408089)">
|
||||||
|
<g
|
||||||
|
id="g8696"
|
||||||
|
transform="translate(-2.1485482,-4.4362866)">
|
||||||
|
<g
|
||||||
|
id="g9461">
|
||||||
|
<g
|
||||||
|
id="g9203"
|
||||||
|
transform="matrix(0.94750492,0,0,0.94750492,5.0015535,4.5102352)"
|
||||||
|
style="stroke-width:1.0554">
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#000000;stroke-width:6.98105;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 95.276615,66.078488 V 104.106"
|
||||||
|
id="path7799" />
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#000000;stroke-width:6.98105;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 114.29037,94.586461 95.276614,105.75615 76.262861,94.586461"
|
||||||
|
id="path7801"
|
||||||
|
sodipodi:nodetypes="ccc" />
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#000000;stroke-width:6.98105;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 114.29037,77.831932 95.276614,89.001617 76.262861,77.831932"
|
||||||
|
id="path519"
|
||||||
|
sodipodi:nodetypes="ccc" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
aria-label="T"
|
||||||
|
id="g5506"
|
||||||
|
style="font-size:10.5833px;line-height:1.25;font-family:'Open Sans';-inkscape-font-specification:'Open Sans';fill:#95c7b9;fill-opacity:1;stroke:none;stroke-width:0.174407;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
transform="matrix(3.0340844,0,0,3.0340844,-214.66547,-112.03533)" />
|
||||||
|
<g
|
||||||
|
aria-label="T"
|
||||||
|
id="g6865"
|
||||||
|
style="font-size:10.5833px;line-height:1.25;font-family:'Open Sans';-inkscape-font-specification:'Open Sans';fill:#bfffed;fill-opacity:1;stroke:none;stroke-width:0.174407;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter6867)"
|
||||||
|
transform="matrix(3.0340844,0,0,3.0340844,-214.66547,-112.03533)" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.5 KiB |
97
static/rotate.svg
Normal file
97
static/rotate.svg
Normal file
|
|
@ -0,0 +1,97 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="66.145836mm"
|
||||||
|
height="66.145836mm"
|
||||||
|
viewBox="0 0 66.145836 66.145836"
|
||||||
|
version="1.1"
|
||||||
|
id="svg5"
|
||||||
|
inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
|
||||||
|
sodipodi:docname="rotate.svg"
|
||||||
|
inkscape:export-filename="tdgmdev.png"
|
||||||
|
inkscape:export-xdpi="1031.03"
|
||||||
|
inkscape:export-ydpi="1031.03"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview7"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="2.0560856"
|
||||||
|
inkscape:cx="29.181664"
|
||||||
|
inkscape:cy="116.48348"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="996"
|
||||||
|
inkscape:window-x="-8"
|
||||||
|
inkscape:window-y="-8"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="g9203" />
|
||||||
|
<defs
|
||||||
|
id="defs2">
|
||||||
|
<filter
|
||||||
|
inkscape:collect="always"
|
||||||
|
style="color-interpolation-filters:sRGB"
|
||||||
|
id="filter6867">
|
||||||
|
<feGaussianBlur
|
||||||
|
inkscape:collect="always"
|
||||||
|
stdDeviation="0.32949976"
|
||||||
|
id="feGaussianBlur6869" />
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1"
|
||||||
|
transform="translate(-60.055149,-48.408089)">
|
||||||
|
<g
|
||||||
|
id="g8696"
|
||||||
|
transform="translate(-2.1485482,-4.4362866)">
|
||||||
|
<g
|
||||||
|
id="g9461">
|
||||||
|
<g
|
||||||
|
id="g9203"
|
||||||
|
transform="matrix(0.94750492,0,0,0.94750492,5.0015535,4.5102352)"
|
||||||
|
style="stroke-width:1.0554">
|
||||||
|
<rect
|
||||||
|
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:6.98104;stroke-linecap:square;stroke-miterlimit:3.96999;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||||
|
id="rect1224"
|
||||||
|
width="50.658066"
|
||||||
|
height="27.02669"
|
||||||
|
x="96.715836"
|
||||||
|
y="-53.066673"
|
||||||
|
ry="4.171237"
|
||||||
|
transform="rotate(60)" />
|
||||||
|
<rect
|
||||||
|
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:6.98104;stroke-linecap:square;stroke-miterlimit:3.96999;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||||
|
id="rect314"
|
||||||
|
width="50.658066"
|
||||||
|
height="27.02669"
|
||||||
|
x="-64.882362"
|
||||||
|
y="108.53152"
|
||||||
|
ry="4.171237"
|
||||||
|
transform="matrix(-0.8660254,0.5,0.5,0.8660254,0,0)" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
aria-label="T"
|
||||||
|
id="g5506"
|
||||||
|
style="font-size:10.5833px;line-height:1.25;font-family:'Open Sans';-inkscape-font-specification:'Open Sans';fill:#95c7b9;fill-opacity:1;stroke:none;stroke-width:0.174407;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
transform="matrix(3.0340844,0,0,3.0340844,-214.66547,-112.03533)" />
|
||||||
|
<g
|
||||||
|
aria-label="T"
|
||||||
|
id="g6865"
|
||||||
|
style="font-size:10.5833px;line-height:1.25;font-family:'Open Sans';-inkscape-font-specification:'Open Sans';fill:#bfffed;fill-opacity:1;stroke:none;stroke-width:0.174407;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter6867)"
|
||||||
|
transform="matrix(3.0340844,0,0,3.0340844,-214.66547,-112.03533)" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.5 KiB |
93
static/up.svg
Normal file
93
static/up.svg
Normal file
|
|
@ -0,0 +1,93 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="66.145836mm"
|
||||||
|
height="66.145836mm"
|
||||||
|
viewBox="0 0 66.145836 66.145836"
|
||||||
|
version="1.1"
|
||||||
|
id="svg5"
|
||||||
|
inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
|
||||||
|
sodipodi:docname="up.svg"
|
||||||
|
inkscape:export-filename="tdgmdev.png"
|
||||||
|
inkscape:export-xdpi="1031.03"
|
||||||
|
inkscape:export-ydpi="1031.03"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview7"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="2.0560856"
|
||||||
|
inkscape:cx="-33.072553"
|
||||||
|
inkscape:cy="116.96984"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="996"
|
||||||
|
inkscape:window-x="-8"
|
||||||
|
inkscape:window-y="-8"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="g9203" />
|
||||||
|
<defs
|
||||||
|
id="defs2">
|
||||||
|
<filter
|
||||||
|
inkscape:collect="always"
|
||||||
|
style="color-interpolation-filters:sRGB"
|
||||||
|
id="filter6867">
|
||||||
|
<feGaussianBlur
|
||||||
|
inkscape:collect="always"
|
||||||
|
stdDeviation="0.32949976"
|
||||||
|
id="feGaussianBlur6869" />
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1"
|
||||||
|
transform="translate(-60.055149,-48.408089)">
|
||||||
|
<g
|
||||||
|
id="g8696"
|
||||||
|
transform="translate(-2.1485482,-4.4362866)">
|
||||||
|
<g
|
||||||
|
id="g9461">
|
||||||
|
<g
|
||||||
|
id="g9203"
|
||||||
|
transform="matrix(0.94750492,0,0,0.94750492,5.0015535,4.5102352)"
|
||||||
|
style="stroke-width:1.0554">
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#000000;stroke-width:6.98105;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 95.276615,105.75609 V 67.728582"
|
||||||
|
id="path7799" />
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#000000;stroke-width:6.98105;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 114.29037,77.248117 95.276614,66.078432 76.262861,77.248117"
|
||||||
|
id="path7801"
|
||||||
|
sodipodi:nodetypes="ccc" />
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#000000;stroke-width:6.98105;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 114.29037,94.002646 95.276614,82.832961 76.262861,94.002646"
|
||||||
|
id="path519"
|
||||||
|
sodipodi:nodetypes="ccc" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
aria-label="T"
|
||||||
|
id="g5506"
|
||||||
|
style="font-size:10.5833px;line-height:1.25;font-family:'Open Sans';-inkscape-font-specification:'Open Sans';fill:#95c7b9;fill-opacity:1;stroke:none;stroke-width:0.174407;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
transform="matrix(3.0340844,0,0,3.0340844,-214.66547,-112.03533)" />
|
||||||
|
<g
|
||||||
|
aria-label="T"
|
||||||
|
id="g6865"
|
||||||
|
style="font-size:10.5833px;line-height:1.25;font-family:'Open Sans';-inkscape-font-specification:'Open Sans';fill:#bfffed;fill-opacity:1;stroke:none;stroke-width:0.174407;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter6867)"
|
||||||
|
transform="matrix(3.0340844,0,0,3.0340844,-214.66547,-112.03533)" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.5 KiB |
Loading…
Reference in a new issue