@tmagic/editor 1.4.6 → 1.4.8

package/src/utils/editor.ts

@@ -1,294 +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 serialize from 'serialize-javascript';
-
-import type { Id, MApp, MContainer, MNode, MPage, MPageFragment } from '@tmagic/schema';
-import { NodeType } from '@tmagic/schema';
-import type StageCore from '@tmagic/stage';
-import { calcValueByFontsize, getNodePath, isNumber, isPage, isPageFragment, isPop } from '@tmagic/utils';
-
-import { Layout } from '@editor/type';
-export const COPY_STORAGE_KEY = '$MagicEditorCopyData';
-export const COPY_CODE_STORAGE_KEY = '$MagicEditorCopyCode';
-export const COPY_DS_STORAGE_KEY = '$MagicEditorCopyDataSource';
-
-/**
- * 获取所有页面配置
- * @param root DSL跟节点
- * @returns 所有页面配置
- */
-export const getPageList = (root?: MApp | null): MPage[] => {
-  if (!root) return [];
-  if (!Array.isArray(root.items)) return [];
-  return root.items.filter((item) => isPage(item)) as MPage[];
-};
-
-export const getPageFragmentList = (root?: MApp | null): MPageFragment[] => {
-  if (!root) return [];
-  if (!Array.isArray(root.items)) return [];
-  return root.items.filter((item) => isPageFragment(item)) as MPageFragment[];
-};
-
-/**
- * 获取所有页面名称
- * @param pages 所有页面配置
- * @returns 所有页面名称
- */
-export const getPageNameList = (pages: (MPage | MPageFragment)[]): string[] =>
-  pages.map((page) => page.name || 'index');
-
-/**
- * 新增页面时，生成页面名称
- * @param {Object} pageNameList 所有页面名称
- * @returns {string}
- */
-export const generatePageName = (pageNameList: string[], type: NodeType.PAGE | NodeType.PAGE_FRAGMENT): string => {
-  let pageLength = pageNameList.length;
-
-  if (!pageLength) return `${type}_index`;
-
-  let pageName = `${type}_${pageLength}`;
-  while (pageNameList.includes(pageName)) {
-    pageLength += 1;
-    pageName = `${type}_${pageLength}`;
-  }
-
-  return pageName;
-};
-
-/**
- * 新增页面时，生成页面名称
- * @param {Object} app 所有页面配置
- * @returns {string}
- */
-export const generatePageNameByApp = (app: MApp, type: NodeType.PAGE | NodeType.PAGE_FRAGMENT): string =>
-  generatePageName(getPageNameList(type === 'page' ? getPageList(app) : getPageFragmentList(app)), type);
-
-/**
- * @param {Object} node
- * @returns {boolean}
- */
-export const isFixed = (node: MNode): boolean => node.style?.position === 'fixed';
-
-export const getNodeIndex = (id: Id, parent: MContainer | MApp): number => {
-  const items = parent?.items || [];
-  return items.findIndex((item: MNode) => `${item.id}` === `${id}`);
-};
-
-export const getRelativeStyle = (style: Record<string, any> = {}): Record<string, any> => ({
-  ...style,
-  position: 'relative',
-  top: 0,
-  left: 0,
-});
-
-const getMiddleTop = (node: MNode, parentNode: MNode, stage: StageCore | null) => {
-  let height = node.style?.height || 0;
-
-  if (!stage || typeof node.style?.top !== 'undefined' || !parentNode.style) return node.style?.top;
-
-  if (!isNumber(height)) {
-    height = 0;
-  }
-
-  const { height: parentHeight } = parentNode.style;
-  // wrapperHeight 是未 calcValue的高度, 所以要将其calcValueByFontsize一下, 否则在pad or pc端计算的结果有误
-  const { scrollTop = 0, wrapperHeight } = stage.mask;
-  const wrapperHeightDeal = calcValueByFontsize(stage.renderer.getDocument()!, wrapperHeight);
-  const scrollTopDeal = calcValueByFontsize(stage.renderer.getDocument()!, scrollTop);
-  if (isPage(parentNode)) {
-    return (wrapperHeightDeal - height) / 2 + scrollTopDeal;
-  }
-
-  // 如果容器的元素高度大于当前视口高度的2倍, 添加的元素居中位置也会看不见, 所以要取最小值计算
-  return (Math.min(parentHeight, wrapperHeightDeal) - height) / 2;
-};
-
-export const getInitPositionStyle = (style: Record<string, any> = {}, layout: Layout) => {
-  if (layout === Layout.ABSOLUTE) {
-    const newStyle: Record<string, any> = {
-      ...style,
-      position: 'absolute',
-    };
-
-    if (typeof newStyle.left === 'undefined' && typeof newStyle.right === 'undefined') {
-      newStyle.left = 0;
-    }
-
-    return newStyle;
-  }
-
-  if (layout === Layout.RELATIVE) {
-    return getRelativeStyle(style);
-  }
-
-  return style;
-};
-
-export const setChildrenLayout = (node: MContainer, layout: Layout) => {
-  node.items?.forEach((child: MNode) => {
-    setLayout(child, layout);
-  });
-  return node;
-};
-
-export const setLayout = (node: MNode, layout: Layout) => {
-  if (isPop(node)) return;
-
-  const style = node.style || {};
-
-  // 是 fixed 不做处理
-  if (style.position === 'fixed') return;
-
-  if (layout !== Layout.RELATIVE) {
-    style.position = 'absolute';
-  } else {
-    node.style = getRelativeStyle(style);
-    node.style.right = 'auto';
-    node.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);
-  });
-
-  return {
-    ...(node.style || {}),
-    ...offset,
-  };
-};
-
-export const Fixed2Other = async (
-  node: MNode,
-  root: MApp,
-  getLayout: (parent: MNode, 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,
-    right: '',
-    bottom: '',
-  };
-
-  path.forEach((value) => {
-    offset.left = offset.left - globalThis.parseFloat(value.style?.left || 0);
-    offset.top = offset.top - globalThis.parseFloat(value.style?.top || 0);
-  });
-  const style = node.style || {};
-
-  const parent = path.pop();
-  if (!parent) {
-    return getRelativeStyle(style);
-  }
-
-  const layout = await getLayout(parent);
-  if (layout !== Layout.RELATIVE) {
-    return {
-      ...style,
-      ...offset,
-      position: 'absolute',
-    };
-  }
-
-  return getRelativeStyle(style);
-};
-
-export const getGuideLineFromCache = (key: string): number[] => {
-  if (!key) return [];
-
-  const guideLineCacheData = globalThis.localStorage.getItem(key);
-  if (guideLineCacheData) {
-    try {
-      return JSON.parse(guideLineCacheData) || [];
-    } catch (e) {
-      console.error(e);
-    }
-  }
-
-  return [];
-};
-
-export const fixNodeLeft = (config: MNode, parent: MContainer, doc?: Document) => {
-  if (!doc || !config.style || !isNumber(config.style.left)) return config.style?.left;
-
-  const el = doc.getElementById(`${config.id}`);
-  const parentEl = doc.getElementById(`${parent.id}`);
-
-  const left = Number(config.style?.left) || 0;
-  if (el && parentEl) {
-    const calcParentOffsetWidth = calcValueByFontsize(doc, parentEl.offsetWidth);
-    const calcElOffsetWidth = calcValueByFontsize(doc, el.offsetWidth);
-    if (calcElOffsetWidth + left > calcParentOffsetWidth) {
-      return calcParentOffsetWidth - calcElOffsetWidth;
-    }
-  }
-
-  return config.style.left;
-};
-
-export const fixNodePosition = (config: MNode, parent: MContainer, stage: StageCore | null) => {
-  if (config.style?.position !== 'absolute') {
-    return config.style;
-  }
-
-  return {
-    ...(config.style || {}),
-    top: getMiddleTop(config, parent, stage),
-    left: fixNodeLeft(config, parent, stage?.renderer.contentWindow?.document),
-  };
-};
-
-// 序列化配置
-export const serializeConfig = (config: any) =>
-  serialize(config, {
-    space: 2,
-    unsafe: true,
-  }).replace(/"(\w+)":\s/g, '$1: ');
-
-export interface NodeItem {
-  items?: NodeItem[];
-  [key: string]: any;
-}
-
-export const traverseNode = <T extends NodeItem = NodeItem>(
-  node: T,
-  cb: (node: T, parents: T[]) => void,
-  parents: T[] = [],
-) => {
-  cb(node, parents);
-
-  if (node.items?.length) {
-    parents.push(node);
-    node.items.forEach((item) => {
-      traverseNode(item as T, cb, [...parents]);
-    });
-  }
-};

