@tmagic/editor 1.4.8 → 1.4.10

package/src/utils/props.ts

@@ -0,0 +1,407 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { FormConfig, FormState, TabPaneConfig } from '@tmagic/form';
+
+export const arrayOptions = [
+  { text: '包含', value: 'include' },
+  { text: '不包含', value: 'not_include' },
+];
+
+export const eqOptions = [
+  { text: '等于', value: '=' },
+  { text: '不等于', value: '!=' },
+];
+
+export const numberOptions = [
+  { text: '大于', value: '>' },
+  { text: '大于等于', value: '>=' },
+  { text: '小于', value: '<' },
+  { text: '小于等于', value: '<=' },
+  { text: '在范围内', value: 'between' },
+  { text: '不在范围内', value: 'not_between' },
+];
+
+export const styleTabConfig: TabPaneConfig = {
+  title: '样式',
+  items: [
+    {
+      name: 'style',
+      items: [
+        {
+          type: 'fieldset',
+          legend: '位置',
+          items: [
+            {
+              type: 'data-source-field-select',
+              name: 'position',
+              text: '固定定位',
+              checkStrictly: false,
+              dataSourceFieldType: ['string'],
+              fieldConfig: {
+                type: 'checkbox',
+                activeValue: 'fixed',
+                inactiveValue: 'absolute',
+                defaultValue: 'absolute',
+              },
+            },
+            {
+              type: 'data-source-field-select',
+              name: 'left',
+              text: 'left',
+              checkStrictly: false,
+              dataSourceFieldType: ['string', 'number'],
+              fieldConfig: {
+                type: 'text',
+              },
+            },
+            {
+              type: 'data-source-field-select',
+              name: 'top',
+              text: 'top',
+              checkStrictly: false,
+              dataSourceFieldType: ['string', 'number'],
+              fieldConfig: {
+                type: 'text',
+              },
+              disabled: (vm: FormState, { model }: any) =>
+                model.position === 'fixed' && model._magic_position === 'fixedBottom',
+            },
+            {
+              type: 'data-source-field-select',
+              name: 'right',
+              text: 'right',
+              checkStrictly: false,
+              dataSourceFieldType: ['string', 'number'],
+              fieldConfig: {
+                type: 'text',
+              },
+            },
+            {
+              type: 'data-source-field-select',
+              name: 'bottom',
+              text: 'bottom',
+              checkStrictly: false,
+              dataSourceFieldType: ['string', 'number'],
+              fieldConfig: {
+                type: 'text',
+              },
+              disabled: (vm: FormState, { model }: any) =>
+                model.position === 'fixed' && model._magic_position === 'fixedTop',
+            },
+          ],
+        },
+        {
+          type: 'fieldset',
+          legend: '盒子',
+          items: [
+            {
+              type: 'data-source-field-select',
+              name: 'width',
+              text: '宽度',
+              checkStrictly: false,
+              dataSourceFieldType: ['string', 'number'],
+              fieldConfig: {
+                type: 'text',
+              },
+            },
+            {
+              type: 'data-source-field-select',
+              name: 'height',
+              text: '高度',
+              checkStrictly: false,
+              dataSourceFieldType: ['string', 'number'],
+              fieldConfig: {
+                type: 'text',
+              },
+            },
+            {
+              type: 'data-source-field-select',
+              text: 'overflow',
+              name: 'overflow',
+              checkStrictly: false,
+              dataSourceFieldType: ['string'],
+              fieldConfig: {
+                type: 'select',
+                options: [
+                  { text: 'visible', value: 'visible' },
+                  { text: 'hidden', value: 'hidden' },
+                  { text: 'clip', value: 'clip' },
+                  { text: 'scroll', value: 'scroll' },
+                  { text: 'auto', value: 'auto' },
+                  { text: 'overlay', value: 'overlay' },
+                ],
+              },
+            },
+          ],
+        },
+        {
+          type: 'fieldset',
+          legend: '边框',
+          items: [
+            {
+              type: 'data-source-field-select',
+              name: 'borderWidth',
+              text: '宽度',
+              defaultValue: '0',
+              checkStrictly: false,
+              dataSourceFieldType: ['string', 'number'],
+              fieldConfig: {
+                type: 'text',
+              },
+            },
+            {
+              type: 'data-source-field-select',
+              name: 'borderColor',
+              text: '颜色',
+              checkStrictly: false,
+              dataSourceFieldType: ['string'],
+              fieldConfig: {
+                type: 'text',
+              },
+            },
+            {
+              type: 'data-source-field-select',
+              name: 'borderStyle',
+              text: '样式',
+              defaultValue: 'none',
+              checkStrictly: false,
+              dataSourceFieldType: ['string'],
+              fieldConfig: {
+                type: 'select',
+                options: [
+                  { text: 'none', value: 'none' },
+                  { text: 'hidden', value: 'hidden' },
+                  { text: 'dotted', value: 'dotted' },
+                  { text: 'dashed', value: 'dashed' },
+                  { text: 'solid', value: 'solid' },
+                  { text: 'double', value: 'double' },
+                  { text: 'groove', value: 'groove' },
+                  { text: 'ridge', value: 'ridge' },
+                  { text: 'inset', value: 'inset' },
+                  { text: 'outset', value: 'outset' },
+                ],
+              },
+            },
+          ],
+        },
+        {
+          type: 'fieldset',
+          legend: '背景',
+          items: [
+            {
+              type: 'data-source-field-select',
+              name: 'backgroundImage',
+              text: '背景图',
+              checkStrictly: false,
+              dataSourceFieldType: ['string'],
+              fieldConfig: {
+                type: 'text',
+              },
+            },
+            {
+              type: 'data-source-field-select',
+              name: 'backgroundColor',
+              text: '背景颜色',
+              checkStrictly: false,
+              dataSourceFieldType: ['string'],
+              fieldConfig: {
+                type: 'colorPicker',
+              },
+            },
+            {
+              type: 'data-source-field-select',
+              name: 'backgroundRepeat',
+              text: '背景图重复',
+              defaultValue: 'no-repeat',
+              checkStrictly: false,
+              dataSourceFieldType: ['string'],
+              fieldConfig: {
+                type: 'select',
+                options: [
+                  { text: 'repeat', value: 'repeat' },
+                  { text: 'repeat-x', value: 'repeat-x' },
+                  { text: 'repeat-y', value: 'repeat-y' },
+                  { text: 'no-repeat', value: 'no-repeat' },
+                  { text: 'inherit', value: 'inherit' },
+                ],
+              },
+            },
+            {
+              type: 'data-source-field-select',
+              name: 'backgroundSize',
+              text: '背景图大小',
+              defaultValue: '100% 100%',
+              checkStrictly: false,
+              dataSourceFieldType: ['string'],
+              fieldConfig: {
+                type: 'text',
+              },
+            },
+          ],
+        },
+        {
+          type: 'fieldset',
+          legend: '字体',
+          items: [
+            {
+              type: 'data-source-field-select',
+              name: 'color',
+              text: '颜色',
+              checkStrictly: false,
+              dataSourceFieldType: ['string'],
+              fieldConfig: {
+                type: 'colorPicker',
+              },
+            },
+            {
+              type: 'data-source-field-select',
+              name: 'fontSize',
+              text: '大小',
+              checkStrictly: false,
+              dataSourceFieldType: ['string', 'number'],
+              fieldConfig: {
+                type: 'text',
+              },
+            },
+            {
+              type: 'data-source-field-select',
+              name: 'fontWeight',
+              text: '粗细',
+              checkStrictly: false,
+              dataSourceFieldType: ['string', 'number'],
+              fieldConfig: {
+                type: 'text',
+              },
+            },
+          ],
+        },
+        {
+          type: 'fieldset',
+          legend: '变形',
+          name: 'transform',
+          items: [
+            {
+              type: 'data-source-field-select',
+              name: 'rotate',
+              text: '旋转角度',
+              checkStrictly: false,
+              dataSourceFieldType: ['string'],
+              fieldConfig: {
+                type: 'text',
+              },
+            },
+            {
+              type: 'data-source-field-select',
+              name: 'scale',
+              text: '缩放',
+              checkStrictly: false,
+              dataSourceFieldType: ['number', 'string'],
+              fieldConfig: {
+                type: 'text',
+              },
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+export const eventTabConfig: TabPaneConfig = {
+  title: '事件',
+  items: [
+    {
+      name: 'events',
+      src: 'component',
+      labelWidth: '100px',
+      type: 'event-select',
+    },
+  ],
+};
+
+export const advancedTabConfig: TabPaneConfig = {
+  title: '高级',
+  lazy: true,
+  items: [
+    {
+      name: 'created',
+      text: 'created',
+      type: 'code-select',
+    },
+    {
+      name: 'mounted',
+      text: 'mounted',
+      type: 'code-select',
+    },
+  ],
+};
+
+export const displayTabConfig: TabPaneConfig = {
+  title: '显示条件',
+  display: (vm: FormState, { model }: any) => model.type !== 'page',
+  items: [
+    {
+      type: 'display-conds',
+      name: 'displayConds',
+      titlePrefix: '条件组',
+      defaultValue: [],
+    },
+  ],
+};
+
+/**
+ * 统一为组件属性表单加上事件、高级、样式配置
+ * @param config 组件属性配置
+ * @returns Object
+ */
+export const fillConfig = (config: FormConfig = [], labelWidth = '80px'): FormConfig => [
+  {
+    type: 'tab',
+    labelWidth,
+    items: [
+      {
+        title: '属性',
+        items: [
+          // 组件类型，必须要有
+          {
+            text: 'type',
+            name: 'type',
+            type: 'hidden',
+          },
+          // 组件id，必须要有
+          {
+            name: 'id',
+            type: 'display',
+            text: 'id',
+          },
+          {
+            name: 'name',
+            text: '组件名称',
+          },
+          ...config,
+        ],
+      },
+      { ...styleTabConfig },
+      { ...eventTabConfig },
+      { ...advancedTabConfig },
+      { ...displayTabConfig },
+    ],
+  },
+];

package/src/utils/scroll-viewer.ts

@@ -0,0 +1,165 @@
+import { EventEmitter } from 'events';
+
+interface ScrollViewerOptions {
+  container: HTMLDivElement;
+  target: HTMLDivElement;
+  zoom: number;
+  correctionScrollSize?: {
+    width: number;
+    height: number;
+  };
+}
+
+export class ScrollViewer extends EventEmitter {
+  private container: HTMLDivElement;
+  private target: HTMLDivElement;
+  private zoom = 1;
+
+  private scrollLeft = 0;
+  private scrollTop = 0;
+
+  private scrollHeight = 0;
+  private scrollWidth = 0;
+
+  private width = 0;
+  private height = 0;
+
+  private translateXCorrectionValue = 0;
+  private translateYCorrectionValue = 0;
+
+  private correctionScrollSize = {
+    width: 0,
+    height: 0,
+  };
+
+  private resizeObserver = new ResizeObserver(() => {
+    this.setSize();
+    this.setScrollSize();
+  });
+
+  constructor(options: ScrollViewerOptions) {
+    super();
+
+    this.container = options.container;
+    this.target = options.target;
+    this.zoom = options.zoom;
+
+    if (this.correctionScrollSize) {
+      this.correctionScrollSize = {
+        ...this.correctionScrollSize,
+        ...options.correctionScrollSize,
+      };
+    }
+
+    this.container.addEventListener('wheel', this.wheelHandler, false);
+
+    this.setSize();
+    this.setScrollSize();
+    this.resizeObserver.observe(this.container);
+    this.resizeObserver.observe(this.target);
+  }
+
+  public destroy() {
+    this.resizeObserver.disconnect();
+    this.container.removeEventListener('wheel', this.wheelHandler, false);
+    this.removeAllListeners();
+  }
+
+  public setZoom(zoom: number) {
+    this.zoom = zoom;
+    this.setScrollSize();
+  }
+
+  public scrollTo({ left, top }: { left?: number; top?: number }) {
+    if (typeof left !== 'undefined') {
+      this.scrollLeft = left;
+    }
+
+    if (typeof top !== 'undefined') {
+      this.scrollTop = top;
+    }
+
+    const translateX = -this.scrollLeft + this.translateXCorrectionValue;
+    const translateY = -this.scrollTop + this.translateYCorrectionValue;
+    this.target.style.transform = `translate(${translateX}px, ${translateY}px)`;
+  }
+
+  private wheelHandler = (event: WheelEvent) => {
+    const { deltaX, deltaY, currentTarget } = event;
+
+    if (currentTarget !== this.container) return;
+
+    let top: number | undefined;
+    if (this.scrollHeight > this.height) {
+      top = this.scrollTop + this.getPos(deltaY, this.scrollTop, this.scrollHeight, this.height);
+    }
+
+    let left: number | undefined;
+    if (this.scrollWidth > this.width) {
+      left = this.scrollLeft + this.getPos(deltaX, this.scrollLeft, this.scrollWidth, this.width);
+    }
+
+    this.scrollTo({ left, top });
+    this.emit('scroll', {
+      scrollLeft: this.scrollLeft,
+      scrollTop: this.scrollTop,
+      scrollHeight: this.scrollHeight,
+      scrollWidth: this.scrollWidth,
+    });
+  };
+
+  private getPos(delta: number, scrollPos: number, scrollSize: number, size: number) {
+    let pos = 0;
+    if (delta < 0) {
+      if (scrollPos > 0) {
+        pos = Math.max(delta, -scrollPos);
+      }
+    } else {
+      const leftPos = scrollSize - size - scrollPos;
+      if (leftPos > 0) {
+        pos = Math.min(delta, leftPos);
+      }
+    }
+    return pos;
+  }
+
+  private setScrollSize = () => {
+    const targetRect = this.target.getBoundingClientRect();
+    this.scrollWidth = targetRect.width * this.zoom + this.correctionScrollSize.width;
+    const targetMarginTop = Number(this.target.style.marginTop) || 0;
+    this.scrollHeight = (targetRect.height + targetMarginTop) * this.zoom + this.correctionScrollSize.height;
+
+    let left: number | undefined;
+    let top: number | undefined;
+    if (this.scrollWidth < this.width) {
+      left = 0;
+      this.translateXCorrectionValue = 0;
+    } else {
+      this.translateXCorrectionValue = (this.scrollWidth - this.width) / 2;
+    }
+    if (this.scrollHeight < this.height) {
+      top = 0;
+      this.translateYCorrectionValue = 0;
+    } else {
+      this.translateYCorrectionValue = (this.scrollHeight - this.height) / 2;
+    }
+
+    this.scrollTo({
+      left,
+      top,
+    });
+
+    this.emit('scroll', {
+      scrollLeft: this.scrollLeft,
+      scrollTop: this.scrollTop,
+      scrollHeight: this.scrollHeight,
+      scrollWidth: this.scrollWidth,
+    });
+  };
+
+  private setSize = () => {
+    const { width, height } = this.container.getBoundingClientRect();
+    this.width = width;
+    this.height = height;
+  };
+}

package/src/utils/tree.ts

@@ -0,0 +1,15 @@
+import type { Id } from '@tmagic/schema';
+import { getKeys } from '@tmagic/utils';
+
+import type { LayerNodeStatus } from '@editor/type';
+
+export const updateStatus = (nodeStatusMap: Map<Id, LayerNodeStatus>, id: Id, status: Partial<LayerNodeStatus>) => {
+  const nodeStatus = nodeStatusMap.get(id);
+
+  if (!nodeStatus) return;
+  getKeys(status).forEach((key) => {
+    if (nodeStatus[key] !== undefined && status[key] !== undefined) {
+      nodeStatus[key] = Boolean(status[key]);
+    }
+  });
+};

package/src/utils/undo-redo.ts

@@ -0,0 +1,76 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { cloneDeep } from 'lodash-es';
+
+export class UndoRedo<T = any> {
+  private elementList: T[];
+  private listCursor: number;
+  private listMaxSize: number;
+
+  constructor(listMaxSize = 20) {
+    const minListMaxSize = 2;
+    this.elementList = [];
+    this.listCursor = 0;
+    this.listMaxSize = listMaxSize > minListMaxSize ? listMaxSize : minListMaxSize;
+  }
+
+  public pushElement(element: T): void {
+    // 新元素进来时，把游标之外的元素全部丢弃，并把新元素放进来
+    this.elementList.splice(this.listCursor, this.elementList.length - this.listCursor, cloneDeep(element));
+    this.listCursor += 1;
+    // 如果list中的元素超过maxSize，则移除第一个元素
+    if (this.elementList.length > this.listMaxSize) {
+      this.elementList.shift();
+      this.listCursor -= 1;
+    }
+  }
+
+  public canUndo(): boolean {
+    return this.listCursor > 1;
+  }
+
+  // 返回undo后的当前元素
+  public undo(): T | null {
+    if (!this.canUndo()) {
+      return null;
+    }
+    this.listCursor -= 1;
+    return this.getCurrentElement();
+  }
+
+  public canRedo() {
+    return this.elementList.length > this.listCursor;
+  }
+
+  // 返回redo后的当前元素
+  public redo(): T | null {
+    if (!this.canRedo()) {
+      return null;
+    }
+    this.listCursor += 1;
+    return this.getCurrentElement();
+  }
+
+  public getCurrentElement(): T | null {
+    if (this.listCursor < 1) {
+      return null;
+    }
+    return cloneDeep(this.elementList[this.listCursor - 1]);
+  }
+}

package/types/editorProps.d.ts

@@ -2,7 +2,7 @@ import type { EventOption } from '@tmagic/core';
 import type { FormConfig, FormState } from '@tmagic/form';
 import type { DataSourceSchema, Id, MApp, MNode } from '@tmagic/schema';
 import StageCore, { ContainerHighlightType, type CustomizeMoveableOptionsCallbackConfig, type GuidesOptions, type MoveableOptions, RenderType, type UpdateDragEl } from '@tmagic/stage';
-import type { ComponentGroup, DatasourceTypeOption, MenuBarData, MenuButton, MenuComponent, SideBarData, StageRect } from './type';
+import type { ComponentGroup, DatasourceTypeOption, MenuBarData, MenuButton, MenuComponent, PageBarSortOptions, SideBarData, StageRect } from './type';
 export interface EditorProps {
     /** 页面初始值 */
     modelValue?: MApp;
@@ -80,6 +80,8 @@ export interface EditorProps {
     /** 用于自定义组件树与画布的右键菜单 */
     customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
     extendFormState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
+    /** 页面顺序拖拽配置参数 */
+    pageBarSortOptions?: PageBarSortOptions;
 }
 export declare const defaultEditorProps: {
     renderType: RenderType;

package/types/fields/CondOpSelect.vue.d.ts

@@ -0,0 +1,17 @@
+import type { FieldProps } from '@tmagic/form';
+import type { CondOpSelectConfig } from '../type';
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<FieldProps<CondOpSelectConfig>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<FieldProps<CondOpSelectConfig>>>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+}, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<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;
+    };
+};