@tmagic/editor 1.0.0-beta.1

package/src/utils/editor.ts

@@ -0,0 +1,244 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 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, random } from 'lodash-es';
+
+import { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
+import { getNodePath, isPop } from '@tmagic/utils';
+
+import { Layout } from '@editor/type';
+
+export const COPY_STORAGE_KEY = '$MagicEditorCopyData';
+
+export const generateId = (type: string | number): string => `${type}_${random(10000, false)}`;
+
+/**
+ * 获取所有页面配置
+ * @param app DSL跟节点
+ * @returns 所有页面配置
+ */
+export const getPageList = (app: MApp): MPage[] => {
+  if (app.items && Array.isArray(app.items)) {
+    return app.items.filter((item: MPage) => item.type === 'page');
+  }
+  return [];
+};
+
+/**
+ * 获取所有页面名称
+ * @param pages 所有页面配置
+ * @returns 所有页面名称
+ */
+export const getPageNameList = (pages: MPage[]): string[] => pages.map((page: MPage) => page.name || 'index');
+
+/**
+ * 新增页面时，生成页面名称
+ * @param {Object} pageNameList 所有页面名称
+ * @returns {string}
+ */
+export const generatePageName = (pageNameList: string[]): string => {
+  let pageLength = pageNameList.length;
+
+  if (!pageLength) return 'index';
+
+  let pageName = `page_${pageLength}`;
+  while (pageNameList.includes(pageName)) {
+    pageLength += 1;
+    pageName = `page_${pageLength}`;
+  }
+
+  return pageName;
+};
+
+/**
+ * 新增页面时，生成页面名称
+ * @param {Object} app 所有页面配置
+ * @returns {string}
+ */
+export const generatePageNameByApp = (app: MApp): string => generatePageName(getPageNameList(getPageList(app)));
+
+/**
+ * 复制页面时，需要把组件下关联的弹窗id换测复制出来的弹窗的id
+ * @param {number} oldId 复制的源弹窗id
+ * @param {number} popId 新的弹窗id
+ * @param {Object} pageConfig 页面配置
+ */
+const updatePopId = (oldId: Id, popId: Id, pageConfig: MPage) => {
+  pageConfig.items?.forEach((config) => {
+    if (config.pop === oldId) {
+      config.pop = popId;
+      return;
+    }
+
+    if (config.popId === oldId) {
+      config.popId = popId;
+      return;
+    }
+
+    if (Array.isArray(config.items)) {
+      updatePopId(oldId, popId, config as MPage);
+    }
+  });
+};
+
+/**
+ * 将组件与组件的子元素配置中的id都设置成一个新的ID
+ * @param {Object} config 组件配置
+ */
+/* eslint no-param-reassign: ["error", { "props": false }] */
+export const setNewItemId = (config: MNode, parent?: MPage) => {
+  const oldId = config.id;
+
+  config.id = generateId(config.type);
+  config.name = `${config.name?.replace(/_(\d+)$/, '')}_${config.id}`;
+
+  // 只有弹窗在页面下的一级子元素才有效
+  if (isPop(config) && parent?.type === 'page') {
+    updatePopId(oldId, config.id, parent);
+  }
+
+  if (config.items && Array.isArray(config.items)) {
+    config.items.forEach((item) => setNewItemId(item, config as MPage));
+  }
+};
+
+/**
+ * @param {Object} node
+ * @returns {boolean}
+ */
+export const isFixed = (node: MNode): boolean => node.style?.position === 'fixed';
+
+export const getNodeIndex = (node: MNode, parent: MContainer): number => {
+  const items = parent?.items || [];
+  return items.findIndex((item: MNode) => `${item.id}` === `${node.id}`);
+};
+
+export const toRelative = (node: MNode) => {
+  node.style = {
+    ...(node.style || {}),
+    position: 'relative',
+    top: 0,
+    left: 0,
+  };
+  return node;
+};
+
+export const initPosition = (node: MNode, layout: Layout) => {
+  if (layout === Layout.ABSOLUTE) {
+    node.style = {
+      position: 'absolute',
+      ...(node.style || {}),
+    };
+    return node;
+  }
+
+  if (layout === Layout.RELATIVE) {
+    return toRelative(node);
+  }
+
+  return node;
+};
+
+export const setLayout = (node: MNode, layout: Layout) => {
+  node.items?.forEach((child: MNode) => {
+    if (isPop(child)) return;
+
+    child.style = child.style || {};
+
+    // 是 fixed 不做处理
+    if (child.style.position === 'fixed') return;
+
+    if (layout !== Layout.RELATIVE) {
+      child.style.position = 'absolute';
+    } else {
+      toRelative(child);
+      child.style.right = 'auto';
+      child.style.bottom = 'auto';
+    }
+  });
+  return node;
+};
+
+export const change2Fixed = (node: MNode, root: MApp) => {
+  const path = getNodePath(node.id, root.items);
+  const offset = {
+    left: 0,
+    top: 0,
+  };
+
+  path.forEach((value) => {
+    offset.left = offset.left + globalThis.parseFloat(value.style?.left || 0);
+    offset.top = offset.top + globalThis.parseFloat(value.style?.top || 0);
+  });
+
+  node.style = {
+    ...(node.style || {}),
+    ...offset,
+  };
+  return node;
+};
+
+export const Fixed2Other = async (node: MNode, root: MApp, getLayout: (node: MNode) => Promise<Layout>) => {
+  const path = getNodePath(node.id, root.items);
+  const cur = path.pop();
+  const offset = {
+    left: cur?.style?.left || 0,
+    top: cur?.style?.top || 0,
+  };
+
+  path.forEach((value) => {
+    offset.left = offset.left - globalThis.parseFloat(value.style?.left || 0);
+    offset.top = offset.top - globalThis.parseFloat(value.style?.top || 0);
+  });
+
+  const parent = path.pop();
+  if (!parent) {
+    return toRelative(node);
+  }
+
+  const layout = await getLayout(parent);
+  if (layout !== Layout.RELATIVE) {
+    node.style = {
+      ...(node.style || {}),
+      ...offset,
+      position: 'absolute',
+    };
+    return node;
+  }
+
+  return toRelative(node);
+};
+
+export const defaults = (object: any, source: any) => {
+  let o = source;
+  if (Array.isArray(object)) {
+    o = object;
+  }
+
+  Object.entries(o).forEach(([key, value]: [string, any]) => {
+    if (typeof object[key] === 'undefined') {
+      object[key] = value;
+      return;
+    }
+
+    if (value && typeof value !== 'string' && Object.keys(value).length) {
+      object[key] = defaults(cloneDeep(object[key]), value);
+    }
+  });
+  return object;
+};

package/src/utils/index.ts

@@ -0,0 +1,22 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 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.
+ */
+
+export * from './config';
+export * from './props';
+export * from './logger';
+export * from './editor';

package/src/utils/logger.ts

@@ -0,0 +1,47 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 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.
+ */
+
+export const log = (...args: any[]) => {
+  if (process.env.NODE_ENV === 'development') {
+    console.log('magic editor: ', ...args);
+  }
+};
+
+export const info = (...args: any[]) => {
+  if (process.env.NODE_ENV === 'development') {
+    console.info('magic editor: ', ...args);
+  }
+};
+
+export const warn = (...args: any[]) => {
+  if (process.env.NODE_ENV === 'development') {
+    console.warn('magic editor: ', ...args);
+  }
+};
+
+export const debug = (...args: any[]) => {
+  if (process.env.NODE_ENV === 'development') {
+    console.debug('magic editor: ', ...args);
+  }
+};
+
+export const error = (...args: any[]) => {
+  if (process.env.NODE_ENV === 'development') {
+    console.error('magic editor: ', ...args);
+  }
+};

package/src/utils/props.ts

@@ -0,0 +1,218 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 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 { FormConfig, FormState } from '@tmagic/form';
+
+import editorService from '@editor/services/editor';
+import eventsService from '@editor/services/events';
+import { generateId } from '@editor/utils/editor';
+
+/**
+ * 统一为组件属性表单加上事件、高级、样式配置
+ * @param config 组件属性配置
+ * @returns Object
+ */
+export const fillConfig = (config: FormConfig = []) => [
+  {
+    type: 'tab',
+    items: [
+      {
+        title: '属性',
+        labelWidth: '80px',
+        items: [
+          // 组件类型，必须要有
+          {
+            text: 'type',
+            name: 'type',
+            type: 'hidden',
+          },
+          // 组件id，必须要有
+          {
+            name: 'id',
+            type: 'display',
+            text: 'id',
+          },
+          {
+            name: 'name',
+            text: '组件名称',
+          },
+          ...config,
+        ],
+      },
+      {
+        title: '样式',
+        labelWidth: '80px',
+        items: [
+          {
+            name: 'style',
+            items: [
+              {
+                type: 'fieldset',
+                legend: '位置',
+                items: [
+                  {
+                    name: 'position',
+                    type: 'checkbox',
+                    activeValue: 'fixed',
+                    inactiveValue: 'absolute',
+                    defaultValue: 'absolute',
+                    text: '固定定位',
+                  },
+                  {
+                    name: 'left',
+                    text: 'left',
+                  },
+                  {
+                    name: 'top',
+                    text: 'top',
+                    disabled: (vm: FormState, { model }: any) =>
+                      model.position === 'fixed' && model._magic_position === 'fixedBottom',
+                  },
+                  {
+                    name: 'right',
+                    text: 'right',
+                  },
+                  {
+                    name: 'bottom',
+                    text: 'bottom',
+                    disabled: (vm: FormState, { model }: any) =>
+                      model.position === 'fixed' && model._magic_position === 'fixedTop',
+                  },
+                ],
+              },
+              {
+                type: 'fieldset',
+                legend: '盒子',
+                items: [
+                  {
+                    name: 'width',
+                    text: '宽度',
+                  },
+                  {
+                    name: 'height',
+                    text: '高度',
+                  },
+                ],
+              },
+              {
+                type: 'fieldset',
+                legend: '背景',
+                items: [
+                  {
+                    name: 'backgroundImage',
+                    text: '背景图',
+                  },
+                  {
+                    name: 'backgroundColor',
+                    text: '背景颜色',
+                    type: 'colorPicker',
+                  },
+                  {
+                    name: 'backgroundRepeat',
+                    text: '背景图重复',
+                    type: 'select',
+                    defaultValue: 'no-repeat',
+                    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' },
+                    ],
+                  },
+                  {
+                    name: 'backgroundSize',
+                    text: '背景图大小',
+                    defaultValue: '100% 100%',
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        title: '事件',
+        items: [
+          {
+            type: 'table',
+            name: 'events',
+            items: [
+              {
+                name: 'name',
+                label: '事件名',
+                type: 'select',
+                options: (mForm: FormState, { formValue }: any) =>
+                  eventsService.getEvent(formValue.type).map((option) => ({
+                    text: option.label,
+                    value: option.value,
+                  })),
+              },
+              {
+                name: 'to',
+                label: '联动组件',
+                type: 'ui-select',
+              },
+              {
+                name: 'method',
+                label: '动作',
+                type: 'select',
+                options: (mForm: FormState, { model }: any) => {
+                  const node = editorService.getNodeById(model.to);
+                  if (!node) return [];
+
+                  return eventsService.getMethod(node.type).map((option) => ({
+                    text: option.label,
+                    value: option.value,
+                  }));
+                },
+              },
+            ],
+          },
+        ],
+      },
+      {
+        title: '高级',
+        labelWidth: '80px',
+        items: [
+          {
+            type: 'code-link',
+            name: 'created',
+            text: 'created',
+            formTitle: 'created',
+          },
+        ],
+      },
+    ],
+  },
+];
+
+// 默认组件属性表单配置
+export const DEFAULT_CONFIG: FormConfig = fillConfig([]);
+
+/**
+ * 获取默认属性配置
+ * @param type 组件类型
+ * @returns Object
+ */
+export const getDefaultPropsValue = (type: string) => ({
+  type,
+  id: generateId(type),
+  style: {},
+  name: type,
+});

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) 2021 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 = 200) {
+    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/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "../..",
+  },
+  "exclude": [
+    "**/dist/**/*"
+  ],
+}

package/vite.config.ts

@@ -0,0 +1,30 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 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 path from 'path';
+
+import { defineConfig } from 'vite';
+
+import { getBaseConfig } from '../vite-config';
+
+import pkg from './package.json';
+
+const deps = Object.keys(pkg.dependencies);
+const alias = [{ find: /@editor/, replacement: path.join(__dirname, './src') }];
+
+export default defineConfig(getBaseConfig(deps, 'TMagicEditor', alias));