@tmagic/editor 1.0.0-rc.6 → 1.0.0-rc.9

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,6 +46,15 @@ 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;

package/src/utils/editor.ts

@@ -16,9 +16,7 @@
  * limitations under the License.
  */
 
-import { random } from 'lodash-es';
-
-import type { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
+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';
@@ -27,8 +25,6 @@ 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跟节点
@@ -74,51 +70,6 @@ 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 || 'component');
-  config.name = `${config.name?.replace(/_(\d+)$/, '')}_${config.id}`;
-
-  // 只有弹窗在页面下的一级子元素才有效
-  if (isPop(config) && parent?.type === NodeType.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}

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';
 
 /**
  * 统一为组件属性表单加上事件、高级、样式配置
@@ -161,6 +160,21 @@ export const fillConfig = (config: FormConfig = []) => [
                   },
                 ],
               },
+              {
+                type: 'fieldset',
+                legend: '变形',
+                name: 'transform',
+                items: [
+                  {
+                    name: 'rotate',
+                    text: '旋转角度',
+                  },
+                  {
+                    name: 'scale',
+                    text: '缩放',
+                  },
+                ],
+              },
             ],
           },
         ],
@@ -229,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,
+      };