src/assets/scss/_svg.scss

@@ -28,12 +28,24 @@
   background-position: center;
 }
 
+.cancelIcon {
+  background: url("../svg/cancelIcon.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
 .caseIcon {
   background: url("../svg/caseIcon.svg");
   background-repeat: no-repeat;
   background-position: center;
 }
 
+.codeIcon {
+  background: url("../svg/caseIcon.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
 .countLoopIcon {
   background: url("../svg/countLoopIcon.svg");
   background-repeat: no-repeat;
@@ -46,6 +58,12 @@
   background-position: center;
 }
 
+.exportIcon {
+  background: url("../svg/exportIcon.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
 .footLoopIcon {
   background: url("../svg/footLoopIcon.svg");
   background-repeat: no-repeat;
@@ -76,6 +94,18 @@
   background-position: center;
 }
 
+.frameTopLeft {
+  background: url("../svg/frameTopLeft.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.frameTopLeftBottom {
+  background: url("../svg/frameTopLeftBottom.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
 .insertIcon {
   background: url("../svg/insertIcon.svg");
   background-repeat: no-repeat;
@@ -100,6 +130,18 @@
   background-position: center;
 }
 
+.resetIcon {
+  background: url("../svg/resetIcon.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.saveIcon {
+  background: url("../svg/saveIcon.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
 .switchDefaultCaseIcon {
   background: url("../svg/switchDefaultCaseIcon.svg");
   background-repeat: no-repeat;
@@ -111,3 +153,15 @@
   background-repeat: no-repeat;
   background-position: center;
 }
+
+.trashcan {
+  background: url("../svg/trashcan.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.uploadIcon {
+  background: url("../svg/uploadIcon.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+}

src/index.js

@@ -4,6 +4,7 @@ import { Structogram } from './views/structogram'
 import { CodeView } from './views/code'
 import { ImportExport } from './views/importExport'
 import { generateHtmltree } from './helpers/generator'
+import { templates } from './templates.js';
 
 import './assets/scss/structog.scss'
 

src/templates.js

+export const templates = {
+    t1: {
+        model: {"id":"25680378-9147-9f4d-a12d-9d10f29f","type":"InsertNode","followElement":{"id":"781cb79f-2a10-7c81-aeba-740544e5","type":"TaskNode","text":"i = 5","followElement":{"id":"f8dc68f6-926f-061d-9d55-8d49706c","type":"InsertNode","followElement":{"id":"bbe1cba1-7448-b1ad-4348-0a254183","type":"HeadLoopNode","text":"i > 0","followElement":{"id":"26a02684-af45-7a72-ab0e-ca5bbfc5","type":"InsertNode","followElement":null},"child":{"id":"f8b9343c-6e88-aa1b-b249-a12067e4","type":"InsertNode","followElement":{"id":"f69965f8-fe5e-1eba-7345-351938e7","type":"TaskNode","text":"i = i - 1","followElement":{"id":"a6908468-365d-c1be-8705-96639514","type":"InsertNode","followElement":null}}}}}}},
+        displaySourcecode: "false",
+        lang: "Python"
+    },
+    t2: {
+        model: {"id":"e4c4b35a-1e09-e1cb-d55c-99ffbcbe","type":"InsertNode","followElement":{"id":"cb365db9-6e23-f0d1-153b-674b15a8","type":"InputNode","text":"i","followElement":{"id":"b738c9fa-d096-985f-f5a0-fa764d72","type":"InsertNode","followElement":{"id":"c3e59cd0-3573-8bcb-d50e-e6ddc749","type":"TaskNode","text":"i = i * 20","followElement":{"id":"a8d5103e-478e-4e20-1ea4-a492b2f2","type":"InsertNode","followElement":{"id":"fc1f6373-7334-703b-bcca-02283559","type":"BranchNode","text":"i > 50","followElement":{"id":"30fd4cda-ff39-d0eb-fe50-806ef7d5","type":"InsertNode","followElement":{"id":"f5621fa3-d34e-7776-55b9-2c2c7c9f","type":"CaseNode","text":"i","followElement":{"id":"a461498f-7491-f5b1-8a50-e2662da1","type":"InsertNode","followElement":{"id":"f1843ceb-b17a-a1a1-4f6c-3102515d","type":"OutputNode","text":"i","followElement":{"id":"d218754e-994d-0994-f4a8-972775e4","type":"InsertNode","followElement":null}}},"defaultOn":true,"defaultNode":{"id":"75694b3d-1efa-e8e5-1082-c262f79a","type":"InsertCase","text":"Sonst","followElement":{"id":"363638ce-6a4e-2124-fba0-1a794a20","type":"InsertNode","followElement":{"id":"eb1276f2-02d8-7af2-17eb-6f96681b","type":"TaskNode","text":"i = i % 20","followElement":{"id":"1eaf9510-f707-48d1-8cda-823406b1","type":"InsertNode","followElement":{"id":"a1d3dd7e-69c0-1445-655a-be690313","type":"TaskNode","text":"i = i - 1","followElement":{"id":"58b3c551-c074-200b-438f-d17dad58","type":"InsertNode","followElement":null}}}}}},"cases":[{"id":"a13c7fc4-a5ae-3fe2-3592-e5766f5f","type":"InsertCase","text":"40","followElement":{"id":"3dd9d516-6a17-7ea9-669c-89fd433e","type":"InsertNode","followElement":{"id":"3d32530b-2e3a-684d-4382-4fadfa69","type":"TaskNode","text":"i = i + 2","followElement":{"id":"983e9727-766e-da53-42f8-8b1faad8","type":"InsertNode","followElement":null}}}},{"id":"ed7e9ba7-9dd6-81dc-6c38-8b8046cb","type":"InsertCase","text":"42","followElement":{"id":"4deac4f6-7e14-e134-e9be-83019d22","type":"InsertNode","followElement":{"id":"050cab51-29c2-925f-69d7-8d58c35c","type":"OutputNode","text":"\"oh yeah\"","followElement":{"id":"14f1f3d0-8b91-a2cb-7234-90999482","type":"InsertNode","followElement":null}}}}]}},"trueChild":{"id":"92ca07c1-b2cf-5ef4-9496-9c3aa0b4","type":"InsertNode","followElement":{"id":"20269702-9266-7c0e-10e8-6a4c74ed","type":"HeadLoopNode","text":"i > 50","followElement":{"id":"ea93294b-a0a9-73a4-543d-28203269","type":"InsertNode","followElement":null},"child":{"id":"8f9760b5-d95e-3916-73d4-6ac2b792","type":"InsertNode","followElement":{"id":"beda831e-2090-f556-54ca-8f65d263","type":"TaskNode","text":"i = i - 2","followElement":{"id":"cf6a901e-d632-afc6-801e-2e31617b","type":"InsertNode","followElement":null}}}}},"falseChild":{"id":"581b4fdd-150e-3a53-a57c-63083fd3","type":"InsertNode","followElement":{"type":"Placeholder"}}}}}}}},
+        displaySourcecode: "true",
+        lang: "PHP"
+    }
+}

src/views/structogram.js

@@ -147,7 +147,10 @@ export class Structogram {
                                 container.addEventListener('dragover', function(event) {
                                     event.preventDefault();
                                 });
-                                container.addEventListener('drop', () => this.presenter.appendElement(subTree.id));
+                                container.addEventListener('drop', (event) => {
+                                    event.preventDefault();
+                                    this.presenter.appendElement(subTree.id)
+                                });
                                 container.addEventListener('click', () => this.presenter.appendElement(subTree.id));
 
                                 if (this.presenter.getMoveId() && subTree.followElement && subTree.followElement.id == this.presenter.getMoveId()) {
@@ -353,6 +356,7 @@ export class Structogram {
                     } else {
                         divHead.classList.add('caseHead-noDefault-' + subTree.cases.length);
                     }
+                    divHead.style.backgroundPosition = '1px 0px';
 
                     let nrCases = subTree.cases.length;
                     if (!subTree.defaultOn) {