@tmagic/editor 1.3.13 → 1.3.15

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.13",
+  "version": "1.3.15",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -42,14 +42,14 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.3.1",
-    "@tmagic/core": "1.3.13",
-    "@tmagic/dep": "1.3.13",
-    "@tmagic/design": "1.3.13",
-    "@tmagic/form": "1.3.13",
-    "@tmagic/schema": "1.3.13",
-    "@tmagic/stage": "1.3.13",
-    "@tmagic/table": "1.3.13",
-    "@tmagic/utils": "1.3.13",
+    "@tmagic/core": "1.3.15",
+    "@tmagic/dep": "1.3.15",
+    "@tmagic/design": "1.3.15",
+    "@tmagic/form": "1.3.15",
+    "@tmagic/schema": "1.3.15",
+    "@tmagic/stage": "1.3.15",
+    "@tmagic/table": "1.3.15",
+    "@tmagic/utils": "1.3.15",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "emmet-monaco-es": "^5.3.0",
@@ -63,8 +63,8 @@
     "vue": "^3.3.8"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.3.13",
-    "@tmagic/form": "1.3.13",
+    "@tmagic/design": "1.3.15",
+    "@tmagic/form": "1.3.15",
     "monaco-editor": "^0.41.0",
     "vue": "^3.3.8"
   },

package/src/components/ToolButton.vue

@@ -39,7 +39,12 @@
       </template>
     </TMagicDropdown>
 
-    <component v-else-if="data.type === 'component'" v-bind="data.props || {}" :is="data.component"></component>
+    <component
+      v-else-if="data.type === 'component'"
+      v-bind="data.props || {}"
+      v-on="(data as MenuComponent).listeners || {}"
+      :is="data.component"
+    ></component>
   </div>
 </template>
 

package/src/fields/CodeSelect.vue

@@ -12,7 +12,8 @@ import { isEmpty } from 'lodash-es';
 
 import { TMagicCard } from '@tmagic/design';
 import type { FieldProps } from '@tmagic/form';
-import { HookType } from '@tmagic/schema';
+import { FormState } from '@tmagic/form';
+import { HookCodeType, HookType } from '@tmagic/schema';
 
 import type { Services } from '@editor/type';
 
@@ -38,13 +39,61 @@ const codeConfig = computed(() => ({
   name: 'hookData',
   enableToggleMode: false,
   expandAll: true,
-  titleKey: 'codeId',
+  title: (mForm: FormState, { model, index }: any) => {
+    if (model.codeType === HookCodeType.DATA_SOURCE_METHOD) {
+      if (Array.isArray(model.codeId)) {
+        if (model.codeId.length < 2) {
+          return index;
+        }
+
+        const ds = services?.dataSourceService.getDataSourceById(model.codeId[0]);
+        return `${ds?.title} / ${model.codeId[1]}`;
+      }
+
+      return Array.isArray(model.codeId) ? model.codeId.join('/') : index;
+    }
+    return model.codeId || index;
+  },
   items: [
     {
-      type: 'code-select-col',
-      name: 'codeId',
-      labelWidth: 0,
-      disabled: () => !services?.codeBlockService.getEditStatus(),
+      type: 'row',
+      items: [
+        {
+          type: 'select',
+          name: 'codeType',
+          span: 8,
+          options: [
+            { value: HookCodeType.CODE, text: '代码块' },
+            { value: HookCodeType.DATA_SOURCE_METHOD, text: '数据源方法' },
+          ],
+          defaultValue: 'code',
+          onChange: (mForm: FormState, v: HookCodeType, { model }: any) => {
+            if (v === HookCodeType.DATA_SOURCE_METHOD) {
+              model.codeId = [];
+            } else {
+              model.codeId = '';
+            }
+
+            return v;
+          },
+        },
+        {
+          type: 'code-select-col',
+          name: 'codeId',
+          span: 16,
+          labelWidth: 0,
+          display: (mForm: FormState, { model }: any) => model.codeType !== HookCodeType.DATA_SOURCE_METHOD,
+          notEditable: () => !services?.codeBlockService.getEditStatus(),
+        },
+        {
+          type: 'data-source-method-select',
+          name: 'codeId',
+          span: 16,
+          labelWidth: 0,
+          display: (mForm: FormState, { model }: any) => model.codeType === HookCodeType.DATA_SOURCE_METHOD,
+          notEditable: () => !services?.dataSourceService.get('editable'),
+        },
+      ],
     },
   ],
 }));

