@tmagic/editor 1.5.0 → 1.5.2

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

@@ -24,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { computed, inject, nextTick, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue';
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue';
 import Sortable, { type SortableEvent } from 'sortablejs';
 
@@ -46,7 +46,7 @@ const services = inject<Services>('services');
 const editorService = services?.editorService;
 const uiService = services?.uiService;
 
-const itemsContainer = ref<HTMLElement>();
+const itemsContainer = useTemplateRef<HTMLElement>('itemsContainer');
 const canScroll = ref(false);
 
 const showAddPageButton = computed(() => uiService?.get('showAddPageButton'));
@@ -75,7 +75,7 @@ const resizeObserver = new ResizeObserver(() => {
   setCanScroll();
 });
 
-const pageBar = ref<HTMLDivElement>();
+const pageBar = useTemplateRef<HTMLDivElement>('pageBar');
 onMounted(() => {
   pageBar.value && resizeObserver.observe(pageBar.value);
 });

package/src/layouts/props-panel/FormPanel.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="m-editor-props-form-panel">
+    <slot name="props-form-panel-header"></slot>
+
+    <TMagicScrollbar>
+      <MForm
+        ref="configForm"
+        :class="propsPanelSize"
+        :popper-class="`m-editor-props-panel-popper ${propsPanelSize}`"
+        :label-width="labelWidth"
+        :label-position="labelPosition"
+        :size="propsPanelSize"
+        :init-values="values"
+        :config="config"
+        :extend-state="extendState"
+        @change="submit"
+        @error="errorHandler"
+      ></MForm>
+    </TMagicScrollbar>
+
+    <TMagicButton
+      v-if="!disabledShowSrc"
+      class="m-editor-props-panel-src-icon"
+      circle
+      title="源码"
+      :type="showSrc ? 'primary' : ''"
+      @click="showSrc = !showSrc"
+    >
+      <MIcon :icon="DocumentIcon"></MIcon>
+    </TMagicButton>
+
+    <CodeEditor
+      v-if="showSrc"
+      class="m-editor-props-panel-src-code"
+      :height="`${editorContentHeight}px`"
+      :init-values="codeValueKey ? values[codeValueKey] : values"
+      :options="codeOptions"
+      :parse="true"
+      @save="saveCode"
+    ></CodeEditor>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, getCurrentInstance, inject, onMounted, ref, useTemplateRef, watchEffect } from 'vue';
+import { Document as DocumentIcon } from '@element-plus/icons-vue';
+
+import { TMagicButton, TMagicScrollbar } from '@tmagic/design';
+import type { ContainerChangeEventData, FormConfig, FormState, FormValue } from '@tmagic/form';
+import { MForm } from '@tmagic/form';
+
+import MIcon from '@editor/components/Icon.vue';
+import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height';
+import type { Services } from '@editor/type';
+
+import CodeEditor from '../CodeEditor.vue';
+
+defineSlots<{
+  'props-form-panel-header'(props: {}): any;
+}>();
+
+defineOptions({
+  name: 'MEditorFormPanel',
+});
+
+const props = defineProps<{
+  config: FormConfig;
+  values: FormValue;
+  disabledShowSrc?: boolean;
+  labelWidth?: string;
+  codeValueKey?: string;
+  labelPosition?: string;
+  extendState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
+}>();
+
+const emit = defineEmits<{
+  submit: [values: any, eventData?: ContainerChangeEventData];
+  'submit-error': [e: any];
+  'form-error': [e: any];
+  mounted: [internalInstance: any];
+}>();
+
+const services = inject<Services>('services');
+const codeOptions = inject('codeOptions', {});
+
+const showSrc = ref(false);
+const propsPanelSize = computed(() => services?.uiService.get('propsPanelSize') || 'small');
+const { height: editorContentHeight } = useEditorContentHeight();
+const stage = computed(() => services?.editorService.get('stage'));
+
+const configForm = useTemplateRef<InstanceType<typeof MForm>>('configForm');
+
+watchEffect(() => {
+  if (configForm.value) {
+    configForm.value.formState.stage = stage.value;
+    configForm.value.formState.services = services;
+  }
+});
+
+const internalInstance = getCurrentInstance();
+onMounted(() => {
+  emit('mounted', internalInstance);
+});
+
+const submit = async (v: FormValue, eventData: ContainerChangeEventData) => {
+  try {
+    const values = await configForm.value?.submitForm();
+    emit('submit', values, eventData);
+  } catch (e: any) {
+    emit('submit-error', e);
+  }
+};
+
+const errorHandler = (e: any) => {
+  emit('form-error', e);
+};
+
+const saveCode = (values: any) => {
+  emit('submit', props.codeValueKey ? { [props.codeValueKey]: values } : values);
+};
+
+defineExpose({ configForm, submit });
+</script>