package/src/utils/index.ts

@@ -1,24 +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.
- */
-
-export * from './config';
-export * from './props';
-export * from './logger';
-export * from './editor';
-export * from './operator';
-export * from './data-source';

package/src/utils/keybinding-config.ts

@@ -1,125 +0,0 @@
-import { KeyBindingCommand, KeyBindingItem } from '@editor/type';
-
-export enum KeyBindingContainerKey {
-  STAGE = 'stage',
-  LAYER_PANEL = 'layer-panel',
-}
-
-export default [
-  {
-    command: KeyBindingCommand.DELETE_NODE,
-    keybinding: ['delete', 'backspace'],
-    when: [
-      [KeyBindingContainerKey.STAGE, 'keyup'],
-      [KeyBindingContainerKey.LAYER_PANEL, 'keydown'],
-    ],
-  },
-  {
-    command: KeyBindingCommand.COPY_NODE,
-    keybinding: 'ctrl+c',
-    when: [
-      [KeyBindingContainerKey.STAGE, 'keydown'],
-      [KeyBindingContainerKey.LAYER_PANEL, 'keydown'],
-    ],
-  },
-  {
-    command: KeyBindingCommand.PASTE_NODE,
-    keybinding: 'ctrl+v',
-    when: [
-      [KeyBindingContainerKey.STAGE, 'keydown'],
-      [KeyBindingContainerKey.LAYER_PANEL, 'keydown'],
-    ],
-  },
-  {
-    command: KeyBindingCommand.CUT_NODE,
-    keybinding: 'ctrl+x',
-    when: [
-      [KeyBindingContainerKey.STAGE, 'keydown'],
-      [KeyBindingContainerKey.LAYER_PANEL, 'keydown'],
-    ],
-  },
-  {
-    command: KeyBindingCommand.UNDO,
-    keybinding: 'ctrl+z',
-    when: [
-      [KeyBindingContainerKey.STAGE, 'keydown'],
-      [KeyBindingContainerKey.LAYER_PANEL, 'keydown'],
-    ],
-  },
-  {
-    command: KeyBindingCommand.REDO,
-    keybinding: 'ctrl+shift+z',
-    when: [
-      [KeyBindingContainerKey.STAGE, 'keydown'],
-      [KeyBindingContainerKey.LAYER_PANEL, 'keydown'],
-    ],
-  },
-  {
-    command: KeyBindingCommand.MOVE_UP_1,
-    keybinding: 'up',
-    when: [[KeyBindingContainerKey.STAGE, 'keydown']],
-  },
-  {
-    command: KeyBindingCommand.MOVE_DOWN_1,
-    keybinding: 'down',
-    when: [[KeyBindingContainerKey.STAGE, 'keydown']],
-  },
-  {
-    command: KeyBindingCommand.MOVE_LEFT_1,
-    keybinding: 'left',
-    when: [[KeyBindingContainerKey.STAGE, 'keydown']],
-  },
-  {
-    command: KeyBindingCommand.MOVE_RIGHT_1,
-    keybinding: 'right',
-    when: [[KeyBindingContainerKey.STAGE, 'keydown']],
-  },
-  {
-    command: KeyBindingCommand.MOVE_UP_10,
-    keybinding: 'ctrl+up',
-    when: [[KeyBindingContainerKey.STAGE, 'keydown']],
-  },
-  {
-    command: KeyBindingCommand.MOVE_DOWN_10,
-    keybinding: 'ctrl+down',
-    when: [[KeyBindingContainerKey.STAGE, 'keydown']],
-  },
-  {
-    command: KeyBindingCommand.MOVE_LEFT_10,
-    keybinding: 'ctrl+left',
-    when: [[KeyBindingContainerKey.STAGE, 'keydown']],
-  },
-  {
-    command: KeyBindingCommand.MOVE_RIGHT_10,
-    keybinding: 'ctrl+right',
-    when: [[KeyBindingContainerKey.STAGE, 'keydown']],
-  },
-  {
-    command: KeyBindingCommand.SWITCH_NODE,
-    keybinding: 'tab',
-    when: [
-      [KeyBindingContainerKey.STAGE, 'keydown'],
-      [KeyBindingContainerKey.LAYER_PANEL, 'keydown'],
-    ],
-  },
-  {
-    command: KeyBindingCommand.ZOOM_IN,
-    keybinding: ['ctrl+=', 'ctrl+numpadplus'],
-    when: [[KeyBindingContainerKey.STAGE, 'keydown']],
-  },
-  {
-    command: KeyBindingCommand.ZOOM_OUT,
-    keybinding: ['ctrl+-', 'ctrl+numpad-'],
-    when: [[KeyBindingContainerKey.STAGE, 'keydown']],
-  },
-  {
-    command: KeyBindingCommand.ZOOM_FIT,
-    keybinding: 'ctrl+0',
-    when: [[KeyBindingContainerKey.STAGE, 'keydown']],
-  },
-  {
-    command: KeyBindingCommand.ZOOM_RESET,
-    keybinding: 'ctrl+1',
-    when: [[KeyBindingContainerKey.STAGE, 'keydown']],
-  },
-] as KeyBindingItem[];

