@tmagic/editor 1.3.0-beta.0 → 1.3.0-beta.2

package/src/layouts/workspace/viewer/NodeListMenu.vue

@@ -0,0 +1,166 @@
+<template>
+  <ContentMenu
+    ref="menu"
+    class="magic-editor-node-list-menu"
+    style="max-width: 280px"
+    :menu-data="menuData"
+    :active="node?.id"
+    :auto-hide="!pinned"
+    @mouseenter="mouseenterHandler()"
+  >
+    <template #title>
+      <NodeListMenuTitle v-model:pinned="pinned" @change="dragMenuHandler" @close="closeHandler"></NodeListMenuTitle>
+    </template>
+  </ContentMenu>
+</template>
+
+<script lang="ts" setup>
+import { Component, computed, inject, ref, watch } from 'vue';
+import type { OnDrag } from 'gesto';
+
+import type { MNode } from '@tmagic/schema';
+import { StageDragStatus } from '@tmagic/stage';
+import { getNodes } from '@tmagic/utils';
+
+import ContentMenu from '@editor/components/ContentMenu.vue';
+import type { ComponentItem, MenuButton, Services } from '@editor/type';
+
+import NodeListMenuTitle from './NodeListMenuTitle.vue';
+const props = defineProps<{ isMultiSelect?: boolean }>();
+
+const menu = ref<InstanceType<typeof ContentMenu>>();
+const nodeList = ref<MNode[]>([]);
+const pinned = ref(false);
+
+const services = inject<Services>('services');
+const editorService = services?.editorService;
+const componentListService = services?.componentListService;
+
+const stage = computed(() => editorService?.get('stage'));
+const page = computed(() => editorService?.get('page'));
+const node = computed(() => editorService?.get('node'));
+
+let timeout: NodeJS.Timeout | null = null;
+
+const cancel = () => {
+  if (timeout) {
+    globalThis.clearTimeout(timeout);
+  }
+
+  if (pinned.value) {
+    return;
+  }
+
+  nodeList.value = [];
+  menu.value?.hide();
+};
+
+const clearTimeoutLazy = () => {
+  globalThis.setTimeout(() => {
+    if (timeout) {
+      globalThis.clearTimeout(timeout);
+    }
+  }, 300);
+};
+
+const unWatch = watch(
+  stage,
+  (stage) => {
+    if (!stage) return;
+
+    stage.on('drag-start', () => {
+      cancel();
+    });
+
+    stage.on('mousemove', (event: MouseEvent) => {
+      cancel();
+
+      if (props.isMultiSelect || stage.getDragStatus() !== StageDragStatus.END) {
+        return;
+      }
+
+      timeout = globalThis.setTimeout(() => {
+        const els = stage?.renderer.getElementsFromPoint(event);
+
+        const nodes = getNodes(
+          els.map((el) => el.id),
+          page.value?.items,
+        );
+
+        if (pinned.value && nodes.length === 0) {
+          return;
+        }
+
+        nodeList.value = nodes;
+
+        if (nodeList.value.length > 1) {
+          menu.value?.show(pinned.value ? undefined : event);
+        }
+      }, 1500);
+    });
+
+    stage.on('mouseleave', () => {
+      // mouseleave后，大概率还有最后一个mousemove事件，这里延迟清除
+      clearTimeoutLazy();
+    });
+
+    unWatch();
+  },
+  {
+    immediate: true,
+  },
+);
+
+const componentMap = computed(() => {
+  const map: Record<string, ComponentItem> = {};
+  componentListService?.getList().forEach((group) => {
+    group.items.forEach((item) => {
+      map[item.type] = item;
+    });
+  });
+  return map;
+});
+
+const menuData = computed<MenuButton[]>(() =>
+  nodeList.value.map((node: MNode) => {
+    let text = node.name;
+    let icon: string | Component<{}, {}, any> | undefined;
+    if (node.type) {
+      const item = componentMap.value[node.type];
+      text += ` (${item?.text})`;
+      icon = item?.icon;
+    }
+
+    return {
+      type: 'button',
+      text,
+      id: node.id,
+      icon,
+      handler: async () => {
+        await editorService?.select(node);
+        stage.value?.select(node.id);
+      },
+    };
+  }),
+);
+
+const mouseenterHandler = () => {
+  // menu的mouseenter后，大概率还有最后一个mousemove事件，这里延迟清除
+  clearTimeoutLazy();
+};
+
+const dragMenuHandler = ({ deltaY, deltaX }: OnDrag) => {
+  if (!menu.value) return;
+
+  const { menuPosition } = menu.value;
+
+  menu.value?.setPosition({
+    clientY: menuPosition.top + deltaY,
+    clientX: menuPosition.left + deltaX,
+  });
+};
+
+const closeHandler = () => {
+  menu.value?.hide();
+};
+</script>

