feat: add time delay for CLD and update Input Name box

i18n/translations.en.json

@@ -23,8 +23,10 @@
   "Double click on Link": "Double click on Link",
   "Toggle Relation": "Toggle Relation",
   "Toggle Direction": "Toggle Direction",
+  "Toggle Time Delay": "Toggle Time Delay",
   "Double click to delete Item": "Double click to delete Item",
   "Double click on Canvas": "Double click on Canvas",
   "Create Variable": "Create Variable",
-  "Create Stock": "Create Stock"
+  "Create Stock": "Create Stock",
+  "input name": "input name"
 }

i18n/translations.zh.json

@@ -23,8 +23,10 @@
   "Double click on Link": "雙擊因果線",
   "Toggle Relation": "交換變化方向",
   "Toggle Direction": "交換因果方向",
+  "Toggle Time Delay": "切換時間延遲",
   "Double click to delete Item": "雙擊以刪除元件",
   "Double click on Canvas": "雙擊於空白處",
   "Create Variable": "新增變數",
-  "Create Stock": "新增存量"
+  "Create Stock": "新增存量",
+  "input name": "輸入名字"
 }

src/app/lib/useMode.ts

@@ -105,6 +105,12 @@ export function useMode(
       icon: "direction.png",
       handler: handleModeDoubleClickOnLink,
     },
+    {
+      label: t("Toggle Time Delay"),
+      mode: ESystemMapCanvasModeDoubleClickOnLink.ToggleTimeDelay,
+      icon: "time-delay.png",
+      handler: handleModeDoubleClickOnLink,
+    },
   ];
 
   const labelDoubleClickOnBackground = t("Double click on Canvas");

src/app/page.tsx