package/src/utils/logger.ts

@@ -1,47 +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.
- */
-
-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/monaco-editor.ts

@@ -1,8 +0,0 @@
-import { emmetCSS, emmetHTML } from 'emmet-monaco-es';
-import * as monaco from 'monaco-editor';
-
-// 注册emmet插件
-emmetHTML(monaco);
-emmetCSS(monaco, ['css', 'scss']);
-
-export default monaco;

package/src/utils/operator.ts

@@ -1,106 +0,0 @@
-import { toRaw } from 'vue';
-import { isEmpty } from 'lodash-es';
-
-import { Id, MContainer, MNode, NodeType } from '@tmagic/schema';
-import { isPage, isPageFragment } from '@tmagic/utils';
-
-import editorService from '@editor/services/editor';
-import propsService from '@editor/services/props';
-import type { AddMNode, PastePosition } from '@editor/type';
-import { generatePageNameByApp, getInitPositionStyle } from '@editor/utils/editor';
-
-/**
- * 粘贴前置操作：返回分配了新id以及校准了坐标的配置
- * @param position 粘贴的坐标
- * @param config 待粘贴的元素配置(复制时保存的那份配置)
- * @returns
- */
-export const beforePaste = (position: PastePosition, config: MNode[]): MNode[] => {
-  if (!config[0]?.style) return config;
-  const curNode = editorService.get('node');
-  // 将数组中第一个元素的坐标作为参照点
-  const { left: referenceLeft, top: referenceTop } = config[0].style;
-  // 坐标校准后的粘贴数据
-  const pasteConfigs: MNode[] = config.map((configItem: MNode): MNode => {
-    // 解构 position 对象，从 position 删除 offsetX、offsetY字段
-    const { offsetX = 0, offsetY = 0, ...positionClone } = position;
-    let pastePosition = positionClone;
-
-    if (!isEmpty(pastePosition) && curNode?.items) {
-      // 如果没有传入粘贴坐标则可能为键盘操作，不再转换
-      // 如果粘贴时选中了容器，则将元素粘贴到容器内，坐标需要转换为相对于容器的坐标
-      pastePosition = getPositionInContainer(pastePosition, curNode.id);
-    }
-
-    // 将所有待粘贴元素坐标相对于多选第一个元素坐标重新计算，以保证多选粘贴后元素间距不变
-    if (pastePosition.left && configItem.style?.left) {
-      pastePosition.left = configItem.style.left - referenceLeft + pastePosition.left;
-    }
-    if (pastePosition.top && configItem.style?.top) {
-      pastePosition.top = configItem.style?.top - referenceTop + pastePosition.top;
-    }
-    const pasteConfig = propsService.setNewItemId(configItem, false);
-
-    if (pasteConfig.style) {
-      const { left, top } = pasteConfig.style;
-      // 判断能转换为数字时，做粘贴偏移量计算
-      if (typeof left === 'number' || (!!left && !isNaN(Number(left)))) {
-        pasteConfig.style.left = Number(left) + offsetX;
-      }
-      if (typeof top === 'number' || (!!top && !isNaN(Number(top)))) {
-        pasteConfig.style.top = Number(top) + offsetY;
-      }
-
-      pasteConfig.style = {
-        ...pasteConfig.style,
-        ...pastePosition,
-      };
-    }
-    const root = editorService.get('root');
-    if ((isPage(pasteConfig) || isPageFragment(pasteConfig)) && root) {
-      pasteConfig.name = generatePageNameByApp(root, isPage(pasteConfig) ? NodeType.PAGE : NodeType.PAGE_FRAGMENT);
-    }
-    return pasteConfig as MNode;
-  });
-  return pasteConfigs;
-};
-
-/**
- * 将元素粘贴到容器内时，将相对于画布坐标转换为相对于容器的坐标
- * @param position PastePosition 粘贴时相对于画布的坐标
- * @param id 元素id
- * @returns PastePosition 转换后的坐标
- */
-export const getPositionInContainer = (position: PastePosition = {}, id: Id) => {
-  let { left = 0, top = 0 } = position;
-  const parentEl = editorService.get('stage')?.renderer?.contentWindow?.document.getElementById(`${id}`);
-  const parentElRect = parentEl?.getBoundingClientRect();
-  left = left - (parentElRect?.left || 0);
-  top = top - (parentElRect?.top || 0);
-  return {
-    left,
-    top,
-  };
-};
-
-export const getAddParent = (node: MNode) => {
-  const curNode = editorService.get('node');
-
-  let parentNode;
-  if (isPage(node)) {
-    parentNode = editorService.get('root');
-  } else if (curNode?.items) {
-    parentNode = curNode as MContainer;
-  } else if (curNode?.id) {
-    parentNode = editorService.getParentById(curNode.id, false);
-  }
-  return parentNode;
-};
-
-export const getDefaultConfig = async (addNode: AddMNode, parentNode: MContainer) => {
-  const { type, inputEvent, ...config } = addNode;
-  const layout = await editorService.getLayout(toRaw(parentNode), addNode as MNode);
-  const newNode = { ...toRaw(await propsService.getPropsValue(type, config)) };
-  newNode.style = getInitPositionStyle(newNode.style, layout);
-  return newNode;
-};