@8btc/whiteboard 0.0.20-alpha.28 → 0.0.20-alpha.29

package/dist/adapter/maze.js

@@ -1,5 +1,5 @@
 import { v4 as _ } from "uuid";
-import { N as M } from "../const-CNw7pZuI.js";
+import { N as M } from "../const-BJHbPsA9.js";
 async function N(t) {
   return new Promise((r, n) => {
     const e = new Image();

package/dist/{const-CNw7pZuI.js → const-BJHbPsA9.js}

@@ -7,15 +7,19 @@ const i = {
   html: "html_intrinsic",
   text: "text_intrinsic",
   richText: "rich_text_intrinsic",
-  video: "video_intrinsic"
+  video: "video_intrinsic",
+  star: "star_intrinsic",
+  ellipse: "ellipse_intrinsic",
+  polygon: "polygon_intrinsic",
+  arrow: "arrow_intrinsic"
 }, t = {
   CORNER_RADIUS: 6,
   MIN_SIZE: 10
-}, e = {
+}, n = {
   MIN_SIZE: 10
 };
 export {
-  e as I,
+  n as I,
   i as N,
   t as R
 };

package/dist/index.d.ts

@@ -3,6 +3,13 @@ import { Editor } from '@tiptap/core';
 import { JSX } from 'react/jsx-runtime';
 import { Transformer as Transformer_2 } from 'konva/lib/shapes/Transformer';
 
+/**
+ * 箭头节点配置
+ */
+declare type ArrowNodeConfig = BaseNodeConfig & default_2.ArrowConfig & Partial<NodeStyle> & {
+    $_type: "arrow";
+};
+
 declare interface BaseNodeConfig {
     id: string;
     x: number;
@@ -19,11 +26,10 @@ export declare class CanvasApi extends CanvasCore {
     /**
      * 获取所有可用的工具类型
      */
-    getAvailableTools(): ToolType[];
-    /**
-     * 设置当前工具类型
-     */
-    setToolType(type: ToolType): void;
+    getAvailableTools(): Array<{
+        type: ToolType;
+        meta?: Record<string, any>;
+    }>;
     /**
      * 手动创建多个节点
      * 如果你不知道自己在干什么，请使用更高层的封装方法，如 createImageNode
@@ -206,10 +212,18 @@ declare class CanvasCore extends CanvasStore {
      * 获取当前工具类型
      */
     getToolType(): ToolType;
+    /**
+     * 获取当前工具的元数据
+     */
+    getToolMeta(): Record<string, any> | undefined;
     /**
      * 设置当前工具类型（内部使用）
+     *
+     * toolMeta 是一个可选的对象，可以包含与当前工具相关的任何额外信息。例如，在绘制图形时，toolMeta 可以包含初始位置、颜色、线条样式等信息。这样，在处理工具逻辑时，就可以访问这些元数据来实现更复杂的行为。
+     *
+     * - polygon 工具可以在 toolMeta 中包含一个 $_shape 字段，指示要绘制的多边形形状（如 triangle、rectangle、pentagon 等），以便在创建草稿节点时生成对应形状的点数据。
      */
-    setToolType(type: ToolType): void;
+    setToolType(type: ToolType, toolMeta?: any): void;
     /**
      * 根据 ID 获取 Canvas 节点实例
      */
@@ -287,7 +301,10 @@ declare type CanvasEvents = {
     "viewport:change": CanvasSnapshot["viewport"];
     "viewport:scale:change": number;
     "transformer:positionChange": TransformerPosition | null;
-    "toolType:change": CanvasSnapshot["toolType"];
+    "toolType:change": {
+        type: CanvasSnapshot["toolType"];
+        meta?: Record<string, any>;
+    };
     "theme:change": Theme;
     "nodes:created": NodeConfig[];
     "nodes:deleted": NodeConfig[];
@@ -316,6 +333,7 @@ export declare interface CanvasNode {
 export declare interface CanvasSnapshot {
     viewport: Viewport;
     toolType: ToolType;
+    toolMeta?: any;
     selectedNodeIds?: string[];
     nodes?: NodeConfig[];
 }
@@ -470,6 +488,13 @@ export declare const DARK_THEME: Theme;
 
 export declare const DEFAULT_THEME: Theme;
 
+/**
+ * 椭圆节点配置
+ */
+declare type EllipseNodeConfig = BaseNodeConfig & default_2.EllipseConfig & Partial<NodeStyle> & {
+    $_type: "ellipse";
+};
+
 declare type HistoryState<T> = {
     past: T[];
     present: T;
@@ -531,13 +556,17 @@ export declare const NODE_NAMES: {
     text: string;
     richText: string;
     video: string;
+    star: string;
+    ellipse: string;
+    polygon: string;
+    arrow: string;
 };
 
 /**
  * 节点配置联合类型（判别联合）
  * 根据 $_type 字段可以自动推断出对应节点的特定字段
  */
-export declare type NodeConfig = RectangleNodeConfig | ImageNodeConfig | ImageMarkerNodeConfig | HtmlNodeConfig | TextNodeConfig | RichTextNodeConfig | VideoNodeConfig;
+export declare type NodeConfig = RectangleNodeConfig | ImageNodeConfig | ImageMarkerNodeConfig | HtmlNodeConfig | TextNodeConfig | RichTextNodeConfig | VideoNodeConfig | StarNodeConfig | EllipseNodeConfig | PolygonNodeConfig | ArrowNodeConfig;
 
 /**
  * 根据节点类型获取对应的配置类型
@@ -552,7 +581,15 @@ declare interface NodeStyle {
     $_fillColor: ThemeKeysStartingWith<"theme.fill-color."> | string;
 }
 
-export declare type NodeType = "rectangle" | "image" | "image-marker" | "html" | "text" | "rich-text" | "video";
+export declare type NodeType = "rectangle" | "image" | "image-marker" | "html" | "text" | "rich-text" | "video" | "star" | "ellipse" | "polygon" | "arrow";
+
+/**
+ * 多边形节点配置
+ */
+declare type PolygonNodeConfig = BaseNodeConfig & default_2.LineConfig & Partial<NodeStyle> & {
+    $_type: "polygon";
+    $_shape: "triangle" | "diamond" | "hexagon";
+};
 
 /**
  * 矩形节点配置
@@ -576,6 +613,13 @@ declare type StageConfig = {
     className?: string;
 };
 
+/**
+ * 星形节点配置
+ */
+export declare type StarNodeConfig = BaseNodeConfig & default_2.StarConfig & Partial<NodeStyle> & {
+    $_type: "star";
+};
+
 declare type TextNodeConfig = BaseNodeConfig & default_2.TextConfig & Partial<NodeStyle> & {
     $_type: "text";
     text: string;
@@ -614,7 +658,7 @@ declare interface TipTapBubbleMenuProps {
     api: CanvasApi | null;
 }
 
-export declare type ToolType = "select" | "hand" | "rectangle" | "image-marker" | "text" | "rich-text";
+export declare type ToolType = "select" | "hand" | "rectangle" | "star" | "image-marker" | "text" | "rich-text" | "ellipse" | "polygon" | "arrow";
 
 declare type TransformerConfig = {
     rotateEnabled?: boolean;