@@ -127,7 +127,7 @@ function HomeImp() {
               />
             </div>
           </div>
-          <div className="flex border">
+          <div className="flex border hidden">
             <label className="toolbar-label">
               {labelDoubleClickOnBackground + ": "}
             </label>

src/components/SystemMapCanvas/InputTextArea.tsx

@@ -1,4 +1,5 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
+import { useTranslation } from "next-export-i18n";
 
 import { Point } from "./lib/geometry";
 
@@ -17,10 +18,18 @@ export const InputTextArea = ({
   value0: string;
   onKeyEnterDown: (value: string) => void;
 }) => {
+  const ref = useRef(null);
+  const { t } = useTranslation();
+  const inputName = t("input name");
+
   const [value, setValue] = useState<string>(value0);
 
   useEffect(() => {
     setValue(value0.replaceAll("\\n", "\\\n").replaceAll("\n", "\\n"));
+
+    if (visible) {
+      (ref.current as unknown as HTMLTextAreaElement).focus();
+    }
   }, [value0, visible]);
 
   useEffect(() => {
@@ -45,9 +54,10 @@ export const InputTextArea = ({
 
   return (
     <textarea
-      className="absolute rounded border border-black"
+      ref={ref}
+      className="absolute rounded border border-black px-2"
       hidden={!visible}
-      placeholder=""
+      placeholder={inputName}
       value={value}
       onChange={(e) => setValue(e.target.value)}
       style={{

src/components/SystemMapCanvas/hooks/useView.ts

@@ -217,8 +217,10 @@ export function useView(
     const dragLink = {
       name: "dragLink",
       isPlus: true,
+      isWithTimeDelay: false,
       start: "",
       end: "",
+      mid: undefined,
     };
     if (indexDragLink >= 0) {
       updateViewLink(app?.stage, dragLink, startPoint, end);

src/components/SystemMapCanvas/lib/types.ts

@@ -54,9 +54,10 @@ export function createStock(stocks: Stock[], xy: Point): string {
 export interface Link {
   name: string;
   isPlus: boolean;
+  isWithTimeDelay: boolean;
   start: string;
   end: string;
-  mid?: Point;
+  mid: Point | undefined;
 }
 
 export function isLink(name: string): boolean {
@@ -68,12 +69,14 @@ export function createLink(
   start: string,
   end: string,
   isPlus: boolean = true,
+  isWithTimeDelay: boolean = false,
   mid?: Point,
 ): string {
   const name = genName(links, "link-");
   links.push({
     name,
     isPlus,
+    isWithTimeDelay,
     start,
     end,
     mid,

src/components/SystemMapCanvas/lib/view/ViewLink.ts

@@ -0,0 +1,162 @@
+import { Container, Graphics, ColorSource } from "pixi.js";
+import { ViewEdge } from "./ViewEdge";
+
+import { Point, getArc, toDegree } from "../geometry";
+
+export class ViewLink extends Container {
+  protected _edge: ViewEdge;
+  protected _timeDelay: Graphics;
+
+  protected _isWithTimeDelay: boolean = false;
+
+  get start() {
+    return this._edge.start;
+  }
+  set start(start: Point) {
+    this._edge.start = start;
+
+    this.update();
+  }
+
+  get end() {
+    return this._edge.end;
+  }
+  set end(end: Point) {
+    this._edge.end = end;
+
+    this.update();
+  }
+
+  get mid(): Point | undefined {
+    return this._edge.mid;
+  }
+  set mid(mid: Point | undefined) {
+    this._edge.mid = mid;
+
+    this.update();
+  }
+
+  get color() {
+    return this._edge.color;
+  }
+  set color(color: ColorSource) {
+    this._edge.color = color;
+
+    this.update();
+  }
+
+  get width() {
+    return this._edge.width;
+  }
+  set width(width: number) {
+    this._edge.width = width;
+
+    this.update();
+  }
+
+  get arrowHeadLength() {
+    return this._edge.arrowHeadLength;
+  }
+  set arrowHeadLength(arrowHeadLength: number) {
+    this._edge.arrowHeadLength = arrowHeadLength;
+  }
+
+  get isDashed() {
+    return this._edge.isDashed;
+  }
+  set isDashed(isDashed: boolean) {
+    this._edge.isDashed = isDashed;
+  }
+
+  get isWithTimeDelay() {
+    return this._isWithTimeDelay;
+  }
+  set isWithTimeDelay(isWithTimeDelay: boolean) {
+    if (this._isWithTimeDelay === isWithTimeDelay) {
+      return;
+    }
+
+    this._isWithTimeDelay = isWithTimeDelay;
+
+    this.update();
+  }
+
+  protected update() {
+    this._timeDelay.clear();
+
+    if (!this._isWithTimeDelay) {
+      return;
+    }
+
+    const center =
+      this._edge.mid === undefined
+        ? {
+            x: (this.start.x + this.end.x) / 2,
+            y: (this.start.y + this.end.y) / 2,
+          }
+        : this._edge.mid;
+
+    const arc = getArc(this.start, this.end, this.mid);
+
+    const angle =
+      arc === undefined
+        ? Math.atan2(this.start.y - this.end.y, this.start.x - this.end.x) +
+          Math.PI / 2
+        : Math.atan2(arc.center.y - center.y, arc.center.x - center.x);
+
+    this._timeDelay.lineStyle({ width: this.width * 3, color: "white" });
+
+    this._timeDelay.moveTo(
+      center.x - Math.cos(angle) * this.width,
+      center.y - Math.sin(angle) * this.width,
+    );
+    this._timeDelay.lineTo(
+      center.x + Math.cos(angle) * this.width,
+      center.y + Math.sin(angle) * this.width,
+    );
+
+    this._timeDelay.lineStyle({ width: this.width, color: this.color });
+
+    const radius = Math.sqrt(12);
+
+    this._timeDelay.moveTo(
+      center.x - Math.cos(angle - Math.PI / 6) * this.width * radius,
+      center.y - Math.sin(angle - Math.PI / 6) * this.width * radius,
+    );
+    this._timeDelay.lineTo(
+      center.x - Math.cos(angle - (Math.PI / 6) * 5) * this.width * radius,
+      center.y - Math.sin(angle - (Math.PI / 6) * 5) * this.width * radius,
+    );
+
+    this._timeDelay.moveTo(
+      center.x - Math.cos(angle - (Math.PI / 6) * 7) * this.width * radius,
+      center.y - Math.sin(angle - (Math.PI / 6) * 7) * this.width * radius,
+    );
+    this._timeDelay.lineTo(
+      center.x - Math.cos(angle - (Math.PI / 6) * 11) * this.width * radius,
+      center.y - Math.sin(angle - (Math.PI / 6) * 11) * this.width * radius,
+    );
+  }
+
+  public contains(x: number, y: number): boolean {
+    return this._edge.contains(x, y);
+  }
+
+  //constructor(start: Point, end: Point);
+  constructor(start: Point, end: Point, mid?: Point) {
+    super();
+
+    if (mid === undefined) {
+      this._edge = new ViewEdge(start, end);
+    } else {
+      this._edge = new ViewEdge(start, end, mid);
+    }
+    this._edge.name = "edge";
+
+    this._timeDelay = new Graphics();
+    this._timeDelay.name = "timeDelay";
+
+    this.addChild(this._edge);
+    this.addChild(this._timeDelay);
+  }
+}

src/components/SystemMapCanvas/lib/view/link.ts

@@ -1,5 +1,5 @@
 import { Container, DisplayObject, Text } from "pixi.js";
-import { ViewEdge } from "./ViewEdge";
+import { ViewLink } from "./ViewLink";
 import { Point } from "../geometry";
 import { Link } from "../types";
 
@@ -10,14 +10,14 @@ export function addViewLink(
   end: Point,
 ) {
   const edge = link.mid
-    ? new ViewEdge(start, end, link.mid)
-    : new ViewEdge(start, end);
+    ? new ViewLink(start, end, link.mid)
+    : new ViewLink(start, end);
   edge.name = link.name;
   edge.color = "grey";
   edge.width = 8;
   edge.arrowHeadLength = 15;
   edge.isDashed = !link.isPlus;
-  edge.isPolyline = false;
+  edge.isWithTimeDelay = false;
   stage.addChild(edge);
 }
 
@@ -32,8 +32,9 @@ export function updateViewLink(
     return false;
   }
 
-  const view = item as ViewEdge;
+  const view = item as ViewLink;
   view.isDashed = !link.isPlus;
+  view.isWithTimeDelay = link.isWithTimeDelay;
   view.start = start;
   view.end = end;
   view.mid = link.mid;
@@ -42,6 +43,6 @@ export function updateViewLink(
 }
 
 export function isOnLink(item: DisplayObject, xy: Point): boolean {
-  const edge = item as ViewEdge;
+  const edge = item as ViewLink;
   return edge.contains(xy.x, xy.y);
 }

src/components/SystemMapCanvas/reducer/reducerMouse.ts

@@ -184,6 +184,28 @@ function toggleLinkDirection(state: IStateCanvas, item: string): IStateCanvas {
   };
 }
 
+function toggleLinkTimeDelay(state: IStateCanvas, item: string): IStateCanvas {
+  let items = structuredClone(state.items);
+  const index = items.links.findIndex((link) => link.name === item);
+
+  if (index < 0) {
+    alert();
+    return state;
+  }
+  const link = items.links[index];
+  if (!isVariable(link.start) || !isVariable(link.end)) {
+    return state;
+  }
+
+  link.isWithTimeDelay = !link.isWithTimeDelay;
+
+  return {
+    ...state,
+    items: items,
+    cmdUndoSetItems: state.cmdUndoSetItems + 1,
+  };
+}
+
 function reverseFlowDirection(state: IStateCanvas, item: string): IStateCanvas {
   let items = structuredClone(state.items);
 
@@ -239,6 +261,11 @@ function reducerIdleDoubleClick(state: IStateCanvas, xy: Point, item: string) {
       ESystemMapCanvasModeDoubleClickOnLink.ToggleDirection
     ) {
       return toggleLinkDirection(state, item);
+    } else if (
+      state.modes.doubleClickOnLink ===
+      ESystemMapCanvasModeDoubleClickOnLink.ToggleTimeDelay
+    ) {
+      return toggleLinkTimeDelay(state, item);
     }
     return toggleLinkRelation(state, item);
   }

src/components/SystemMapCanvas/reducer/types.ts

@@ -9,6 +9,7 @@ export enum ESystemMapCanvasModeDragFromVariableStock {
 export enum ESystemMapCanvasModeDoubleClickOnLink {
   ToggleRelation,
   ToggleDirection,
+  ToggleTimeDelay,
 }
 
 export enum ESystemMapCanvasModeDoubleClickOnBackground {