package/src/fields/CodeSelectCol.vue

@@ -10,13 +10,14 @@
         @change="onParamsChangeHandler"
       ></m-form-container>
       <!-- 查看/编辑按钮 -->
-      <Icon v-if="model[name]" class="icon" :icon="!disabled ? Edit : View" @click="editCode(model[name])"></Icon>
+      <Icon v-if="model[name]" class="icon" :icon="!notEditable ? Edit : View" @click="editCode(model[name])"></Icon>
     </div>
 
     <!-- 参数填写框 -->
     <CodeParams
       v-if="paramsConfig.length"
       name="params"
+      :key="model[name]"
       :model="model"
       :size="size"
       :params-config="paramsConfig"
@@ -26,19 +27,19 @@
     <CodeBlockEditor
       ref="codeBlockEditor"
       v-if="codeConfig"
-      :disabled="disabled"
+      :disabled="notEditable"
       :content="codeConfig"
       @submit="submitCodeBlockHandler"
     ></CodeBlockEditor>
   </div>
 </template>
 
-<script lang="ts" setup name="">
+<script lang="ts" setup>
 import { computed, inject, ref, watch } from 'vue';
 import { Edit, View } from '@element-plus/icons-vue';
 import { isEmpty, map } from 'lodash-es';
 
-import { createValues, FieldProps } from '@tmagic/form';
+import { createValues, type FieldProps, filterFunction, type FormState } from '@tmagic/form';
 import type { Id } from '@tmagic/schema';
 
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
@@ -51,9 +52,11 @@ defineOptions({
   name: 'MEditorCodeSelectCol',
 });
 
+const mForm = inject<FormState | undefined>('mForm');
 const services = inject<Services>('services');
 const emit = defineEmits(['change']);
 
+const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
 const props = withDefaults(defineProps<FieldProps<CodeSelectColConfig>>(), {
   disabled: false,
 });