package/src/layouts/workspace/viewer/NodeListMenuTitle.vue

@@ -0,0 +1,68 @@
+<template>
+  <div
+    style="
+      text-align: center;
+      padding: 5px 0;
+      font-size: 14px;
+      cursor: move;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    "
+    ref="target"
+  >
+    <TMagicTooltip placement="top" :content="pinned ? '取消置于顶层自动隐藏' : '置于顶层不消失'">
+      <MIcon
+        style="margin-left: 10px; cursor: pointer"
+        :icon="pinned ? PinnedIcon : PinIcon"
+        @click="pinHandler"
+      ></MIcon>
+    </TMagicTooltip>
+
+    <span>可选组件</span>
+
+    <div style="margin-right: 10px">
+      <TMagicButton text size="small" @click="closeHandler">
+        <MIcon :icon="Close"></MIcon>
+      </TMagicButton>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { Close } from '@element-plus/icons-vue';
+import type { OnDrag } from 'gesto';
+
+import { TMagicButton, TMagicTooltip } from '@tmagic/design';
+
+import MIcon from '@editor/components/Icon.vue';
+import { useGetSo } from '@editor/hooks/use-getso';
+import PinIcon from '@editor/icons/PinIcon.vue';
+import PinnedIcon from '@editor/icons/PinnedIcon.vue';
+
+defineOptions({
+  name: 'MEditorNodeListMenuTitle',
+});
+
+const props = defineProps<{
+  pinned: boolean;
+}>();
+
+const emit = defineEmits<{
+  close: [];
+  'update:pinned': [pinned: boolean];
+  change: [e: OnDrag];
+}>();
+
+const pinHandler = () => {
+  emit('update:pinned', !props.pinned);
+};
+
+const closeHandler = () => {
+  emit('close');
+};
+
+const target = ref<HTMLDivElement>();
+useGetSo(target, emit);
+</script>

package/src/layouts/workspace/{Stage.vue → viewer/Stage.vue}

@@ -24,6 +24,7 @@
     ></div>
     <Teleport to="body">
       <ViewerMenu ref="menu" :is-multi-select="isMultiSelect" :stage-content-menu="stageContentMenu"></ViewerMenu>
+      <NodeListMenu ref="nodeList" :is-multi-select="isMultiSelect"></NodeListMenu>
     </Teleport>
   </ScrollViewer>
 </template>
@@ -40,6 +41,7 @@ import { useStage } from '@editor/hooks/use-stage';
 import { Layout, MenuButton, MenuComponent, Services, StageOptions } from '@editor/type';
 import { getConfig } from '@editor/utils/config';
 
