@tmagic/editor 1.0.0-beta.1

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

@@ -0,0 +1,183 @@
+import { Component } from 'vue';
+import { FormConfig } from '@tmagic/form';
+import { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
+import 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 UiState {
+    /** 当前点击画布是否触发选中，true: 不触发，false: 触发，默认为false */
+    uiSelectMode: boolean;
+    /** 是否显示整个配置源码， true: 显示， false: 不显示，默认为false */
+    showSrc: boolean;
+    /** 画布显示放大倍数，默认为 1 */
+    zoom: number;
+    /** 画布顶层div的样式，可用于改变画布的大小 */
+    stageStyle: Record<string, string | number>;
+    /** 编辑器列布局每一列的宽度，分为左中右三列 */
+    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"
+}

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,45 @@
+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>;
+export declare const defaults: (object: any, source: any) => any;

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/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

@@ -0,0 +1,57 @@
+{
+  "version": "1.0.0-beta.1",
+  "name": "@tmagic/editor",
+  "main": "dist/magic-editor.umd.js",
+  "module": "dist/magic-editor.es.js",
+  "style": "dist/style.css",
+  "types": "dist/types/src/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/magic-editor.es.js",
+      "require": "./dist/magic-editor.umd.js"
+    },
+    "./dist/style.css": {
+      "import": "./dist/style.css",
+      "require": "./dist/style.css"
+    }
+  },
+  "scripts": {
+    "build": "vite build"
+  },
+  "engines": {
+    "node": ">=14"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Tencent/tmagic-editor.git"
+  },
+  "dependencies": {
+    "@element-plus/icons": "0.0.11",
+    "@tmagic/core": "^1.0.0-beta.1",
+    "@tmagic/form": "^1.0.0-beta.1",
+    "@tmagic/schema": "^1.0.0-beta.1",
+    "@tmagic/stage": "^1.0.0-beta.1",
+    "@tmagic/utils": "^1.0.0-beta.1",
+    "color": "^3.1.3",
+    "element-plus": "^2.0.2",
+    "events": "^3.3.0",
+    "lodash-es": "^4.17.21",
+    "serialize-javascript": "^6.0.0",
+    "vue": "^3.2.0"
+  },
+  "devDependencies": {
+    "@types/events": "^3.0.0",
+    "@types/lodash-es": "^4.17.4",
+    "@types/node": "^15.12.4",
+    "@types/serialize-javascript": "^5.0.1",
+    "@vitejs/plugin-vue": "^1.2.3",
+    "@vitejs/plugin-vue-jsx": "^1.1.6",
+    "@vue/compiler-sfc": "^3.2.0",
+    "@vue/test-utils": "^2.0.0-rc.12",
+    "sass": "^1.35.1",
+    "typescript": "^4.3.4",
+    "vite": "^2.3.7",
+    "vite-plugin-dts": "^0.9.6",
+    "vue-tsc": "^0.0.24"
+  }
+}

package/src/Editor.vue

