Many changes

This commit is contained in:
tdgmdev 2023-02-18 21:07:29 -05:00
parent 7526940c83
commit 95b8cb9464
4 changed files with 328 additions and 12 deletions

View file

@ -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
View 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
View 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
View 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