feat: add line color support

Quasi-Studio · Nov 9, 2023 · 223a805 · 223a805
1 parent e55ff10
commit 223a805
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 33 deletions.
diff --git a/packages/visual-flow/src/components/line/BasicLine.ts b/packages/visual-flow/src/components/line/BasicLine.ts
@@ -18,7 +18,9 @@ function getCtrlPointOffset(delta: number) {
 
 export class BasicLine extends Line {
   clone(): Line {
-    return new BasicLine();
+    const line = new BasicLine();
+    line.type = this.type;
+    return line;
   }
 
   calcCtrlPoint(point1: Point, point2: Point) {

diff --git a/packages/visual-flow/src/model/line.ts b/packages/visual-flow/src/model/line.ts
@@ -1,6 +1,6 @@
 import { SVGElementComponent, ref } from "refina";
 import { Direction, Point } from "../types";
-import { allocateId, calcLineEndDirection } from "../utils";
+import { calcLineEndDirection } from "../utils";
 import { ModelBase } from "./base";
 import { Graph } from "./graph";
 import { Socket } from "./socket";
@@ -16,15 +16,44 @@ export type PointWithDirection = {
   [pointWithDirectionSym]: true;
 };
 
+export interface LineColors {
+  default: string;
+  hovered: string;
+  dragging: string;
+}
+
+const defaultColors: Record<string, LineColors> = {
+  L: {
+    default: "#CE9178",
+    hovered: "#AE7158",
+    dragging: "#8E5138",
+  },
+  D: {
+    default: "#4FC1FF",
+    hovered: "#2EA0E5",
+    dragging: "#0E80CB",
+  },
+  E: {
+    default: "#DCDCAA",
+    hovered: "#BCBC8B",
+    dragging: "#9C9C6B",
+  },
+};
+
 export abstract class Line extends ModelBase {
   abstract clone(): Line;
 
   graph: Graph;
   type: string;
 
+  get colors(): LineColors {
+    return defaultColors[this.type];
+  }
+
   hasArrow: boolean = true;
 
   dragging: boolean = false;
+  hovered: boolean = false;
   predicting: boolean = false;
 
   neverLeaves: Socket | null = null;
@@ -108,13 +137,15 @@ export abstract class Line extends ModelBase {
   }
 
   onHover() {
-    this.lineEl?.classList.add("hovered");
-    this.arrowEl?.classList.add("hovered");
+    this.hovered = true;
+    if (this.lineEl) this.lineEl.style.stroke = this.colors.hovered;
+    if (this.arrowEl) this.arrowEl.style.fill = this.colors.hovered;
   }
 
   onUnhover() {
-    this.lineEl?.classList.remove("hovered");
-    this.arrowEl?.classList.remove("hovered");
+    this.hovered = false;
+    if (this.lineEl) this.lineEl.style.stroke = this.colors.default;
+    if (this.arrowEl) this.arrowEl.style.fill = this.colors.default;
   }
 
   disconnect(s: Socket) {

diff --git a/packages/visual-flow/src/view/line.r.ts b/packages/visual-flow/src/view/line.r.ts
@@ -6,14 +6,17 @@ import styles from "./line.styles";
 @Vf.outputComponent("vfLine")
 export class VFLine extends OutputComponent {
   main(_: Context, model: Line) {
+    const color = model.colors[model.dragging ? "dragging" : model.hovered ? "hovered" : "default"];
+
     styles.curve(model.dragging, model.predicting)(_);
-    _.$css`stroke-width:${model.graph.boardScale * 3}px;`;
+    _.$css`stroke-width:${model.graph.boardScale * 3}px;stroke:${color}`;
     _.$ref(model.lineRef) &&
       _._svgPath({
         d: model.linePath,
       });
 
     styles.arrow(model.dragging, model.predicting)(_);
+    _.$css`fill:${color}`;
     _.$ref(model.arrowRef) &&
       _._svgPath({
         d: model.arrowPath,

diff --git a/packages/visual-flow/src/view/line.styles.ts b/packages/visual-flow/src/view/line.styles.ts
@@ -1,48 +1,26 @@
 import { tokens } from "@fluentui/tokens";
 import { makeResetStyles, makeStyles, mergeClasses } from "@refina/griffel";
 
-const colors = {
-  default: tokens.colorBrandForegroundInverted,
-  dragging: tokens.colorBrandForegroundOnLightPressed,
-  hovered: tokens.colorBrandForegroundOnLight,
-};
-
 const curveClassName = makeResetStyles({
-  stroke: colors.default,
   fill: "none",
 });
 
 const curveStyles = makeStyles({
   dragging: {
-    stroke: colors.dragging,
     strokeWidth: tokens.strokeWidthThickest,
   },
   predicting: {
     opacity: 0.4,
   },
-  hoverable: {
-    "&.hovered": {
-      stroke: colors.hovered,
-    },
-  },
 });
 
-const arrowClassName = makeResetStyles({
-  fill: colors.default,
-});
+const arrowClassName = makeResetStyles({});
 
 const arrowStyles = makeStyles({
-  dragging: {
-    fill: colors.dragging,
-  },
+  dragging: {},
   predicting: {
     opacity: 0.4,
   },
-  hoverable: {
-    "&.hovered": {
-      fill: colors.hovered,
-    },
-  },
 });
 
 export default {
@@ -51,13 +29,11 @@ export default {
       curveClassName,
       dragging && curveStyles.dragging,
       predicting && curveStyles.predicting,
-      !(dragging || predicting) && curveStyles.hoverable,
     ),
   arrow: (dragging: boolean, predicting: boolean) =>
     mergeClasses(
       arrowClassName,
       dragging && arrowStyles.dragging,
       predicting && arrowStyles.predicting,
-      !(dragging || predicting) && arrowStyles.hoverable,
     ),
 };