simple clickable

js/PElems/Edge.ts

@@ -1,4 +1,4 @@
-import { svgArrows } from "..";
+import { svgArrows, update } from "..";
 import { SVGArrow } from "../graphics/SVGArrow";
 import { Node } from "./Node";
 import { Transition } from "./Transition";
@@ -16,6 +16,13 @@ export class Edge {
         this.renderedElement = inEdge ? new SVGArrow(end, trans) : new SVGArrow(trans, end);
         this.renderedElement.appendIt(svgArrows);
         end.updateList.push(this);
+        this.renderedElement.onClick(() => {
+            let aws = parseInt(prompt("Gebe die Dimension ein:", this.dimension + "") || "");
+            if (isNaN(aws) || !isFinite(aws) || aws < 1) return;
+            this.dimension = aws;
+            this.renderedElement.setDimension(aws + "");
+            update();
+        })
     }
     canSuck() {
         return this.end.marks >= this.dimension;

js/PElems/Node.ts

@@ -21,9 +21,15 @@ export class Node implements Positionable {
         this.renderedElement.appendIt(svgNodes);
         this.renderedElement.onMove((event) => this.updatePosition(event.x, event.y));
         this.renderedElement.onClick((event) => {
-            if (this.marks < this.capacity) this.marks++
+            let aws = parseInt(prompt("Gabe die maximale Anzahl an Marken ein:", this.capacity + "") || "");
+            if (isNaN(aws) || !isFinite(aws) || aws < 1) return;
+            this.capacity = aws;
+            aws = parseInt(prompt("Gabe die aktuelle Anzahl an Marken ein:", this.marks + "") || "");
+            if (isNaN(aws) || !isFinite(aws) || aws < 1) return;
+            this.marks = aws;
+            //if (this.marks < this.capacity) this.marks++
             update();
-        })
+        });
     }
 
     updatePoints() {

js/graphics/SVGArrow.ts

@@ -1,12 +1,14 @@
 import { HTMLappendIt, Positionable, svgNamespace } from "../types";
+import { Tragable } from "./tragable";
 
-export class SVGArrow implements HTMLappendIt {
+export class SVGArrow extends Tragable implements HTMLappendIt {
     group: SVGElement;
     lineText: SVGElement;
     line: SVGElement;
     from: Positionable;
     to: Positionable;
     constructor(from: Positionable, to: Positionable) {
+        super();
         this.from = from;
         this.to = to;
         this.group = document.createElementNS(svgNamespace, 'g');
@@ -25,6 +27,8 @@ export class SVGArrow implements HTMLappendIt {
         this.group.appendChild(this.line);
         this.group.appendChild(this.lineText);
 
+        this.initOnlyClick(this.group);
+
         this.updatePosition();
     }
     updatePosition() {
@@ -44,4 +48,8 @@ export class SVGArrow implements HTMLappendIt {
         svg.appendChild(this.group);
     }
 
+    setDimension(txt: string) {
+        this.lineText.textContent = txt;
+    }
+
 }

js/graphics/tragable.ts

@@ -57,6 +57,11 @@ export class Tragable {
             selected = false;
         });
     }
+    initOnlyClick(element: SVGElement) {
+        element.addEventListener('click', event => {
+            this.#clickCB(event);
+        });
+    }
 
     onMove(cb: (event: InteractionEvent) => any) {
         this.#moveCB = cb;

js/index.ts

@@ -44,6 +44,9 @@ setInterval(loop, 1000);
 let n1 = new Node("n1", 100, 100);
 let n2 = new Node("n2", 100, 300);
 let n3 = new Node("n3", 200, 200);
+n1.capacity = 2;
+n2.capacity = 2;
+n3.capacity = 2;
 let t1 = new Transition("t1", 100, 200);
 let t2 = new Transition("t2", 150, 250);
 let t3 = new Transition("t3", 150, 150);