@8btc/whiteboard 0.0.19-beta.3 → 0.0.19-beta.4

package/dist/index.d.ts

@@ -411,8 +411,8 @@ export declare const NODE_NAMES: {
 };
 
 declare interface NodeStyle {
-    $_strokeColor: "theme.stroke-color.1" | "theme.stroke-color.2" | "theme.stroke-color.3";
-    $_fillColor: "theme.fill-color.1" | "theme.fill-color.2" | "theme.fill-color.3";
+    $_strokeColor: ThemeKeysStartingWith<"theme.stroke-color."> | string;
+    $_fillColor: ThemeKeysStartingWith<"theme.fill-color."> | string;
 }
 
 export declare type NodeType = "rectangle" | "image" | "image-marker" | "html";
@@ -454,6 +454,8 @@ export declare interface Theme {
     "theme.fill-color.3": string;
 }
 
+declare type ThemeKeysStartingWith<Prefix extends string> = Extract<keyof Theme, `${Prefix}${string}`>;
+
 export declare type ToolType = "select" | "hand" | "rectangle" | "image-marker";
 
 declare type TransformerConfig = {

package/dist/index.js

@@ -307,12 +307,12 @@ ct = new WeakMap(), S = new WeakMap(), bt = new WeakMap(), It = new WeakMap(), C
 ae = function() {
   e(this, S).on("transformstart", e(this, bt)), e(this, S).on("transform", e(this, It)), e(this, S).on("transformend", e(this, Ct)), e(this, S).on("dragstart", e(this, kt)), e(this, S).on("dragmove", e(this, $t)), e(this, S).on("dragend", e(this, Tt));
 };
-var T, R, X, D;
+var $, R, X, D;
 class ze {
   // todo: 优化 selectedNodeIds 的存储和查询性能
   // private _selectedNodeIds: Set<string> = new Set();
   constructor(i) {
-    l(this, T, []);
+    l(this, $, []);
     l(this, R);
     l(this, X, []);
     l(this, D);
@@ -329,7 +329,7 @@ class ze {
    */
   getHistory() {
     return {
-      past: [...e(this, T)],
+      past: [...e(this, $)],
       present: { ...e(this, R) },
       future: [...e(this, X)]
     };
@@ -338,7 +338,7 @@ class ze {
    * 是否可以撤销
    */
   canUndo() {
-    return e(this, T).length > 0;
+    return e(this, $).length > 0;
   }
   /**
    * 是否可以重做
@@ -369,9 +369,9 @@ class ze {
    * 撤销操作
    */
   undo() {
-    if (e(this, T).length === 0) return;
-    const i = e(this, T)[e(this, T).length - 1], t = e(this, T).slice(0, e(this, T).length - 1);
-    d(this, T, t), d(this, X, [e(this, R), ...e(this, X)]), d(this, R, i), this._renderCanvas(i), e(this, D).emit("state:undo", i), e(this, D).emit("state:change", i);
+    if (e(this, $).length === 0) return;
+    const i = e(this, $)[e(this, $).length - 1], t = e(this, $).slice(0, e(this, $).length - 1);
+    d(this, $, t), d(this, X, [e(this, R), ...e(this, X)]), d(this, R, i), this._renderCanvas(i), e(this, D).emit("state:undo", i), e(this, D).emit("state:change", i);
   }
   /**
    * 重做操作
@@ -379,13 +379,13 @@ class ze {
   redo() {
     if (e(this, X).length === 0) return;
     const i = e(this, X)[0], t = e(this, X).slice(1);
-    d(this, T, [...e(this, T), e(this, R)]), d(this, X, t), d(this, R, i), this._renderCanvas(i), e(this, D).emit("state:redo", i), e(this, D).emit("state:change", i);
+    d(this, $, [...e(this, $), e(this, R)]), d(this, X, t), d(this, R, i), this._renderCanvas(i), e(this, D).emit("state:redo", i), e(this, D).emit("state:change", i);
   }
   /**
    * 重置历史记录
    */
   resetHistory() {
-    d(this, T, []), d(this, X, []), e(this, D).emit("state:reset", e(this, R)), e(this, D).emit("state:change", e(this, R));
+    d(this, $, []), d(this, X, []), e(this, D).emit("state:reset", e(this, R)), e(this, D).emit("state:change", e(this, R));
   }
   /**
    * 更新状态
@@ -394,7 +394,7 @@ class ze {
    */
   _updateState(i, t) {
     const s = { ...e(this, R), ...i };
-    t && (d(this, T, [...e(this, T), e(this, R)]), d(this, X, [])), d(this, R, s), e(this, D).emit("state:change", s);
+    t && (d(this, $, [...e(this, $), e(this, R)]), d(this, X, [])), d(this, R, s), e(this, D).emit("state:change", s);
   }
   /**
    * 清理资源
@@ -403,7 +403,7 @@ class ze {
     e(this, D).all.clear();
   }
 }
-T = new WeakMap(), R = new WeakMap(), X = new WeakMap(), D = new WeakMap();
+$ = new WeakMap(), R = new WeakMap(), X = new WeakMap(), D = new WeakMap();
 class Ot {
 }
 const Xe = {
@@ -434,7 +434,7 @@ function Yt(r, i) {
     if (n in r) {
       const o = r[n];
       let a = o;
-      o.startsWith("theme.") && (a = i[o]), a && (t[s] = a);
+      o.startsWith("theme.") && o in i && (a = i[o]), a && (t[s] = a);
     }
   }), t;
 }
@@ -683,7 +683,7 @@ Ht = function() {
   c.forEach((m) => {
     const f = g.find((u) => u.id === m.id());
     if (f?.$_type === "image-marker" && f.$_relativeBox) {
-      const { start: u, end: w } = f.$_relativeBox, v = n + u.ratioX * a, b = o + u.ratioY * h, M = n + w.ratioX * a, $ = o + w.ratioY * h, zt = Math.min(v, M), Ft = Math.min(b, $), G = Math.abs(M - v), ot = Math.abs($ - b);
+      const { start: u, end: w } = f.$_relativeBox, v = n + u.ratioX * a, b = o + u.ratioY * h, M = n + w.ratioX * a, T = o + w.ratioY * h, zt = Math.min(v, M), Ft = Math.min(b, T), G = Math.abs(M - v), ot = Math.abs(T - b);
       m.setAttrs({
         x: zt,
         y: Ft,
@@ -1126,8 +1126,8 @@ const at = class at extends ze {
   createImageMarkerNode(t, s, n, o) {
     const a = this.getState().nodes || [];
     let h = 0;
-    a.forEach(($) => {
-      $.$_type === "image-marker" && typeof $.$_markerNumber == "number" && (h = Math.max(h, $.$_markerNumber));
+    a.forEach((T) => {
+      T.$_type === "image-marker" && typeof T.$_markerNumber == "number" && (h = Math.max(h, T.$_markerNumber));
     });
     const c = (s.x - o.x) / o.width, g = (s.y - o.y) / o.height, m = (n.x - o.x) / o.width, f = (n.y - o.y) / o.height, u = Math.min(s.x, n.x), w = Math.min(s.y, n.y), v = Math.abs(n.x - s.x), b = Math.abs(n.y - s.y), M = {
       id: yt(),
@@ -1212,8 +1212,8 @@ const at = class at extends ze {
         y: s.y + (s.height || 0)
       }, [c, g] = Ut(a, h), m = this.getState().nodes || [];
       let f = 0;
-      m.forEach(($) => {
-        $.$_type === "image-marker" && $.$_parentId === s.$_parentId && typeof $.$_markerNumber == "number" && (f = Math.max(f, $.$_markerNumber));
+      m.forEach((T) => {
+        T.$_type === "image-marker" && typeof T.$_markerNumber == "number" && (f = Math.max(f, T.$_markerNumber));
       });
       const u = (c.x - o.x) / o.width, w = (c.y - o.y) / o.height, v = (g.x - o.x) / o.width, b = (g.y - o.y) / o.height, M = {
         ...s,
@@ -1609,13 +1609,13 @@ class qe extends Wt {
           a = Math.min(a, Kt), h = Math.min(h, qt), c = Math.max(c, Kt + pe), g = Math.max(g, qt + ye);
       }
     }), a === 1 / 0 || h === 1 / 0) return;
-    const b = c - a, M = g - h, $ = a + b / 2, zt = h + M / 2;
+    const b = c - a, M = g - h, T = a + b / 2, zt = h + M / 2;
     let G = this.getState().viewport.scale;
     if (n) {
       const z = (this.getStage().width() - s * 2) / b, Q = (this.getStage().height() - s * 2) / M;
       G = Math.min(z, Q, 1);
     }
-    const ot = this.getStage().width() / 2 - $ * G, Gt = this.getStage().height() / 2 - zt * G;
+    const ot = this.getStage().width() / 2 - T * G, Gt = this.getStage().height() / 2 - zt * G;
     this.updateViewport({ x: ot, y: Gt, scale: G }, !0);
   }
   /**
@@ -1674,7 +1674,7 @@ function Je({
       "aria-hidden": "true",
       children: [
         /* @__PURE__ */ E("defs", { children: oe.map(({ min: c, mid: g, step: m }, f) => {
-          const u = m * s * h, w = 0.5 + o * h, v = 0.5 + a * h, b = w > 0 ? w % u : u + w % u, M = v > 0 ? v % u : u + v % u, $ = h < g ? je(h, [c, g], [0, 1]) : 1;
+          const u = m * s * h, w = 0.5 + o * h, v = 0.5 + a * h, b = w > 0 ? w % u : u + w % u, M = v > 0 ? v % u : u + v % u, T = h < g ? je(h, [c, g], [0, 1]) : 1;
           return /* @__PURE__ */ E(
             "pattern",
             {
@@ -1689,7 +1689,7 @@ function Je({
                   cx: b,
                   cy: M,
                   r: 1,
-                  opacity: $
+                  opacity: T
                 }
               )
             },

package/dist/maze.d.ts

@@ -461,8 +461,8 @@ declare interface IViewport {
 }
 
 declare interface NodeStyle {
-    $_strokeColor: "theme.stroke-color.1" | "theme.stroke-color.2" | "theme.stroke-color.3";
-    $_fillColor: "theme.fill-color.1" | "theme.fill-color.2" | "theme.fill-color.3";
+    $_strokeColor: ThemeKeysStartingWith<"theme.stroke-color."> | string;
+    $_fillColor: ThemeKeysStartingWith<"theme.fill-color."> | string;
 }
 
 declare type NodeType = "rectangle" | "image" | "image-marker" | "html";
@@ -506,6 +506,8 @@ declare interface Theme {
     "theme.fill-color.3": string;
 }
 
+declare type ThemeKeysStartingWith<Prefix extends string> = Extract<keyof Theme, `${Prefix}${string}`>;
+
 declare type ToolType = "select" | "hand" | "rectangle" | "image-marker";
 
 declare type TransformerConfig = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@8btc/whiteboard",
   "private": false,
-  "version": "0.0.19-beta.3",
+  "version": "0.0.19-beta.4",
   "type": "module",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.js",