@tmagic/editor 1.2.0-beta.2 → 1.2.0-beta.21

package/package.json

@@ -1,18 +1,19 @@
 {
-  "version": "1.2.0-beta.2",
+  "version": "1.2.0-beta.21",
   "name": "@tmagic/editor",
+  "type": "module",
   "sideEffects": [
     "dist/*",
     "src/theme/*"
   ],
-  "main": "dist/tmagic-editor.umd.js",
-  "module": "dist/tmagic-editor.mjs",
+  "main": "dist/tmagic-editor.umd.cjs",
+  "module": "dist/tmagic-editor.js",
   "style": "dist/style.css",
   "types": "types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/tmagic-editor.mjs",
-      "require": "./dist/tmagic-editor.umd.js"
+      "import": "./dist/tmagic-editor.js",
+      "require": "./dist/tmagic-editor.umd.cjs"
     },
     "./dist/style.css": {
       "import": "./dist/style.css",
@@ -45,14 +46,14 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.2.0-beta.2",
-    "@tmagic/form": "1.2.0-beta.2",
-    "@tmagic/schema": "1.2.0-beta.2",
-    "@tmagic/stage": "1.2.0-beta.2",
-    "@tmagic/utils": "1.2.0-beta.2",
+    "@tmagic/core": "1.2.0-beta.21",
+    "@tmagic/design": "1.2.0-beta.21",
+    "@tmagic/form": "1.2.0-beta.21",
+    "@tmagic/schema": "1.2.0-beta.21",
+    "@tmagic/stage": "1.2.0-beta.21",
+    "@tmagic/utils": "1.2.0-beta.21",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
-    "element-plus": "^2.2.17",
     "events": "^3.3.0",
     "gesto": "^1.7.0",
     "keycon": "^1.1.2",
@@ -62,8 +63,8 @@
     "vue": "^3.2.37"
   },
   "peerDependencies": {
-    "@tmagic/form": "1.2.0-beta.2",
-    "element-plus": "^2.2.17",
+    "@tmagic/design": "1.2.0-beta.21",
+    "@tmagic/form": "1.2.0-beta.21",
     "monaco-editor": "^0.34.0",
     "vue": "^3.2.37"
   },
@@ -79,6 +80,7 @@
     "sass": "^1.35.1",
     "typescript": "^4.7.4",
     "vite": "^3.1.3",
-    "vue-tsc": "^0.39.4"
+    "vite-plugin-vue-setup-extend": "^0.4.0",
+    "vue-tsc": "^1.0.10"
   }
 }

package/src/Editor.vue

@@ -1,12 +1,12 @@
 <template>
-  <framework :code-options="codeOptions">
+  <Framework :code-options="codeOptions">
     <template #nav>
-      <slot name="nav" :editorService="editorService"><nav-menu :data="menu"></nav-menu></slot>
+      <slot name="nav" :editorService="editorService"><NavMenu :data="menu"></NavMenu></slot>
     </template>
 
     <template #sidebar>
       <slot name="sidebar" :editorService="editorService">
-        <sidebar :data="sidebar">
+        <Sidebar :data="sidebar" :layer-content-menu="layerContentMenu">
           <template #layer-panel-header>
             <slot name="layer-panel-header"></slot>
           </template>
@@ -34,33 +34,33 @@
           <template #code-block-edit-panel-header="{ id }">
             <slot name="code-block-edit-panel-header" :id="id"></slot>
           </template>
-        </sidebar>
+        </Sidebar>
       </slot>
     </template>
 
     <template #workspace>
       <slot name="workspace" :editorService="editorService">
-        <workspace>
+        <Workspace :stage-content-menu="stageContentMenu">
           <template #stage><slot name="stage"></slot></template>
           <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>
+        </Workspace>
       </slot>
     </template>
 
     <template #props-panel>
       <slot name="props-panel">
-        <props-panel @mounted="(instance: any) => $emit('props-panel-mounted', instance)">
+        <PropsPanel @mounted="(instance: any) => $emit('props-panel-mounted', instance)">
           <template #props-panel-header>
             <slot name="props-panel-header"></slot>
           </template>
