@tmagic/editor 1.0.0-beta.3 → 1.0.0-beta.6

package/dist/types/src/type.d.ts

@@ -0,0 +1,192 @@
+import type { Component } from 'vue';
+import type { FormConfig } from '@tmagic/form';
+import type { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
+import type StageCore from '@tmagic/stage';
+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 { UiService } from './services/ui';
+export declare type BeforeAdd = (config: MNode, parent: MContainer) => Promise<MNode> | MNode;
+export declare type GetConfig = (config: FormConfig) => Promise<FormConfig> | FormConfig;
+export interface InstallOptions {
+    [key: string]: any;
+}
+export interface Services {
+    editorService: EditorService;
+    historyService: HistoryService;
+    eventsService: EventsService;
+    propsService: PropsService;
+    componentListService: ComponentListService;
+    uiService: UiService;
+}
+export interface StoreState {
+    root: MApp | null;
+    page: MPage | null;
+    parent: MContainer | null;
+    node: MNode | null;
+    stage: StageCore | null;
+    modifiedNodeIds: Map<Id, Id>;
+}
+export interface PropsState {
+    propsConfigMap: Record<string, FormConfig>;
+    propsValueMap: Record<string, MNode>;
+}
+export interface ComponentGroupState {
+    list: ComponentGroup[];
+}
+export interface SetColumnWidth {
+    left?: number;
+    center?: number | 'auto';
+    right?: number;
+}
+export interface GetColumnWidth {
+    left: number;
+    center: number;
+    right: number;
+}
+export interface StageRect {
+    width: number;
+    height: number;
+}
+export interface UiState {
+    /** 当前点击画布是否触发选中，true: 不触发，false: 触发，默认为false */
+    uiSelectMode: boolean;
+    /** 是否显示整个配置源码， true: 显示， false: 不显示，默认为false */
+    showSrc: boolean;
+    /** 画布显示放大倍数，默认为 1 */
+    zoom: number;
+    /** 画布容器的宽高 */
+    stageContainerRect: StageRect;
+    /** 画布顶层div的宽高，可用于改变画布的大小 */
+    stageRect: StageRect;
+    /** 编辑器列布局每一列的宽度，分为左中右三列 */
+    columnWidth: GetColumnWidth;
+    /** 是否显示画布参考线，true: 显示，false: 不显示，默认为true */
+    showGuides: boolean;
+    /** 是否显示标尺，true: 显示，false: 不显示，默认为true */
+    showRule: boolean;
+}
+export interface EditorNodeInfo {
+    node?: MNode;
+    parent?: MContainer;
+    page?: MPage;
+}
+export interface AddMNode {
+    type: string;
+    name?: string;
+    [key: string]: any;
+}
+/**
+ * 菜单按钮
+ */
+export interface MenuButton {
+    /**
+     * 按钮类型
+     * button: 只有文字不带边框的按钮
+     * text: 纯文本
+     * dropdown: 下拉菜单
+     * divider: 分隔线
+     * zoom: 放大缩小
+     */
+    type: 'button' | 'dropdown' | 'text' | 'divider' | 'zoom';
+    /** 展示的文案 */
+    text?: string;
+    /** 鼠标悬浮是显示的气泡中的文案 */
+    tooltip?: string;
+    /** element-plus icon class */
+    icon?: string | Component<{}, {}, any>;
+    /** 是否置灰，默认为false */
+    disabled?: boolean | ((data?: Services) => boolean);
+    /** 是否显示，默认为true */
+    display?: boolean | ((data?: Services) => boolean);
+    /** type为button/dropdown时点击运行的方法 */
+    handler?: (data?: Services) => Promise<any> | any;
+    /** type为dropdown时，下拉的菜单列表 */
+    items?: {
+        /** 展示的文案 */
+        text: string;
+        /** 点击运行的方法 */
+        handler(data: Services): any;
+    }[];
+}
+export interface MenuComponent {
+    type: 'component';
+    /** Vue3组件 */
+    component: any;
+    /** 传入组件的props对象 */
+    props?: Record<string, any>;
+    /** 组件监听的事件对象，如：{ click: () => { console.log('click'); } } */
+    listeners?: Record<string, Function>;
+    slots?: Record<string, any>;
+    /** 是否显示，默认为true */
+    display?: boolean | ((data?: Services) => Promise<boolean> | boolean);
+}
+/**
+ * '/': 分隔符
+ * 'delete': 删除按钮
+ * 'undo': 撤销按钮
+ * 'redo': 恢复按钮
+ * 'zoom-in': 放大按钮
+ * 'zoom-out': 缩小按钮
+ */
+export declare type MenuItem = '/' | 'delete' | 'undo' | 'redo' | 'zoom' | 'zoom-in' | 'zoom-out' | 'guides' | 'rule' | MenuButton | MenuComponent;
+/** 工具栏 */
+export interface MenuBarData {
+    /** 顶部工具栏左边项 */
+    left?: MenuItem[];
+    /** 顶部工具栏中间项 */
+    center?: MenuItem[];
+    /** 顶部工具栏右边项 */
+    right?: MenuItem[];
+}
+export interface SideComponent extends MenuComponent {
+    /** 显示文案 */
+    text: string;
+    /** element-plus icon class */
+    icon: Component<{}, {}, any>;
+}
+/**
+ * component-list: 组件列表
+ * layer: 已选组件树
+ */
+export declare type SideItem = 'component-list' | 'layer' | SideComponent;
+/** 工具栏 */
+export interface SideBarData {
+    /** 容器类型 */
+    type: 'tabs';
+    /** 默认激活的内容 */
+    status: string;
+    /** panel列表 */
+    items: SideItem[];
+}
+export interface ComponentItem {
+    /** 显示文案 */
+    text: string;
+    /** 组件类型 */
+    type: string;
+    /** element-plus icon class */
+    icon?: string | Component;
+    [key: string]: any;
+}
+export interface ComponentGroup {
+    /** 显示文案 */
+    title: string;
+    /** 组内列表 */
+    items: ComponentItem[];
+}
+export declare enum LayerOffset {
+    TOP = "top",
+    BOTTOM = "bottom"
+}
+/** 容器布局 */
+export declare enum Layout {
+    FLEX = "flex",
+    FIXED = "fixed",
+    RELATIVE = "relative",
+    ABSOLUTE = "absolute"
+}
+export declare enum Keys {
+    ESCAPE = "Space"
+}

package/dist/types/src/utils/compose.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @param {Array} middleware
+ * @return {Function}
+ */
+export declare const compose: (middleware: Function[]) => (args: any[], next?: Function | undefined) => Promise<void>;

package/dist/types/src/utils/config.d.ts

@@ -0,0 +1,4 @@
+import { InstallOptions } from '../type';
+declare const setConfig: (option: InstallOptions) => void;
+declare const getConfig: (key: keyof InstallOptions) => unknown;
+export { getConfig, setConfig };

package/dist/types/src/utils/editor.d.ts

@@ -0,0 +1,44 @@
+import { MApp, MContainer, MNode, MPage } from '@tmagic/schema';
+import { Layout } from '../type';
+export declare const COPY_STORAGE_KEY = "$MagicEditorCopyData";
+export declare const generateId: (type: string | number) => string;
+/**
+ * 获取所有页面配置
+ * @param app DSL跟节点
+ * @returns 所有页面配置
+ */
+export declare const getPageList: (app: MApp) => MPage[];
+/**
+ * 获取所有页面名称
+ * @param pages 所有页面配置
+ * @returns 所有页面名称
+ */
+export declare const getPageNameList: (pages: MPage[]) => string[];
+/**
+ * 新增页面时，生成页面名称
+ * @param {Object} pageNameList 所有页面名称
+ * @returns {string}
+ */
+export declare const generatePageName: (pageNameList: string[]) => string;
+/**
+ * 新增页面时，生成页面名称
+ * @param {Object} app 所有页面配置
+ * @returns {string}
+ */
+export declare const generatePageNameByApp: (app: MApp) => string;
+/**
+ * 将组件与组件的子元素配置中的id都设置成一个新的ID
+ * @param {Object} config 组件配置
+ */
+export declare const setNewItemId: (config: MNode, parent?: MPage | undefined) => void;
+/**
+ * @param {Object} node
+ * @returns {boolean}
+ */
+export declare const isFixed: (node: MNode) => boolean;
+export declare const getNodeIndex: (node: MNode, parent: MContainer) => number;
+export declare const toRelative: (node: MNode) => MNode;
+export declare const initPosition: (node: MNode, layout: Layout) => MNode;
+export declare const setLayout: (node: MNode, layout: Layout) => MNode;
+export declare const change2Fixed: (node: MNode, root: MApp) => MNode;
+export declare const Fixed2Other: (node: MNode, root: MApp, getLayout: (node: MNode) => Promise<Layout>) => Promise<MNode>;

package/dist/types/src/utils/index.d.ts

@@ -0,0 +1,4 @@
+export * from './config';
+export * from './props';
+export * from './logger';
+export * from './editor';

package/dist/types/src/utils/logger.d.ts

@@ -0,0 +1,5 @@
+export declare const log: (...args: any[]) => void;
+export declare const info: (...args: any[]) => void;
+export declare const warn: (...args: any[]) => void;
+export declare const debug: (...args: any[]) => void;
+export declare const error: (...args: any[]) => void;

package/dist/types/src/utils/props.d.ts

@@ -0,0 +1,49 @@
+import type { ChildConfig, FormConfig,  FormState } from '@tmagic/form';
+/**
+ * 统一为组件属性表单加上事件、高级、样式配置
+ * @param config 组件属性配置
+ * @returns Object
+ */
+export declare const fillConfig: (config?: FormConfig) => {
+    type: string;
+    items: ({
+        title: string;
+        labelWidth: string;
+        items: (ChildConfig & {
+            [key: string]: any;
+        })[];
+    } | {
+        title: string;
+        items: {
+            type: string;
+            name: string;
+            items: ({
+                name: string;
+                label: string;
+                type: string;
+                options: (mForm: FormState, { formValue }: any) => {
+                    text: string;
+                    value: string;
+                }[];
+            } | {
+                name: string;
+                label: string;
+                type: string;
+                options?: undefined;
+            })[];
+        }[];
+        labelWidth?: undefined;
+    })[];
+}[];
+export declare const DEFAULT_CONFIG: FormConfig;
+/**
+ * 获取默认属性配置
+ * @param type 组件类型
+ * @returns Object
+ */
+export declare const getDefaultPropsValue: (type: string) => {
+    type: string;
+    id: string;
+    style: {};
+    name: string;
+};

package/dist/types/src/utils/scroll-viewer.d.ts

@@ -0,0 +1,35 @@
+interface ScrollViewerOptions {
+    container: HTMLDivElement;
+    target: HTMLDivElement;
+    zoom: number;
+}
+export declare class ScrollViewer {
+    private enter;
+    private targetEnter;
+    private keydown;
+    private container;
+    private target;
+    private zoom;
+    private scrollLeft;
+    private scrollTop;
+    private x;
+    private y;
+    private resizeObserver;
+    constructor(options: ScrollViewerOptions);
+    destroy(): void;
+    setZoom(zoom: number): void;
+    private scroll;
+    private removeHandler;
+    private wheelHandler;
+    private mouseEnterHandler;
+    private mouseLeaveHandler;
+    private targetMouseEnterHandler;
+    private targetMouseLeaveHandler;
+    private mousedownHandler;
+    private mouseupHandler;
+    private mousemoveHandler;
+    private keydownHandler;
+    private keyupHandler;
+    private setScrollOffset;
+}
+export {};

package/dist/types/src/utils/undo-redo.d.ts

@@ -0,0 +1,12 @@
+export declare class UndoRedo<T = any> {
+    private elementList;
+    private listCursor;
+    private listMaxSize;
+    constructor(listMaxSize?: number);
+    pushElement(element: T): void;
+    canUndo(): boolean;
+    undo(): T | null;
+    canRedo(): boolean;
+    redo(): T | null;
+    getCurrentElement(): T | null;
+}

package/dist/types/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.6",
   "name": "@tmagic/editor",
   "sideEffects": false,
   "main": "dist/tmagic-editor.umd.js",
@@ -28,11 +28,11 @@
   },
   "dependencies": {
     "@element-plus/icons": "0.0.11",
-    "@tmagic/core": "^1.0.0-beta.3",
-    "@tmagic/form": "^1.0.0-beta.3",
-    "@tmagic/schema": "^1.0.0-beta.3",
-    "@tmagic/stage": "^1.0.0-beta.3",
-    "@tmagic/utils": "^1.0.0-beta.3",
+    "@tmagic/core": "^1.0.0-beta.6",
+    "@tmagic/form": "^1.0.0-beta.6",
+    "@tmagic/schema": "^1.0.0-beta.6",
+    "@tmagic/stage": "^1.0.0-beta.6",
+    "@tmagic/utils": "^1.0.0-beta.6",
     "color": "^3.1.3",
     "element-plus": "^2.0.2",
     "events": "^3.3.0",

package/src/components/ScrollViewer.vue

@@ -57,6 +57,7 @@ export default defineComponent({
         width: ${props.width}px;
         height: ${props.height}px;
         position: absolute;
+        margin-top: 30px;
       `,
       ),
     };

package/src/layouts/NavMenu.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="m-editor-nav-menu" :style="{ height: `${height}px` }">
-    <div v-for="key in keys" :class="`menu-${key}`" :key="key">
+    <div v-for="key in keys" :class="`menu-${key}`" :key="key" :style="`width: ${columnWidth?.[key]}px`">
       <tool-button :data="item" v-for="(item, index) in data[key]" :key="index"></tool-button>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
+import { computed, defineComponent, inject, PropType } from 'vue';
 
 import ToolButton from '@editor/components/ToolButton.vue';
-import { MenuBarData } from '@editor/type';
+import { GetColumnWidth, MenuBarData, Services } from '@editor/type';
 
 export default defineComponent({
   name: 'nav-menu',
@@ -29,8 +29,12 @@ export default defineComponent({
   },
 
   setup(props) {
+    const services = inject<Services>('services');
+
     return {
       keys: computed(() => Object.keys(props.data) as Array<keyof MenuBarData>),
+
+      columnWidth: computed(() => services?.uiService.get<GetColumnWidth>('columnWidth')),
     };
   },
 });

package/src/layouts/PropsPanel.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, getCurrentInstance, inject, onMounted, ref, watchEffect } from 'vue';
+import { computed, defineComponent, getCurrentInstance, inject, onMounted, ref, watchEffect } from 'vue';
 import { ElMessage } from 'element-plus';
 
 import type { FormValue, MForm } from '@tmagic/form';
@@ -30,21 +30,16 @@ export default defineComponent({
     // ts类型应该是FormConfig， 但是打包时会出错，所以暂时用any
     const curFormConfig = ref<any>([]);
     const services = inject<Services>('services');
+    const node = computed(() => services?.editorService.get<MNode | null>('node'));
 
     const init = async () => {
-      const node = services?.editorService.get<MNode | null>('node');
-
-      if (!node) {
+      if (!node.value) {
         curFormConfig.value = [];
         return;
       }
 
-      if (node.devconfig && node.style && !isNaN(+node.style.height) && !isNaN(+node.style.width)) {
-        node.devconfig.ratio = node.style.height / node.style.width || 1;
-      }
-
-      values.value = node;
-      const type = node.type || (node.items ? 'container' : 'text');
+      values.value = node.value;
+      const type = node.value.type || (node.value.items ? 'container' : 'text');
       curFormConfig.value = (await services?.propsService.getPropsConfig(type)) || [];
     };
 

package/src/services/editor.ts

@@ -17,7 +17,7 @@
  */
 
 import { reactive, toRaw } from 'vue';
-import { cloneDeep } from 'lodash-es';
+import { cloneDeep, mergeWith } from 'lodash-es';
 import serialize from 'serialize-javascript';
 
 import type { Id, MApp, MComponent, MContainer, MNode, MPage } from '@tmagic/schema';
@@ -31,7 +31,6 @@ import { LayerOffset, Layout } from '@editor/type';
 import {
   change2Fixed,
   COPY_STORAGE_KEY,
-  defaults,
   Fixed2Other,
   getNodeIndex,
   initPosition,
@@ -185,6 +184,10 @@ class Editor extends BaseService {
     const { node, parent, page } = this.getNodeInfo(id);
     if (!node) throw new Error('获取不到组件信息');
 
+    if (node.id === this.state.root?.id) {
+      throw new Error('不能选根节点');
+    }
+
     this.set('node', node);
     this.set('page', page || null);
     this.set('parent', parent || null);
@@ -292,7 +295,11 @@ class Editor extends BaseService {
 
     let newConfig = await this.toggleFixedPosition(toRaw(config), node, this.get<MApp>('root'));
 
-    defaults(newConfig, node);
+    newConfig = mergeWith(node, newConfig, (objValue, srcValue) => {
+      if (Array.isArray(srcValue)) {
+        return srcValue;
+      }
+    });
 
     if (!newConfig.type) throw new Error('配置缺少type值');
 

package/src/theme/nav-menu.scss

@@ -21,12 +21,12 @@
     align-items: center;
   }
 
-  .menu-left {
-    padding-left: 16px;
+  .menu-center {
+    justify-content: center;
   }
 
   .menu-right {
-    padding-right: 16px;
+    justify-content: flex-end;
   }
 
   .menu-item {

package/src/theme/stage.scss

@@ -15,6 +15,7 @@
   position: relative;
   border: 1px solid $--border-color;
   transition: transform 0.3s;
+  box-sizing: content-box;
 
   &::-webkit-scrollbar {
     width: 0 !important;

package/src/utils/editor.ts

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { cloneDeep, random } from 'lodash-es';
+import { random } from 'lodash-es';
 
 import { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
 import { getNodePath, isPop } from '@tmagic/utils';
@@ -223,22 +223,3 @@ export const Fixed2Other = async (node: MNode, root: MApp, getLayout: (node: MNo
 
   return toRelative(node);
 };
-
-export const defaults = (object: any, source: any) => {
-  let o = source;
-  if (Array.isArray(object)) {
-    o = object;
-  }
-
-  Object.entries(o).forEach(([key, value]: [string, any]) => {
-    if (typeof object[key] === 'undefined') {
-      object[key] = value;
-      return;
-    }
-
-    if (value && typeof value !== 'string' && Object.keys(value).length) {
-      object[key] = defaults(cloneDeep(object[key]), value);
-    }
-  });
-  return object;
-};

package/src/utils/scroll-viewer.ts

@@ -25,7 +25,8 @@ export class ScrollViewer {
       const { width, height } = contentRect;
       const targetRect = this.target.getBoundingClientRect();
       const targetWidth = targetRect.width * this.zoom;
-      const targetHeight = targetRect.height * this.zoom;
+      const targetMarginTop = Number(this.target.style.marginTop) || 0;
+      const targetHeight = (targetRect.height + targetMarginTop) * this.zoom;
 
       if (targetWidth < width) {
         (this.target as any)._left = 0;
@@ -154,11 +155,13 @@ export class ScrollViewer {
       event.preventDefault();
       event.stopImmediatePropagation();
       event.stopPropagation();
-    } else if (this.keydown) return;
+    }
 
-    this.keydown = true;
+    if (event.code !== Keys.ESCAPE || !this.enter || this.keydown) {
+      return;
+    }
 
-    event.preventDefault();
+    this.keydown = true;
 
     this.target.style.cursor = 'grab';
     this.container.addEventListener('mousedown', this.mousedownHandler);