@tmagic/editor 1.3.6 → 1.3.8

package/src/layouts/PropsPanel.vue

@@ -10,14 +10,14 @@
       :config="curFormConfig"
       :extend-state="extendState"
       @change="submit"
+      @error="errorHandler"
     ></MForm>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, getCurrentInstance, inject, onMounted, onUnmounted, ref, watchEffect } from 'vue';
+import { computed, getCurrentInstance, inject, onBeforeUnmount, onMounted, ref, watchEffect } from 'vue';
 
-import { tMagicMessage } from '@tmagic/design';
 import type { FormState, FormValue } from '@tmagic/form';
 import { MForm } from '@tmagic/form';
 
@@ -33,7 +33,7 @@ defineProps<{
   extendState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
 }>();
 
-const emit = defineEmits(['mounted']);
+const emit = defineEmits(['mounted', 'submit-error', 'form-error']);
 
 const internalInstance = getCurrentInstance();
 const values = ref<FormValue>({});
@@ -64,7 +64,7 @@ onMounted(() => {
   emit('mounted', internalInstance);
 });
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   services?.propsService.off('props-configs-change', init);
 });
 
@@ -79,11 +79,13 @@ const submit = async () => {
     const values = await configForm.value?.submitForm();
     services?.editorService.update(values);
   } catch (e: any) {
-    console.error(e);
-    tMagicMessage.closeAll();
-    tMagicMessage.error(e.message);
+    emit('submit-error', e);
   }
 };
 
+const errorHandler = (e: any) => {
+  emit('form-error', e);
+};
+
 defineExpose({ configForm, submit });
 </script>

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

@@ -0,0 +1,48 @@
+<template>
+  <div
+    v-if="showAddPageButton"
+    id="m-editor-page-bar-add-icon"
+    class="m-editor-page-bar-item m-editor-page-bar-item-icon"
+    @click="addPage"
+  >
+    <Icon :icon="Plus"></Icon>
+  </div>
+  <div v-else style="width: 21px"></div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, toRaw } from 'vue';
+import { Plus } from '@element-plus/icons-vue';
+
+import { NodeType } from '@tmagic/schema';
+
+import Icon from '@editor/components/Icon.vue';
+import type { Services } from '@editor/type';
+import { generatePageNameByApp } from '@editor/utils/editor';
+
+defineOptions({
+  name: 'MEditorPageBarAddButton',
+});
+
+const props = defineProps<{
+  type: NodeType.PAGE | NodeType.PAGE_FRAGMENT;
+}>();
+
+const services = inject<Services>('services');
+const uiService = services?.uiService;
+const editorService = services?.editorService;
+
+const showAddPageButton = computed(() => uiService?.get('showAddPageButton'));
+
+const addPage = () => {
+  if (!editorService) return;
+  const root = toRaw(editorService.get('root'));
+  if (!root) throw new Error('root 不能为空');
+  const pageConfig = {
+    type: props.type,
+    name: generatePageNameByApp(root, props.type),
+    items: [],
+  };
+  editorService.add(pageConfig);
+};
+</script>

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

