From 95b8cb9464b2105f2ab5048188ea7f3fa1407320 Mon Sep 17 00:00:00 2001
From: tdgmdev <tdgmdev@gmail.com>
Date: Sat, 18 Feb 2023 21:07:29 -0500
Subject: [PATCH] Many changes

---
 src/lib/ide/Env.svelte | 57 +++++++++++++++++++------
 static/down.svg        | 93 ++++++++++++++++++++++++++++++++++++++++
 static/rotate.svg      | 97 ++++++++++++++++++++++++++++++++++++++++++
 static/up.svg          | 93 ++++++++++++++++++++++++++++++++++++++++
 4 files changed, 328 insertions(+), 12 deletions(-)
 create mode 100644 static/down.svg
 create mode 100644 static/rotate.svg
 create mode 100644 static/up.svg

diff --git a/src/lib/ide/Env.svelte b/src/lib/ide/Env.svelte
index 79c8771..e1e94d4 100644
--- a/src/lib/ide/Env.svelte
+++ b/src/lib/ide/Env.svelte
@@ -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>
diff --git a/static/down.svg b/static/down.svg
new file mode 100644
index 0000000..5ab7e91
--- /dev/null
+++ b/static/down.svg
@@ -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>
diff --git a/static/rotate.svg b/static/rotate.svg
new file mode 100644
index 0000000..12b0e88
--- /dev/null
+++ b/static/rotate.svg
@@ -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>
diff --git a/static/up.svg b/static/up.svg
new file mode 100644
index 0000000..bf2a786
--- /dev/null
+++ b/static/up.svg
@@ -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>