Many changes
This commit is contained in:
parent
7526940c83
commit
95b8cb9464
4 changed files with 328 additions and 12 deletions
|
@ -32,6 +32,8 @@
|
|||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
import { paper } from "paper";
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
|
@ -40,6 +42,22 @@
|
|||
import { Group } from "paper/dist/paper-core";
|
||||
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 colorType = 'stroke';
|
||||
|
||||
|
@ -49,7 +67,7 @@
|
|||
let darkStroke = '#d8d8d8';
|
||||
let white = 'white';
|
||||
|
||||
let nodeDist = 45;
|
||||
let nodeDist = 25;
|
||||
let grabDist = 15;
|
||||
|
||||
let color = strokeColor;
|
||||
|
@ -98,6 +116,10 @@
|
|||
exportFile();
|
||||
} else if (mode == 'deleter') {
|
||||
deleter();
|
||||
} else if (mode == 'up') {
|
||||
layerUp();
|
||||
} else if (mode == 'down') {
|
||||
layerDown();
|
||||
}
|
||||
|
||||
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 = () => {
|
||||
var group = new paper.Group(paper.project.selectedItems);
|
||||
innerGroup.addChild(group);
|
||||
|
@ -219,7 +253,7 @@
|
|||
}
|
||||
|
||||
newPoint.selected = true;
|
||||
} else if (mode == 'resize') {
|
||||
} else if (mode == 'resize' || mode == 'rotate') {
|
||||
target.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-left'>
|
||||
<EditButton bindMode={setMode} modeIn={mode} mode={'edit'} />
|
||||
<EditButton bindMode={setMode} modeIn={mode} mode={'pan'} />
|
||||
<EditButton bindMode={setMode} modeIn={mode} mode={'select'} />
|
||||
<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'} />
|
||||
{#each tools as tool}
|
||||
<EditButton bindMode={setMode} modeIn={mode} mode={tool} />
|
||||
{/each}
|
||||
</div>
|
||||
<div class='ide-mid'>
|
||||
<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