@tmagic/editor 1.0.0-beta.8 → 1.0.0-rc.10

package/src/services/ui.ts

@@ -25,6 +25,17 @@ import type { GetColumnWidth, SetColumnWidth, StageRect, UiState } from '@editor
 
 import BaseService from './BaseService';
 
+const DEFAULT_LEFT_COLUMN_WIDTH = 310;
+const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
+
+const COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorColumnWidthData';
+
+const defaultColumnWidth = {
+  left: DEFAULT_LEFT_COLUMN_WIDTH,
+  center: globalThis.document.body.clientWidth - DEFAULT_LEFT_COLUMN_WIDTH - DEFAULT_RIGHT_COLUMN_WIDTH,
+  right: DEFAULT_RIGHT_COLUMN_WIDTH,
+};
+
 const state = reactive<UiState>({
   uiSelectMode: false,
   showSrc: false,
@@ -37,13 +48,10 @@ const state = reactive<UiState>({
     width: 375,
     height: 817,
   },
-  columnWidth: {
-    left: 310,
-    center: globalThis.document.body.clientWidth - 310 - 400,
-    right: 400,
-  },
+  columnWidth: defaultColumnWidth,
   showGuides: true,
   showRule: true,
+  propsPanelSize: 'small',
 });
 
 class Ui extends BaseService {
@@ -54,6 +62,16 @@ class Ui extends BaseService {
         center: 'auto',
       });
     });