-        </props-panel>
+        </PropsPanel>
       </slot>
     </template>
 
     <template #empty><slot name="empty" :editorService="editorService"></slot></template>
-  </framework>
+  </Framework>
 </template>
 
 <script lang="ts">
@@ -69,8 +69,13 @@ import { defineComponent, onUnmounted, PropType, provide, reactive, toRaw, watch
 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 { CONTAINER_HIGHLIGHT_CLASS, ContainerHighlightType, MoveableOptions } from '@tmagic/stage';
+import StageCore, {
+  CONTAINER_HIGHLIGHT_CLASS_NAME,
+  ContainerHighlightType,
+  CustomizeMoveableOptionsCallbackConfig,
+  MoveableOptions,
+  UpdateDragEl,
+} from '@tmagic/stage';
 
 import Framework from './layouts/Framework.vue';
 import NavMenu from './layouts/NavMenu.vue';
@@ -117,25 +122,27 @@ export default defineComponent({
       type: Object as PropType<SideBarData>,
     },
 
+    /** 顶部工具栏配置 */
+    menu: {
+      type: Object as PropType<MenuBarData>,
+      default: () => ({ left: [], right: [] }),
+    },
+
+    /** 组件树右键菜单 */
     layerContentMenu: {
       type: Array as PropType<(MenuButton | MenuComponent)[]>,
       default: () => [],
     },
 
+    /** 画布右键菜单 */
     stageContentMenu: {
       type: Array as PropType<(MenuButton | MenuComponent)[]>,
       default: () => [],
     },
 
-    /** 顶部工具栏配置 */
-    menu: {
-      type: Object as PropType<MenuBarData>,
-      default: () => ({ left: [], right: [] }),
-    },
-
     /** 中间工作区域中画布渲染的内容 */
     render: {
-      type: Function as PropType<() => HTMLDivElement>,
+      type: Function as PropType<(stage: StageCore) => HTMLDivElement | Promise<HTMLDivElement>>,
     },
 
     /** 中间工作区域中画布通过iframe渲染时的页面url */
@@ -158,13 +165,15 @@ export default defineComponent({
 
     /** 组件联动事件选项列表 */
     eventMethodList: {
-      type: Object,
+      type: Object as PropType<Record<string, { events: EventOption[]; methods: EventOption[] }>>,
       default: () => ({}),
     },
 
     /** 画布中组件选中框的移动范围 */
     moveableOptions: {
-      type: [Object, Function] as PropType<MoveableOptions | ((core?: StageCore) => MoveableOptions)>,
+      type: [Object, Function] as PropType<
+        MoveableOptions | ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions)
+      >,
     },
 
     /** 编辑器初始化时默认选中的组件ID */
@@ -184,7 +193,7 @@ export default defineComponent({
 
     containerHighlightClassName: {
       type: String,
-      default: CONTAINER_HIGHLIGHT_CLASS,
+      default: CONTAINER_HIGHLIGHT_CLASS_NAME,
     },
 
     containerHighlightDuration: {
@@ -207,7 +216,7 @@ export default defineComponent({
     },
 
     updateDragEl: {
-      type: Function as PropType<(el: HTMLDivElement, target: HTMLElement) => void>,
+      type: Function as PropType<UpdateDragEl>,
     },
   },
 
@@ -215,15 +224,25 @@ export default defineComponent({
 
   setup(props, { emit }) {
     editorService.on('root-change', (value) => {
-      const node = editorService.get<MNode | null>('node');
-      const nodeId = node?.id || props.defaultSelected;
-      if (nodeId && node !== value) {
-        editorService.select(nodeId);
-      } else {
+      const nodeId = editorService.get<MNode | null>('node')?.id || props.defaultSelected;
+      let node;
+      if (nodeId) {
+        node = editorService.getNodeById(nodeId);
+      }
+
+      if (node && node !== value) {
+        editorService.select(node.id);
+      } else if (value?.items?.length) {
+        editorService.select(value.items[0]);
+      } else if (value?.id) {
         editorService.set('nodes', [value]);
+        editorService.set('parent', null);
+        editorService.set('page', null);
       }
 
-      emit('update:modelValue', toRaw(editorService.get('root')));
+      if (toRaw(value) !== toRaw(editorService.get('root'))) {
+        emit('update:modelValue', value);
+      }
     });
 
     // 初始值变化，重新设置节点信息
@@ -297,13 +316,12 @@ export default defineComponent({
     );
 
     onUnmounted(() => {
-      editorService.destroy();
-      historyService.destroy();
-      propsService.destroy();
-      uiService.destroy();
-      componentListService.destroy();
-      storageService.destroy();
-      codeBlockService.destroy();
+      editorService.resetState();
+      historyService.resetState();
+      propsService.resetState();
+      uiService.resetState();
+      componentListService.resetState();
+      codeBlockService.resetState();
     });
 
     const services: Services = {
@@ -319,8 +337,7 @@ export default defineComponent({
 
     provide('services', services);
 
-    provide('layerContentMenu', props.layerContentMenu);
-    provide('stageContentMenu', props.stageContentMenu);
+    provide('codeOptions', props.codeOptions);
     provide(
       'stageOptions',
       reactive({

package/src/components/CodeDraftEditor.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="m-editor-wrapper" :class="isFullScreen ? 'fullScreen' : 'normal'">
+    <magic-code-editor
+      ref="codeEditor"
+      class="m-editor-container"
+      :init-values="`${codeContent}`"
+      @save="saveCodeDraft"
+      :language="language"
+      :options="codeOptions"
+    ></magic-code-editor>
+    <div class="m-editor-content-bottom" v-if="editable">
+      <TMagicButton type="primary" class="button" @click="toggleFullScreen">
+        {{ isFullScreen ? '退出全屏' : '全屏' }}</TMagicButton
+      >
+      <TMagicButton type="primary" class="button" @click="saveCode">保存</TMagicButton>
+      <TMagicButton type="primary" class="button" @click="close">关闭</TMagicButton>
+    </div>
+    <div class="m-editor-content-bottom" v-else>
+      <TMagicButton type="primary" class="button" @click="toggleFullScreen">
+        {{ isFullScreen ? '退出全屏' : '全屏' }}</TMagicButton
+      >
+      <TMagicButton type="primary" class="button" @click="close">关闭</TMagicButton>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup name="MEditorCodeDraftEditor">
+import { computed, inject, ref, watchEffect } from 'vue';
+import type * as monaco from 'monaco-editor';
+
+import { TMagicButton, tMagicMessage, tMagicMessageBox } from '@tmagic/design';
+import { Id } from '@tmagic/schema';
+import { datetimeFormatter } from '@tmagic/utils';
+
+import MagicCodeEditor from '../layouts/CodeEditor.vue';
+import type { Services } from '../type';
+
+const props = withDefaults(
+  defineProps<{
+    /** 代码id */
+    id: Id;
+    /** 代码内容 */
+    content: string;
+    /** 是否可编辑 */
+    editable?: boolean;
+    /** 是否自动保存草稿 */
+    autoSaveDraft?: boolean;
+    /** 编辑器参数 */
+    codeOptions?: Object;
+    /** 编辑器语言 */
+    language?: string;
+  }>(),
+  {
+    editable: true,
+    autoSaveDraft: true,
+  },
+);
+const emit = defineEmits(['save', 'close', 'saveAndClose']);
+
+const services = inject<Services>('services');
+
+const codeContent = ref<string>('');
+const editorContent = ref<string>('');
+const codeEditor = ref<InstanceType<typeof MagicCodeEditor>>();
+// 原始代码内容
+const originCodeContent = ref<string>('');
+const isFullScreen = ref<boolean>(false);
+
+const codeOptions = computed(() => ({
+  ...props.codeOptions,
+  readOnly: !props.editable,
+}));
+
+watchEffect(() => {
+  codeContent.value = props.content;
+  if (!originCodeContent.value) {
+    // 暂存原始的代码内容
+    originCodeContent.value = codeContent.value;
+  }
+  // 有草稿时展示上次保存的草稿内容
+  const codeDraft = services?.codeBlockService.getCodeDraft(props.id);
+  if (codeDraft) {
+    codeContent.value = codeDraft;
+  }
+});
+
+// 保存草稿
+const saveCodeDraft = async (codeValue: string) => {
+  if (!props.autoSaveDraft) return;
+  if (originCodeContent.value === codeValue) {
+    // 没修改或改回原样 有草稿的话删除草稿
+    services?.codeBlockService.removeCodeDraft(props.id);
+    return;
+  }
+  services?.codeBlockService.setCodeDraft(props.id, codeValue);
+  tMagicMessage.success(`代码草稿保存成功 ${datetimeFormatter(new Date())}`);
+};
+
+// 保存代码
+const saveCode = (): void => {
+  if (!codeEditor.value || !props.editable) return;
+  // 代码内容
+  editorContent.value = (codeEditor.value.getEditor() as monaco.editor.IStandaloneCodeEditor)?.getValue();
+  emit('save', editorContent.value);
+};
+
+// 保存并关闭
+const saveAndClose = (): void => {
+  if (!codeEditor.value || !props.editable) return;
+  // 代码内容
+  editorContent.value = (codeEditor.value.getEditor() as monaco.editor.IStandaloneCodeEditor)?.getValue();
+  emit('saveAndClose', editorContent.value);
+};
+
+// 关闭弹窗
+const close = async (): Promise<void> => {
+  const codeDraft = services?.codeBlockService.getCodeDraft(props.id);
+  if (codeDraft) {
+    tMagicMessageBox
+      .confirm('您有代码修改未保存，是否保存后再关闭？', '提示', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+      .then(async () => {
+        // 保存之后再关闭
+        saveAndClose();
+      })
+      .catch(() => {
+        // 删除草稿 直接关闭
+        services?.codeBlockService.removeCodeDraft(props.id);
+        emit('close');
+      });
+  } else {
+    emit('close');
+  }
+};
+
+// 切换全屏
+const toggleFullScreen = (): void => {
+  isFullScreen.value = !isFullScreen.value;
+  if (codeEditor.value) {
+    codeEditor.value.focus();
+  }
+};
+</script>

package/src/components/ContentMenu.vue

@@ -1,14 +1,14 @@
 <template>
-  <div v-if="menuData.length && visible" class="magic-editor-content-menu" ref="menu" :style="menuStyle">
+  <div v-if="menuData.length" v-show="visible" class="magic-editor-content-menu" ref="menu" :style="menuStyle">
     <div>
-      <tool-button
+      <ToolButton
         v-for="(item, index) in menuData"
         event-type="mouseup"
         :data="item"
         :key="index"
         @mouseup="hide"
         @mouseenter="showSubMenu(item)"
-      ></tool-button>
+      ></ToolButton>
     </div>
     <teleport to="body">
       <content-menu
@@ -22,7 +22,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorContentMenu">
 import { nextTick, onMounted, onUnmounted, ref } from 'vue';
 
 import { MenuButton, MenuComponent } from '../type';

package/src/components/FunctionEditor.vue

@@ -0,0 +1,145 @@
+<template>
+  <TMagicCard shadow="never">
+    <template #header>
+      <div class="code-name-wrapper">
+        <div class="code-name-label">代码块名称</div>
+        <TMagicInput class="code-name-input" v-model="codeName" :disabled="!editable" />
+      </div>
+      <div class="code-name-wrapper">
+        <div class="code-name-label">参数定义</div>
+        <m-form-table
+          style="width: 320px"
+          :config="tableConfig"
+          :model="tableModel"
+          :enableToggleMode="false"
+          name="params"
+          prop="params"
+          size="small"
+        >
+        </m-form-table>
+      </div>
+    </template>
+    <CodeDraftEditor
+      :id="id"
+      :content="codeContent"
+      :editable="editable"
+      :autoSaveDraft="autoSaveDraft"
+      :codeOptions="codeOptions"
+      language="javascript"
+      @save="saveCode"
+      @saveAndClose="saveAndClose"
+      @close="close"
+    ></CodeDraftEditor>
+  </TMagicCard>
+</template>
+<script lang="ts" setup name="MEditorFunctionEditor">
+import { inject, provide, ref, watchEffect } from 'vue';
+
+import { TMagicCard, TMagicInput, tMagicMessage } from '@tmagic/design';
+import { CodeParam, Id } from '@tmagic/schema';
+
+import type { Services } from '../type';
+
+import CodeDraftEditor from './CodeDraftEditor.vue';
+
+const tableConfig = {
+  border: true,
+  enableFullscreen: false,
+  name: 'params',
+  maxHeight: '150px',
+  items: [
+    {
+      type: 'text',
+      label: '参数名',
+      name: 'name',
+    },
+  ],
+};
+
+const props = withDefaults(
+  defineProps<{
+    id: Id;
+    name: string;
+    content: string;
+    editable?: boolean;
+    autoSaveDraft?: boolean;
+    codeOptions?: object;
+  }>(),
+  {
+    editable: true,
+    autoSaveDraft: true,
+  },
+);
+
+const emit = defineEmits(['change', 'field-input']);
+
+const services = inject<Services>('services');
+
+const codeName = ref<string>('');
+const codeContent = ref<string>('');
+const evalRes = ref(true);
+
+provide('mForm', {
+  $emit: emit,
+  setField: () => {},
+});
+
+const tableModel = ref<{ params: CodeParam[] }>();
+watchEffect(() => {
+  codeName.value = props.name;
+  codeContent.value = props.content;
+});
+
+const initTableModel = (): void => {
+  const codeDsl = services?.codeBlockService.getCodeDslSync();
+  if (!codeDsl) return;
+  tableModel.value = {
+    params: codeDsl[props.id]?.params || [],
+  };
+};
+
+initTableModel();
+
+// 保存前钩子
+const beforeSave = (codeValue: string): boolean => {
+  try {
+    // eval检测js代码是否存在语法错误
+    // eslint-disable-next-line no-eval
+    eval(codeValue);
+    return true;
+  } catch (e: any) {
+    tMagicMessage.error(e.stack);
+    return false;
+  }
+};
+
+// 保存代码
+const saveCode = async (codeValue: string): Promise<void> => {
+  if (!props.editable) return;
+  evalRes.value = beforeSave(codeValue);
+  if (evalRes.value) {
+    // 存入dsl
+    await services?.codeBlockService.setCodeDslById(props.id, {
+      name: codeName.value,
+      content: codeValue,
+      params: tableModel.value?.params || [],
+    });
+    tMagicMessage.success('代码保存成功');
+    // 删除草稿
+    services?.codeBlockService.removeCodeDraft(props.id);
+  }
+};
+
+// 保存并关闭
+const saveAndClose = async (codeValue: string): Promise<void> => {
+  await saveCode(codeValue);
+  if (evalRes.value) {
+    close();
+  }
+};
+
+// 关闭弹窗
+const close = (): void => {
+  services?.codeBlockService.setCodeEditorShowStatus(false);
+};
+</script>

package/src/components/Icon.vue

@@ -1,16 +1,18 @@
 <template>
-  <el-icon v-if="!icon" class="magic-editor-icon"><Edit></Edit></el-icon>
-  <el-icon v-else-if="typeof icon === 'string' && icon.startsWith('http')" class="magic-editor-icon"
+  <TMagicIcon v-if="!icon" class="magic-editor-icon"><Edit></Edit></TMagicIcon>
+  <TMagicIcon v-else-if="typeof icon === 'string' && icon.startsWith('http')" class="magic-editor-icon"
     ><img :src="icon"
-  /></el-icon>
+  /></TMagicIcon>
   <i v-else-if="typeof icon === 'string'" class="magic-editor-icon" :class="icon"></i>
-  <el-icon v-else class="magic-editor-icon"><component :is="toRaw(icon)"></component></el-icon>
+  <TMagicIcon v-else class="magic-editor-icon"><component :is="toRaw(icon)"></component></TMagicIcon>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorIcon">
 import { toRaw } from 'vue';
 import { Edit } from '@element-plus/icons-vue';
 
+import { TMagicIcon } from '@tmagic/design';
+
 defineProps<{
   icon?: any;
 }>();