package/src/layouts/props-panel/PropsPanel.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="m-editor-props-panel" v-show="nodes.length === 1">
+    <slot name="props-panel-header"></slot>
+    <FormPanel
+      ref="propertyFormPanel"
+      class="m-editor-props-property-panel"
+      :class="{ 'show-style-panel': showStylePanel }"
+      :config="curFormConfig"
+      :values="values"
+      :disabledShowSrc="disabledShowSrc"
+      :extendState="extendState"
+      @submit="submit"
+      @submit-error="errorHandler"
+      @form-error="errorHandler"
+      @mounted="mountedHandler"
+    ></FormPanel>
+
+    <FormPanel
+      v-if="showStylePanel"
+      class="m-editor-props-style-panel"
+      label-position="top"
+      code-value-key="style"
+      :config="styleFormConfig"
+      :values="values"
+      :disabledShowSrc="disabledShowSrc"
+      :extendState="extendState"
+      @submit="submit"
+      @submit-error="errorHandler"
+      @form-error="errorHandler"
+    >
+      <template #props-form-panel-header>
+        <div class="m-editor-props-style-panel-title">
+          <span>样式</span>
+          <div>
+            <TMagicButton link size="small" @click="closeStylePanelHandler"><MIcon :icon="Close"></MIcon></TMagicButton>
+          </div>
+        </div>
+      </template>
+    </FormPanel>
+
+    <TMagicButton
+      v-if="!showStylePanel"
+      class="m-editor-props-panel-style-icon"
+      circle
+      :type="showStylePanel ? 'primary' : ''"
+      @click="showStylePanelHandler"
+    >
+      <MIcon :icon="Sugar"></MIcon>
+    </TMagicButton>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, onBeforeUnmount, ref, useTemplateRef, watchEffect } from 'vue';
+import { Close, Sugar } from '@element-plus/icons-vue';
+
+import type { MNode } from '@tmagic/core';
+import { TMagicButton } from '@tmagic/design';
+import type { ContainerChangeEventData, FormState, FormValue } from '@tmagic/form';
+
+import MIcon from '@editor/components/Icon.vue';
+import type { PropsPanelSlots, Services } from '@editor/type';
+import { styleTabConfig } from '@editor/utils';
+
+import FormPanel from './FormPanel.vue';
+import { useStylePanel } from './use-style-panel';
+
+defineSlots<PropsPanelSlots>();
+
+defineOptions({
+  name: 'MEditorPropsPanel',
+});
+
+defineProps<{
+  disabledShowSrc?: boolean;
+  extendState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
+}>();
+
+const emit = defineEmits<{
+  'submit-error': [e: any];
+  'form-error': [e: any];
+  mounted: [internalInstance: InstanceType<typeof FormPanel>];
+}>();
+
+const services = inject<Services>('services');
+
+const values = ref<FormValue>({});
+// ts类型应该是FormConfig， 但是打包时会出错，所以暂时用any
+const curFormConfig = ref<any>([]);
+const node = computed(() => services?.editorService.get('node'));
+const nodes = computed(() => services?.editorService.get('nodes') || []);
+
+const styleFormConfig = [
+  {
+    tabPosition: 'right',
+    items: styleTabConfig.items,
+  },
+];
+
+const init = async () => {
+  if (!node.value) {
+    curFormConfig.value = [];
+    return;
+  }
+
+  const type = node.value.type || (node.value.items ? 'container' : 'text');
+  curFormConfig.value = (await services?.propsService.getPropsConfig(type)) || [];
+  values.value = node.value;
+};
+
+watchEffect(init);
+services?.propsService.on('props-configs-change', init);
+
+onBeforeUnmount(() => {
+  services?.propsService.off('props-configs-change', init);
+});
+
+const submit = async (v: MNode, eventData?: ContainerChangeEventData) => {
+  try {
+    if (!v.id) {
+      v.id = values.value.id;
+    }
+    services?.editorService.update(v, { changeRecords: eventData?.changeRecords });
+  } catch (e: any) {
+    emit('submit-error', e);
+  }
+};
+
+const errorHandler = (e: any) => {
+  emit('form-error', e);
+};
+
+const mountedHandler = (e: InstanceType<typeof FormPanel>) => {
+  emit('mounted', e);
+};
+
+const { showStylePanel, showStylePanelHandler, closeStylePanelHandler } = useStylePanel(services);
+
+const propertyFormPanelRef = useTemplateRef<InstanceType<typeof FormPanel>>('propertyFormPanel');
+defineExpose({
+  getFormState() {
+    return propertyFormPanelRef.value?.configForm?.formState;
+  },
+  submit,
+});
+</script>