+
+    const columnWidthCacheData = globalThis.localStorage.getItem(COLUMN_WIDTH_STORAGE_KEY);
+    if (columnWidthCacheData) {
+      try {
+        const columnWidthCache = JSON.parse(columnWidthCacheData);
+        this.setColumnWidth(columnWidthCache);
+      } catch (e) {
+        console.error(e);
+      }
+    }
   }
 
   public set<T = any>(name: keyof UiState, value: T) {
@@ -88,6 +106,11 @@ class Ui extends BaseService {
     return (state as any)[name];
   }
 
+  public zoom(zoom: number) {
+    this.set('zoom', (this.get<number>('zoom') * 100 + zoom * 100) / 100);
+    if (this.get<number>('zoom') < 0.1) this.set('zoom', 0.1);
+  }
+
   private setColumnWidth({ left, center, right }: SetColumnWidth) {
     const columnWidth = {
       ...toRaw(this.get<GetColumnWidth>('columnWidth')),
@@ -104,10 +127,17 @@ class Ui extends BaseService {
     if (!center || center === 'auto') {
       const bodyWidth = globalThis.document.body.clientWidth;
       columnWidth.center = bodyWidth - (columnWidth?.left || 0) - (columnWidth?.right || 0);
+      if (columnWidth.center <= 0) {
+        columnWidth.left = defaultColumnWidth.left;
+        columnWidth.center = defaultColumnWidth.center;
+        columnWidth.right = defaultColumnWidth.right;
+      }
     } else {
       columnWidth.center = center;
     }
 
+    globalThis.localStorage.setItem(COLUMN_WIDTH_STORAGE_KEY, JSON.stringify(columnWidth));
+
     state.columnWidth = columnWidth;
   }
 

package/src/theme/common/var.scss

@@ -2,12 +2,13 @@ $--theme-color: #2882e0;
 
 $--font-color: #070303;
 $--border-color: #d9dbdd;
+$--hover-color: #f3f5f9;
 
 $--nav-height: 35px;
 $--nav-color: #070303;
-$--nav--background-color: #f8fbff;
+$--nav--background-color: #ffffff;
 
 $--sidebar-heder-background-color: $--theme-color;
-$--sidebar-content-background-color: #f8fbff;
+$--sidebar-content-background-color: #ffffff;
 
 $--page-bar-height: 32px;

package/src/theme/component-list-panel.scss

@@ -12,6 +12,7 @@
     top: 0;
     left: 0;
     box-sizing: border-box;
+    z-index: 1;
 
     .el-input__prefix {
       padding: 10px;
@@ -62,6 +63,7 @@
       color: $--font-color;
       flex-direction: column;
       width: 42px;
+      cursor: pointer;
 
       i {
         font-size: 20px;

package/src/theme/content-menu.scss

@@ -2,38 +2,45 @@
   position: fixed;
   font-size: 12px;
   background: #fff;
-  color: #333;
   box-shadow: 0 2px 8px 2px rgba(68, 73, 77, 0.16);
   z-index: 9999;
   transform-origin: 0% 0%;
   font-weight: 600;
   padding: 4px 0px;
+  overflow: auto;
+  max-height: 100%;
 
-  .separation {
-    width: 100%;
-    height: 0;
-    border-color: rgba(155, 155, 155, 0.1);
-  }
-
-  .subMenu {
-    position: absolute;
-    right: 0;
-    transform: translate(100%, 0);
-    background-color: #fff;
+  .menu-item {
     color: #333;
-    box-shadow: 0 2px 8px 2px rgba(68, 73, 77, 0.16);
-    top: 0;
-    height: 223px;
-  }
-}
+    display: flex;
+    -webkit-box-align: center;
+    align-items: center;
+    cursor: pointer;
+    min-width: 140px;
+    transition: all 0.2s ease 0s;
+    padding: 5px 14px;
+    border-left: 2px solid transparent;
+
+    .el-button {
+      width: 100%;
+      justify-content: flex-start;
+    }
 
-.magic-editor-content-menu-item {
-  display: flex;
-  -webkit-box-align: center;
-  align-items: center;
-  cursor: pointer;
-  min-width: 140px;
-  transition: all 0.2s ease 0s;
-  padding: 10px 14px;
-  border-left: 2px solid transparent;
+    .el-button--text,
+    i {
+      color: $--font-color;
+    }
+
+    &.divider {
+      padding: 0 14px;
+
+      .el-divider {
+        margin: 0;
+      }
+    }
+
+    &:hover {
+      background-color: $--hover-color;
+    }
+  }
 }

package/src/theme/layer-panel.scss

@@ -50,6 +50,16 @@
   color: #fff;
 }
 
+.magic-editor-layer-panel .cus-tree-node {
+  width: 100%;
+  overflow: hidden;
+}
+
+.magic-editor-layer-panel .cus-tree-node-hover {
+  background-color: $--hover-color;
+  width: 100%;
+}
+
 .magic-editor-layer-panel .el-tree-node:focus > .el-tree-node__content {
   background-color: $--sidebar-heder-background-color;
   color: #fff;

package/src/theme/nav-menu.scss

@@ -43,13 +43,17 @@
     display: flex !important;
     transition: all 0.3s ease 0s;
     border-bottom: 2px solid transparent;
-    margin: 0 5px;
+    margin: 0;
 
     .is-disabled {
       opacity: 0.5;
     }
 
-    .el-button--text,
+    .is-text {
+      padding: 5px;
+    }
+
+    .is-text,
     i {
       color: $--font-color;
     }

package/src/theme/page-bar.scss

@@ -6,18 +6,25 @@
   width: 100%;
   height: $--page-bar-height;
   line-height: $--page-bar-height;
-  background-color: #f3f3f3;
   color: $--font-color;
+  background-color: #f3f3f3;
   border-top: 1px solid $--border-color;
   z-index: 2;
+  overflow: hidden;
+
+  &-items {
+    display: flex;
+    transition: transform 0.3s;
+  }
 
-  .m-editor-page-bar-item {
+  &-item {
     padding: 0 10px;
     cursor: pointer;
     border-right: 1px solid $--border-color;
     display: flex;
     justify-items: center;
     align-items: center;
+    background-color: #f3f3f3;
 
     &.active {
       background-color: #fff;
@@ -27,5 +34,38 @@
         cursor: pointer;
       }
     }
+
+    &-icon {
+      position: relative;
+      z-index: 1;
+    }
+
+    &-title {
+      max-width: 150px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+  }
+}
+
+.page-bar-popover {
+  &.el-popper.el-popover {
+    padding: 10px 0;
+  }
+
+  .menu-item {
+    cursor: pointer;
+    transition: all 0.2s ease 0s;
+    padding: 5px 14px;
+
+    .el-button--text,
+    i {
+      color: $--font-color;
+    }
+
+    &:hover {
+      background-color: $--hover-color;
+    }
   }
 }

package/src/theme/props-panel.scss

@@ -1,31 +1,33 @@
 .m-editor-props-panel {
   padding: 0 10px;
 
-  .el-form-item__label {
-    font-size: 12px;
-  }
-
-  .m-fieldset {
-    legend {
+  &.small {
+    .el-form-item__label {
       font-size: 12px;
     }
-  }
 
-  .el-tabs__item {
-    font-size: 12px;
+    .m-fieldset {
+      legend {
+        font-size: 12px;
+      }
+    }
+
+    .el-tabs__item {
+      font-size: 12px;
+    }
   }
 
-  span,
-  a,
-  p {
-    font-size: 12px;
+  .el-input__wrapper {
+    border-radius: 0;
   }
 }
 
 .m-editor-props-panel-popper {
-  span,
-  a,
-  p {
-    font-size: 12px;
+  &.small {
+    span,
+    a,
+    p {
+      font-size: 12px;
+    }
   }
 }

package/src/theme/workspace.scss

@@ -2,4 +2,8 @@
   height: 100%;
   width: 100%;
   user-select: none;
+
+  &:focus-visible {
+    outline: 0;
+  }
 }

package/src/type.ts

@@ -21,6 +21,7 @@ import type { Component } from 'vue';
 import type { FormConfig } from '@tmagic/form';
 import type { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
+import type { MoveableOptions } from '@tmagic/stage';
 
 import type { ComponentListService } from '@editor/services/componentList';
 import type { EditorService } from '@editor/services/editor';
@@ -45,13 +46,24 @@ export interface Services {
   uiService: UiService;
 }
 
+export interface StageOptions {
+  runtimeUrl: string;
+  autoScrollIntoView: boolean;
+  render: () => HTMLDivElement;
+  moveableOptions: MoveableOptions | ((core?: StageCore) => MoveableOptions);
+  canSelect: (el: HTMLElement) => boolean | Promise<boolean>;
+  updateDragEl: (el: HTMLDivElement) => void;
+}
+
 export interface StoreState {
   root: MApp | null;
   page: MPage | null;
   parent: MContainer | null;
   node: MNode | null;
+  highlightNode: MNode | null;
   stage: StageCore | null;
   modifiedNodeIds: Map<Id, Id>;
+  pageLength: number;
 }
 
 export interface PropsState {
@@ -97,6 +109,8 @@ export interface UiState {
   showGuides: boolean;
   /** 是否显示标尺，true: 显示，false: 不显示，默认为true */
   showRule: boolean;
+  /** 用于控制该属性配置表单内组件的尺寸 */
+  propsPanelSize: 'large' | 'default' | 'small';
 }
 
 export interface EditorNodeInfo {
@@ -124,6 +138,8 @@ export interface MenuButton {
    * zoom: 放大缩小
    */
   type: 'button' | 'dropdown' | 'text' | 'divider' | 'zoom';
+  /** 当type为divider时有效，分割线方向, 默认vertical */
+  direction?: 'horizontal' | 'vertical';
   /** 展示的文案 */
   text?: string;
   /** 鼠标悬浮是显示的气泡中的文案 */
@@ -135,14 +151,9 @@ export interface MenuButton {
   /** 是否显示，默认为true */
   display?: boolean | ((data?: Services) => boolean);
   /** type为button/dropdown时点击运行的方法 */
-  handler?: (data?: Services) => Promise<any> | any;
-  /** type为dropdown时，下拉的菜单列表 */
-  items?: {
-    /** 展示的文案 */
-    text: string;
-    /** 点击运行的方法 */
-    handler(data: Services): any;
-  }[];
+  handler?: (data: Services, event: MouseEvent) => Promise<any> | any;
+  /** type为dropdown时，下拉的菜单列表， 或者有子菜单时 */
+  items?: MenuButton[];
 }
 
 export interface MenuComponent {
@@ -219,7 +230,9 @@ export interface ComponentItem {
   type: string;
   /** element-plus icon class */
   icon?: string | Component;
-  [key: string]: any;
+  data?: {
+    [key: string]: any;
+  };
 }
 
 export interface ComponentGroup {
@@ -229,6 +242,11 @@ export interface ComponentGroup {
   items: ComponentItem[];
 }
 
+export interface UpdateData {
+  id: Id;
+  [key: string]: any;
+}
+
 export enum LayerOffset {
   TOP = 'top',
   BOTTOM = 'bottom',

package/src/utils/editor.ts

@@ -16,17 +16,15 @@
  * limitations under the License.
  */
 
-import { random } from 'lodash-es';
-
-import { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
-import { getNodePath, isPop } from '@tmagic/utils';
+import type { MApp, MContainer, MNode, MPage } from '@tmagic/schema';
+import { NodeType } from '@tmagic/schema';
+import type StageCore from '@tmagic/stage';
+import { getNodePath, isNumber, isPage, 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跟节点
@@ -34,7 +32,7 @@ export const generateId = (type: string | number): string => `${type}_${random(1
  */
 export const getPageList = (app: MApp): MPage[] => {
   if (app.items && Array.isArray(app.items)) {
-    return app.items.filter((item: MPage) => item.type === 'page');
+    return app.items.filter((item: MPage) => item.type === NodeType.PAGE);
   }
   return [];
 };
@@ -72,58 +70,13 @@ export const generatePageName = (pageNameList: string[]): 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 => {
+export const getNodeIndex = (node: MNode, parent: MContainer | MApp): number => {
   const items = parent?.items || [];
   return items.findIndex((item: MNode) => `${item.id}` === `${node.id}`);
 };
@@ -138,11 +91,33 @@ export const toRelative = (node: MNode) => {
   return node;
 };
 
-export const initPosition = (node: MNode, layout: Layout) => {
+const setTop2Middle = (node: MNode, parentNode: MNode, stage: StageCore) => {
+  const style = node.style || {};
+  let height = style.height || 0;
+
+  if (!stage || typeof style.top !== 'undefined' || !parentNode.style) return style;
+
+  if (!isNumber(height)) {
+    height = 0;
+  }
+
+  const { height: parentHeight } = parentNode.style;
+
+  if (isPage(parentNode)) {
+    const { scrollTop = 0, wrapperHeight } = stage.mask;
+    style.top = (wrapperHeight - height) / 2 + scrollTop;
+  } else {
+    style.top = (parentHeight - height) / 2;
+  }
+
+  return style;
+};
+
+export const initPosition = (node: MNode, layout: Layout, parentNode: MNode, stage: StageCore) => {
   if (layout === Layout.ABSOLUTE) {
     node.style = {
       position: 'absolute',
-      ...(node.style || {}),
+      ...setTop2Middle(node, parentNode, stage),
     };
     return node;
   }
@@ -193,12 +168,18 @@ export const change2Fixed = (node: MNode, root: MApp) => {
   return node;
 };
 
-export const Fixed2Other = async (node: MNode, root: MApp, getLayout: (node: MNode) => Promise<Layout>) => {
+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) => {

package/src/utils/polyfills.ts

@@ -0,0 +1,8 @@
+// serialize-javascript 依赖的 randombytes 依赖全局的 global 对象，因此此处需添加 global polyfill
+if (typeof global === 'undefined') {
+  (window as any).global = window;
+}
+
+if (typeof globalThis === 'undefined') {
+  (window as any).globalThis = window;
+}

package/src/utils/props.ts

@@ -20,7 +20,6 @@ import { FormConfig, FormState } from '@tmagic/form';
 
 import editorService from '@editor/services/editor';
 import eventsService from '@editor/services/events';
-import { generateId } from '@editor/utils/editor';
 
 /**
  * 统一为组件属性表单加上事件、高级、样式配置
@@ -142,6 +141,40 @@ export const fillConfig = (config: FormConfig = []) => [
                   },
                 ],
               },
+              {
+                type: 'fieldset',
+                legend: '字体',
+                items: [
+                  {
+                    name: 'color',
+                    text: '颜色',
+                    type: 'colorPicker',
+                  },
+                  {
+                    name: 'fontSize',
+                    text: '大小',
+                  },
+                  {
+                    name: 'fontWeight',
+                    text: '粗细',
+                  },
+                ],
+              },
+              {
+                type: 'fieldset',
+                legend: '变形',
+                name: 'transform',
+                items: [
+                  {
+                    name: 'rotate',
+                    text: '旋转角度',
+                  },
+                  {
+                    name: 'scale',
+                    text: '缩放',
+                  },
+                ],
+              },
             ],
           },
         ],
@@ -174,7 +207,7 @@ export const fillConfig = (config: FormConfig = []) => [
                 type: 'select',
                 options: (mForm: FormState, { model }: any) => {
                   const node = editorService.getNodeById(model.to);
-                  if (!node) return [];
+                  if (!node?.type) return [];
 
                   return eventsService.getMethod(node.type).map((option) => ({
                     text: option.label,
@@ -210,9 +243,18 @@ export const DEFAULT_CONFIG: FormConfig = fillConfig([]);
  * @param type 组件类型
  * @returns Object
  */
-export const getDefaultPropsValue = (type: string) => ({
-  type,
-  id: generateId(type),
-  style: {},
-  name: type,
-});
+export const getDefaultPropsValue = (type: string, id: string) =>
+  ['page', 'container'].includes(type)
+    ? {
+        type,
+        id,
+        style: {},
+        name: type,
+        items: [],
+      }
+    : {
+        type,
+        id,
+        style: {},
+        name: type,
+      };