+import NodeListMenu from './NodeListMenu.vue';
 import ViewerMenu from './ViewerMenu.vue';
 
 defineOptions({

package/src/layouts/workspace/{ViewerMenu.vue → viewer/ViewerMenu.vue}

@@ -1,5 +1,5 @@
 <template>
-  <content-menu :menu-data="menuData" ref="menu"></content-menu>
+  <ContentMenu :menu-data="menuData" ref="menu"></ContentMenu>
 </template>
 
 <script lang="ts" setup>

package/src/services/dataSource.ts

@@ -1,6 +1,7 @@
 import { reactive } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
+import type { EventOption } from '@tmagic/core';
 import type { FormConfig } from '@tmagic/form';
 import type { DataSourceSchema } from '@tmagic/schema';
 import { guid } from '@tmagic/utils';
@@ -16,6 +17,7 @@ interface State {
   editable: boolean;
   configs: Record<string, FormConfig>;
   values: Record<string, Partial<DataSourceSchema>>;
+  events: Record<string, EventOption[]>;
 }
 
 type StateKey = keyof State;
@@ -26,6 +28,7 @@ class DataSource extends BaseService {
     editable: true,
     configs: {},
     values: {},
+    events: {},
   });
 
   public set<K extends StateKey, T extends State[K]>(name: K, value: T) {
@@ -52,6 +55,14 @@ class DataSource extends BaseService {
     this.get('values')[type] = value;
   }
 
+  public getFormEvent(type = 'base') {
+    return this.get('events')[type] || [];
+  }
+
+  public setFormEvent(type: string, value: EventOption[] = []) {
+    this.get('events')[type] = value;
+  }
+
   public add(config: DataSourceSchema) {
     const newConfig = {
       ...config,

package/src/theme/content-menu.scss

@@ -3,12 +3,13 @@
   font-size: 12px;
   background: #fff;
   box-shadow: 0 2px 8px 2px rgba(68, 73, 77, 0.16);
-  z-index: 9999;
+  z-index: 1000;
   transform-origin: 0% 0%;
   font-weight: 600;
   padding: 4px 0px;
   overflow: auto;
   max-height: 80%;
+  min-width: 180px;
 
   .menu-item {
     color: #333;
@@ -43,8 +44,33 @@
       }
     }
 
-    &:hover {
-      background-color: $--hover-color;
+    &.button {
+      &:hover {
+        background-color: $--hover-color;
+        .tmagic-design-button,
+        .tmagic-design-button:active,
+        .tmagic-design-button:focus {
+          color: $--font-color;
+        }
+
+        &.menu-item i {
+          color: $--font-color;
+        }
+      }
+
+      &.active {
+        background-color: $--theme-color;
+        .tmagic-design-button,
+        .tmagic-design-button:active,
+        .tmagic-design-button:focus {
+          color: #fff;
+          background-color: transparent;
+        }
+
+        &.menu-item i {
+          color: #fff;
+        }
+      }
     }
   }
 }

package/src/theme/index.scss

@@ -1,2 +1,10 @@
 @import "./common/var.scss";
 @import "./theme.scss";
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}

package/src/type.ts

@@ -201,6 +201,8 @@ export interface MenuButton {
   className?: string;
   /** type为dropdown时，下拉的菜单列表， 或者有子菜单时 */
   items?: MenuButton[];
+  /** 唯一标识，用于高亮 */
+  id?: string | number;
 }
 
 export interface MenuComponent {
@@ -416,6 +418,7 @@ export interface HistoryState {
 export interface EventSelectConfig {
   name: string;
   type: 'event-select';
+  src: 'datasource' | 'component';
   /** 事件名称表单配置 */
   eventNameConfig?: FormItem;
   /** 动作类型配置 */

package/src/utils/data-source/formConfigs/http.ts

@@ -7,6 +7,15 @@ export default [
     type: 'switch',
     defaultValue: true,
   },
+  {
+    name: 'responseOptions',
+    items: [
+      {
+        name: 'dataPath',
+        text: '数据路径',
+      },
+    ],
+  },
   {
     type: 'fieldset',
     name: 'options',

package/src/utils/data-source/index.ts

@@ -29,6 +29,18 @@ const fillConfig = (config: FormConfig): FormConfig => [
       },
     ],
   },
+  {
+    type: 'panel',
+    title: '事件配置',
+    display: false,
+    items: [
+      {
+        name: 'events',
+        src: 'datasource',
+        type: 'event-select',
+      },
+    ],
+  },
 ];
 
 export const getFormConfig = (type: string, configs: Record<string, FormConfig>): FormConfig => {

package/src/utils/props.ts

@@ -205,6 +205,7 @@ export const eventTabConfig: TabPaneConfig = {
   items: [
     {
       name: 'events',
+      src: 'component',
       type: 'event-select',
     },
   ],
@@ -248,7 +249,7 @@ export const displayTabConfig: TabPaneConfig = {
             },
             {
               type: 'select',
-              options: (mForm: FormState | undefined, { model }: any) => {
+              options: (mForm, { model }) => {
                 const [id, field] = model.field;
 
                 const ds = dataSourceService.getDataSourceById(id);
@@ -284,23 +285,33 @@ export const displayTabConfig: TabPaneConfig = {
               items: [
                 {
                   name: 'value',
-                  display: (vm: FormState, { model }: any) =>
-                    !['between', 'not_between', 'is', 'not'].includes(model.op),
-                },
-                {
-                  name: 'value',
-                  type: 'select',
+                  type: (mForm, { model }) => {
+                    const [id, field] = model.field;
+
+                    const ds = dataSourceService.getDataSourceById(id);
+
+                    const type = ds?.fields.find((f) => f.name === field)?.type;
+
+                    if (type === 'number') {
+                      return 'number';
+                    }
+
+                    if (type === 'boolean') {
+                      return 'select';
+                    }
+
+                    return 'text';
+                  },
                   options: [
                     { text: 'true', value: true },
                     { text: 'false', value: false },
                   ],
-                  display: (vm: FormState, { model }: any) => ['is', 'not'].includes(model.op),
+                  display: (vm, { model }) => !['between', 'not_between'].includes(model.op),
                 },
                 {
                   name: 'range',
                   type: 'number-range',
-                  display: (vm: FormState, { model }: any) =>
-                    ['between', 'not_between'].includes(model.op) && !['is', 'not'].includes(model.op),
+                  display: (vm, { model }) => ['between', 'not_between'].includes(model.op),
                 },
               ],
             },

package/types/components/CodeBlockEditor.vue.d.ts

@@ -3,6 +3,7 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimePr
     content: CodeBlockContent;
     disabled?: boolean | undefined;
     isDataSource?: boolean | undefined;
+    dataSourceType?: string | undefined;
 }>, {
     show(): void;
     hide(): void;
@@ -10,6 +11,7 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimePr
     content: CodeBlockContent;
     disabled?: boolean | undefined;
     isDataSource?: boolean | undefined;
+    dataSourceType?: string | undefined;
 }>>>, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/types/components/ContentMenu.vue.d.ts

@@ -1,28 +1,42 @@
 import { MenuButton, MenuComponent } from '../type';
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     menuData?: (MenuButton | MenuComponent)[] | undefined;
     isSubMenu?: boolean | undefined;
+    active?: string | number | undefined;
+    autoHide?: boolean | undefined;
 }>, {
     menuData: () => never[];
     isSubMenu: boolean;
+    autoHide: boolean;
 }>, {
     menu: import("vue").Ref<HTMLDivElement | undefined>;
+    menuPosition: import("vue").Ref<{
+        left: number;
+        top: number;
+    }>;
     hide: () => void;
-    show: (e: MouseEvent) => void;
+    show: (e?: MouseEvent | undefined) => void;
     contains: (el: HTMLElement) => any;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("show" | "hide")[], "show" | "hide", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    setPosition: (e: {
+        clientY: number;
+        clientX: number;
+    }) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     menuData?: (MenuButton | MenuComponent)[] | undefined;
     isSubMenu?: boolean | undefined;
+    active?: string | number | undefined;
+    autoHide?: boolean | undefined;
 }>, {
     menuData: () => never[];
     isSubMenu: boolean;
-}>>> & {
-    onShow?: ((...args: any[]) => any) | undefined;
-    onHide?: ((...args: any[]) => any) | undefined;
-}, {
+    autoHide: boolean;
+}>>>, {
     menuData: (MenuButton | MenuComponent)[];
     isSubMenu: boolean;
-}, {}>;
+    autoHide: boolean;
+}, {}>, {
+    title?(_: {}): any;
+}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {
@@ -38,6 +52,11 @@ type __VLS_WithDefaults<P, D> = {
         default: D[K];
     }> : P[K];
 };
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
 type __VLS_Prettify<T> = {
     [K in keyof T]: T[K];
 } & {};

package/types/components/Resizer.vue.d.ts

@@ -1,6 +1,4 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>> & {
-    onChange?: ((...args: any[]) => any) | undefined;
-}, {}, {}>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
     default?(_: {}): any;
 }>;
 export default _default;

package/types/hooks/use-code-block-edit.d.ts

@@ -55,6 +55,7 @@ export declare const useCodeBlockEdit: (codeBlockService?: CodeBlockService) =>
             readonly content: CodeBlockContent;
             readonly disabled?: boolean | undefined;
             readonly isDataSource?: boolean | undefined;
+            readonly dataSourceType?: string | undefined;
         };
         $attrs: {
             [x: string]: unknown;
@@ -80,6 +81,9 @@ export declare const useCodeBlockEdit: (codeBlockService?: CodeBlockService) =>
             isDataSource: {
                 type: import("vue").PropType<boolean>;
             };
+            dataSourceType: {
+                type: import("vue").PropType<string>;
+            };
         }>>, {
             show(): void;
             hide(): void;
@@ -114,6 +118,9 @@ export declare const useCodeBlockEdit: (codeBlockService?: CodeBlockService) =>
         isDataSource: {
             type: import("vue").PropType<boolean>;
         };
+        dataSourceType: {
+            type: import("vue").PropType<string>;
+        };
     }>> & import("vue").ShallowUnwrapRef<{
         show(): void;
         hide(): void;

package/types/hooks/use-data-source-method.d.ts

@@ -53,6 +53,7 @@ export declare const useDataSourceMethod: () => {
             readonly content: CodeBlockContent;
             readonly disabled?: boolean | undefined;
             readonly isDataSource?: boolean | undefined;
+            readonly dataSourceType?: string | undefined;
         };
         $attrs: {
             [x: string]: unknown;
@@ -78,6 +79,9 @@ export declare const useDataSourceMethod: () => {
             isDataSource: {
                 type: import("vue").PropType<boolean>;
             };
+            dataSourceType: {
+                type: import("vue").PropType<string>;
+            };
         }>>, {
             show(): void;
             hide(): void;
@@ -112,6 +116,9 @@ export declare const useDataSourceMethod: () => {
         isDataSource: {
             type: import("vue").PropType<boolean>;
         };
+        dataSourceType: {
+            type: import("vue").PropType<string>;
+        };
     }>> & import("vue").ShallowUnwrapRef<{
         show(): void;
         hide(): void;

package/types/hooks/use-getso.d.ts

@@ -0,0 +1,5 @@
+import { type Ref } from 'vue';
+import Gesto, { type OnDrag } from 'gesto';
+export declare const useGetSo: (target: Ref<HTMLElement | undefined>, emit: (evt: 'change', e: OnDrag<Gesto>) => void) => {
+    isDraging: Ref<boolean>;
+};

package/types/icons/PinIcon.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/types/icons/PinnedIcon.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/types/index.d.ts

@@ -1,6 +1,7 @@
 import { App } from 'vue';
 import type { InstallOptions } from './type';
 import './theme/index.scss';
+export type { OnDrag } from 'gesto';
 export type { MoveableOptions } from '@tmagic/stage';
 export * from './type';
 export * from './hooks';

package/types/layouts/PropsPanel.vue.d.ts

@@ -18,7 +18,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
             height?: string | undefined;
             inline?: boolean | undefined;
             labelPosition?: string | undefined;
-            onChange?: ((...args: any[]) => any) | undefined;
             key?: string | number | symbol | undefined;
             ref?: import("vue").VNodeRef | undefined;
             ref_for?: boolean | undefined;
@@ -63,6 +62,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
             }>) => void)[] | undefined;
             class?: unknown;
             style?: unknown;
+            onChange?: ((...args: any[]) => any) | undefined;
             readonly size?: "default" | "small" | "large" | undefined;
             readonly popperClass?: string | undefined;
             readonly extendState?: ((state: FormState) => Record<string, any> | Promise<Record<string, any>>) | undefined;

package/types/layouts/workspace/viewer/NodeListMenu.vue.d.ts

@@ -0,0 +1,15 @@
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    isMultiSelect?: boolean | undefined;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    isMultiSelect?: boolean | undefined;
+}>>>, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};