fix: fine tuning react

Author: WindRunnerMax

package.json

@@ -3,7 +3,8 @@
   "version": "1.0.0",
   "scripts": {
     "dev:react": "pnpm --filter sketching-react run dev",
-    "build:react": "pnpm --filter sketching-react run build"
+    "build:react": "pnpm --filter sketching-react run build",
+    "build:workspace": "pnpm --filter '*' run build"
   },
   "repository": {
     "type": "git",

packages/core/src/canvas/dom/resize.ts

@@ -12,6 +12,7 @@ import type { MouseEvent } from "../event/mouse";
 import type { ResizeType } from "../types/dom";
 import { noZero } from "../utils/cipher";
 import {
+  FINE_TUNE,
   MAX_Z_INDEX,
   RESIZE_LEN,
   RESIZE_OFS,
@@ -72,28 +73,48 @@ export class ResizeNode extends Node {
         const range = Range.from(startX, startY, startX, endY);
         const { x, y } = range.center();
         const offset = RESIZE_OFS / 2;
-        target = Range.from(x - offset, y - RESIZE_OFS, x + offset, y + RESIZE_OFS);
+        target = Range.from(
+          x - offset - FINE_TUNE,
+          y - RESIZE_OFS,
+          x + offset - FINE_TUNE,
+          y + RESIZE_OFS
+        );
         break;
       }
       case RESIZE_TYPE.R: {
         const range = Range.from(endX, startY, endX, endY);
         const { x, y } = range.center();
         const offset = RESIZE_OFS / 2;
-        target = Range.from(x - offset, y - RESIZE_OFS, x + offset, y + RESIZE_OFS);
+        target = Range.from(
+          x - offset + FINE_TUNE,
+          y - RESIZE_OFS,
+          x + offset + FINE_TUNE,
+          y + RESIZE_OFS
+        );
         break;
       }
       case RESIZE_TYPE.T: {
         const range = Range.from(startX, startY, endX, startY);
         const { x, y } = range.center();
         const offset = RESIZE_OFS / 2;
-        target = Range.from(x - RESIZE_OFS, y - offset, x + RESIZE_OFS, y + offset);
+        target = Range.from(
+          x - RESIZE_OFS,
+          y - offset - FINE_TUNE,
+          x + RESIZE_OFS,
+          y + offset - FINE_TUNE
+        );
         break;
       }
       case RESIZE_TYPE.B: {
         const range = Range.from(startX, endY, endX, endY);
         const { x, y } = range.center();
         const offset = RESIZE_OFS / 2;
-        target = Range.from(x - RESIZE_OFS, y - offset, x + RESIZE_OFS, y + offset);
+        target = Range.from(
+          x - RESIZE_OFS,
+          y - offset + FINE_TUNE,
+          x + RESIZE_OFS,
+          y + offset + FINE_TUNE
+        );
         break;
       }
     }

packages/core/src/canvas/utils/cipher.ts

@@ -1,3 +1,9 @@
 export const noZero = (num: number) => {
-  return Math.max(num, 0.0001);
+  // COMPAT: 避免出现 0 值以及 0.5 值的不确定性
+  return Math.max(num, 1);
+};
+
+export const noFloat = (num: number, forward = true) => {
+  // COMPAT: 避免出现小数
+  return forward ? Math.ceil(num) : Math.floor(num);
 };

packages/core/src/canvas/utils/constant.ts

@@ -1,7 +1,10 @@
-export const RESIZE_OFS = 5;
-export const RESIZE_LEN = 10;
+/* COMPAT: 数值常量如果会被计算出小数值 则尽可能在常量定义时就避免 */
+
+export const RESIZE_OFS = 6;
+export const RESIZE_LEN = 12;
 export const SELECT_BIAS = 3;
 export const REFER_BIAS = 5;
+export const FINE_TUNE = 0.5;
 
 export const THE_CONFIG = [30, { trailing: false }] as const;
 export const MAX_Z_INDEX = 999999;

packages/core/src/canvas/utils/shape.ts

@@ -72,6 +72,7 @@ export class Shape {
    * @param options
    */
   public static frame(ctx: CanvasRenderingContext2D, options: FrameProps) {
+    // https://stackoverflow.com/questions/36615592/canvas-inner-stroke
     ctx.save();
     ctx.beginPath();
     const frame = [options.x - 1, options.y - 1, options.width + 2, options.height + 2] as const;

packages/react/src/components/right-panel/components/text/slate-kit.ts

@@ -14,7 +14,7 @@ import {
 import { isText, isTextBlock } from "doc-editor-utils";
 import type { Attributes, RichTextLine, RichTextLines } from "sketching-plugin";
 import { TEXT_ATTRS } from "sketching-plugin";
-import { TRUE } from "sketching-plugin";
+import { TRULY } from "sketching-plugin";
 import { GRAY_2 } from "sketching-utils";
 import { BLUE_6 } from "sketching-utils";
 
@@ -53,7 +53,7 @@ export const blocksToLines = (editor: EditorSuite, blocks: BaseNode[]) => {
           lineAttrs[TEXT_ATTRS.LINE_HEIGHT] = current[LINE_HEIGHT_KEY].toString();
         }
         if (current[DIVIDING_LINE_KEY]) {
-          lineAttrs[TEXT_ATTRS.DIVIDING_LINE] = TRUE;
+          lineAttrs[TEXT_ATTRS.DIVIDING_LINE] = TRULY;
         }
         const line: RichTextLine = { chars: [], config: lineAttrs };
         for (const text of current.children) {
@@ -63,8 +63,8 @@ export const blocksToLines = (editor: EditorSuite, blocks: BaseNode[]) => {
           // 需要处理行内格式标识 -> Attributes
           if (attrs.bold) target[TEXT_ATTRS.WEIGHT] = "bold";
           if (attrs.italic) target[TEXT_ATTRS.STYLE] = "italic";
-          if (attrs[UNDERLINE_KEY]) target[TEXT_ATTRS.UNDERLINE] = TRUE;
-          if (attrs[STRIKE_THROUGH_KEY]) target[TEXT_ATTRS.STRIKE_THROUGH] = TRUE;
+          if (attrs[UNDERLINE_KEY]) target[TEXT_ATTRS.UNDERLINE] = TRULY;
+          if (attrs[STRIKE_THROUGH_KEY]) target[TEXT_ATTRS.STRIKE_THROUGH] = TRULY;
           if (attrs[INLINE_CODE_KEY]) target[TEXT_ATTRS.BACKGROUND] = GRAY_2;
           if (attrs[HYPER_LINK_KEY]) {
             const href = attrs[HYPER_LINK_KEY].href;

pnpm-workspace.yaml

@@ -1,3 +1,7 @@
 packages:
-  - 'packages/*'
+  - "packages/utils"
+  - "packages/delta"
+  - "packages/core"
+  - "packages/plugin"
+  - "packages/react"