@tmagic/editor 1.1.0 → 1.1.3

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.0",
+  "version": "1.1.3",
   "name": "@tmagic/editor",
   "sideEffects": [
     "dist/*",
@@ -45,11 +45,11 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.1.0",
-    "@tmagic/form": "1.1.0",
-    "@tmagic/schema": "1.1.0",
-    "@tmagic/stage": "1.1.0",
-    "@tmagic/utils": "1.1.0",
+    "@tmagic/core": "1.1.3",
+    "@tmagic/form": "1.1.3",
+    "@tmagic/schema": "1.1.3",
+    "@tmagic/stage": "1.1.3",
+    "@tmagic/utils": "1.1.3",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "element-plus": "^2.2.6",
@@ -62,7 +62,7 @@
     "vue": "^3.2.37"
   },
   "peerDependencies": {
-    "@tmagic/form": "1.1.0",
+    "@tmagic/form": "1.1.3",
     "element-plus": "^2.2.6",
     "monaco-editor": "^0.34.0",
     "vue": "^3.2.37"

package/src/Editor.vue

@@ -14,6 +14,10 @@
           <template #component-list-panel-header>
             <slot name="component-list-panel-header"></slot>
           </template>
+
+          <template #component-list-item="{ component }">
+            <slot name="component-list-item" :component="component"></slot>
+          </template>
         </sidebar>
       </slot>
     </template>
@@ -193,9 +197,15 @@ export default defineComponent({
   emits: ['props-panel-mounted', 'update:modelValue'],
 
   setup(props, { emit }) {
-    editorService.on('root-change', () => {
-      const node = editorService.get<MNode | null>('node') || props.defaultSelected;
-      node && editorService.select(node);
+    editorService.on('root-change', (value) => {
+      const node = editorService.get<MNode | null>('node');
+      const nodeId = node?.id || props.defaultSelected;
+      if (nodeId && node !== value) {
+        editorService.select(nodeId);
+      } else {
+        editorService.set('nodes', [value]);
+      }
+
       emit('update:modelValue', toRaw(editorService.get('root')));
     });
 

package/src/components/Icon.vue

@@ -1,8 +1,10 @@
 <template>
-  <el-icon v-if="!icon"><Edit></Edit></el-icon>
-  <el-icon v-else-if="typeof icon === 'string' && icon.startsWith('http')"><img :src="icon" /></el-icon>
-  <i v-else-if="typeof icon === 'string'" :class="icon"></i>
-  <el-icon v-else><component :is="toRaw(icon)"></component></el-icon>
+  <el-icon v-if="!icon" class="magic-editor-icon"><Edit></Edit></el-icon>
+  <el-icon v-else-if="typeof icon === 'string' && icon.startsWith('http')" class="magic-editor-icon"
+    ><img :src="icon"
+  /></el-icon>
+  <i v-else-if="typeof icon === 'string'" class="magic-editor-icon" :class="icon"></i>
+  <el-icon v-else class="magic-editor-icon"><component :is="toRaw(icon)"></component></el-icon>
 </template>
 
 <script lang="ts" setup>

package/src/index.ts

@@ -15,8 +15,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import './utils/polyfills';
-
 import { App } from 'vue';
 
 import Code from './fields/Code.vue';

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -24,11 +24,13 @@
             @dragend="dragendHandler"
             @drag="dragHandler"
           >
-            <m-icon :icon="item.icon"></m-icon>
+            <slot name="component-list-item" :component="item">
+              <MIcon :icon="item.icon"></MIcon>
 
-            <el-tooltip effect="dark" placement="bottom" :content="item.text">
-              <span>{{ item.text }}</span>
-            </el-tooltip>
+              <el-tooltip effect="dark" placement="bottom" :content="item.text">
+                <span>{{ item.text }}</span>
+              </el-tooltip>
+            </slot>
           </div>
         </el-collapse-item>
       </template>
@@ -36,8 +38,8 @@
   </el-scrollbar>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, inject, ref } from 'vue';
+<script lang="ts" setup>
+import { computed, inject, ref } from 'vue';
 import serialize from 'serialize-javascript';
 
 import type StageCore from '@tmagic/stage';
@@ -46,89 +48,75 @@ import { removeClassNameByClassName } from '@tmagic/utils';
 import MIcon from '../../components/Icon.vue';
 import type { ComponentGroup, ComponentItem, Services, StageOptions } from '../../type';
 
-export default defineComponent({
-  name: 'ui-component-panel',
-
-  components: { MIcon },
-
-  setup() {
-    const searchText = ref('');
-    const services = inject<Services>('services');
-    const stageOptions = inject<StageOptions>('stageOptions');
-
-    const stage = computed(() => services?.editorService.get<StageCore>('stage'));
-    const list = computed(() =>
-      services?.componentListService.getList().map((group: ComponentGroup) => ({
-        ...group,
-        items: group.items.filter((item: ComponentItem) => item.text.includes(searchText.value)),
-      })),
+const searchText = ref('');
+const services = inject<Services>('services');
+const stageOptions = inject<StageOptions>('stageOptions');
+
+const stage = computed(() => services?.editorService.get<StageCore>('stage'));
+const list = computed(() =>
+  services?.componentListService.getList().map((group: ComponentGroup) => ({
+    ...group,
+    items: group.items.filter((item: ComponentItem) => item.text.includes(searchText.value)),
+  })),
+);
+const collapseValue = computed(() =>
+  Array(list.value?.length)
+    .fill(1)
+    .map((x, i) => i),
+);
+
+let timeout: NodeJS.Timeout | undefined;
+let clientX: number;
+let clientY: number;
+
+const appendComponent = ({ text, type, data = {} }: ComponentItem): void => {
+  services?.editorService.add({
+    name: text,
+    type,
+    ...data,
+  });
+};
+
+const dragstartHandler = ({ text, type, data = {} }: ComponentItem, e: DragEvent) => {
+  if (e.dataTransfer) {
+    e.dataTransfer.effectAllowed = 'move';
+    e.dataTransfer.setData(
+      'data',
+      serialize({
+        name: text,
+        type,
+        ...data,
+      }).replace(/"(\w+)":\s/g, '$1: '),
     );
-    const collapseValue = computed(() =>
-      Array(list.value?.length)
-        .fill(1)
-        .map((x, i) => i),
-    );
-
-    let timeout: NodeJS.Timeout | undefined;
-    let clientX: number;
-    let clientY: number;
-
-    return {
-      searchText,
-      collapseValue,
-      list,
-
-      appendComponent({ text, type, data = {} }: ComponentItem): void {
-        services?.editorService.add({
-          name: text,
-          type,
-          ...data,
-        });
-      },
-
-      dragstartHandler({ text, type, data = {} }: ComponentItem, e: DragEvent) {
-        if (e.dataTransfer) {
-          e.dataTransfer.effectAllowed = 'move';
-          e.dataTransfer.setData(
-            'data',
-            serialize({
-              name: text,
-              type,
-              ...data,
-            }).replace(/"(\w+)":\s/g, '$1: '),
-          );
-        }
-      },
-
-      dragendHandler() {
-        if (timeout) {
-          globalThis.clearTimeout(timeout);
-          timeout = undefined;
-        }
-        const doc = stage.value?.renderer.contentWindow?.document;
-        if (doc && stageOptions) {
-          removeClassNameByClassName(doc, stageOptions.containerHighlightClassName);
-        }
-        clientX = 0;
-        clientY = 0;
-      },
-
-      dragHandler(e: DragEvent) {
-        if (e.clientX !== clientX || e.clientY !== clientY) {
-          clientX = e.clientX;
-          clientY = e.clientY;
-          if (timeout) {
-            globalThis.clearTimeout(timeout);
-            timeout = undefined;
-          }
-          return;
-        }
-
-        if (timeout || !stage.value) return;
-
-        timeout = stage.value.getAddContainerHighlightClassNameTimeout(e);
-      },
-    };
-  },
-});
+  }
+};
+
+const dragendHandler = () => {
+  if (timeout) {
+    globalThis.clearTimeout(timeout);
+    timeout = undefined;
+  }
+  const doc = stage.value?.renderer.contentWindow?.document;
+  if (doc && stageOptions) {
+    removeClassNameByClassName(doc, stageOptions.containerHighlightClassName);
+  }
+  clientX = 0;
+  clientY = 0;
+};
+
+const dragHandler = (e: DragEvent) => {
+  if (e.clientX !== clientX || e.clientY !== clientY) {
+    clientX = e.clientX;
+    clientY = e.clientY;
+    if (timeout) {
+      globalThis.clearTimeout(timeout);
+      timeout = undefined;
+    }
+    return;
+  }
+
+  if (timeout || !stage.value) return;
+
+  timeout = stage.value.getAddContainerHighlightClassNameTimeout(e);
+};
 </script>

package/src/layouts/sidebar/Sidebar.vue

@@ -14,6 +14,10 @@
       <template #component-list-panel-header v-if="item === 'component-list'">
         <slot name="component-list-panel-header"></slot>
       </template>
+
+      <template #component-list-item="{ component }" v-if="item === 'component-list'">
+        <slot name="component-list-item" :component="component"></slot>
+      </template>
     </tab-pane>
   </el-tabs>
 </template>

package/src/layouts/sidebar/TabPane.vue

@@ -13,6 +13,18 @@
         <component v-else-if="config.slots?.componentListPanelHeader" :is="config.slots.componentListPanelHeader" />
       </template>
 
+      <template
+        #component-list-item="{ component }"
+        v-if="data === 'component-list' || config.slots?.componentListItem"
+      >
+        <slot v-if="data === 'component-list'" name="component-list-item" :component="component"></slot>
+        <component
+          v-else-if="config.slots?.componentListItem"
+          :is="config.slots.componentListItem"
+          :component="component"
+        />
+      </template>
+
       <template #layer-panel-header v-if="data === 'layer' || config.slots?.layerPanelHeader">
         <slot v-if="data === 'layer'" name="layer-panel-header"></slot>
         <component v-else-if="config.slots?.layerPanelHeader" :is="config.slots.layerPanelHeader" />

package/src/layouts/workspace/PageBar.vue

@@ -38,7 +38,7 @@
         </div>
         <template #reference>
           <el-icon class="m-editor-page-bar-menu-icon">
-            <caret-bottom></caret-bottom>
+            <CaretBottom></CaretBottom>
           </el-icon>
         </template>
       </el-popover>

package/src/layouts/workspace/PageBarScrollContainer.vue

@@ -1,8 +1,14 @@
 <template>
   <div class="m-editor-page-bar" ref="pageBar">
-    <div id="m-editor-page-bar-add-icon" class="m-editor-page-bar-item m-editor-page-bar-item-icon" @click="addPage">
+    <div
+      v-if="showAddPageButton"
+      id="m-editor-page-bar-add-icon"
+      class="m-editor-page-bar-item m-editor-page-bar-item-icon"
+      @click="addPage"
+    >
       <el-icon><plus></plus></el-icon>
     </div>
+    <div v-else style="width: 21px"></div>
     <div v-if="canScroll" class="m-editor-page-bar-item m-editor-page-bar-item-icon" @click="scroll('left')">
       <el-icon><arrow-left-bold></arrow-left-bold></el-icon>
     </div>
@@ -26,13 +32,17 @@ import { generatePageNameByApp } from '../../utils/editor';
 
 const services = inject<Services>('services');
 const editorService = services?.editorService;
+const uiService = services?.uiService;
 
 const pageBar = ref<HTMLDivElement>();
 const itemsContainer = ref<HTMLDivElement>();
 const pageBarWidth = ref(0);
 const canScroll = ref(false);
 
-const itemsContainerWidth = computed(() => pageBarWidth.value - 105);
+const showAddPageButton = computed(() => uiService?.get('showAddPageButton'));
+
+// 减去新增、左移、右移三个按钮的宽度
+const itemsContainerWidth = computed(() => pageBarWidth.value - 35 * 2 - (showAddPageButton.value ? 35 : 21));
 
 let translateLeft = 0;
 const resizeObserver = new ResizeObserver((entries) => {
@@ -46,7 +56,7 @@ const resizeObserver = new ResizeObserver((entries) => {
 
 const setCanScroll = () => {
   if (itemsContainer.value) {
-    canScroll.value = itemsContainer.value.scrollWidth > pageBarWidth.value - 105;
+    canScroll.value = itemsContainer.value.scrollWidth > itemsContainerWidth.value;
   }
 };
 

package/src/layouts/workspace/Stage.vue

@@ -158,8 +158,8 @@ const dropHandler = async (e: DragEvent) => {
     config.style = {
       ...style,
       position,
-      top,
-      left,
+      top: top / zoom.value,
+      left: left / zoom.value,
     };
 
     config.inputEvent = e;

package/src/services/editor.ts

@@ -400,7 +400,7 @@ class Editor extends BaseService {
         await this.select(root.items[0]);
         stage?.select(root.items[0].id);
       } else {
-        this.set('node', null);
+        this.set('nodes', [root]);
         this.set('parent', null);
         this.set('page', null);
         this.set('stage', null);
@@ -629,12 +629,18 @@ class Editor extends BaseService {
     const brothers: MNode[] = parent?.items || [];
     const index = brothers.findIndex((item) => `${item.id}` === `${node?.id}`);
 
+    // 流式布局与绝对定位布局操作的相反的
+    const layout = await this.getLayout(parent, node);
+    const isRelative = layout === Layout.RELATIVE;
+
+    brothers.splice(index, 1);
+
     if (offset === LayerOffset.TOP) {
-      brothers.splice(brothers.length - 1, 0, brothers.splice(index, 1)[0]);
+      brothers.splice(isRelative ? 0 : brothers.length - 1, 0, node);
     } else if (offset === LayerOffset.BOTTOM) {
-      brothers.splice(0, 0, brothers.splice(index, 1)[0]);
+      brothers.splice(isRelative ? brothers.length - 1 : 0, 0, node);
     } else {
-      brothers.splice(index + parseInt(`${offset}`, 10), 0, brothers.splice(index, 1)[0]);
+      brothers.splice(index + (isRelative ? -offset : offset), 0, node);
     }
 
     const grandparent = this.getParentById(parent.id);

package/src/services/ui.ts

@@ -54,6 +54,7 @@ const state = reactive<UiState>({
   showGuides: true,
   showRule: true,
   propsPanelSize: 'small',
+  showAddPageButton: true,
 });
 
 class Ui extends BaseService {

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

@@ -86,11 +86,6 @@
         }
       }
 
-      img {
-        max-width: 100%;
-        max-height: 100%;
-      }
-
       span {
         font-size: 12px;
         text-align: center;

package/src/theme/content-menu.scss

@@ -31,6 +31,10 @@
       color: $--font-color;
     }
 
+    .magic-editor-icon {
+      margin-right: 5px;
+    }
+
     &.divider {
       padding: 0 14px;
 

package/src/theme/icon.scss

@@ -0,0 +1,6 @@
+.magic-editor-icon {
+  img {
+    max-width: 100%;
+    max-height: 100%;
+  }
+}

package/src/theme/index.scss

@@ -11,3 +11,4 @@
 @import "./content-menu.scss";
 @import "./stage.scss";
 @import "./code-editor.scss";
+@import "./icon.scss";

package/src/type.ts

@@ -124,6 +124,8 @@ export interface UiState {
   showRule: boolean;
   /** 用于控制该属性配置表单内组件的尺寸 */
   propsPanelSize: 'large' | 'default' | 'small';
+  /** 是否显示新增页面按钮 */
+  showAddPageButton: boolean;
 }
 
 export interface EditorNodeInfo {

package/types/Editor.vue.d.ts

@@ -196,9 +196,9 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     menu: MenuBarData;
     codeOptions: Record<string, any>;
+    modelValue: MApp;
     layerContentMenu: (MenuButton | MenuComponent)[];
     stageContentMenu: (MenuButton | MenuComponent)[];
-    modelValue: MApp;
     componentGroupList: ComponentGroup[];
     autoScrollIntoView: boolean;
     propsConfigs: Record<string, FormConfig>;

package/types/index.d.ts

@@ -1,4 +1,3 @@
-import './utils/polyfills';
 import { App } from 'vue';
 import type { InstallOptions } from './type';
 import './theme/index.scss';

package/types/layouts/sidebar/ComponentListPanel.vue.d.ts

@@ -1,14 +1,52 @@
 import type { ComponentItem } from '../../type';
-declare const _default: import("vue").DefineComponent<{}, {
-    searchText: import("vue").Ref<string>;
-    collapseValue: import("vue").ComputedRef<number[]>;
-    list: import("vue").ComputedRef<{
-        items: ComponentItem[];
-        title: string;
-    }[] | undefined>;
-    appendComponent({ text, type, data }: ComponentItem): void;
-    dragstartHandler({ text, type, data }: ComponentItem, e: DragEvent): void;
-    dragendHandler(): void;
-    dragHandler(e: DragEvent): void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+declare const _default: {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{}> & Omit<Readonly<import("vue").ExtractPropTypes<{}>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $emit: ((event: string, ...args: any[]) => void) | ((event: string, ...args: any[]) => void);
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, {}> & {
+            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+            created?: ((() => void) | (() => void)[]) | undefined;
+            beforeMount?: ((() => void) | (() => void)[]) | undefined;
+            mounted?: ((() => void) | (() => void)[]) | undefined;
+            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+            updated?: ((() => void) | (() => void)[]) | undefined;
+            activated?: ((() => void) | (() => void)[]) | undefined;
+            deactivated?: ((() => void) | (() => void)[]) | undefined;
+            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+            destroyed?: ((() => void) | (() => void)[]) | undefined;
+            unmounted?: ((() => void) | (() => void)[]) | undefined;
+            renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
+    } & Readonly<import("vue").ExtractPropTypes<{}>> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties;
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        'component-list-panel-header': (_: {}) => any;
+        'component-list-item': (_: {
+            component: ComponentItem;
+        }) => any;
+    };
+});
 export default _default;

package/types/services/ui.d.ts

@@ -20,6 +20,7 @@ declare const state: {
     showGuides: boolean;
     showRule: boolean;
     propsPanelSize: "small" | "large" | "default";
+    showAddPageButton: boolean;
 };
 declare class Ui extends BaseService {
     constructor();

package/types/type.d.ts

@@ -92,6 +92,8 @@ export interface UiState {
     showRule: boolean;
     /** 用于控制该属性配置表单内组件的尺寸 */
     propsPanelSize: 'large' | 'default' | 'small';
+    /** 是否显示新增页面按钮 */
+    showAddPageButton: boolean;
 }
 export interface EditorNodeInfo {
     node?: MNode;

package/src/utils/polyfills.ts

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