@@ -0,0 +1,158 @@
+<template>
+  <div class="m-editor-page-bar-tabs">
+    <SwitchTypeButton v-if="!disabledPageFragment" v-model="active" />
+
+    <PageBarScrollContainer :type="active">
+      <template #prepend>
+        <AddButton :type="active"></AddButton>
+      </template>
+
+      <div
+        v-for="item in list"
+        class="m-editor-page-bar-item"
+        :key="item.id"
+        :class="{ active: page?.id === item.id }"
+        @click="switchPage(item.id)"
+      >
+        <div class="m-editor-page-bar-title">
+          <slot name="page-bar-title" :page="item">
+            <span :title="item.name">{{ item.name || item.id }}</span>
+          </slot>
+        </div>
+
+        <TMagicPopover popper-class="page-bar-popover" placement="top" :width="160" trigger="hover">
+          <div>
+            <slot name="page-bar-popover" :page="item">
+              <ToolButton
+                :data="{
+                  type: 'button',
+                  text: '复制',
+                  icon: DocumentCopy,
+                  handler: () => copy(item),
+                }"
+              ></ToolButton>
+              <ToolButton
+                :data="{
+                  type: 'button',
+                  text: '删除',
+                  icon: Delete,
+                  handler: () => remove(item),
+                }"
+              ></ToolButton>
+            </slot>
+          </div>
+          <template #reference>
+            <TMagicIcon class="m-editor-page-bar-menu-icon">
+              <CaretBottom></CaretBottom>
+            </TMagicIcon>
+          </template>
+        </TMagicPopover>
+      </div>
+    </PageBarScrollContainer>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, ref, watch } from 'vue';
+import { CaretBottom, Delete, DocumentCopy } from '@element-plus/icons-vue';
+
+import { TMagicIcon, TMagicPopover } from '@tmagic/design';
+import { Id, type MPage, type MPageFragment, NodeType } from '@tmagic/schema';
+import { isPage, isPageFragment } from '@tmagic/utils';
+
+import ToolButton from '@editor/components/ToolButton.vue';
+import type { Services } from '@editor/type';
+import { getPageFragmentList, getPageList } from '@editor/utils';
+
+import AddButton from './AddButton.vue';
+import PageBarScrollContainer from './PageBarScrollContainer.vue';
+import SwitchTypeButton from './SwitchTypeButton.vue';
+
+defineOptions({
+  name: 'MEditorPageBar',
+});
+
+defineProps<{
+  disabledPageFragment: boolean;
+}>();
+
+const active = ref<NodeType.PAGE | NodeType.PAGE_FRAGMENT>(NodeType.PAGE);
+
+const services = inject<Services>('services');
+const editorService = services?.editorService;
+
+const root = computed(() => editorService?.get('root'));
+const page = computed(() => editorService?.get('page'));
+const pageList = computed(() => getPageList(root.value));
+const pageFragmentList = computed(() => getPageFragmentList(root.value));
+
+const list = computed(() => (active.value === NodeType.PAGE ? pageList.value : pageFragmentList.value));
+
+const activePage = ref<Id>('');
+const activePageFragment = ref<Id>('');
+
+watch(
+  page,
+  (page) => {
+    if (!page) {
+      if (active.value === NodeType.PAGE) {
+        activePage.value = '';
+      }
+      if (active.value === NodeType.PAGE_FRAGMENT) {
+        activePageFragment.value = '';
+      }
+      return;
+    }
+
+    if (isPage(page)) {
+      activePage.value = page?.id;
+      if (active.value !== NodeType.PAGE) {
+        active.value = NodeType.PAGE;
+      }
+    } else if (isPageFragment(page)) {
+      activePageFragment.value = page?.id;
+      if (active.value !== NodeType.PAGE_FRAGMENT) {
+        active.value = NodeType.PAGE_FRAGMENT;
+      }
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+watch(active, (active) => {
+  if (active === NodeType.PAGE) {
+    if (!activePage.value) {
+      editorService?.selectRoot();
+      return;
+    }
+    switchPage(activePage.value);
+    return;
+  }
+
+  if (active === NodeType.PAGE_FRAGMENT) {
+    if (!activePageFragment.value) {
+      editorService?.selectRoot();
+      return;
+    }
+    switchPage(activePageFragment.value);
+  }
+});
+
+const switchPage = (id: Id) => {
+  editorService?.select(id);
+};
+
+const copy = (node: MPage | MPageFragment) => {
+  node && editorService?.copy(node);
+  editorService?.paste({
+    left: 0,
+    top: 0,
+  });
+};
+
+const remove = (node: MPage | MPageFragment) => {
+  editorService?.remove(node);
+};
+</script>

package/src/layouts/{workspace → page-bar}/PageBarScrollContainer.vue

@@ -1,25 +1,20 @@
 <template>
   <div class="m-editor-page-bar" ref="pageBar">
-    <div
-      v-if="showAddPageButton"
-      id="m-editor-page-bar-add-icon"
-      class="m-editor-page-bar-item m-editor-page-bar-item-icon"
-      @click="addPage"
-    >
-      <Icon :icon="Plus"></Icon>
-    </div>
-    <div v-else style="width: 21px"></div>
+    <slot name="prepend"></slot>
+
     <div v-if="canScroll" class="m-editor-page-bar-item m-editor-page-bar-item-icon" @click="scroll('left')">
       <Icon :icon="ArrowLeftBold"></Icon>
     </div>
+
     <div
-      v-if="pageLength"
+      v-if="(type === NodeType.PAGE && pageLength) || (type === NodeType.PAGE_FRAGMENT && pageFragmentLength)"
       class="m-editor-page-bar-items"
       ref="itemsContainer"
       :style="`width: ${itemsContainerWidth}px`"
     >
       <slot></slot>
     </div>
+
     <div v-if="canScroll" class="m-editor-page-bar-item m-editor-page-bar-item-icon" @click="scroll('right')">
       <Icon :icon="ArrowRightBold"></Icon>
     </div>
@@ -27,19 +22,32 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, nextTick, onMounted, onUnmounted, ref, toRaw, watch } from 'vue';
-import { ArrowLeftBold, ArrowRightBold, Plus } from '@element-plus/icons-vue';
+import {
+  computed,
+  type ComputedRef,
+  inject,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+  type WatchStopHandle,
+} from 'vue';
+import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/schema';
 
 import Icon from '@editor/components/Icon.vue';
 import type { Services } from '@editor/type';
-import { generatePageNameByApp } from '@editor/utils/editor';
 
 defineOptions({
   name: 'MEditorPageBarScrollContainer',
 });
 
+const props = defineProps<{
+  type: NodeType.PAGE | NodeType.PAGE_FRAGMENT;
+}>();
+
 const services = inject<Services>('services');
 const editorService = services?.editorService;
 const uiService = services?.uiService;
@@ -72,7 +80,7 @@ onMounted(() => {
   pageBar.value && resizeObserver.observe(pageBar.value);
 });
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   resizeObserver.disconnect();
 });
 