package/src/layouts/props-panel/use-style-panel.ts

@@ -0,0 +1,29 @@
+import { computed } from 'vue';
+
+import { Protocol } from '@editor/services/storage';
+import { Services } from '@editor/type';
+
+export const useStylePanel = (services?: Services) => {
+  const showStylePanelStorageKey = 'props-panel-show-style-panel';
+  const showStylePanelStorageValue = services?.storageService.getItem(showStylePanelStorageKey, {
+    protocol: Protocol.BOOLEAN,
+  });
+  if (typeof showStylePanelStorageValue === 'boolean') {
+    services?.uiService.set('showStylePanel', showStylePanelStorageValue);
+  }
+  const showStylePanel = computed(() => services?.uiService.get('showStylePanel') ?? true);
+  const showStylePanelHandler = () => {
+    services?.uiService.set('showStylePanel', true);
+    services?.storageService.setItem(showStylePanelStorageKey, true, { protocol: Protocol.BOOLEAN });
+  };
+  const closeStylePanelHandler = () => {
+    services?.uiService.set('showStylePanel', false);
+    services?.storageService.setItem(showStylePanelStorageKey, false, { protocol: Protocol.BOOLEAN });
+  };
+
+  return {
+    showStylePanel,
+    showStylePanelHandler,
+    closeStylePanelHandler,
+  };
+};

package/src/layouts/sidebar/Sidebar.vue

