@tmagic/editor 1.3.1 → 1.3.3

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.1",
+  "version": "1.3.3",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -47,13 +47,14 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.3.1",
-    "@tmagic/design": "1.3.1",
-    "@tmagic/form": "1.3.1",
-    "@tmagic/schema": "1.3.1",
-    "@tmagic/stage": "1.3.1",
-    "@tmagic/table": "1.3.1",
-    "@tmagic/utils": "1.3.1",
+    "@tmagic/core": "1.3.3",
+    "@tmagic/dep": "1.3.3",
+    "@tmagic/design": "1.3.3",
+    "@tmagic/form": "1.3.3",
+    "@tmagic/schema": "1.3.3",
+    "@tmagic/stage": "1.3.3",
+    "@tmagic/table": "1.3.3",
+    "@tmagic/utils": "1.3.3",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "events": "^3.3.0",
@@ -61,14 +62,15 @@
     "keycon": "^1.4.0",
     "lodash-es": "^4.17.21",
     "monaco-editor": "^0.41.0",
+    "moveable": "^0.51.1",
     "serialize-javascript": "^6.0.0",
-    "vue": "^3.3.4"
+    "vue": "^3.3.8"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.3.1",
-    "@tmagic/form": "1.3.1",
+    "@tmagic/design": "1.3.3",
+    "@tmagic/form": "1.3.3",
     "monaco-editor": "^0.41.0",
-    "vue": "^3.3.4"
+    "vue": "^3.3.8"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
@@ -76,7 +78,7 @@
     "@types/node": "^15.12.4",
     "@types/serialize-javascript": "^5.0.1",
     "@vitejs/plugin-vue": "^4.2.3",
-    "@vue/compiler-sfc": "^3.3.4",
+    "@vue/compiler-sfc": "^3.3.8",
     "@vue/test-utils": "^2.3.2",
     "rimraf": "^3.0.2",
     "sass": "^1.35.1",

package/src/components/CodeBlockEditor.vue

@@ -1,5 +1,6 @@
 <template>
-  <MFormDrawer
+  <component
+    :is="slideType === 'box' ? MFormBox : MFormDrawer"
     class="m-editor-code-block-editor"
     ref="fomDrawer"
     label-width="80px"
@@ -19,7 +20,7 @@
     <template #left>
       <TMagicButton type="primary" text @click="difVisible = true">查看修改</TMagicButton>
     </template>
-  </MFormDrawer>
+  </component>
 
   <TMagicDialog v-model="difVisible" title="查看修改" fullscreen>
     <div style="display: flex; margin-bottom: 10px">
@@ -50,11 +51,11 @@
 import { computed, inject, onUnmounted, ref } from 'vue';
 
 import { TMagicButton, TMagicDialog, tMagicMessage, tMagicMessageBox, TMagicTag } from '@tmagic/design';
-import { ColumnConfig, FormConfig, FormState, MFormDrawer } from '@tmagic/form';
+import { ColumnConfig, FormConfig, FormState, MFormBox, MFormDrawer } from '@tmagic/form';
 import type { CodeBlockContent } from '@tmagic/schema';
 
 import CodeEditor from '@editor/layouts/CodeEditor.vue';
