@tmagic/editor 1.2.0-beta.25 → 1.2.0-beta.27

package/dist/style.css

@@ -325,13 +325,13 @@
   left: 0;
   z-index: 1;
 }
-.ui-component-panel {
+.ui-component-panel.tmagic-design-collapse {
   height: 100%;
   border-top: 0 !important;
   margin-top: 48px;
   background-color: #ffffff;
 }
-.ui-component-panel .search-input {
+.ui-component-panel.tmagic-design-collapse .search-input {
   background: #fff;
   color: #bbbbbb;
   padding: 10px;
@@ -341,14 +341,15 @@
   box-sizing: border-box;
   z-index: 1;
 }
-.ui-component-panel .search-input .el-input__prefix {
+.ui-component-panel.tmagic-design-collapse .search-input .el-input__prefix {
   padding: 7px;
 }
-.ui-component-panel .el-collapse-item > div:first-of-type {
+.ui-component-panel.tmagic-design-collapse .tmagic-design-collapse-item > div:first-of-type {
   border-bottom: 1px solid #d9dbdd;
   margin-bottom: 10px;
 }
-.ui-component-panel .el-collapse-item__header {
+.ui-component-panel.tmagic-design-collapse .el-collapse-item__header,
+.ui-component-panel.tmagic-design-collapse .t-collapse-panel__header {
   background: #ffffff;
   color: #070303;
   height: 25px;
@@ -356,20 +357,26 @@
   padding-left: 10px;
   font-size: 12px;
 }
-.ui-component-panel .el-collapse-item__header i {
+.ui-component-panel.tmagic-design-collapse .el-collapse-item__header i,
+.ui-component-panel.tmagic-design-collapse .t-collapse-panel__header i {
   margin-right: 5px;
   font-size: 14px;
 }
-.ui-component-panel .el-collapse-item__wrap {
+.ui-component-panel.tmagic-design-collapse .el-collapse-item__wrap,
+.ui-component-panel.tmagic-design-collapse .t-collapse-panel__body {
   background: #ffffff;
   border-bottom: 0;
 }
-.ui-component-panel .el-collapse-item__wrap .el-collapse-item__content {
+.ui-component-panel.tmagic-design-collapse .el-collapse-item__wrap .el-collapse-item__content,
+.ui-component-panel.tmagic-design-collapse .el-collapse-item__wrap .t-collapse-panel__content,
+.ui-component-panel.tmagic-design-collapse .t-collapse-panel__body .el-collapse-item__content,
+.ui-component-panel.tmagic-design-collapse .t-collapse-panel__body .t-collapse-panel__content {
   padding: 10px;
   display: flex;
   flex-wrap: wrap;
 }
-.ui-component-panel .el-collapse-item__wrap .component-item {
+.ui-component-panel.tmagic-design-collapse .el-collapse-item__wrap .component-item,
+.ui-component-panel.tmagic-design-collapse .t-collapse-panel__body .component-item {
   display: flex;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -380,7 +387,8 @@
   width: 42px;
   cursor: pointer;
 }
-.ui-component-panel .el-collapse-item__wrap .component-item i {
+.ui-component-panel.tmagic-design-collapse .el-collapse-item__wrap .component-item i,
+.ui-component-panel.tmagic-design-collapse .t-collapse-panel__body .component-item i {
   font-size: 20px;
   background: #fff;
   height: 40px;
@@ -394,16 +402,19 @@
   align-items: center;
   margin-bottom: 5px;
 }
-.ui-component-panel .el-collapse-item__wrap .component-item i:hover {
+.ui-component-panel.tmagic-design-collapse .el-collapse-item__wrap .component-item i:hover,
+.ui-component-panel.tmagic-design-collapse .t-collapse-panel__body .component-item i:hover {
   background: #2882e0;
   color: #fff;
   border-color: #4e8be1;
 }
-.ui-component-panel .el-collapse-item__wrap .component-item span {
+.ui-component-panel.tmagic-design-collapse .el-collapse-item__wrap .component-item span,
+.ui-component-panel.tmagic-design-collapse .t-collapse-panel__body .component-item span {
   font-size: 12px;
   text-align: center;
 }
-.ui-component-panel .el-collapse-item__wrap .component-item .el-tooltip {
+.ui-component-panel.tmagic-design-collapse .el-collapse-item__wrap .component-item .el-tooltip,
+.ui-component-panel.tmagic-design-collapse .t-collapse-panel__body .component-item .el-tooltip {
   width: 50px;
   height: 30px;
   line-height: 15px;
@@ -696,15 +707,20 @@
 .el-dialog.is-fullscreen.code-editor-dialog {
   overflow: hidden;
 }
-.code-editor-dialog .el-dialog__body {
+.code-editor-dialog .tmagic-design-card .t-card__header {
+  display: block;
+}
+.code-editor-dialog .el-dialog__body,
+.code-editor-dialog .t-dialog__body {
   height: 90%;
   padding-top: 10px;
 }
-.code-editor-dialog .el-card {
+.code-editor-dialog .tmagic-design-card {
   height: 100%;
   background: #fff;
 }
-.code-editor-dialog .el-card .el-card__body {
+.code-editor-dialog .tmagic-design-card .el-card__body,
+.code-editor-dialog .tmagic-design-card .t-card__body {
   height: 100%;
   background: #fff;
 }

package/dist/tmagic-editor.js

@@ -858,8 +858,12 @@ class BaseService extends EventEmitter {
     });
   }
   removeAllPlugins() {
-    this.pluginOptionsList = {};
-    this.middleware = {};
+    Object.keys(this.pluginOptionsList).forEach((key) => {
+      this.pluginOptionsList[key] = [];
+    });
+    Object.keys(this.middleware).forEach((key) => {
+      this.middleware[key] = [];
+    });
   }
   async doTask() {
     this.doingTask = true;
@@ -2009,8 +2013,16 @@ class Editor$1 extends BaseService {
     const config = await storageService.getItem(COPY_STORAGE_KEY);
     if (!Array.isArray(config))
       return;
+    const node = this.get("node");
+    let parent = void 0;
+    if (config.length === 1 && config[0].id === node.id) {
+      parent = this.get("parent");
+      if (parent.type === NodeType.ROOT) {
+        parent = this.get("page");
+      }
+    }
     const pasteConfigs = await this.doPaste(config, position);
-    return this.add(pasteConfigs, this.get("parent"));
+    return this.add(pasteConfigs, parent);
   }
   async doPaste(config, position = {}) {
     const pasteConfigs = await beforePaste(position, cloneDeep(config));
@@ -2598,6 +2610,7 @@ const useStage = (stageOptions) => {
     containerHighlightClassName: stageOptions.containerHighlightClassName,
     containerHighlightDuration: stageOptions.containerHighlightDuration,
     containerHighlightType: stageOptions.containerHighlightType,
+    disabledDragStart: stageOptions.disabledDragStart,
     canSelect: (el, event, stop) => {
       const elCanSelect = stageOptions.canSelect(el);
       if (uiSelectMode.value && elCanSelect && event.type === "mousedown") {
@@ -3182,6 +3195,9 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     onMounted(() => {
       emit("mounted", internalInstance);
     });
+    onUnmounted(() => {
+      services?.propsService.off("props-configs-change", init);
+    });
     watchEffect(() => {
       if (configForm.value && stage.value) {
         configForm.value.formState.stage = stage.value;
@@ -4279,11 +4295,6 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     const spliceNodeKey = ref();
     const filterText = ref("");
     const defaultExpandedKeys = computed(() => selectedIds.value.length > 0 ? selectedIds.value : []);
-    editorService?.on("remove", () => {
-      setTimeout(() => {
-        tree.value?.getNode(editorService.get("node").id)?.updateChildren();
-      }, 0);
-    });
     const select = async (data) => {
       if (!data.id) {
         throw new Error("\u6CA1\u6709id");
@@ -4420,8 +4431,14 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       tree.value?.$el.blur();
       isMultiSelectStatus.value = false;
     };
+    const editorServiceRemoveHandler = () => {
+      setTimeout(() => {
+        tree.value?.getNode(editorService?.get("node").id)?.updateChildren();
+      }, 0);
+    };
     let keycon;
     onMounted(() => {
+      editorService?.on("remove", editorServiceRemoveHandler);
       keycon = new KeyController(tree.value?.$el);
       const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
       const ctrl = isMac ? "meta" : "ctrl";
@@ -4435,6 +4452,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     });
     onUnmounted(() => {
       keycon.destroy();
+      editorService?.off("remove", editorServiceRemoveHandler);
     });
     const clicked = ref(false);
     const highlightNode = computed(() => editorService?.get("highlightNode"));
@@ -5794,7 +5812,7 @@ const componentListService = new ComponentList();
 const _sfc_main = defineComponent({
   name: "m-editor",
   components: {
-    NavMenu: _sfc_main$j,
+    TMagicNavMenu: _sfc_main$j,
     Sidebar: _sfc_main$9,
     Workspace: _sfc_main$1,
     PropsPanel: _sfc_main$i,
@@ -5877,11 +5895,14 @@ const _sfc_main = defineComponent({
     },
     updateDragEl: {
       type: Function
+    },
+    disabledDragStart: {
+      type: Boolean
     }
   },
   emits: ["props-panel-mounted", "update:modelValue"],
   setup(props, { emit }) {
-    editorService.on("root-change", (value, preValue) => {
+    const rootChangeHandler = (value, preValue) => {
       const nodeId = editorService.get("node")?.id || props.defaultSelected;
       let node;
       if (nodeId) {
@@ -5899,7 +5920,8 @@ const _sfc_main = defineComponent({
       if (toRaw(value) !== toRaw(preValue)) {
         emit("update:modelValue", value);
       }
-    });
+    };
+    editorService.on("root-change", rootChangeHandler);
     watch(
       () => props.modelValue,
       (modelValue) => {
@@ -5967,6 +5989,7 @@ const _sfc_main = defineComponent({
       uiService.resetState();
       componentListService.resetState();
       codeBlockService.resetState();
+      editorService.off("root-change", rootChangeHandler);
     });
     const services = {
       componentListService,
@@ -5992,7 +6015,8 @@ const _sfc_main = defineComponent({
         isContainer: props.isContainer,
         containerHighlightClassName: props.containerHighlightClassName,
         containerHighlightDuration: props.containerHighlightDuration,
-        containerHighlightType: props.containerHighlightType
+        containerHighlightType: props.containerHighlightType,
+        disabledDragStart: props.disabledDragStart
       })
     );
     return services;
@@ -6008,7 +6032,7 @@ const _export_sfc = (sfc, props) => {
 };
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_NavMenu = resolveComponent("NavMenu");
+  const _component_TMagicNavMenu = resolveComponent("TMagicNavMenu");
   const _component_Sidebar = resolveComponent("Sidebar");
   const _component_Workspace = resolveComponent("Workspace");
   const _component_PropsPanel = resolveComponent("PropsPanel");
@@ -6016,7 +6040,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(_component_Framework, { "code-options": _ctx.codeOptions }, {
     nav: withCtx(() => [
       renderSlot(_ctx.$slots, "nav", { editorService: _ctx.editorService }, () => [
-        createVNode(_component_NavMenu, { data: _ctx.menu }, null, 8, ["data"])
+        createVNode(_component_TMagicNavMenu, { data: _ctx.menu }, null, 8, ["data"])
       ])
     ]),
     sidebar: withCtx(() => [