@@ -91,6 +94,7 @@ watch(
 const selectConfig = {
   type: 'select',
   name: props.name,
+  disable: props.disabled,
   options: () => {
     if (codeDsl.value) {
       return map(codeDsl.value, (value, key) => ({

package/src/fields/DataSourceMethodSelect.vue

@@ -7,7 +7,12 @@
         :model="model"
         @change="onChangeHandler"
       ></m-form-container>
-      <Icon v-if="model[name]" class="icon" :icon="!disabled ? Edit : View" @click="editCodeHandler"></Icon>
+      <Icon
+        v-if="model[name] && isCustomMethod"
+        class="icon"
+        :icon="!notEditable ? Edit : View"
+        @click="editCodeHandler"
+      ></Icon>
     </div>
 
     <CodeParams
@@ -23,7 +28,7 @@
     <CodeBlockEditor
       ref="codeBlockEditor"
       v-if="codeConfig"
-      :disabled="disabled"
+      :disabled="notEditable"
       :content="codeConfig"
       @submit="submitCodeBlockHandler"
     ></CodeBlockEditor>
@@ -34,7 +39,7 @@
 import { computed, inject, ref } from 'vue';
 import { Edit, View } from '@element-plus/icons-vue';
 
-import { createValues, FieldProps } from '@tmagic/form';
+import { createValues, type FieldProps, filterFunction, type FormState } from '@tmagic/form';
 import type { CodeBlockContent, Id } from '@tmagic/schema';
 
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
@@ -47,6 +52,7 @@ defineOptions({
   name: 'MEditorDataSourceMethodSelect',
 });
 
+const mForm = inject<FormState | undefined>('mForm');
 const services = inject<Services>('services');
 const emit = defineEmits(['change']);
 
@@ -56,14 +62,24 @@ const props = withDefaults(defineProps<FieldProps<DataSourceMethodSelectConfig>>
   disabled: false,
 });
 
+const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
+
 const dataSources = computed(() => dataSourceService?.get('dataSources'));
 
-const getParamItemsConfig = ([dataSourceId, medthodName]: [Id, string] = ['', '']): CodeParamStatement[] => {
+const isCustomMethod = computed(() => {
+  const [id, name] = props.model[props.name];
+
+  const dataSource = dataSourceService?.getDataSourceById(id);
+
+  return Boolean(dataSource?.methods.find((method) => method.name === name));
+});
+
+const getParamItemsConfig = ([dataSourceId, methodName]: [Id, string] = ['', '']): CodeParamStatement[] => {
   if (!dataSourceId) return [];
 
   const paramStatements = dataSources.value
     ?.find((item) => item.id === dataSourceId)
-    ?.methods?.find((item) => item.name === medthodName)?.params;
+    ?.methods?.find((item) => item.name === methodName)?.params;
 
   if (!paramStatements) return [];
 
@@ -107,6 +123,7 @@ const cascaderConfig = computed(() => ({
   type: 'cascader',
   name: props.name,
   options: methodsOptions.value,
+  disable: props.disabled,
   onChange: (formState: any, dataSourceMethod: [Id, string]) => {
     setParamsConfig(dataSourceMethod, formState);
 

package/src/fields/EventSelect.vue

@@ -171,7 +171,7 @@ const codeActionConfig = computed(() => {
     type: 'code-select-col',
     text: '代码块',
     name: 'codeId',
-    disabled: () => !codeBlockService?.getEditStatus(),
+    notEditable: () => !codeBlockService?.getEditStatus(),
     display: (mForm, { model }) => model.actionType === ActionType.CODE,
   };
   return { ...defaultCodeActionConfig, ...props.config.codeActionConfig };
@@ -183,6 +183,7 @@ const dataSourceActionConfig = computed(() => {
     type: 'data-source-method-select',
     text: '数据源方法',
     name: 'dataSourceMethod',
+    notEditable: () => !services?.dataSourceService.get('editable'),
     display: (mForm, { model }) => model.actionType === ActionType.DATA_SOURCE,
   };
   return { ...defaultDataSourceActionConfig, ...props.config.dataSourceActionConfig };

package/src/hooks/use-float-box.ts

@@ -1,124 +1,40 @@
-import { computed, ComputedRef, inject, nextTick, ref, watch } from 'vue';
-import Moveable from 'moveable';
+import { computed, ComputedRef, ref, watch } from 'vue';
 
-import { type Services } from '@editor/type';
+interface State {
+  status: boolean;
+  top: number;
+  left: number;
+}
 
 export const useFloatBox = (slideKeys: ComputedRef<string[]>) => {
-  const services = inject<Services>('services');
-  const moveable = ref<Moveable>();
-  const floatBox = ref<HTMLElement[]>();
-
-  const floatBoxStates = computed(() => services?.uiService.get('floatBox'));
-
-  const curKey = ref('');
-  const target = computed(() =>
-    floatBox.value
-      ? floatBox.value.find((item) => item.classList.contains(`m-editor-float-box-${curKey.value}`))
-      : undefined,
+  const floatBoxStates = ref<{
+    [key in (typeof slideKeys.value)[number]]: State;
+  }>(
+    slideKeys.value.reduce(
+      (total, cur) => ({
+        ...total,
+        [cur]: {
+          status: false,
+          top: 0,
+          left: 0,
+        },
+      }),
+      {},
+    ),
   );
 
   const showingBoxKeys = computed(() =>
-    [...(floatBoxStates.value?.keys() ?? [])].filter((key) => floatBoxStates.value?.get(key)?.status),
+    Object.keys(floatBoxStates.value).filter((key) => floatBoxStates.value[key].status),
   );
-
   const isDraging = ref(false);
 
-  const showFloatBox = async (key: string) => {
-    const curBoxStatus = floatBoxStates.value?.get(curKey.value)?.status;
-    if (curKey.value === key && curBoxStatus) return;
-    curKey.value = key;
-    setSlideState(key, {
-      zIndex: getMaxZIndex() + 1,
-      status: true,
-    });
-
-    await nextTick();
-    if (moveable.value) {
-      moveable.value.target = target.value;
-      moveable.value.dragTarget = getDragTarget();
-      moveable.value.updateRect();
-    } else {
-      initFloatBoxMoveable();
-    }
-  };
-
-  const setSlideState = (key: string, data: Record<string, string | number | boolean>) => {
-    const slideState = floatBoxStates.value?.get(key);
-    if (!slideState) return;
-    floatBoxStates.value?.set(key, {
-      ...slideState,
-      ...data,
-    });
-  };
-
-  const getDragTarget = (key?: string) => `.m-editor-float-box-header-${key ?? curKey.value}`;
-
-  const closeFloatBox = (key: string) => {
-    setSlideState(key, {
-      status: false,
-    });
-
-    // 如果只有一个，关掉后需要销毁moveable实例
-    if (!floatBoxStates.value?.values) return;
-    const keys = [...floatBoxStates.value?.keys()];
-    const values = [...floatBoxStates.value?.values()];
-    const lastFloatBoxLen = values.filter((state) => state.status).length;
-    if (lastFloatBoxLen === 0) {
-      moveable.value?.destroy();
-      moveable.value = undefined;
-      return;
-    }
-
-    // 如果关掉的 box 是最大的，需要选中下面的一层
-    if (key === curKey.value) {
-      // 查找显示的最大 zIndex 对应的 index
-      const zIndexList = values.filter((item) => item.status).map((item) => item.zIndex);
-      const maxZIndex = Math.max(...zIndexList);
-      const key = keys.find((key) => floatBoxStates.value?.get(key)?.zIndex === maxZIndex);
-      if (!key) return;
-      showFloatBox(key);
-    }
-  };
-
-  const getMaxZIndex = () => {
-    if (!floatBoxStates.value?.values()) return 0;
-    const list = [...floatBoxStates.value?.values()].map((state) => state.zIndex);
-    return Math.max(...list) ?? 0;
-  };
-
-  const initFloatBoxMoveable = () => {
-    const dragTarget = getDragTarget();
-    moveable.value = new Moveable(document.body, {
-      target: target.value,
-      draggable: true,
-      resizable: true,
-      edge: true,
-      keepRatio: false,
-      origin: false,
-      snappable: true,
-      dragTarget,
-      dragTargetSelf: false,
-      linePadding: 10,
-      controlPadding: 10,
-      elementGuidelines: [...(floatBoxStates.value?.keys() ?? [])].map((key) => getDragTarget(key)),
-      bounds: { left: 0, top: 0, right: 0, bottom: 0, position: 'css' },
-    });
-    moveable.value.on('drag', (e) => {
-      e.target.style.transform = e.transform;
-    });
-    moveable.value.on('resize', (e) => {
-      e.target.style.width = `${e.width}px`;
-      e.target.style.height = `${e.height}px`;
-      e.target.style.transform = e.drag.transform;
-    });
-  };
-
+  const dragstartHandler = () => (isDraging.value = true);
   const dragendHandler = (key: string, e: DragEvent) => {
-    setSlideState(key, {
+    floatBoxStates.value[key] = {
       left: e.clientX,
       top: e.clientY,
-    });
-    showFloatBox(key);
+      status: true,
+    };
     isDraging.value = false;
   };
 
@@ -127,13 +43,17 @@ export const useFloatBox = (slideKeys: ComputedRef<string[]>) => {
     e.preventDefault();
   });
 
-  const dragstartHandler = () => (isDraging.value = true);
-
-  // 监听 slide 长度变化，更新 ui serice map
   watch(
     () => slideKeys.value,
     () => {
-      services?.uiService.setFloatBox(slideKeys.value);
+      for (const key in slideKeys.value) {
+        if (floatBoxStates.value[key]) continue;
+        floatBoxStates.value[key] = {
+          status: false,
+          top: 0,
+          left: 0,
+        };
+      }
     },
     {
       deep: true,
@@ -142,12 +62,9 @@ export const useFloatBox = (slideKeys: ComputedRef<string[]>) => {
   );
 
   return {
-    showFloatBox,
-    closeFloatBox,
     dragstartHandler,
     dragendHandler,
     floatBoxStates,
-    floatBox,
     showingBoxKeys,
   };
 };

package/src/layouts/page-bar/PageBar.vue

@@ -123,7 +123,7 @@ watch(
 
 watch(active, (active) => {
   if (active === NodeType.PAGE) {
-    if (!activePage.value) {
+    if (!activePage.value && !pageList.value.length) {
       editorService?.selectRoot();
       return;
     }
@@ -132,11 +132,12 @@ watch(active, (active) => {
   }
 
   if (active === NodeType.PAGE_FRAGMENT) {
-    if (!activePageFragment.value) {
+    // 之前没有选中过页面片并且当前没有页面片
+    if (!activePageFragment.value && !pageFragmentList.value.length) {
       editorService?.selectRoot();
       return;
     }
-    switchPage(activePageFragment.value);
+    switchPage(activePageFragment.value || pageFragmentList.value[0].id);
   }
 });
 

package/src/layouts/sidebar/Sidebar.vue

@@ -4,7 +4,7 @@
       <div
         class="m-editor-sidebar-header-item"
         v-for="(config, index) in sideBarItems"
-        v-show="!floatBoxStates?.get(config.$key)?.status"
+        v-show="!floatBoxStates[config.$key]?.status"
         draggable="true"
         :key="config.$key ?? index"
         :class="{ 'is-active': activeTabName === config.text }"
@@ -23,7 +23,7 @@
       v-show="activeTabName === config.text"
     >
       <component
-        v-if="config && !floatBoxStates?.get(config.$key)?.status"
+        v-if="config && !floatBoxStates[config.$key]?.status"
         :is="config.component"
         v-bind="config.props || {}"
         v-on="config?.listeners || {}"
@@ -96,43 +96,37 @@
   </div>
 
   <Teleport to="body">
-    <div class="m-editor-float-box-list">
-      <div
-        v-for="(config, index) in sideBarItems"
+    <template v-for="(config, index) in sideBarItems">
+      <FloatingBox
         :key="config.$key ?? index"
-        ref="floatBox"
-        :class="['m-editor-float-box', `m-editor-float-box-${config.$key}`]"
-        :style="{
-          left: `${floatBoxStates?.get(config.$key)?.left}px`,
-          top: `${floatBoxStates?.get(config.$key)?.top}px`,
-          zIndex: floatBoxStates?.get(config.$key)?.zIndex,
+        v-if="floatBoxStates[config.$key]?.status"
+        v-model:visible="floatBoxStates[config.$key].status"
+        :title="config.text"
+        :position="{
+          left: floatBoxStates[config.$key].left,
+          top: floatBoxStates[config.$key].top,
         }"
-        v-show="floatBoxStates?.get(config.$key)?.status"
       >
-        <div
-          :class="['m-editor-float-box-header', `m-editor-float-box-header-${config.$key}`]"
-          @click="showFloatBox(config.$key)"
-        >
-          <div>{{ config.text }}</div>
-          <MIcon class="m-editor-float-box-close" :icon="Close" @click.stop="closeFloatBox(config.$key)"></MIcon>
-        </div>
-        <div class="m-editor-float-box-body">
-          <component
-            v-if="config && floatBoxStates?.get(config.$key)?.status"
-            :is="config.boxComponentConfig?.component || config.component"
-            v-bind="config.boxComponentConfig?.props || config.props || {}"
-            v-on="config?.listeners || {}"
-          />
-        </div>
-      </div>
-    </div>
+        <template #body>
+          <div class="m-editor-slide-list-box">
+            <component
+              v-if="config && floatBoxStates[config.$key].status"
+              :is="config.boxComponentConfig?.component || config.component"
+              v-bind="config.boxComponentConfig?.props || config.props || {}"
+              v-on="config?.listeners || {}"
+            />
+          </div>
+        </template>
+      </FloatingBox>
+    </template>
   </Teleport>
 </template>
 
 <script setup lang="ts">
 import { computed, inject, ref, watch } from 'vue';
-import { Close, Coin, EditPen, Goods, List } from '@element-plus/icons-vue';
+import { Coin, EditPen, Goods, List } from '@element-plus/icons-vue';
 
+import FloatingBox from '@editor/components/FloatingBox.vue';
 import MIcon from '@editor/components/Icon.vue';
 import { useFloatBox } from '@editor/hooks/use-float-box';
 import type {
@@ -200,11 +194,6 @@ const getItemConfig = (data: SideItem): SideComponent => {
       text: '代码编辑',
       component: CodeBlockListPanel,
       slots: {},
-      boxComponentConfig: {
-        props: {
-          slideType: 'box',
-        },
-      },
     },
     'data-source': {
       $key: 'data-source',
@@ -213,11 +202,6 @@ const getItemConfig = (data: SideItem): SideComponent => {
       text: '数据源',
       component: DataSourceListPanel,
       slots: {},
-      boxComponentConfig: {
-        props: {
-          slideType: 'box',
-        },
-      },
     },
   };
 
@@ -235,8 +219,7 @@ watch(
 
 const slideKeys = computed(() => sideBarItems.value.map((sideBarItem) => sideBarItem.$key));
 
-const { showFloatBox, closeFloatBox, dragstartHandler, dragendHandler, floatBoxStates, floatBox, showingBoxKeys } =
-  useFloatBox(slideKeys);
+const { dragstartHandler, dragendHandler, floatBoxStates, showingBoxKeys } = useFloatBox(slideKeys);
 
 watch(
   () => showingBoxKeys.value.length,

package/src/layouts/sidebar/layer/LayerPanel.vue

@@ -14,7 +14,7 @@
       @node-dragstart="handleDragStart"
       @node-dragleave="handleDragLeave"
       @node-dragend="handleDragEnd"
-      @node-contextmenu="nodeContentmenuHandler"
+      @node-contextmenu="nodeContentMenuHandler"
       @node-mouseenter="mouseenterHandler"
       @node-click="nodeClickHandler"
     >
@@ -113,7 +113,7 @@ const { handleDragStart, handleDragEnd, handleDragLeave, handleDragOver } = useD
 const {
   menu,
   nodeClickHandler,
-  nodeContentmenuHandler,
+  nodeContentMenuHandler,
   highlightHandler: mouseenterHandler,
 } = useClick(services, isCtrlKeyDown, nodeStatusMap);
 </script>

package/src/layouts/sidebar/layer/use-click.ts

@@ -94,7 +94,7 @@ export const useClick = (
 
     nodeClickHandler,
 
-    nodeContentmenuHandler(event: MouseEvent, data: TreeNodeData) {
+    nodeContentMenuHandler(event: MouseEvent, data: TreeNodeData) {
       event.preventDefault();
 
       const nodes = services?.editorService.get('nodes') || [];

package/src/layouts/sidebar/layer/use-node-status.ts

@@ -1,7 +1,7 @@
 import { computed, ref, watch } from 'vue';
 
 import type { Id, MNode, MPage, MPageFragment } from '@tmagic/schema';
-import { getNodePath } from '@tmagic/utils';
+import { getNodePath, isPage, isPageFragment } from '@tmagic/utils';
 
 import { LayerNodeStatus, Services } from '@editor/type';
 import { traverseNode } from '@editor/utils';
@@ -48,13 +48,14 @@ export const useNodeStatus = (services: Services | undefined) => {
 
   // 切换页面或者新增页面，重新生成节点状态
   watch(
-    page,
-    (page) => {
-      if (!page) {
+    () => page.value?.id,
+    (pageId) => {
+      if (!pageId) {
         return;
       }
+
       // 生成节点状态
-      nodeStatusMaps.value.set(page.id, createPageNodeStatus(page, nodeStatusMaps.value.get(page.id)));
+      nodeStatusMaps.value.set(pageId, createPageNodeStatus(page.value!, nodeStatusMaps.value.get(pageId)));
     },
     {
       immediate: true,
@@ -85,6 +86,8 @@ export const useNodeStatus = (services: Services | undefined) => {
 
   services?.editorService.on('add', (newNodes: MNode[]) => {
     newNodes.forEach((node) => {
+      if (isPage(node) || isPageFragment(node)) return;
+
       traverseNode(node, (node: MNode) => {
         nodeStatusMap.value?.set(node.id, {
           visible: true,