-import type { Services } from '@editor/type';
+import type { Services, SlideType } from '@editor/type';
 import { getConfig } from '@editor/utils/config';
 
 defineOptions({
@@ -66,6 +67,7 @@ const props = defineProps<{
   disabled?: boolean;
   isDataSource?: boolean;
   dataSourceType?: string;
+  slideType?: SlideType;
 }>();
 
 const emit = defineEmits<{

package/src/fields/DataSourceSelect.vue

@@ -29,9 +29,10 @@ const props = withDefaults(
     FieldProps<{
       type: 'data-source-select';
       name: string;
-      text: string;
-      placeholder: string;
+      text?: string;
+      placeholder?: string;
       dataSourceType?: string;
+      value?: 'id' | 'value';
     }>
   >(),
   {
@@ -44,19 +45,24 @@ const { dataSourceService } = inject<Services>('services') || {};
 const dataSources = computed(() => dataSourceService?.get('dataSources') || []);
 
 const selectConfig = computed<SelectConfig>(() => {
-  const { type, dataSourceType, ...config } = props.config;
+  const { type, dataSourceType, value, ...config } = props.config;
+
+  const valueIsId = props.config.value === 'id';
+
   return {
     ...config,
     type: 'select',
     valueKey: 'dataSourceId',
     options: dataSources.value
-      .filter((ds) => !dataSourceType || ds.type === dataSourceType)
+      .filter((ds) => !props.config.dataSourceType || ds.type === props.config.dataSourceType)
       .map((ds) => ({
-        value: {
-          isBindDataSource: true,
-          dataSourceType: ds.type,
-          dataSourceId: ds.id,
-        },
+        value: valueIsId
+          ? ds.id
+          : {
+              isBindDataSource: true,
+              dataSourceType: ds.type,
+              dataSourceId: ds.id,
+            },
         text: ds.title || ds.id,
       })),
   };

package/src/hooks/index.ts

@@ -19,3 +19,4 @@
 export * from './use-code-block-edit';
 export * from './use-data-source-method';
 export * from './use-stage';
+export * from './use-float-box';

package/src/hooks/use-code-block-edit.ts

@@ -68,6 +68,8 @@ export const useCodeBlockEdit = (codeBlockService?: CodeBlockService) => {
 
     await codeBlockService?.setCodeDslById(codeId.value, values);
 
+    tMagicMessage.success('代码块保存成功');
+
     codeBlockEditor.value?.hide();
   };
 

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

@@ -0,0 +1,153 @@
+import { computed, ComputedRef, inject, nextTick, ref, watch } from 'vue';
+import Moveable from 'moveable';
+
+import { type Services } from '@editor/type';
+
+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 showingBoxKeys = computed(() =>
+    [...(floatBoxStates.value?.keys() ?? [])].filter((key) => floatBoxStates.value?.get(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 dragendHandler = (key: string, e: DragEvent) => {
+    setSlideState(key, {
+      left: e.clientX,
+      top: e.clientY,
+    });
+    showFloatBox(key);
+    isDraging.value = false;
+  };
+
+  document.body.addEventListener('dragover', (e: DragEvent) => {
+    if (!isDraging.value) return;
+    e.preventDefault();
+  });
+
+  const dragstartHandler = () => (isDraging.value = true);
+
+  // 监听 slide 长度变化，更新 ui serice map
+  watch(
+    () => slideKeys.value,
+    () => {
+      services?.uiService.setFloatBox(slideKeys.value);
+    },
+    {
+      deep: true,
+      immediate: true,
+    },
+  );
+
+  return {
+    showFloatBox,
+    closeFloatBox,
+    dragstartHandler,
+    dragendHandler,
+    floatBoxStates,
+    floatBox,
+    showingBoxKeys,
+  };
+};

package/src/index.ts

@@ -40,6 +40,7 @@ import './theme/index.scss';
 
 export type { OnDrag } from 'gesto';
 
+export { DepTargetType } from '@tmagic/dep';
 export type { MoveableOptions } from '@tmagic/stage';
 export * from './type';
 export * from './hooks';

package/src/initService.ts

@@ -1,20 +1,21 @@
-import { onUnmounted, toRaw, watch } from 'vue';
+import { onUnmounted, reactive, toRaw, watch } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
 import type { EventOption } from '@tmagic/core';
-import type { CodeBlockContent, DataSourceSchema, Id, MApp, MNode, MPage } from '@tmagic/schema';
-import { getNodes } from '@tmagic/utils';
-
-import PropsPanel from './layouts/PropsPanel.vue';
-import type { Target } from './services/dep';
+import type { Target } from '@tmagic/dep';
 import {
   createCodeBlockTarget,
   createDataSourceCondTarget,
   createDataSourceMethodTarget,
   createDataSourceTarget,
-} from './utils/dep';
+  DepTargetType,
+} from '@tmagic/dep';
+import type { CodeBlockContent, DataSourceSchema, Id, MApp, MNode, MPage } from '@tmagic/schema';
+import { getNodes } from '@tmagic/utils';
+
+import PropsPanel from './layouts/PropsPanel.vue';
 import { EditorProps } from './editorProps';
-import { DepTargetType, Services } from './type';
+import { Services } from './type';
 
 export declare type LooseRequired<T> = {
   [P in string & keyof T]: T[P];
@@ -270,9 +271,9 @@ export const initServiceEvents = (
   depService.on('collected', collectedHandler);
 
   const initDataSourceDepTarget = (ds: DataSourceSchema) => {
-    depService.addTarget(createDataSourceTarget(ds.id));
-    depService.addTarget(createDataSourceMethodTarget(ds.id));
-    depService.addTarget(createDataSourceCondTarget(ds.id));
+    depService.addTarget(createDataSourceTarget(ds, reactive({})));
+    depService.addTarget(createDataSourceMethodTarget(ds, reactive({})));
+    depService.addTarget(createDataSourceCondTarget(ds, reactive({})));
   };
 
   const rootChangeHandler = async (value: MApp | null, preValue?: MApp | null) => {

package/src/layouts/Framework.vue

@@ -82,8 +82,10 @@ const showSrc = computed(() => uiService?.get('showSrc'));
 const LEFT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorLeftColumnWidthData';
 const RIGHT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorRightColumnWidthData';
 
-const leftColumnWidthCacheData =
+const getLeftColumnWidthCacheData = () =>
   Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_LEFT_COLUMN_WIDTH;
+
+const leftColumnWidthCacheData = getLeftColumnWidthCacheData();
 const RightColumnWidthCacheData =
   Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH;
 
@@ -118,6 +120,13 @@ watch(
   },
 );
 
+watch(
+  () => uiService?.get('hideSlideBar'),
+  (hideSlideBar) => {
+    columnWidth.value.left = hideSlideBar ? 0 : getLeftColumnWidthCacheData();
+  },
+);
+
 const columnWidthChange = (columnW: GetColumnWidth) => {
   columnWidth.value.left = columnW.left;
   columnWidth.value.center = columnW.center;

package/src/layouts/sidebar/Sidebar.vue

@@ -7,6 +7,10 @@
         :key="config.$key ?? index"
         :class="{ 'is-active': activeTabName === config.text }"
         @click="activeTabName = config.text || `${index}`"
+        draggable="true"
+        @dragstart="dragstartHandler"
+        @dragend="dragendHandler(config.$key, $event)"
+        v-show="!floatBoxStates?.get(config.$key)?.status"
       >
         <MIcon v-if="config.icon" :icon="config.icon"></MIcon>
         <div v-if="config.text" class="magic-editor-tab-panel-title">{{ config.text }}</div>
@@ -18,7 +22,12 @@
       :key="config.$key ?? index"
       v-show="activeTabName === config.text"
     >
-      <component v-if="config" :is="config.component" v-bind="config.props || {}" v-on="config?.listeners || {}">
+      <component
+        v-if="config && !floatBoxStates?.get(config.$key)?.status"
+        :is="config.component"
+        v-bind="config.props || {}"
+        v-on="config?.listeners || {}"
+      >
         <template
           #component-list-panel-header
           v-if="config.$key === 'component-list' || config.slots?.componentListPanelHeader"
@@ -80,15 +89,56 @@
       </component>
     </div>
   </div>
+
+  <Teleport to="body">
+    <div class="m-editor-float-box-list">
+      <div
+        v-for="(config, index) in sideBarItems"
+        :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-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>
+  </Teleport>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
-import { Coin, EditPen, Goods, List } from '@element-plus/icons-vue';
+import { computed, inject, ref, watch } from 'vue';
+import { Close, Coin, EditPen, Goods, List } from '@element-plus/icons-vue';
 
 import MIcon from '@editor/components/Icon.vue';
-import type { MenuButton, MenuComponent, SidebarSlots, SideComponent, SideItem } from '@editor/type';
-import { SideBarData } from '@editor/type';
+import { useFloatBox } from '@editor/hooks/use-float-box';
+import type {
+  MenuButton,
+  MenuComponent,
+  Services,
+  SideBarData,
+  SidebarSlots,
+  SideComponent,
+  SideItem,
+} from '@editor/type';
 
 import CodeBlockListPanel from './code-block/CodeBlockListPanel.vue';
 import DataSourceListPanel from './data-source/DataSourceListPanel.vue';
@@ -111,6 +161,8 @@ const props = withDefaults(
   },
 );
 
+const services = inject<Services>('services');
+
 const activeTabName = ref(props.data?.status);
 
 const getItemConfig = (data: SideItem): SideComponent => {
@@ -141,6 +193,11 @@ const getItemConfig = (data: SideItem): SideComponent => {
       text: '代码编辑',
       component: CodeBlockListPanel,
       slots: {},
+      boxComponentConfig: {
+        props: {
+          slideType: 'box',
+        },
+      },
     },
     'data-source': {
       $key: 'data-source',
@@ -149,6 +206,11 @@ const getItemConfig = (data: SideItem): SideComponent => {
       text: '数据源',
       component: DataSourceListPanel,
       slots: {},
+      boxComponentConfig: {
+        props: {
+          slideType: 'box',
+        },
+      },
     },
   };
 
@@ -164,6 +226,29 @@ watch(
   },
 );
 
+const slideKeys = computed(() => sideBarItems.value.map((sideBarItem) => sideBarItem.$key));
+
+const { showFloatBox, closeFloatBox, dragstartHandler, dragendHandler, floatBoxStates, floatBox, showingBoxKeys } =
+  useFloatBox(slideKeys);
+
+watch(
+  () => showingBoxKeys.value.length,
+  () => {
+    const isActiveTabShow = showingBoxKeys.value.some(
+      (key) => activeTabName.value === sideBarItems.value.find((v) => v.$key === key)?.text,
+    );
+    if (!isActiveTabShow && activeTabName.value) return;
+    const nextSlideBarItem = sideBarItems.value.find((sideBarItem) => !showingBoxKeys.value.includes(sideBarItem.$key));
+    if (!nextSlideBarItem) {
+      activeTabName.value = '';
+      services?.uiService.set('hideSlideBar', true);
+      return;
+    }
+    services?.uiService.set('hideSlideBar', false);
+    activeTabName.value = nextSlideBarItem?.text;
+  },
+);
+
 defineExpose({
   activeTabName,
 });

package/src/layouts/sidebar/code-block/CodeBlockList.vue

@@ -44,13 +44,14 @@
 import { computed, inject, ref } from 'vue';
 import { Close, Edit, View } from '@element-plus/icons-vue';
 
+import { DepTargetType } from '@tmagic/dep';
 import { tMagicMessage, tMagicMessageBox, TMagicTooltip, TMagicTree } from '@tmagic/design';
 import type { Id } from '@tmagic/schema';
 
 import Icon from '@editor/components/Icon.vue';
 import AppManageIcon from '@editor/icons/AppManageIcon.vue';
 import CodeIcon from '@editor/icons/CodeIcon.vue';
-import { CodeBlockListSlots, CodeDeleteErrorType, CodeDslItem, DepTargetType, Services } from '@editor/type';
+import { type CodeBlockListSlots, CodeDeleteErrorType, type CodeDslItem, type Services } from '@editor/type';
 
 defineSlots<CodeBlockListSlots>();
 

package/src/layouts/sidebar/code-block/CodeBlockListPanel.vue

@@ -16,16 +16,16 @@
         <slot name="code-block-panel-tool" :id="id" :data="data"></slot>
       </template>
     </CodeBlockList>
-
-    <!-- 代码块编辑区 -->
-    <CodeBlockEditor
-      v-if="codeConfig"
-      ref="codeBlockEditor"
-      :disabled="!editable"
-      :content="codeConfig"
-      @submit="submitCodeBlockHandler"
-    ></CodeBlockEditor>
   </TMagicScrollbar>
+  <!-- 代码块编辑区 -->
+  <CodeBlockEditor
+    v-if="codeConfig"
+    ref="codeBlockEditor"
+    :disabled="!editable"
+    :content="codeConfig"
+    :slideType="slideType"
+    @submit="submitCodeBlockHandler"
+  ></CodeBlockEditor>
 </template>
 
 <script setup lang="ts">
@@ -37,7 +37,7 @@ import type { Id } from '@tmagic/schema';
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
 import SearchInput from '@editor/components/SearchInput.vue';
 import { useCodeBlockEdit } from '@editor/hooks/use-code-block-edit';
-import type { CodeBlockListPanelSlots, CodeDeleteErrorType, Services } from '@editor/type';
+import type { CodeBlockListPanelSlots, CodeDeleteErrorType, Services, SlideType } from '@editor/type';
 
 import CodeBlockList from './CodeBlockList.vue';
 
@@ -49,6 +49,7 @@ defineOptions({
 
 defineProps<{
   customError?: (id: Id, errorType: CodeDeleteErrorType) => any;
+  slideType?: SlideType;
 }>();
 
 const { codeBlockService } = inject<Services>('services') || {};

package/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue

@@ -1,5 +1,6 @@
 <template>
-  <MFormDrawer
+  <component
+    :is="slideType === 'box' ? MFormBox : MFormDrawer"
     ref="fomDrawer"
     label-width="80px"
     :close-on-press-escape="false"
@@ -10,17 +11,17 @@
     :disabled="disabled"
     @submit="submitHandler"
     @error="errorHandler"
-  ></MFormDrawer>
+  ></component>
 </template>
 
 <script setup lang="ts">
 import { computed, inject, ref, watchEffect } from 'vue';
 
 import { tMagicMessage } from '@tmagic/design';
-import { FormConfig, MFormDrawer } from '@tmagic/form';
+import { FormConfig, MFormBox, MFormDrawer } from '@tmagic/form';
 import { DataSourceSchema } from '@tmagic/schema';
 
-import type { Services } from '@editor/type';
+import type { Services, SlideType } from '@editor/type';
 
 defineOptions({
   name: 'MEditorDataSourceConfigPanel',
@@ -30,6 +31,7 @@ const props = defineProps<{
   title?: string;
   values: any;
   disabled: boolean;
+  slideType?: SlideType;
 }>();
 
 const emit = defineEmits(['submit']);