@tmagic/editor 1.1.0-beta.4 → 1.1.0-beta.7

package/src/type.ts

@@ -23,12 +23,13 @@ import type { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 import type { MoveableOptions } from '@tmagic/stage';
 
-import type { ComponentListService } from '@editor/services/componentList';
-import type { EditorService } from '@editor/services/editor';
-import type { EventsService } from '@editor/services/events';
-import type { HistoryService } from '@editor/services/history';
-import type { PropsService } from '@editor/services/props';
-import type { UiService } from '@editor/services/ui';
+import type { ComponentListService } from './services/componentList';
+import type { EditorService } from './services/editor';
+import type { EventsService } from './services/events';
+import type { HistoryService } from './services/history';
+import type { PropsService } from './services/props';
+import type { StorageService } from './services/storage';
+import type { UiService } from './services/ui';
 
 export type BeforeAdd = (config: MNode, parent: MContainer) => Promise<MNode> | MNode;
 export type GetConfig = (config: FormConfig) => Promise<FormConfig> | FormConfig;
@@ -40,6 +41,7 @@ export interface InstallOptions {
 export interface Services {
   editorService: EditorService;
   historyService: HistoryService;
+  storageService: StorageService;
   eventsService: EventsService;
   propsService: PropsService;
   componentListService: ComponentListService;
@@ -64,6 +66,7 @@ export interface StoreState {
   parent: MContainer | null;
   node: MNode | null;
   highlightNode: MNode | null;
+  nodes: MNode[];
   stage: StageCore | null;
   modifiedNodeIds: Map<Id, Id>;
   pageLength: number;
@@ -129,6 +132,19 @@ export interface AddMNode {
   [key: string]: any;
 }
 
+export interface PastePosition {
+  left?: number;
+  top?: number;
+  /**
+   * 粘贴位置X方向偏移量
+   */
+  offsetX?: number;
+  /**
+   * 粘贴位置Y方向偏移量
+   */
+  offsetY?: number;
+}
+
 /**
  * 菜单按钮
  */

package/src/utils/config.ts

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { InstallOptions } from '@editor/type';
+import { InstallOptions } from '../type';
 
 let $TMAGIC_EDITOR: InstallOptions = {} as any;
 

package/src/utils/editor.ts

@@ -21,7 +21,7 @@ import { NodeType } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 import { getNodePath, isNumber, isPage, isPop } from '@tmagic/utils';
 
-import { Layout } from '@editor/type';
+import { Layout } from '../type';
 
 export const COPY_STORAGE_KEY = '$MagicEditorCopyData';
 

package/src/utils/operator.ts

@@ -0,0 +1,210 @@
+import { toRaw } from 'vue';
+import { cloneDeep, isEmpty } from 'lodash-es';
+
+import { Id, MApp, MContainer, MNode, NodeType } from '@tmagic/schema';
+import StageCore from '@tmagic/stage';
+import { isPage } from '@tmagic/utils';
+
+import editorService from '../services/editor';
+import historyService from '../services/history';
+import propsService from '../services/props';
+import { AddMNode, Layout, PastePosition } from '../type';
+import { fixNodeLeft, generatePageNameByApp, getInitPositionStyle, getNodeIndex } from '../utils/editor';
+
+/**
+ * 粘贴前置操作：返回分配了新id以及校准了坐标的配置
+ * @param position 粘贴的坐标
+ * @param config 待粘贴的元素配置(复制时保存的那份配置)
+ * @returns
+ */
+export const beforePaste = async (position: PastePosition, config: MNode[]) => {
+  if (!config[0]?.style) return config;
+  const curNode = editorService.get<MContainer>('node');
+  // 将数组中第一个元素的坐标作为参照点
+  const { left: referenceLeft, top: referenceTop } = config[0].style;
+  // 坐标校准后的粘贴数据
+  const pasteConfigs: MNode[] = await Promise.all(
+    config.map(async (configItem: MNode): Promise<MNode> => {
+      // 解构 position 对象，从 position 删除 offsetX、offsetY字段
+      const { offsetX = 0, offsetY = 0, ...positionClone } = position;
+      let pastePosition = positionClone;
+
+      if (!isEmpty(pastePosition) && curNode.items) {
+        // 如果没有传入粘贴坐标则可能为键盘操作，不再转换
+        // 如果粘贴时选中了容器，则将元素粘贴到容器内，坐标需要转换为相对于容器的坐标
+        pastePosition = getPositionInContainer(pastePosition, curNode.id);
+      }
+
+      // 将所有待粘贴元素坐标相对于多选第一个元素坐标重新计算，以保证多选粘贴后元素间距不变
+      if (pastePosition.left && configItem.style?.left) {
+        pastePosition.left = configItem.style.left - referenceLeft + pastePosition.left;
+      }
+      if (pastePosition.top && configItem.style?.top) {
+        pastePosition.top = configItem.style?.top - referenceTop + pastePosition.top;
+      }
+
+      const pasteConfig = await propsService.setNewItemId(configItem, editorService.get('root'));
+
+      if (pasteConfig.style) {
+        const { left, top } = pasteConfig.style;
+        // 判断能转换为数字时，做粘贴偏移量计算
+        if (typeof left === 'number' || (!!left && !isNaN(Number(left)))) {
+          pasteConfig.style.left = Number(left) + offsetX;
+        }
+        if (typeof top === 'number' || (!!top && !isNaN(Number(top)))) {
+          pasteConfig.style.top = Number(top) + offsetY;
+        }
+
+        pasteConfig.style = {
+          ...pasteConfig.style,
+          ...pastePosition,
+        };
+      }
+      if (isPage(pasteConfig)) {
+        pasteConfig.name = generatePageNameByApp(editorService.get('root'));
+      }
+      return pasteConfig as MNode;
+    }),
+  );
+  return pasteConfigs;
+};
+
+/**
+ * 新增元素前置操作，实现了在编辑器中新增元素节点，并返回新增元素信息以供stage更新
+ * @param addNode 待添加元素的配置
+ * @param parent 父级容器（可选）
+ * @returns 新增的元素，父级元素，布局方式，是否为根页面
+ */
+export const beforeAdd = async (
+  addNode: AddMNode,
+  parent?: MContainer | null,
+): Promise<{ parentNode: MContainer; newNode: MNode; layout: Layout; isPage: boolean }> => {
+  // 加入inputEvent是为给业务扩展时可以获取到更多的信息，只有在使用拖拽添加组件时才有改对象
+  const { type, inputEvent, ...config } = addNode;
+  const curNode = editorService.get<MContainer>('node');
+
+  let parentNode: MContainer | undefined;
+  const isPage = type === NodeType.PAGE;
+
+  if (isPage) {
+    parentNode = editorService.get<MApp>('root');
+    // 由于支持中间件扩展，在parent参数为undefined时，parent会变成next函数
+  } else if (parent && typeof parent !== 'function') {
+    parentNode = parent;
+  } else if (curNode.items) {
+    parentNode = curNode;
+  } else {
+    parentNode = editorService.getParentById(curNode.id, false);
+  }
+
+  if (!parentNode) throw new Error('未找到父元素');
+
+  const layout = await editorService.getLayout(toRaw(parentNode), addNode as MNode);
+  const newNode = { ...toRaw(await propsService.getPropsValue(type, config)) };
+  newNode.style = getInitPositionStyle(newNode.style, layout, parentNode, editorService.get<StageCore>('stage'));
+
+  if ((parentNode?.type === NodeType.ROOT || curNode.type === NodeType.ROOT) && newNode.type !== NodeType.PAGE) {
+    throw new Error('app下不能添加组件');
+  }
+  // 新增节点添加到配置中
+  parentNode?.items?.push(newNode);
+  // 返回新增信息以供stage更新
+  return {
+    parentNode,
+    newNode,
+    layout,
+    isPage,
+  };
+};
+
+/**
+ * 将元素粘贴到容器内时，将相对于画布坐标转换为相对于容器的坐标
+ * @param position PastePosition 粘贴时相对于画布的坐标
+ * @param id 元素id
+ * @returns PastePosition 转换后的坐标
+ */
+export const getPositionInContainer = (position: PastePosition = {}, id: Id) => {
+  let { left = 0, top = 0 } = position;
+  const parentEl = editorService.get<StageCore>('stage')?.renderer?.contentWindow?.document.getElementById(`${id}`);
+  const parentElRect = parentEl?.getBoundingClientRect();
+  left = left - (parentElRect?.left || 0);
+  top = top - (parentElRect?.top || 0);
+  return {
+    left,
+    top,
+  };
+};
+
+/**
+ * 将新增元素事件通知到stage以更新渲染
+ * @param parentNode 父元素
+ * @param newNode 当前新增元素
+ * @param layout 布局方式
+ */
+export const notifyAddToStage = async (parentNode: MContainer, newNode: MNode, layout: Layout) => {
+  const stage = editorService.get<StageCore | null>('stage');
+  const root = editorService.get<MApp>('root');
+
+  await stage?.add({ config: cloneDeep(newNode), parent: cloneDeep(parentNode), root: cloneDeep(root) });
+
+  if (layout === Layout.ABSOLUTE) {
+    const fixedLeft = fixNodeLeft(newNode, parentNode, stage?.renderer.contentWindow?.document);
+    if (typeof fixedLeft !== 'undefined' && newNode.style) {
+      newNode.style.left = fixedLeft;
+      await stage?.update({ config: cloneDeep(newNode), root: cloneDeep(root) });
+    }
+  }
+};
+
+/**
+ * 删除前置操作：实现了在编辑器中删除元素节点，并返回父级元素信息以供stage更新
+ * @param node 待删除的节点
+ * @returns 父级元素，root根元素
+ */
+export const beforeRemove = async (node: MNode): Promise<MContainer | void> => {
+  if (!node?.id) return;
+
+  const stage = editorService.get<StageCore | null>('stage');
+  const root = editorService.get<MApp | null>('root');
+
+  if (!root) throw new Error('没有root');
+
+  const { parent, node: curNode } = editorService.getNodeInfo(node.id, false);
+
+  if (!parent || !curNode) throw new Error('找不要删除的节点');
+
+  const index = getNodeIndex(curNode, parent);
+
+  if (typeof index !== 'number' || index === -1) throw new Error('找不要删除的节点');
+  // 从配置中删除元素
+  parent.items?.splice(index, 1);
+
+  // 通知stage更新
+  stage?.remove({ id: node.id, root: cloneDeep(root) });
+
+  if (node.type === NodeType.PAGE) {
+    editorService.state.pageLength -= 1;
+
+    if (root.items[0]) {
+      await editorService.select(root.items[0]);
+      stage?.select(root.items[0].id);
+    } else {
+      editorService.set('node', null);
+      editorService.set('nodes', []);
+      editorService.set('parent', null);
+      editorService.set('page', null);
+      editorService.set('stage', null);
+      editorService.set('highlightNode', null);
+      editorService.resetModifiedNodeId();
+      historyService.reset();
+
+      editorService.emit('remove', node);
+
+      return;
+    }
+  } else {
+    await editorService.select(parent);
+    stage?.select(parent.id);
+  }
+  return parent;
+};

package/src/utils/props.ts

@@ -18,8 +18,8 @@
 
 import { FormConfig, FormState } from '@tmagic/form';
 
-import editorService from '@editor/services/editor';
-import eventsService from '@editor/services/events';
+import editorService from '../services/editor';
+import eventsService from '../services/events';
 
 /**
  * 统一为组件属性表单加上事件、高级、样式配置
@@ -237,25 +237,3 @@ export const fillConfig = (config: FormConfig = []) => [
 
 // 默认组件属性表单配置
 export const DEFAULT_CONFIG: FormConfig = fillConfig([]);
-
-/**
- * 获取默认属性配置
- * @param type 组件类型
- * @returns Object
- */
-export const getDefaultPropsValue = (type: string, id: string) =>
-  ['page', 'container'].includes(type)
-    ? {
-        type,
-        id,
-        layout: 'absolute',
-        style: {},
-        name: type,
-        items: [],
-      }
-    : {
-        type,
-        id,
-        style: {},
-        name: type,
-      };

package/src/utils/scroll-viewer.ts

@@ -1,4 +1,4 @@
-import { Keys } from '@editor/type';
+import { Keys } from '../type';
 
 interface ScrollViewerOptions {
   container: HTMLDivElement;

package/tsconfig.build.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "declarationDir": "types",
+    "forceConsistentCasingInFileNames": true,
+    "paths": {},
+  },
+  "include": [
+		"src"
+	],
+}

package/{dist/types/src → types}/Editor.vue.d.ts

@@ -1,11 +1,10 @@
-import type { DefineComponent, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from '@vue/runtime-core';
 import { PropType } from 'vue';
 import type { FormConfig } from '@tmagic/form';
 import type { MApp, MNode } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 import { MoveableOptions } from '@tmagic/stage';
 import type { ComponentGroup, MenuBarData, MenuItem, Services, SideBarData, StageRect } from './type';
-declare const _default: DefineComponent<{
+declare const _default: import("vue").DefineComponent<{
     /** 页面初始值 */
     modelValue: {
         type: PropType<MApp>;
@@ -62,11 +61,11 @@ declare const _default: DefineComponent<{
     };
     /** 画布中组件选中框的移动范围 */
     moveableOptions: {
-        type: PropType<MoveableOptions | ((core?: StageCore | undefined) => MoveableOptions)>;
+        type: PropType<MoveableOptions | ((core?: StageCore) => MoveableOptions)>;
     };
     /** 编辑器初始化时默认选中的组件ID */
     defaultSelected: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
     };
     canSelect: {
         type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
@@ -94,7 +93,7 @@ declare const _default: DefineComponent<{
     updateDragEl: {
         type: PropType<(el: HTMLDivElement, target: HTMLElement) => void>;
     };
-}, Services, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("props-panel-mounted" | "update:modelValue")[], "props-panel-mounted" | "update:modelValue", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, Services, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("props-panel-mounted" | "update:modelValue")[], "props-panel-mounted" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     /** 页面初始值 */
     modelValue: {
         type: PropType<MApp>;
@@ -151,11 +150,11 @@ declare const _default: DefineComponent<{
     };
     /** 画布中组件选中框的移动范围 */
     moveableOptions: {
-        type: PropType<MoveableOptions | ((core?: StageCore | undefined) => MoveableOptions)>;
+        type: PropType<MoveableOptions | ((core?: StageCore) => MoveableOptions)>;
     };
     /** 编辑器初始化时默认选中的组件ID */
     defaultSelected: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
     };
     canSelect: {
         type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
@@ -188,9 +187,9 @@ declare const _default: DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     menu: MenuBarData;
+    codeOptions: Record<string, any>;
     layerContentMenu: MenuItem[];
     stageContentMenu: MenuItem[];
-    codeOptions: Record<string, any>;
     modelValue: MApp;
     componentGroupList: ComponentGroup[];
     autoScrollIntoView: boolean;

package/types/components/ContentMenu.vue.d.ts

@@ -0,0 +1,116 @@
+import { nextTick } from 'vue';
+import { MenuItem } from '../type';
+declare const _default: {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            menuData: MenuItem[];
+            isSubMenu: boolean;
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+            menuData?: MenuItem[] | undefined;
+            isSubMenu?: boolean | undefined;
+        }>, {
+            menuData: () => never[];
+            isSubMenu: boolean;
+        }>>> & {
+            onHide?: ((...args: any[]) => any) | undefined;
+            onShow?: ((...args: any[]) => any) | undefined;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "menuData" | "isSubMenu">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $emit: (event: "hide" | "show", ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+            menuData?: MenuItem[] | undefined;
+            isSubMenu?: boolean | undefined;
+        }>, {
+            menuData: () => never[];
+            isSubMenu: boolean;
+        }>>> & {
+            onHide?: ((...args: any[]) => any) | undefined;
+            onShow?: ((...args: any[]) => any) | undefined;
+        }, {
+            hide: () => void;
+            show: (e: MouseEvent) => void;
+        }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("hide" | "show")[], string, {
+            menuData: MenuItem[];
+            isSubMenu: boolean;
+        }> & {
+            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+            created?: ((() => void) | (() => void)[]) | undefined;
+            beforeMount?: ((() => void) | (() => void)[]) | undefined;
+            mounted?: ((() => void) | (() => void)[]) | undefined;
+            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+            updated?: ((() => void) | (() => void)[]) | undefined;
+            activated?: ((() => void) | (() => void)[]) | undefined;
+            deactivated?: ((() => void) | (() => void)[]) | undefined;
+            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+            destroyed?: ((() => void) | (() => void)[]) | undefined;
+            unmounted?: ((() => void) | (() => void)[]) | undefined;
+            renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof nextTick;
+        $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
+    } & Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+        menuData?: MenuItem[] | undefined;
+        isSubMenu?: boolean | undefined;
+    }>, {
+        menuData: () => never[];
+        isSubMenu: boolean;
+    }>>> & {
+        onHide?: ((...args: any[]) => any) | undefined;
+        onShow?: ((...args: any[]) => any) | undefined;
+    } & import("vue").ShallowUnwrapRef<{
+        hide: () => void;
+        show: (e: MouseEvent) => void;
+    }> & {} & import("vue").ComponentCustomProperties;
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    menuData?: MenuItem[] | undefined;
+    isSubMenu?: boolean | undefined;
+}>, {
+    menuData: () => never[];
+    isSubMenu: boolean;
+}>>> & {
+    onHide?: ((...args: any[]) => any) | undefined;
+    onShow?: ((...args: any[]) => any) | undefined;
+}, {
+    hide: () => void;
+    show: (e: MouseEvent) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("hide" | "show")[], "hide" | "show", {
+    menuData: MenuItem[];
+    isSubMenu: boolean;
+}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {};
+});
+export default _default;
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+declare type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};

package/types/components/Icon.vue.d.ts

@@ -0,0 +1,13 @@
+import { Component, PropType, toRaw } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    icon: {
+        type: PropType<string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>;
+    };
+}, {
+    toRaw: typeof toRaw;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    icon: {
+        type: PropType<string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>;
+    };
+}>>, {}>;
+export default _default;

package/types/components/ScrollViewer.vue.d.ts

@@ -0,0 +1,22 @@
+declare const _default: import("vue").DefineComponent<{
+    width: NumberConstructor;
+    height: NumberConstructor;
+    zoom: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, {
+    container: import("vue").Ref<HTMLDivElement | undefined>;
+    el: import("vue").Ref<HTMLDivElement | undefined>;
+    style: import("vue").ComputedRef<string>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    width: NumberConstructor;
+    height: NumberConstructor;
+    zoom: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>>, {
+    zoom: number;
+}>;
+export default _default;

package/types/components/ToolButton.vue.d.ts

@@ -0,0 +1,109 @@
+import { PropType } from 'vue';
+import type { MenuButton, MenuComponent } from '../type';
+declare const _default: {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            data: string | MenuButton | MenuComponent;
+            eventType: "click" | "mousedown" | "mouseup";
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            data: {
+                type: PropType<string | MenuButton | MenuComponent>;
+                require: boolean;
+                default: () => {
+                    type: string;
+                    display: boolean;
+                };
+            };
+            eventType: {
+                type: PropType<"click" | "mousedown" | "mouseup">;
+                default: string;
+            };
+        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "data" | "eventType">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            data: {
+                type: PropType<string | MenuButton | MenuComponent>;
+                require: boolean;
+                default: () => {
+                    type: string;
+                    display: boolean;
+                };
+            };
+            eventType: {
+                type: PropType<"click" | "mousedown" | "mouseup">;
+                default: string;
+            };
+        }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
+            data: string | MenuButton | MenuComponent;
+            eventType: "click" | "mousedown" | "mouseup";
+        }> & {
+            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+            created?: ((() => void) | (() => void)[]) | undefined;
+            beforeMount?: ((() => void) | (() => void)[]) | undefined;
+            mounted?: ((() => void) | (() => void)[]) | undefined;
+            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+            updated?: ((() => void) | (() => void)[]) | undefined;
+            activated?: ((() => void) | (() => void)[]) | undefined;
+            deactivated?: ((() => void) | (() => void)[]) | undefined;
+            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+            destroyed?: ((() => void) | (() => void)[]) | undefined;
+            unmounted?: ((() => void) | (() => void)[]) | undefined;
+            renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
+    } & Readonly<import("vue").ExtractPropTypes<{
+        data: {
+            type: PropType<string | MenuButton | MenuComponent>;
+            require: boolean;
+            default: () => {
+                type: string;
+                display: boolean;
+            };
+        };
+        eventType: {
+            type: PropType<"click" | "mousedown" | "mouseup">;
+            default: string;
+        };
+    }>> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties;
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    data: {
+        type: PropType<string | MenuButton | MenuComponent>;
+        require: boolean;
+        default: () => {
+            type: string;
+            display: boolean;
+        };
+    };
+    eventType: {
+        type: PropType<"click" | "mousedown" | "mouseup">;
+        default: string;
+    };
+}>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
+    data: string | MenuButton | MenuComponent;
+    eventType: "click" | "mousedown" | "mouseup";
+}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {};
+});
+export default _default;