@tmagic/editor 1.4.7 → 1.4.8

package/src/utils/props.ts

@@ -1,504 +0,0 @@
-/*
- * 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';
-
-import dataSourceService from '@editor/services/dataSource';
-
-const arrayOptions = [
-  { text: '包含', value: 'include' },
-  { text: '不包含', value: 'not_include' },
-];
-
-const eqOptions = [
-  { text: '等于', value: '=' },
-  { text: '不等于', value: '!=' },
-];
-
-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: 'groupList',
-      name: 'displayConds',
-      titlePrefix: '条件组',
-      expandAll: true,
-      items: [
-        {
-          type: 'table',
-          name: 'cond',
-          items: [
-            {
-              type: 'data-source-field-select',
-              name: 'field',
-              value: 'key',
-              label: '字段',
-              checkStrictly: false,
-              dataSourceFieldType: ['string', 'number', 'boolean', 'any'],
-            },
-            {
-              type: 'select',
-              options: (mForm, { model }) => {
-                const [id, ...fieldNames] = model.field;
-
-                const ds = dataSourceService.getDataSourceById(id);
-
-                let fields = ds?.fields || [];
-                let type = '';
-                (fieldNames || []).forEach((fieldName: string) => {
-                  const field = fields.find((f) => f.name === fieldName);
-                  fields = field?.fields || [];
-                  type = field?.type || '';
-                });
-
-                if (type === 'array') {
-                  return arrayOptions;
-                }
-
-                if (type === 'boolean') {
-                  return [
-                    { text: '是', value: 'is' },
-                    { text: '不是', value: 'not' },
-                  ];
-                }
-
-                if (type === 'number') {
-                  return [...eqOptions, ...numberOptions];
-                }
-
-                if (type === 'string') {
-                  return [...arrayOptions, ...eqOptions];
-                }
-
-                return [...arrayOptions, ...eqOptions, ...numberOptions];
-              },
-              label: '条件',
-              name: 'op',
-            },
-            {
-              label: '值',
-              items: [
-                {
-                  name: 'value',
-                  type: (mForm, { model }) => {
-                    const [id, ...fieldNames] = model.field;
-
-                    const ds = dataSourceService.getDataSourceById(id);
-
-                    let fields = ds?.fields || [];
-                    let type = '';
-                    (fieldNames || []).forEach((fieldName: string) => {
-                      const field = fields.find((f) => f.name === fieldName);
-                      fields = field?.fields || [];
-                      type = 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, { model }) => !['between', 'not_between'].includes(model.op),
-                },
-                {
-                  name: 'range',
-                  type: 'number-range',
-                  display: (vm, { model }) => ['between', 'not_between'].includes(model.op),
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    },
-  ],
-};
-
-/**
- * 统一为组件属性表单加上事件、高级、样式配置
- * @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

@@ -1,165 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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]);
-    }
-  });
-};