@@ -158,6 +158,7 @@ import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height'
 import { useFloatBox } from '@editor/hooks/use-float-box';
 import {
   ColumnLayout,
+  CustomContentMenuFunction,
   type MenuButton,
   type MenuComponent,
   type Services,
@@ -185,7 +186,7 @@ const props = withDefaults(
     layerContentMenu: (MenuButton | MenuComponent)[];
     indent?: number;
     nextLevelIndentIncrement?: number;
-    customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
+    customContentMenu: CustomContentMenuFunction;
   }>(),
   {
     data: () => ({
@@ -254,6 +255,7 @@ const getItemConfig = (data: SideItem): SideComponent => {
       props: {
         indent: props.indent,
         nextLevelIndentIncrement: props.nextLevelIndentIncrement,
+        customContentMenu: props.customContentMenu,
       },
       slots: {},
     },
@@ -266,6 +268,7 @@ const getItemConfig = (data: SideItem): SideComponent => {
       props: {
         indent: props.indent,
         nextLevelIndentIncrement: props.nextLevelIndentIncrement,
+        customContentMenu: props.customContentMenu,
       },
       slots: {},
     },

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

@@ -5,6 +5,7 @@
     :indent="indent"
     :next-level-indent-increment="nextLevelIndentIncrement"
     @node-click="clickHandler"
+    @node-contextmenu="nodeContentMenuHandler"
   >
     <template #tree-node-label="{ data }">
       <div
@@ -62,6 +63,7 @@ const props = defineProps<{
 const emit = defineEmits<{
   edit: [id: string];
   remove: [id: string];
+  'node-contextmenu': [event: MouseEvent, data: TreeNodeData];
 }>();
 
 const services = inject<Services>('services');
@@ -162,12 +164,21 @@ const deleteCode = async (id: string) => {
     if (typeof props.customError === 'function') {
       props.customError(id, existBinds ? CodeDeleteErrorType.BIND : CodeDeleteErrorType.UNDELETEABLE);
     } else {
-      tMagicMessage.error('代码块删除失败');
+      if (existBinds) {
+        tMagicMessage.error('代码块存在绑定关系，不可删除');
+      } else {
+        tMagicMessage.error('代码块不可删除');
+      }
     }
   }
 };
 
+const nodeContentMenuHandler = (event: MouseEvent, data: TreeNodeData) => {
+  emit('node-contextmenu', event, data);
+};
+
 defineExpose({
   filter: filterTextChangeHandler,
+  deleteCode,
 });
 </script>

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

@@ -18,6 +18,7 @@
       :next-level-indent-increment="nextLevelIndentIncrement"
       @edit="editCode"
       @remove="deleteCode"
+      @node-contextmenu="nodeContentMenuHandler"
     >
       <template #code-block-panel-tool="{ id, data }">
         <slot name="code-block-panel-tool" :id="id" :data="data"></slot>
@@ -32,20 +33,40 @@
     :content="codeConfig"
     @submit="submitCodeBlockHandler"
   ></CodeBlockEditor>
+
+  <Teleport to="body">
+    <ContentMenu
+      v-if="menuData.length"
+      :menu-data="menuData"
+      ref="menu"
+      style="overflow: initial"
+      @hide="contentMenuHideHandler"
+    ></ContentMenu>
+  </Teleport>
 </template>
 
 <script setup lang="ts">
-import { computed, inject, ref } from 'vue';
+import { computed, inject, useTemplateRef } from 'vue';
 
 import type { Id } from '@tmagic/core';
 import { TMagicButton, TMagicScrollbar } from '@tmagic/design';
 
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
+import ContentMenu from '@editor/components/ContentMenu.vue';
 import SearchInput from '@editor/components/SearchInput.vue';
 import { useCodeBlockEdit } from '@editor/hooks/use-code-block-edit';
-import type { CodeBlockListPanelSlots, CodeDeleteErrorType, EventBus, Services } from '@editor/type';
+import type {
+  CodeBlockListPanelSlots,
+  CodeDeleteErrorType,
+  CustomContentMenuFunction,
+  EventBus,
+  MenuButton,
+  MenuComponent,
+  Services,
+} from '@editor/type';
 
 import CodeBlockList from './CodeBlockList.vue';
+import { useContentMenu } from './useContentMenu';
 
 defineSlots<CodeBlockListPanelSlots>();
 
@@ -53,10 +74,11 @@ defineOptions({
   name: 'MEditorCodeBlockListPanel',
 });
 
-defineProps<{
+const props = defineProps<{
   indent?: number;
   nextLevelIndentIncrement?: number;
   customError?: (id: Id, errorType: CodeDeleteErrorType) => any;
+  customContentMenu: CustomContentMenuFunction;
 }>();
 
 const eventBus = inject<EventBus>('eventBus');
@@ -67,7 +89,7 @@ const editable = computed(() => codeBlockService?.getEditStatus());
 const { codeBlockEditor, codeConfig, editCode, deleteCode, createCodeBlock, submitCodeBlockHandler } =
   useCodeBlockEdit(codeBlockService);
 
-const codeBlockList = ref<InstanceType<typeof CodeBlockList>>();
+const codeBlockList = useTemplateRef<InstanceType<typeof CodeBlockList>>('codeBlockList');
 
 const filterTextChangeHandler = (val: string) => {
   codeBlockList.value?.filter(val);
@@ -76,4 +98,13 @@ const filterTextChangeHandler = (val: string) => {
 eventBus?.on('edit-code', (id: string) => {
   editCode(id);
 });
+
+const {
+  nodeContentMenuHandler,
+  menuData: contentMenuData,
+  contentMenuHideHandler,
+} = useContentMenu((id: string) => {
+  codeBlockList.value?.deleteCode(id);
+});
+const menuData = computed<(MenuButton | MenuComponent)[]>(() => props.customContentMenu(contentMenuData, 'code-block'));
 </script>

package/src/layouts/sidebar/code-block/useContentMenu.ts

@@ -0,0 +1,83 @@
+import { inject, markRaw, useTemplateRef } from 'vue';
+import { CopyDocument, Delete, Edit } from '@element-plus/icons-vue';
+import { cloneDeep } from 'lodash-es';
+
+import ContentMenu from '@editor/components/ContentMenu.vue';
+import type { EventBus, MenuButton, MenuComponent, Services, TreeNodeData } from '@editor/type';
+
+export const useContentMenu = (deleteCode: (id: string) => void) => {
+  const eventBus = inject<EventBus>('eventBus');
+  const menuRef = useTemplateRef<InstanceType<typeof ContentMenu>>('menu');
+
+  let selectId = '';
+
+  const menuData: (MenuButton | MenuComponent)[] = [
+    {
+      type: 'button',
+      text: '编辑',
+      icon: Edit,
+      display: (services) => services?.codeBlockService?.getEditStatus() ?? true,
+      handler: () => {
+        if (!selectId) {
+          return;
+        }
+
+        eventBus?.emit('edit-code', selectId);
+      },
+    },
+    {
+      type: 'button',
+      text: '复制并粘贴至当前',
+      icon: markRaw(CopyDocument),
+      handler: async ({ codeBlockService }: Services) => {
+        if (!selectId) {
+          return;
+        }
+
+        const codeBlock = codeBlockService.getCodeContentById(selectId);
+        if (!codeBlock) {
+          return;
+        }
+
+        const newCodeId = await codeBlockService.getUniqueId();
+
+        codeBlockService.setCodeDslById(newCodeId, cloneDeep(codeBlock));
+      },
+    },
+    {
+      type: 'button',
+      text: '删除',
+      icon: Delete,
+      handler: () => {
+        if (!selectId) {
+          return;
+        }
+
+        deleteCode(selectId);
+      },
+    },
+  ];
+
+  const nodeContentMenuHandler = (event: MouseEvent, data: TreeNodeData) => {
+    event.preventDefault();
+
+    if (data.type === 'code') {
+      menuRef.value?.show(event);
+      if (data.id) {
+        selectId = `${data.id}`;
+      } else {
+        selectId = '';
+      }
+    }
+  };
+
+  const contentMenuHideHandler = () => {
+    selectId = '';
+  };
+
+  return {
+    menuData,
+    nodeContentMenuHandler,
+    contentMenuHideHandler,
+  };
+};

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

@@ -5,6 +5,7 @@
     :indent="indent"
     :next-level-indent-increment="nextLevelIndentIncrement"
     @node-click="clickHandler"
+    @node-contextmenu="nodeContentMenuHandler"
   >
     <template #tree-node-label="{ data }">
       <div
@@ -37,13 +38,13 @@ import { computed, inject } from 'vue';
 import { Close, Edit, View } from '@element-plus/icons-vue';
 
 import { DepData, DepTargetType, Id, MNode } from '@tmagic/core';
-import { tMagicMessageBox, TMagicTag, TMagicTooltip } from '@tmagic/design';
+import { TMagicTag, TMagicTooltip } from '@tmagic/design';
 
 import Icon from '@editor/components/Icon.vue';
 import Tree from '@editor/components/Tree.vue';
 import { useFilter } from '@editor/hooks/use-filter';
 import { useNodeStatus } from '@editor/hooks/use-node-status';
-import type { DataSourceListSlots, Services } from '@editor/type';
+import type { DataSourceListSlots, Services, TreeNodeData } from '@editor/type';
 
 defineSlots<DataSourceListSlots>();
 
@@ -59,6 +60,7 @@ defineProps<{
 const emit = defineEmits<{
   edit: [id: string];
   remove: [id: string];
+  'node-contextmenu': [event: MouseEvent, data: TreeNodeData];
 }>();
 
 const { depService, editorService, dataSourceService } = inject<Services>('services') || {};
@@ -159,12 +161,6 @@ const editHandler = (id: string) => {
 };
 
 const removeHandler = async (id: string) => {
-  await tMagicMessageBox.confirm('确定删除?', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  });
-
   emit('remove', id);
 };
 
@@ -181,6 +177,10 @@ const clickHandler = (event: MouseEvent, data: any) => {
   }
 };
 
+const nodeContentMenuHandler = (event: MouseEvent, data: TreeNodeData) => {
+  emit('node-contextmenu', event, data);
+};
+
 defineExpose({
   filter: filterTextChangeHandler,
 });