@@ -104,27 +112,45 @@ const scroll = (type: 'left' | 'right' | 'start' | 'end') => {
   itemsContainer.value.style.transform = `translate(${translateLeft}px, 0px)`;
 };
 
-const pageLength = computed(() => editorService?.get('pageLength'));
-
-watch(pageLength, (length = 0, preLength = 0) => {
-  setTimeout(() => {
-    setCanScroll();
-    if (length < preLength) {
-      scroll('start');
+const pageLength = computed(() => editorService?.get('pageLength') || 0);
+const pageFragmentLength = computed(() => editorService?.get('pageFragmentLength') || 0);
+
+const crateWatchLength = (length: ComputedRef<number>) =>
+  watch(
+    length,
+    (length = 0, preLength = 0) => {
+      setTimeout(() => {
+        setCanScroll();
+        if (length < preLength) {
+          scroll('start');
+        } else {
+          scroll('end');
+        }
+      });
+    },
+    {
+      immediate: true,
+    },
+  );
+
+let unWatchPageLength: WatchStopHandle | null;
+let unWatchPageFragmentLength: WatchStopHandle | null;
+
+watch(
+  () => props.type,
+  (type) => {
+    if (type === NodeType.PAGE) {
+      unWatchPageFragmentLength?.();
+      unWatchPageFragmentLength = null;
+      unWatchPageLength = crateWatchLength(pageLength);
     } else {
-      scroll('end');
+      unWatchPageLength?.();
+      unWatchPageLength = null;
+      unWatchPageFragmentLength = crateWatchLength(pageFragmentLength);
     }
-  });
-});
-
-const addPage = () => {
-  if (!editorService) return;
-  const root = toRaw(editorService.get('root'));
-  if (!root) throw new Error('root 不能为空');
-  const pageConfig = {
-    type: NodeType.PAGE,
-    name: generatePageNameByApp(root),
-  };
-  editorService.add(pageConfig);
-};
+  },
+  {
+    immediate: true,
+  },
+);
 </script>

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

@@ -0,0 +1,45 @@
+<template>
+  <TMagicButton
+    v-for="item in data"
+    class="m-editor-page-bar-switch-type-button"
+    size="small"
+    :key="item.type"
+    text
+    :class="{ active: modelValue === item.type }"
+    :type="modelValue === item.type ? 'primary' : ''"
+    @click="clickHandler(item.type)"
+    >{{ item.text }}</TMagicButton
+  >
+</template>
+
+<script setup lang="ts">
+import { TMagicButton } from '@tmagic/design';
+import { NodeType } from '@tmagic/schema';
+
+defineOptions({
+  name: 'MEditorPageBarSwitchTypeButton',
+});
+
+defineProps<{
+  modelValue: NodeType.PAGE | NodeType.PAGE_FRAGMENT;
+}>();
+
+const data: { type: NodeType.PAGE | NodeType.PAGE_FRAGMENT; text: string }[] = [
+  {
+    type: NodeType.PAGE,
+    text: '页面',
+  },
+  {
+    type: NodeType.PAGE_FRAGMENT,
+    text: '页面片',
+  },
+];
+
+const emit = defineEmits<{
+  'update:modelValue': [value: NodeType.PAGE | NodeType.PAGE_FRAGMENT];
+}>();
+
+const clickHandler = (value: NodeType.PAGE | NodeType.PAGE_FRAGMENT) => {
+  emit('update:modelValue', value);
+};
+</script>

package/src/layouts/sidebar/Sidebar.vue

@@ -160,6 +160,7 @@ const props = withDefaults(
   defineProps<{
     data: SideBarData;
     layerContentMenu: (MenuButton | MenuComponent)[];
+    customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
   }>(),
   {
     data: () => ({ type: 'tabs', status: '组件', items: ['component-list', 'layer', 'code-block', 'data-source'] }),
@@ -187,6 +188,7 @@ const getItemConfig = (data: SideItem): SideComponent => {
       text: '已选组件',
       props: {
         layerContentMenu: props.layerContentMenu,
+        customContentMenu: props.customContentMenu,
       },
       component: LayerPanel,
       slots: {},

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

@@ -6,7 +6,7 @@
 import { computed, inject, markRaw, ref } from 'vue';
 import { Files, Plus } from '@element-plus/icons-vue';
 
-import { isPage } from '@tmagic/utils';
+import { isPage, isPageFragment } from '@tmagic/utils';
 
 import ContentMenu from '@editor/components/ContentMenu.vue';
 import FolderMinusIcon from '@editor/icons/FolderMinusIcon.vue';
@@ -17,9 +17,16 @@ defineOptions({
   name: 'MEditorLayerMenu',
 });
 
-const props = defineProps<{
-  layerContentMenu: (MenuButton | MenuComponent)[];
-}>();
+const props = withDefaults(
+  defineProps<{
+    layerContentMenu: (MenuButton | MenuComponent)[];
+    customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
+  }>(),
+  {
+    layerContentMenu: () => [],
+    customContentMenu: (menus: (MenuButton | MenuComponent)[]) => menus,
+  },
+);
 
 const emit = defineEmits<{
   'collapse-all': [];
@@ -82,29 +89,34 @@ const getSubMenuData = computed<MenuButton[]>(() => {
   return [];
 });
 
-const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
-  {
-    type: 'button',
-    text: '全部折叠',
-    icon: FolderMinusIcon,
-    display: () => isPage(node.value),
-    handler: () => {
-      emit('collapse-all');
-    },
-  },
-  {
-    type: 'button',
-    text: '新增',
-    icon: markRaw(Plus),
-    display: () => node.value?.items && nodes.value?.length === 1,
-    items: getSubMenuData.value,
-  },
-  useCopyMenu(),
-  usePasteMenu(),
-  useDeleteMenu(),
-  useMoveToMenu(services),
-  ...props.layerContentMenu,
-]);
+const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
+  props.customContentMenu(
+    [
+      {
+        type: 'button',
+        text: '全部折叠',
+        icon: FolderMinusIcon,
+        display: () => isPage(node.value) || isPageFragment(node.value),
+        handler: () => {
+          emit('collapse-all');
+        },
+      },
+      {
+        type: 'button',
+        text: '新增',
+        icon: markRaw(Plus),
+        display: () => node.value?.items && nodes.value?.length === 1,
+        items: getSubMenuData.value,
+      },
+      useCopyMenu(),
+      usePasteMenu(),
+      useDeleteMenu(),
+      useMoveToMenu(services),
+      ...props.layerContentMenu,
+    ],
+    'layer',
+  ),
+);
 
 const show = (e: MouseEvent) => {
   menu.value?.show(e);

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

@@ -34,7 +34,12 @@
     </Tree>
 
     <Teleport to="body">
-      <LayerMenu ref="menu" :layer-content-menu="layerContentMenu" @collapse-all="collapseAllHandler"></LayerMenu>
+      <LayerMenu
+        ref="menu"
+        :layer-content-menu="layerContentMenu"
+        :custom-content-menu="customContentMenu"
+        @collapse-all="collapseAllHandler"
+      ></LayerMenu>
     </Teleport>
   </TMagicScrollbar>
 </template>
@@ -65,6 +70,7 @@ defineOptions({
 
 defineProps<{
   layerContentMenu: (MenuButton | MenuComponent)[];
+  customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
 }>();
 
 const services = inject<Services>('services');

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

@@ -1,4 +1,4 @@
-import { type ComputedRef, nextTick, type Ref, ref } from 'vue';
+import { computed, type ComputedRef, nextTick, type Ref, ref } from 'vue';
 import { throttle } from 'lodash-es';
 
 import { Id, MNode } from '@tmagic/schema';
@@ -13,13 +13,15 @@ export const useClick = (
   isCtrlKeyDown: Ref<boolean>,
   nodeStatusMap: ComputedRef<Map<Id, LayerNodeStatus> | undefined>,
 ) => {
+  const isMultiSelect = computed(() => isCtrlKeyDown.value && !services?.editorService.get('disabledMultiSelect'));
+
   // 触发画布选中
   const select = async (data: MNode) => {
     if (!data.id) {
       throw new Error('没有id');
     }
 
-    if (isCtrlKeyDown.value) {
+    if (isMultiSelect.value) {
       multiSelect(data);
     } else {
       await services?.editorService.select(data);
@@ -70,7 +72,7 @@ export const useClick = (
       return;
     }
 
-    if (data.items && data.items.length > 0 && !isCtrlKeyDown.value) {
+    if (data.items && data.items.length > 0 && !isMultiSelect.value) {
       updateStatus(nodeStatusMap.value, data.id, {
         expand: true,
       });

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

@@ -6,7 +6,7 @@ import { KeyBindingContainerKey } from '@editor/utils/keybinding-config';
 
 export const useKeybinding = (
   services: Services | undefined,
-  contianer: Ref<InstanceType<typeof Tree> | undefined>,
+  container: Ref<InstanceType<typeof Tree> | undefined>,
 ) => {
   const keybindingService = services?.keybindingService;
 
@@ -17,17 +17,17 @@ export const useKeybinding = (
     isCtrlKeyDown.value = false;
   };
 
-  keybindingService?.registeCommand('layer-panel-global-keyup', () => {
+  keybindingService?.registerCommand('layer-panel-global-keyup', () => {
     isCtrlKeyDown.value = false;
   });
 
-  keybindingService?.registeCommand('layer-panel-global-keydwon', () => {
+  keybindingService?.registerCommand('layer-panel-global-keydown', () => {
     isCtrlKeyDown.value = true;
   });
 
-  keybindingService?.registe([
+  keybindingService?.register([
     {
-      command: 'layer-panel-global-keydwon',
+      command: 'layer-panel-global-keydown',
       keybinding: 'ctrl',
       when: [['global', 'keydown']],
     },
@@ -39,12 +39,12 @@ export const useKeybinding = (
   ]);
 
   watchEffect(() => {
-    if (contianer.value) {
+    if (container.value) {
       globalThis.addEventListener('blur', windowBlurHandler);
-      keybindingService?.registeEl(KeyBindingContainerKey.LAYER_PANEL, contianer.value.$el);
+      keybindingService?.registerEl(KeyBindingContainerKey.LAYER_PANEL, container.value.$el);
     } else {
       globalThis.removeEventListener('blur', windowBlurHandler);
-      keybindingService?.unregisteEl(KeyBindingContainerKey.LAYER_PANEL);
+      keybindingService?.unregisterEl(KeyBindingContainerKey.LAYER_PANEL);
     }
   });
 

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

@@ -1,13 +1,13 @@
 import { computed, ref, watch } from 'vue';
 
-import type { Id, MNode, MPage } from '@tmagic/schema';
+import type { Id, MNode, MPage, MPageFragment } from '@tmagic/schema';
 import { getNodePath } from '@tmagic/utils';
 
 import { LayerNodeStatus, Services } from '@editor/type';
 import { traverseNode } from '@editor/utils';
 import { updateStatus } from '@editor/utils/tree';
 
-const createPageNodeStatus = (page: MPage, initalLayerNodeStatus?: Map<Id, LayerNodeStatus>) => {
+const createPageNodeStatus = (page: MPage | MPageFragment, initialLayerNodeStatus?: Map<Id, LayerNodeStatus>) => {
   const map = new Map<Id, LayerNodeStatus>();
 
   map.set(page.id, {
@@ -21,7 +21,7 @@ const createPageNodeStatus = (page: MPage, initalLayerNodeStatus?: Map<Id, Layer
     traverseNode<MNode>(node, (node) => {
       map.set(
         node.id,
-        initalLayerNodeStatus?.get(node.id) || {
+        initialLayerNodeStatus?.get(node.id) || {
           visible: true,
           expand: false,
           selected: false,