From fe91ef70843eaa6685e53a35a756bdf750c4d0ee Mon Sep 17 00:00:00 2001
From: Max <m.giller@tu-braunschweig.de>
Date: Wed, 4 May 2022 17:39:05 +0200
Subject: [PATCH] Converted state to very basic typescript
---
src/editor/js/{state.js => state.ts} | 139 ++++++++++--------
src/editor/js/structures/graph/graph.ts | 2 +-
.../js/structures/graph/graphelement.ts | 8 +
src/editor/js/structures/graph/node.ts | 2 +-
4 files changed, 85 insertions(+), 66 deletions(-)
rename src/editor/js/{state.js => state.ts} (67%)
diff --git a/src/editor/js/state.js b/src/editor/js/state.ts
similarity index 67%
rename from src/editor/js/state.js
rename to src/editor/js/state.ts
index 0d67cc7..045f030 100644
--- a/src/editor/js/state.js
+++ b/src/editor/js/state.ts
@@ -8,9 +8,9 @@ import ConnectTool from "./tools/connecttool";
import SettingsTool from "./tools/settingstool";
import SaveTool from "./tools/savetool";
import Toolbar from "./toolbar";
-import * as Graph from "./graph";
import { DRAG_THRESHOLD_2D } from "../../config";
-import { Editor } from "./components/editor";
+import { GraphElement } from "./structures/graph/graphelement";
+import { Node } from "./structures/graph/node";
export const TOOLS = {
undo: new UndoTool("undo"),
@@ -31,6 +31,15 @@ export const CONTEXT = {
};
export class State extends Tool {
+ display: Toolbar;
+ tool: Tool;
+ previousTool: Tool;
+ selectedItem: GraphElement;
+ selectedItems: Set<GraphElement>;
+ itemsContext: any;
+ labelVisible: boolean;
+ keyStates: any;
+
constructor() {
super("State");
@@ -48,7 +57,7 @@ export class State extends Tool {
this.keyStates = {};
}
- setTool(tool) {
+ setTool(tool: Tool) {
if (this.tool === tool) {
return;
}
@@ -66,21 +75,21 @@ export class State extends Tool {
}
}
- setSelectedItem(item) {
+ setSelectedItem(item: GraphElement) {
this.selectedItem = item;
}
- addSelectedItem(item) {
+ addSelectedItem(item: GraphElement) {
this.selectedItems.add(item);
}
- addSelectedItems(items) {
+ addSelectedItems(items: GraphElement) {
Object.values(items).forEach((item) => {
this.selectedItems.add(item);
});
}
- removeSelectedItem(item) {
+ removeSelectedItem(item: GraphElement) {
this.selectedItems.delete(item);
}
@@ -89,13 +98,13 @@ export class State extends Tool {
this.itemsContext = CONTEXT.nothing;
}
- onNodeClick(node) {
+ onNodeClick(node: GraphElement) {
this.tool.onNodeClick(node);
}
- onNodeDragEnd(node, translate) {
+ onNodeDragEnd(node: any, translate: any) {
// Handle as click event, if drag distance under a certain threshold
- var distanceDragged = Math.sqrt(
+ const distanceDragged = Math.sqrt(
Math.pow(translate.x, 2) + Math.pow(translate.y, 2)
);
if (distanceDragged < DRAG_THRESHOLD_2D) {
@@ -106,21 +115,21 @@ export class State extends Tool {
}
}
- onLinkClick(link) {
+ onLinkClick(link: any) {
this.tool.onLinkClick(link);
}
- linkColor(link) {
+ linkColor(link: any) {
return "red";
}
- nodeColor(node) {
+ nodeColor(node: any) {
return "black";
}
- onKeyDown(key) {
- var id = this.getKeyId(key);
- var previous = this.keyStates[id];
+ onKeyDown(key: any) {
+ const id = this.getKeyId(key);
+ const previous = this.keyStates[id];
this.keyStates[id] = true;
@@ -129,9 +138,9 @@ export class State extends Tool {
}
}
- onKeyUp(key) {
- var id = this.getKeyId(key);
- var previous = this.keyStates[id];
+ onKeyUp(key: any) {
+ const id = this.getKeyId(key);
+ const previous = this.keyStates[id];
this.keyStates[id] = false;
@@ -140,12 +149,12 @@ export class State extends Tool {
}
}
- getKeyId(key) {
+ getKeyId(key: any) {
return key.keyCode;
}
- nodeCanvasObject(node, ctx, globalScale) {
- var toolValue = this.tool.nodeCanvasObject(node, ctx);
+ nodeCanvasObject(node: any, ctx: any, globalScale: any) {
+ const toolValue = this.tool.nodeCanvasObject(node, ctx);
if (toolValue !== undefined) {
return toolValue;
@@ -162,27 +171,23 @@ export class State extends Tool {
}
// Draw image
- if (node[Graph.NODE_IMAGE] !== undefined) {
- var path = node[Graph.NODE_IMAGE];
-
- if (!path.includes("/")) {
- path = Graph.IMAGE_SRC + path;
- }
- var img = new Image();
- img.src = path;
+ const imageSize = 12;
+ if (node.icon !== undefined) {
+ const img = new Image();
+ img.src = node.icon.link;
ctx.drawImage(
img,
- node.x - Graph.IMAGE_SIZE / 2,
- node.y - Graph.IMAGE_SIZE / 2,
- Graph.IMAGE_SIZE,
- Graph.IMAGE_SIZE
+ node.x - imageSize / 2,
+ node.y - imageSize / 2,
+ imageSize,
+ imageSize
);
}
// Draw label
if (this.labelVisible) {
- const label = node[Graph.NODE_LABEL];
+ const label = node.label;
const fontSize = 11 / globalScale;
ctx.font = `${fontSize}px Sans-Serif`;
const textWidth = ctx.measureText(label).width;
@@ -190,7 +195,7 @@ export class State extends Tool {
(n) => n + fontSize * 0.2
); // some padding
- const nodeHeightOffset = Graph.IMAGE_SIZE / 3 + bckgDimensions[1];
+ const nodeHeightOffset = imageSize / 3 + bckgDimensions[1];
ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
ctx.fillRect(
node.x - bckgDimensions[0] / 2,
@@ -207,24 +212,25 @@ export class State extends Tool {
// TODO: Render label as always visible
}
- nodePointerAreaPaint(node, color, ctx) {
- var toolValue = this.tool.nodePointerAreaPaint(node, color, ctx);
+ nodePointerAreaPaint(node: any, color: any, ctx: any) {
+ const toolValue = this.tool.nodePointerAreaPaint(node, color, ctx);
if (toolValue !== undefined) {
return toolValue;
}
+ const imageSize = 12;
ctx.fillStyle = color;
ctx.fillRect(
- node.x - Graph.IMAGE_SIZE / 2,
- node.y - Graph.IMAGE_SIZE / 2,
- Graph.IMAGE_SIZE,
- Graph.IMAGE_SIZE
+ node.x - imageSize / 2,
+ node.y - imageSize / 2,
+ imageSize,
+ imageSize
); // draw square as pointer trap
}
- nodeCanvasObjectMode(node) {
- var toolValue = this.tool.nodeCanvasObjectMode(node);
+ nodeCanvasObjectMode(node: any) {
+ const toolValue = this.tool.nodeCanvasObjectMode(node);
if (toolValue !== undefined) {
return toolValue;
@@ -233,8 +239,8 @@ export class State extends Tool {
return "after";
}
- linkCanvasObjectMode(link) {
- var toolValue = this.tool.linkCanvasObjectMode(link);
+ linkCanvasObjectMode(link: any) {
+ const toolValue = this.tool.linkCanvasObjectMode(link);
if (toolValue !== undefined) {
return toolValue;
@@ -243,8 +249,8 @@ export class State extends Tool {
return "replace";
}
- linkCanvasObject(link, ctx, globalScale) {
- var toolValue = this.tool.linkCanvasObject(link, ctx);
+ linkCanvasObject(link: any, ctx: any, globalScale: any) {
+ const toolValue = this.tool.linkCanvasObject(link, ctx);
if (toolValue !== undefined) {
return toolValue;
@@ -256,7 +262,7 @@ export class State extends Tool {
}
// Draw gradient link
- var gradient = ctx.createLinearGradient(
+ const gradient = ctx.createLinearGradient(
link.source.x,
link.source.y,
link.target.x,
@@ -264,8 +270,8 @@ export class State extends Tool {
);
// Have reversed colors
// Color at source node referencing the target node and vice versa
- gradient.addColorStop("0", Editor.globalGraph.getNodeColor(link.target));
- gradient.addColorStop("1", Editor.globalGraph.getNodeColor(link.source));
+ gradient.addColorStop("0", link.target.type.color);
+ gradient.addColorStop("1", link.source.type.color);
ctx.beginPath();
ctx.moveTo(link.source.x, link.source.y);
@@ -282,8 +288,8 @@ export class State extends Tool {
return undefined;
}
- linkWidth(link) {
- var toolValue = this.tool.linkWidth(link);
+ linkWidth(link: any) {
+ const toolValue = this.tool.linkWidth(link);
if (toolValue !== undefined) {
return toolValue;
@@ -293,7 +299,7 @@ export class State extends Tool {
}
linkDirectionalParticles() {
- var toolValue = this.tool.linkDirectionalParticles();
+ const toolValue = this.tool.linkDirectionalParticles();
if (toolValue !== undefined) {
return toolValue;
@@ -302,17 +308,17 @@ export class State extends Tool {
return 4;
}
- linkDirectionalParticleWidth(link) {
- var toolValue = this.tool.linkDirectionalParticleWidth(link);
+ linkDirectionalParticleWidth(link: any) {
+ const toolValue = this.tool.linkDirectionalParticleWidth(link);
if (toolValue !== undefined) {
return toolValue;
}
- return this.isLinkHighlighted(link) ? Graph.LINK_PARTICLE_COUNT : 0;
+ return this.isLinkHighlighted(link) ? 4 : 0;
}
- onBackgroundClick(event, positions) {
+ onBackgroundClick(event: any, positions: any) {
this.tool.onBackgroundClick(event, positions);
}
@@ -320,14 +326,19 @@ export class State extends Tool {
this.display.setSelectedTool(this.tool);
}
- isLinkHighlighted(link) {
- return (
- this.selectedItem === link ||
- Editor.globalGraph.isLinkOnNode(link, this.selectedItem)
- );
+ isLinkHighlighted(link: any) {
+ if (this.selectedItem === link) {
+ return true;
+ }
+
+ if (this.selectedItem.node) {
+ return (this.selectedItem as Node).links.includes(link);
+ }
+
+ return false;
}
- setLabelVisibility(visibility) {
+ setLabelVisibility(visibility: boolean) {
this.labelVisible = visibility;
}
}
diff --git a/src/editor/js/structures/graph/graph.ts b/src/editor/js/structures/graph/graph.ts
index b7a5ea8..72072ea 100644
--- a/src/editor/js/structures/graph/graph.ts
+++ b/src/editor/js/structures/graph/graph.ts
@@ -188,7 +188,7 @@ export class Graph extends ManagedData {
this.disableStoring();
// Delete all the links that contain this node
- node.links().forEach((l) => {
+ node.links.forEach((l) => {
l.delete();
});
} finally {
diff --git a/src/editor/js/structures/graph/graphelement.ts b/src/editor/js/structures/graph/graphelement.ts
index 85d0c20..c436396 100644
--- a/src/editor/js/structures/graph/graphelement.ts
+++ b/src/editor/js/structures/graph/graphelement.ts
@@ -14,6 +14,14 @@ export class GraphElement extends SerializableItem {
this.isLink = false;
}
+ public get node(): boolean {
+ return this.isNode;
+ }
+
+ public get link(): boolean {
+ return this.isLink;
+ }
+
/**
* Removes element from its parent graph.
* @returns True, if successful.
diff --git a/src/editor/js/structures/graph/node.ts b/src/editor/js/structures/graph/node.ts
index 42db8a1..dd67fe0 100644
--- a/src/editor/js/structures/graph/node.ts
+++ b/src/editor/js/structures/graph/node.ts
@@ -48,7 +48,7 @@ export class Node extends GraphElement {
* Calculates a list of all connected links to the current node.
* @returns Array containing all connected links.
*/
- public links(): Link[] {
+ public get links(): Link[] {
const links: Link[] = [];
this.graph.links.forEach((link) => {
--
GitLab