@@ -0,0 +1,234 @@
+<template>
+  <framework>
+    <template #nav>
+      <slot name="nav" :editorService="editorService"><nav-menu :data="menu"></nav-menu></slot>
+    </template>
+
+    <template #sidebar>
+      <slot name="sidebar" :editorService="editorService">
+        <sidebar :data="sidebar"></sidebar>
+      </slot>
+    </template>
+
+    <template #workspace :editorService="editorService">
+      <slot name="workspace">
+        <workspace
+          :runtime-url="runtimeUrl"
+          :render="render"
+          :moveable-options="moveableOptions"
+          :can-select="canSelect"
+        >
+          <template #workspace-content><slot name="workspace-content" :editorService="editorService"></slot></template>
+          <template #page-bar-title="{ page }"><slot name="page-bar-title" :page="page"></slot></template>
+          <template #page-bar-popover="{ page }"><slot name="page-bar-popover" :page="page"></slot></template>
+        </workspace>
+      </slot>
+    </template>
+
+    <template #propsPanel>
+      <slot name="propsPanel">
+        <props-panel ref="propsPanel" @mounted="(instance) => $emit('props-panel-mounted', instance)"></props-panel>
+      </slot>
+    </template>
+
+    <template #empty><slot name="empty" :editorService="editorService"></slot></template>
+  </framework>
+</template>
+
+<script lang="ts">
+import { defineComponent, onUnmounted, PropType, provide, toRaw, watch } from 'vue';
+
+import { EventOption } from '@tmagic/core';
+import type { FormConfig } from '@tmagic/form';
+import type { MApp, MNode } from '@tmagic/schema';
+import type StageCore from '@tmagic/stage';
+import type { MoveableOptions } from '@tmagic/stage';
+
+import Framework from '@editor/layouts/Framework.vue';
+import NavMenu from '@editor/layouts/NavMenu.vue';
+import PropsPanel from '@editor/layouts/PropsPanel.vue';
+import Sidebar from '@editor/layouts/sidebar/Sidebar.vue';
+import Workspace from '@editor/layouts/workspace/Workspace.vue';
+import componentListService from '@editor/services/componentList';
+import editorService from '@editor/services/editor';
+import eventsService from '@editor/services/events';
+import historyService from '@editor/services/history';
+import propsService from '@editor/services/props';
+import uiService from '@editor/services/ui';
+import type { ComponentGroup, MenuBarData, Services, SideBarData } from '@editor/type';
+
+export default defineComponent({
+  name: 'm-editor',
+
+  components: {
+    NavMenu,
+    Sidebar,
+    Workspace,
+    PropsPanel,
+    Framework,
+  },
+
+  props: {
+    /** 页面初始值 */
+    modelValue: {
+      type: Object as PropType<MApp>,
+      default: () => ({}),
+      require: true,
+    },
+
+    /** 左侧面板中的组件列表 */
+    componentGroupList: {
+      type: Array as PropType<ComponentGroup[]>,
+      default: () => [],
+    },
+
+    /** 左侧面板配置 */
+    sidebar: {
+      type: Object as PropType<SideBarData>,
+    },
+
+    /** 顶部工具栏配置 */
+    menu: {
+      type: Object as PropType<MenuBarData>,
+      default: () => ({ left: [], right: [] }),
+    },
+
+    /** 中间工作区域中画布渲染的内容 */
+    render: {
+      type: Function as PropType<() => HTMLDivElement>,
+    },
+
+    /** 中间工作区域中画布通过iframe渲染时的页面url */
+    runtimeUrl: String,
+
+    /** 组件的属性配置表单的dsl */
+    propsConfigs: {
+      type: Object as PropType<Record<string, FormConfig>>,
+      default: () => ({}),
+    },
+
+    /** 添加组件时的默认值 */
+    propsValues: {
+      type: Object as PropType<Record<string, MNode>>,
+      default: () => ({}),
+    },
+
+    /** 组件联动事件选项列表 */
+    eventMethodList: {
+      type: Object,
+      default: () => ({}),
+    },
+
+    /** 画布中组件选中框的移动范围 */
+    moveableOptions: {
+      type: [Object, Function] as PropType<MoveableOptions | ((core?: StageCore) => MoveableOptions)>,
+    },
+
+    /** 编辑器初始化时默认选中的组件ID */
+    defaultSelected: {
+      type: [Number, String],
+    },
+
+    canSelect: {
+      type: Function as PropType<(el: HTMLElement) => boolean | Promise<boolean>>,
+    },
+
+    stageStyle: {
+      type: [String, Object] as PropType<Record<string, string | number>>,
+    },
+  },
+
+  emits: ['props-panel-mounted', 'update:modelValue'],
+
+  setup(props, { emit }) {
+    editorService.on('root-change', () => {
+      const node = editorService.get<MNode | null>('node') || props.defaultSelected;
+      node && editorService.select(node);
+      emit('update:modelValue', toRaw(editorService.get('root')));
+    });
+
+    // 初始值变化，重新设置节点信息
+    watch(
+      () => props.modelValue,
+      (modelValue) => editorService.set('root', modelValue),
+      {
+        immediate: true,
+      },
+    );
+
+    watch(
+      () => props.componentGroupList,
+      (componentGroupList) => componentListService.setList(componentGroupList),
+      {
+        immediate: true,
+      },
+    );
+
+    watch(
+      () => props.propsConfigs,
+      (configs) => propsService.setPropsConfigs(configs),
+      {
+        immediate: true,
+      },
+    );
+
+    watch(
+      () => props.propsValues,
+      (values) => propsService.setPropsValues(values),
+      {
+        immediate: true,
+      },
+    );
+
+    watch(
+      () => props.eventMethodList,
+      (eventMethodList) => {
+        const eventsList: Record<string, EventOption[]> = {};
+        const methodsList: Record<string, EventOption[]> = {};
+
+        Object.keys(eventMethodList).forEach((type: string) => {
+          eventsList[type] = eventMethodList[type].events;
+          methodsList[type] = eventMethodList[type].methods;
+        });
+
+        eventsService.setEvents(eventsList);
+        eventsService.setMethods(methodsList);
+      },
+      {
+        immediate: true,
+      },
+    );
+
+    watch(
+      () => props.defaultSelected,
+      (defaultSelected) => defaultSelected && editorService.select(defaultSelected),
+      {
+        immediate: true,
+      },
+    );
+
+    watch(
+      () => props.stageStyle,
+      (stageStyle) => uiService.set('stageStyle', stageStyle),
+      {
+        immediate: true,
+      },
+    );
+
+    onUnmounted(() => editorService.destroy());
+
+    const services: Services = {
+      componentListService,
+      eventsService,
+      historyService,
+      propsService,
+      editorService,
+      uiService,
+    };
+
+    provide('services', services);
+
+    return services;
+  },
+});
+</script>

package/src/components/Icon.vue

@@ -0,0 +1,29 @@
+<template>
+  <el-icon v-if="!icon"><edit></edit></el-icon>
+  <img v-else-if="typeof icon === 'string' && icon.startsWith('http')" :src="icon" />
+  <i v-else-if="typeof icon === 'string'" :class="icon"></i>
+  <el-icon v-else><component :is="toRaw(icon)"></component></el-icon>
+</template>
+
+<script lang="ts">
+import { Component, defineComponent, PropType, toRaw } from 'vue';
+import { Edit } from '@element-plus/icons';
+
+export default defineComponent({
+  name: 'm-icon',
+
+  components: { Edit },
+
+  props: {
+    icon: {
+      type: [String, Object] as PropType<string | Component>,
+    },
+  },
+
+  setup() {
+    return {
+      toRaw,
+    };
+  },
+});
+</script>