fix: rendering order

WindRunnerMax · Sep 15, 2024 · 471d156 · 471d156
1 parent ef6a339
commit 471d156
Show file tree

Hide file tree

Showing 13 changed files with 107 additions and 58 deletions.
diff --git a/packages/core/src/canvas/dom/element.ts b/packages/core/src/canvas/dom/element.ts
@@ -1,4 +1,4 @@
-import { BLUE_3 } from "sketching-utils";
+import { BLUE_4 } from "sketching-utils";
 
 import type { Editor } from "../../editor";
 import type { DeltaState } from "../../state/modules/node";
@@ -51,13 +51,12 @@ export class ElementNode extends Node {
       !this.editor.state.get(EDITOR_STATE.MOUSE_DOWN)
     ) {
       const { x, y, width, height } = this.range.rect();
-      Shape.rect(ctx, {
+      Shape.frame(ctx, {
         x: x,
         y: y,
         width: width,
         height: height,
-        borderColor: BLUE_3,
-        borderWidth: 1,
+        borderColor: BLUE_4,
       });
     }
   };

diff --git a/packages/core/src/canvas/dom/resize.ts b/packages/core/src/canvas/dom/resize.ts
@@ -1,7 +1,8 @@
 import { Op, OP_TYPE } from "sketching-delta";
 import { throttle } from "sketching-utils";
-import { GRAY_5, GRAY_7, WHITE } from "sketching-utils";
+import { WHITE } from "sketching-utils";
 
+import { GRAY_5 } from "../../../../utils/src/palette";
 import type { Editor } from "../../editor";
 import { EDITOR_EVENT } from "../../event/bus/action";
 import { Point } from "../../selection/modules/point";
@@ -258,7 +259,7 @@ export class ResizeNode extends Node {
       case RESIZE_TYPE.LT:
       case RESIZE_TYPE.RB:
       case RESIZE_TYPE.RT:
-        Shape.arc(ctx, { x, y, borderColor: GRAY_7, fillColor, radius, borderWidth });
+        Shape.arc(ctx, { x, y, borderColor: GRAY_5, fillColor, radius, borderWidth });
         break;
       case RESIZE_TYPE.B:
       case RESIZE_TYPE.R:

diff --git a/packages/core/src/canvas/dom/select.ts b/packages/core/src/canvas/dom/select.ts
@@ -1,6 +1,5 @@
 import { Op, OP_TYPE } from "sketching-delta";
-import { throttle } from "sketching-utils";
-import { BLUE_5 } from "sketching-utils";
+import { BLUE_6, throttle } from "sketching-utils";
 
 import type { Editor } from "../../editor";
 import { EDITOR_EVENT } from "../../event/bus/action";
@@ -143,11 +142,13 @@ export class SelectNode extends Node {
     const selection = this.editor.selection.get();
     if (this._isDragging) {
       const { x, y, width, height } = this.range.rect();
-      Shape.rect(ctx, { x, y, width, height, borderColor: BLUE_5 });
+      Shape.rect(ctx, { x, y, width, height, borderColor: BLUE_6 });
     }
     if (selection) {
       const { x, y, width, height } = selection.rect();
-      Shape.rect(ctx, { x, y, width, height, borderColor: BLUE_5 });
+      Shape.frame(ctx, { x, y, width, height, borderColor: BLUE_6 });
+      // COMPAT: 实际上内部的 Resize Children 节点会被 DrawEffects 调度
+      // 但是会偶现渲染顺序不一致导致覆盖的问题 因此依然主动调度渲染
       this.children.forEach(node => node.drawingMask?.(ctx));
     }
   };

diff --git a/packages/core/src/canvas/utils/shape.ts b/packages/core/src/canvas/utils/shape.ts
@@ -17,34 +17,73 @@ export type ArcProps = {
   fillColor?: string;
 };
 
+export type FrameProps = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  borderColor: string;
+};
+
 export class Shape {
-  static rect(ctx: CanvasRenderingContext2D, options: RectProps) {
+  /**
+   * 绘制矩形
+   * @param ctx
+   * @param options
+   */
+  public static rect(ctx: CanvasRenderingContext2D, options: RectProps) {
     ctx.beginPath();
     ctx.rect(options.x, options.y, options.width, options.height);
+    if (options.fillColor) {
+      ctx.fillStyle = options.fillColor;
+      ctx.fill();
+    }
     if (options.borderColor) {
       ctx.strokeStyle = options.borderColor;
       ctx.lineWidth = options.borderWidth || 1;
       ctx.stroke();
     }
-    if (options.fillColor) {
-      ctx.fillStyle = options.fillColor;
-      ctx.fill();
-    }
     ctx.closePath();
   }
 
-  static arc(ctx: CanvasRenderingContext2D, options: ArcProps) {
+  /**
+   * 绘制圆形
+   * @param ctx
+   * @param options
+   */
+  public static arc(ctx: CanvasRenderingContext2D, options: ArcProps) {
     ctx.beginPath();
     ctx.arc(options.x, options.y, options.radius, 0, 2 * Math.PI);
+    if (options.fillColor) {
+      ctx.fillStyle = options.fillColor;
+      ctx.fill();
+    }
     if (options.borderColor) {
       ctx.strokeStyle = options.borderColor;
       ctx.lineWidth = options.borderWidth || 1;
       ctx.stroke();
     }
-    if (options.fillColor) {
-      ctx.fillStyle = options.fillColor;
-      ctx.fill();
-    }
     ctx.closePath();
   }
+
+  /**
+   * 绘制框选
+   * @param ctx
+   * @param options
+   */
+  public static frame(ctx: CanvasRenderingContext2D, options: FrameProps) {
+    ctx.save();
+    ctx.beginPath();
+    const frame = [options.x - 1, options.y - 1, options.width + 2, options.height + 2] as const;
+    const inside = [options.x, options.y, options.width, options.height] as const;
+    const region = new Path2D();
+    region.rect(...frame);
+    region.rect(...inside);
+    ctx.clip(region, "evenodd");
+    ctx.rect(...frame);
+    ctx.fillStyle = options.borderColor;
+    ctx.fill();
+    ctx.closePath();
+    ctx.restore();
+  }
 }
diff --git a/packages/plugin/src/index.ts b/packages/plugin/src/index.ts
@@ -17,7 +17,7 @@ export {
   DEFAULT_BORDER_COLOR,
   DEFAULT_BORDER_WIDTH,
   DEFAULT_FILL_COLOR,
-  FALSE,
-  TRUE,
+  FALSY,
+  TRULY,
 } from "./utils/constant";
-export { isFalse, isTrue } from "./utils/is";
+export { isFalsy, isTruly } from "./utils/is";
diff --git a/packages/plugin/src/rect/index.tsx b/packages/plugin/src/rect/index.tsx
@@ -1,8 +1,8 @@
 import type { DeltaOptions } from "sketching-delta";
 import { Delta } from "sketching-delta";
 
-import { DEFAULT_BORDER_COLOR, DEFAULT_BORDER_WIDTH, TRUE } from "../utils/constant";
-import { isTrue } from "../utils/is";
+import { DEFAULT_BORDER_COLOR, DEFAULT_BORDER_WIDTH, TRULY } from "../utils/constant";
+import { isTruly } from "../utils/is";
 import { RECT_ATTRS } from "./constant";
 
 export class Rect extends Delta {
@@ -34,16 +34,16 @@ export class Rect extends Delta {
       const B = this.getAttr(RECT_ATTRS.B);
       const width = Math.min(this.width, this.height, borderWidth);
       ctx.fillStyle = borderColor;
-      if (isTrue(L)) {
+      if (isTruly(L)) {
         ctx.fillRect(this.x, this.y, width, this.height);
       }
-      if (isTrue(R)) {
+      if (isTruly(R)) {
         ctx.fillRect(this.x + this.width - width, this.y, width, this.height);
       }
-      if (isTrue(T)) {
+      if (isTruly(T)) {
         ctx.fillRect(this.x, this.y, this.width, width);
       }
-      if (isTrue(B)) {
+      if (isTruly(B)) {
         ctx.fillRect(this.x, this.y + this.height - width, this.width, width);
       }
     }
@@ -58,10 +58,10 @@ export class Rect extends Delta {
     const T = rect.getAttr(RECT_ATTRS.T);
     const B = rect.getAttr(RECT_ATTRS.B);
     if (!L && !R && !T && !B) {
-      rect.setAttr(RECT_ATTRS.L, TRUE);
-      rect.setAttr(RECT_ATTRS.R, TRUE);
-      rect.setAttr(RECT_ATTRS.T, TRUE);
-      rect.setAttr(RECT_ATTRS.B, TRUE);
+      rect.setAttr(RECT_ATTRS.L, TRULY);
+      rect.setAttr(RECT_ATTRS.R, TRULY);
+      rect.setAttr(RECT_ATTRS.T, TRULY);
+      rect.setAttr(RECT_ATTRS.B, TRULY);
     }
     return rect;
   };

diff --git a/packages/plugin/src/text/rich-text.ts b/packages/plugin/src/text/rich-text.ts
@@ -1,6 +1,6 @@
 import { TEXT_1 } from "sketching-utils";
 
-import { TRUE } from "../utils/constant";
+import { TRULY } from "../utils/constant";
 import { DEFAULT, DIVIDING_LINE_OFFSET, TEXT_ATTRS } from "./constant";
 import {
   drawingBackground,
@@ -77,7 +77,7 @@ export class RichText {
           // 重置行`matrix`
           matrix = getDefaultMatrix();
           // 换行标记
-          matrix.config[TEXT_ATTRS.BREAK_LINE_START] = TRUE;
+          matrix.config[TEXT_ATTRS.BREAK_LINE_START] = TRULY;
         }
         const fontHeight = metric.actualBoundingBoxAscent + metric.actualBoundingBoxDescent;
         text.height = fontHeight;

diff --git a/packages/plugin/src/utils/constant.ts b/packages/plugin/src/utils/constant.ts
@@ -1,5 +1,5 @@
-export const TRUE = "true";
-export const FALSE = "false";
-export const DEFAULT_BORDER_COLOR = "#333";
+export const TRULY = "true";
+export const FALSY = "false";
+export const DEFAULT_BORDER_COLOR = "#888";
 export const DEFAULT_BORDER_WIDTH = 1;
 export const DEFAULT_FILL_COLOR = "#fff";
diff --git a/packages/plugin/src/utils/is.ts b/packages/plugin/src/utils/is.ts
@@ -1,9 +1,9 @@
-import { FALSE, TRUE } from "./constant";
+import { FALSY, TRULY } from "./constant";
 
-export const isTrue = (value: unknown) => {
-  return value === TRUE;
+export const isTruly = (value: unknown) => {
+  return value === TRULY;
 };
 
-export const isFalse = (value: unknown) => {
-  return !value || value === FALSE;
+export const isFalsy = (value: unknown) => {
+  return !value || value === FALSY;
 };
diff --git a/packages/react/src/components/header/components/left.tsx b/packages/react/src/components/header/components/left.tsx
@@ -4,6 +4,7 @@ import React, { useEffect, useState } from "react";
 import type { Editor } from "sketching-core";
 import { DRAG_KEY, EDITOR_EVENT } from "sketching-core";
 import type { DeltaLike } from "sketching-delta";
+import { DEFAULT_BORDER_COLOR, RECT_ATTRS } from "sketching-plugin";
 import { cs, TSON } from "sketching-utils";
 
 import { CursorIcon } from "../../../static/cursor";
@@ -29,7 +30,13 @@ export const Left: FC<{
     }
     const empty = { x: 0, y: 0, width: 0, height: 0 };
     if (index === NAV_ENUM.RECT) {
-      const deltaLike: DeltaLike = { key: NAV_ENUM.RECT, ...empty };
+      const deltaLike: DeltaLike = {
+        key: NAV_ENUM.RECT,
+        ...empty,
+        attrs: {
+          [RECT_ATTRS.BORDER_COLOR]: DEFAULT_BORDER_COLOR,
+        },
+      };
       editor.canvas.insert.start(deltaLike);
     }
     if (index === NAV_ENUM.TEXT) {

diff --git a/packages/react/src/components/right-panel/components/rect/index.tsx b/packages/react/src/components/right-panel/components/rect/index.tsx
@@ -10,10 +10,10 @@ import {
   DEFAULT_BORDER_COLOR,
   DEFAULT_BORDER_WIDTH,
   DEFAULT_FILL_COLOR,
-  FALSE,
-  isTrue,
+  FALSY,
+  isTruly,
   RECT_ATTRS,
-  TRUE,
+  TRULY,
 } from "sketching-plugin";
 
 import { useIsMounted } from "../../../../hooks/is-mounted";
@@ -54,26 +54,26 @@ export const Rect: FC<{ editor: Editor; state: DeltaState }> = ({ editor, state
         <div>状态</div>
         <div>
           <Checkbox
-            defaultChecked={isTrue(state.getAttr(RECT_ATTRS.T))}
-            onChange={v => onChange(RECT_ATTRS.T, v ? TRUE : FALSE)}
+            defaultChecked={isTruly(state.getAttr(RECT_ATTRS.T))}
+            onChange={v => onChange(RECT_ATTRS.T, v ? TRULY : FALSY)}
           >
             T
           </Checkbox>
           <Checkbox
-            defaultChecked={isTrue(state.getAttr(RECT_ATTRS.L))}
-            onChange={v => onChange(RECT_ATTRS.L, v ? TRUE : FALSE)}
+            defaultChecked={isTruly(state.getAttr(RECT_ATTRS.L))}
+            onChange={v => onChange(RECT_ATTRS.L, v ? TRULY : FALSY)}
           >
             L
           </Checkbox>
           <Checkbox
-            defaultChecked={isTrue(state.getAttr(RECT_ATTRS.R))}
-            onChange={v => onChange(RECT_ATTRS.R, v ? TRUE : FALSE)}
+            defaultChecked={isTruly(state.getAttr(RECT_ATTRS.R))}
+            onChange={v => onChange(RECT_ATTRS.R, v ? TRULY : FALSY)}
           >
             R
           </Checkbox>
           <Checkbox
-            defaultChecked={isTrue(state.getAttr(RECT_ATTRS.B))}
-            onChange={v => onChange(RECT_ATTRS.B, v ? TRUE : FALSE)}
+            defaultChecked={isTruly(state.getAttr(RECT_ATTRS.B))}
+            onChange={v => onChange(RECT_ATTRS.B, v ? TRULY : FALSY)}
           >
             B
           </Checkbox>

diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
@@ -20,6 +20,7 @@ export { debounce, throttle };
 export { toFixedNumber } from "./calculator";
 export {
   BLUE_3,
+  BLUE_4,
   BLUE_5,
   BLUE_6,
   BLUE_6_6,

diff --git a/packages/utils/src/palette.ts b/packages/utils/src/palette.ts
@@ -1,8 +1,9 @@
 export const WHITE = "#FFFFFF";
-export const BLUE_3 = "#94BFFF";
-export const BLUE_5 = "#4080FF";
+export const BLUE_3 = "rgb(148,191,255)";
+export const BLUE_4 = "rgb(106,161,255)";
+export const BLUE_5 = "rgb(64,128,255)";
 export const BLUE_6 = "rgb(22,93,255)";
-export const BLUE_7 = "#0E42D2";
+export const BLUE_7 = "rgb(14,66,210)";
 export const GRAY_2 = "rgb(242,243,245)";
 export const GRAY_3 = "#e5e6eb";
 export const GRAY_4 = "rgb(201,205,212)";
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,6 +20,7 @@ export { debounce, throttle }; @@
     export { toFixedNumber } from "./calculator";
     export {
       BLUE_3,
+      BLUE_4,
       BLUE_5,
       BLUE_6,
       BLUE_6_6,
@@ Expand Down @@