@tmagic/editor 1.0.0-beta.1

package/src/layouts/sidebar/Sidebar.vue

@@ -0,0 +1,86 @@
+<template>
+  <el-tabs v-if="data.type === 'tabs'" class="m-editor-sidebar" v-model="activeTabName" type="card" tab-position="left">
+    <el-tab-pane v-for="item in items" :key="item.text" :name="item.text">
+      <template #label>
+        <span>
+          <m-icon v-if="item.icon" :icon="item.icon"></m-icon>
+          <div v-if="item.text" class="magic-editor-tab-panel-title">{{ item.text }}</div>
+        </span>
+      </template>
+
+      <component :is="item.component" v-bind="item.props || {}" v-on="item.listeners || {}">
+        <template #layer-node-content="{ data, node }" v-if="item.slots?.layerNodeContent">
+          <component :is="item.slots.layerNodeContent" :data="data" :node="node" />
+        </template>
+      </component>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, ref, watch } from 'vue';
+import { Coin, Files } from '@element-plus/icons';
+
+import MIcon from '@editor/components/Icon.vue';
+import { SideBarData, SideComponent } from '@editor/type';
+
+import ComponentListPanel from './ComponentListPanel.vue';
+import LayerPanel from './LayerPanel.vue';
+
+export default defineComponent({
+  name: 'm-sidebar',
+
+  components: { MIcon },
+
+  props: {
+    data: {
+      type: Object as PropType<SideBarData>,
+      default: () => ({ type: 'tabs', status: '组件', items: ['component-list', 'layer'] }),
+    },
+  },
+
+  setup(props) {
+    const activeTabName = ref(props.data?.status);
+
+    watch(
+      () => props.data?.status,
+      (status) => {
+        activeTabName.value = status || '0';
+      },
+    );
+
+    return {
+      activeTabName,
+
+      items: computed<SideComponent[] | Record<string, any>[]>(() =>
+        props.data?.items.map((item) => {
+          if (typeof item !== 'string') {
+            return item;
+          }
+
+          switch (item) {
+            case 'component-list':
+              return {
+                type: 'component',
+                icon: Coin,
+                text: '组件',
+                component: ComponentListPanel,
+                slots: {},
+              };
+            case 'layer':
+              return {
+                type: 'component',
+                icon: Files,
+                text: '已选组件',
+                component: LayerPanel,
+                slots: {},
+              };
+            default:
+              return {};
+          }
+        }),
+      ),
+    };
+  },
+});
+</script>

package/src/layouts/workspace/PageBar.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="m-editor-page-bar">
+    <div class="m-editor-page-bar-item" @click="addPage">
+      <el-icon class="m-editor-page-bar-menu-add-icon"><plus></plus></el-icon>
+    </div>
+    <template v-if="root">
+      <div
+        v-for="item in root.items"
+        :key="item.key"
+        class="m-editor-page-bar-item"
+        :class="{ active: page?.id === item.id }"
+        @click="switchPage(item)"
+      >
+        <slot name="page-bar-title" :page="item">
+          <span>{{ item.name }}</span>
+        </slot>
+
+        <el-popover placement="top" :width="160" trigger="hover">
+          <div>
+            <slot name="page-bar-popover" :page="item">
+              <div class="magic-editor-content-menu-item" @click="() => copy(item)">复制</div>
+              <div class="magic-editor-content-menu-item" @click="() => remove(item)">删除</div>
+            </slot>
+          </div>
+          <template #reference>
+            <el-icon class="m-editor-page-bar-menu-icon">
+              <caret-bottom></caret-bottom>
+            </el-icon>
+          </template>
+        </el-popover>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, inject, toRaw } from 'vue';
+import { CaretBottom, Plus } from '@element-plus/icons';
+
+import type { MPage } from '@tmagic/schema';
+
+import type { Services } from '@editor/type';
+import { generatePageNameByApp } from '@editor/utils/editor';
+
+export default defineComponent({
+  components: { CaretBottom, Plus },
+
+  setup() {
+    const services = inject<Services>('services');
+    const editorService = services?.editorService;
+
+    return {
+      root: computed(() => editorService?.get('root')),
+      page: computed(() => editorService?.get('page')),
+
+      switchPage(page: MPage) {
+        editorService?.select(page);
+      },
+
+      addPage() {
+        if (!editorService) return;
+        const pageConfig = {
+          type: 'page',
+          name: generatePageNameByApp(toRaw(editorService.get('root'))),
+        };
+        editorService.add(pageConfig);
+      },
+
+      copy(node: MPage) {
+        node && editorService?.copy(node);
+        editorService?.paste({
+          left: 0,
+          top: 0,
+        });
+      },
+
+      remove(node: MPage) {
+        editorService?.remove(node);
+      },
+    };
+  },
+});
+</script>

package/src/layouts/workspace/Stage.vue

@@ -0,0 +1,221 @@
+<template>
+  <div class="m-editor-stage">
+    <div
+      class="m-editor-stage-container"
+      ref="stageContainer"
+      :style="stageStyle"
+      @contextmenu="contextmenuHandler"
+    ></div>
+    <teleport to="body">
+      <viewer-menu ref="menu" :style="menuStyle"></viewer-menu>
+    </teleport>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  inject,
+  onMounted,
+  onUnmounted,
+  PropType,
+  ref,
+  toRaw,
+  watch,
+  watchEffect,
+} from 'vue';
+import { cloneDeep } from 'lodash-es';
+
+import type { MApp, MNode, MPage } from '@tmagic/schema';
+import type { MoveableOptions, Runtime, SortEventData, UpdateEventData } from '@tmagic/stage';
+import StageCore from '@tmagic/stage';
+
+import type { Services } from '@editor/type';
+
+import ViewerMenu from './ViewerMenu.vue';
+
+const useMenu = () => {
+  const menu = ref<InstanceType<typeof ViewerMenu>>();
+  const menuStyle = ref({
+    display: 'none',
+    left: '0',
+    top: '0',
+  });
+
+  onMounted(() => {
+    document.addEventListener(
+      'click',
+      () => {
+        menuStyle.value.display = 'none';
+      },
+      true,
+    );
+  });
+
+  return {
+    menu,
+    menuStyle,
+
+    contextmenuHandler(e: MouseEvent) {
+      e.preventDefault();
+
+      const menuHeight = menu.value?.$el.clientHeight;
+      let top = e.clientY;
+      if (menuHeight + e.clientY > document.body.clientHeight) {
+        top = document.body.clientHeight - menuHeight;
+      }
+      menuStyle.value = {
+        display: 'block',
+        top: `${top}px`,
+        left: `${e.clientX}px`,
+      };
+    },
+  };
+};
+
+export default defineComponent({
+  name: 'magic-stage',
+
+  components: {
+    ViewerMenu,
+  },
+
+  props: {
+    render: {
+      type: Function as PropType<() => HTMLDivElement>,
+    },
+
+    runtimeUrl: String,
+
+    root: {
+      type: Object as PropType<MApp>,
+    },
+
+    page: {
+      type: Object as PropType<MPage>,
+    },
+
+    node: {
+      type: Object as PropType<MNode>,
+    },
+
+    uiSelectMode: {
+      type: Boolean,
+    },
+
+    zoom: {
+      type: Number,
+    },
+
+    canSelect: {
+      type: Function as PropType<(el: HTMLElement) => boolean | Promise<boolean>>,
+      default: (el: HTMLElement) => Boolean(el.id),
+    },
+
+    moveableOptions: {
+      type: [Object, Function] as PropType<MoveableOptions | ((core?: StageCore) => MoveableOptions)>,
+      default: () => (core?: StageCore) => ({
+        container: core?.renderer?.contentWindow?.document.getElementById('app'),
+      }),
+    },
+  },
+
+  emits: ['select', 'update', 'sort'],
+
+  setup(props, { emit }) {
+    const services = inject<Services>('services');
+    const stageContainer = ref<HTMLDivElement>();
+
+    const stageStyle = computed(() => ({
+      ...services?.uiService.get<Record<string, string | number>>('stageStyle'),
+      transform: `scale(${props.zoom}) translate3d(0, -50%, 0)`,
+    }));
+
+    let stage: StageCore | null = null;
+    let runtime: Runtime | null = null;
+
+    watchEffect(() => {
+      if (stage) return;
+
+      if (!stageContainer.value) return;
+      if (!(props.runtimeUrl || props.render) || !props.root) return;
+
+      stage = new StageCore({
+        render: props.render,
+        runtimeUrl: props.runtimeUrl,
+        zoom: props.zoom,
+        canSelect: (el, stop) => {
+          const elCanSelect = props.canSelect(el);
+          // 在组件联动过程中不能再往下选择，返回并触发 ui-select
+          if (props.uiSelectMode && elCanSelect) {
+            document.dispatchEvent(new CustomEvent('ui-select', { detail: el }));
+            return stop();
+          }
+
+          return elCanSelect;
+        },
+        moveableOptions: props.moveableOptions,
+      });
+
+      services?.editorService.set('stage', stage);
+
+      stage?.mount(stageContainer.value);
+
+      stage?.on('select', (el: HTMLElement) => emit('select', el));
+
+      stage?.on('update', (ev: UpdateEventData) => {
+        emit('update', { id: ev.el.id, style: ev.style });
+      });
+
+      stage?.on('sort', (ev: SortEventData) => {
+        emit('sort', ev);
+      });
+
+      stage?.on('changeGuides', () => {
+        services?.uiService.set('showGuides', true);
+      });
+
+      if (!props.node?.id) return;
+      stage?.on('runtime-ready', (rt) => {
+        runtime = rt;
+        // toRaw返回的值是一个引用而非快照，需要cloneDeep
+        props.root && runtime?.updateRootConfig(cloneDeep(toRaw(props.root)));
+        props.page?.id && runtime?.updatePageId?.(props.page.id);
+        setTimeout(() => {
+          props.node && stage?.select(toRaw(props.node.id));
+        });
+      });
+    });
+
+    watch(
+      () => props.zoom,
+      (zoom) => {
+        if (!stage || !zoom) return;
+        stage?.setZoom(zoom);
+      },
+    );
+
+    watch(
+      () => props.root,
+      (root) => {
+        if (runtime && root) {
+          runtime.updateRootConfig(cloneDeep(toRaw(root)));
+        }
+      },
+    );
+
+    onUnmounted(() => {
+      stage?.destroy();
+      services?.editorService.set('stage', null);
+    });
+
+    return {
+      stageStyle,
+      ...useMenu(),
+
+      stageContainer,
+    };
+  },
+});
+</script>

package/src/layouts/workspace/ViewerMenu.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="magic-editor-content-menu" ref="menu">
+    <div>
+      <div class="magic-editor-content-menu-item" @click="() => center()" v-if="canCenter">水平居中</div>
+      <div class="magic-editor-content-menu-item" @click="() => copy()">复制</div>
+      <div class="magic-editor-content-menu-item" @click="paste" v-if="canPaste">粘贴</div>
+      <template v-if="canMoveZPos">
+        <div class="separation"></div>
+        <div class="magic-editor-content-menu-item" @click="topItem">上移一层</div>
+        <div class="magic-editor-content-menu-item" @click="bottomItem">下移一层</div>
+        <div class="magic-editor-content-menu-item" @click="top">置顶</div>
+        <div class="magic-editor-content-menu-item" @click="bottom">置底</div>
+      </template>
+      <template v-if="canDelete">
+        <div class="separation"></div>
+        <div class="magic-editor-content-menu-item" @click="() => remove()">删除</div>
+      </template>
+      <div class="separation"></div>
+      <div class="magic-editor-content-menu-item" @click="clearGuides">清空参考线</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, inject, onMounted, ref, watch } from 'vue';
+
+import type StageCore from '@tmagic/stage';
+
+import { LayerOffset, Layout, Services } from '@editor/type';
+import { COPY_STORAGE_KEY } from '@editor/utils/editor';
+
+export default defineComponent({
+  name: 'magic-editor-ui-viewer-menu',
+
+  setup() {
+    const services = inject<Services>('services');
+    const editorService = services?.editorService;
+    const menu = ref<HTMLDivElement>();
+    const canPaste = ref(false);
+    const canCenter = ref(false);
+
+    const node = computed(() => editorService?.get('node'));
+    const parent = computed(() => editorService?.get('parent'));
+
+    onMounted(() => {
+      const data = globalThis.localStorage.getItem(COPY_STORAGE_KEY);
+      canPaste.value = data !== 'undefined' && !!data;
+    });
+
+    watch(
+      parent,
+      async () => {
+        if (!parent.value || !editorService) return (canCenter.value = false);
+        const layout = await editorService.getLayout(parent.value);
+        canCenter.value =
+          [Layout.ABSOLUTE, Layout.FIXED].includes(layout) && !['app', 'page', 'pop'].includes(`${node.value?.type}`);
+      },
+      { immediate: true },
+    );
+
+    return {
+      menu,
+      canPaste,
+
+      canDelete: computed(() => node.value?.type !== 'page'),
+      canMoveZPos: computed(() => node.value?.type !== 'page'),
+      canCenter,
+
+      center() {
+        node.value && editorService?.alignCenter(node.value);
+      },
+
+      copy() {
+        node.value && editorService?.copy(node.value);
+        canPaste.value = true;
+      },
+
+      paste() {
+        const top = menu.value?.offsetTop || 0;
+        const left = menu.value?.offsetLeft || 0;
+        editorService?.paste({ left, top });
+      },
+
+      remove() {
+        node.value && editorService?.remove(node.value);
+      },
+
+      top() {
+        editorService?.moveLayer(LayerOffset.TOP);
+      },
+
+      bottom() {
+        editorService?.moveLayer(LayerOffset.BOTTOM);
+      },
+
+      topItem() {
+        editorService?.moveLayer(1);
+      },
+
+      bottomItem() {
+        editorService?.moveLayer(-1);
+      },
+
+      clearGuides() {
+        editorService?.get<StageCore>('stage').clearGuides();
+      },
+    };
+  },
+});
+</script>

package/src/layouts/workspace/Workspace.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="m-editor-workspace">
+    <magic-stage
+      :key="page?.id"
+      :runtime-url="runtimeUrl"
+      :render="render"
+      :ui-select-mode="uiSelectMode"
+      :root="root"
+      :page="page"
+      :node="node"
+      :zoom="zoom"
+      :moveable-options="moveableOptions"
+      :can-select="canSelect"
+      @select="selectHandler"
+      @update="updateNodeHandler"
+      @sort="sortNodeHandler"
+    ></magic-stage>
+
+    <slot name="workspace-content"></slot>
+
+    <page-bar>
+      <template #page-bar-title="{ page }"><slot name="page-bar-title" :page="page"></slot></template>
+      <template #page-bar-popover="{ page }"><slot name="page-bar-popover" :page="page"></slot></template>
+    </page-bar>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, inject, nextTick, PropType, watch } from 'vue';
+
+import type { MApp, MComponent, MContainer, MNode, MPage } from '@tmagic/schema';
+import type { MoveableOptions, SortEventData } from '@tmagic/stage';
+import StageCore from '@tmagic/stage';
+
+import type { Services } from '@editor/type';
+
+import PageBar from './PageBar.vue';
+import MagicStage from './Stage.vue';
+
+export default defineComponent({
+  name: 'm-editor-workspace',
+
+  components: {
+    PageBar,
+    MagicStage,
+  },
+
+  props: {
+    runtimeUrl: String,
+
+    render: {
+      type: Function as PropType<() => HTMLDivElement>,
+    },
+
+    moveableOptions: {
+      type: [Object, Function] as PropType<MoveableOptions | ((core?: StageCore) => MoveableOptions)>,
+    },
+
+    canSelect: {
+      type: Function as PropType<(el: HTMLElement) => boolean | Promise<boolean>>,
+    },
+  },
+
+  setup() {
+    const services = inject<Services>('services');
+    const node = computed(() => services?.editorService.get<MNode>('node'));
+    const stage = computed(() => services?.editorService.get<StageCore>('stage'));
+
+    watch([() => node.value?.id, stage], ([id, stage]) => {
+      nextTick(() => {
+        // 等待相关dom变更完成后，再select，适用大多数场景
+        id && stage?.select(id);
+      });
+    });
+
+    return {
+      uiSelectMode: computed(() => services?.uiService.get<boolean>('uiSelectMode')),
+      root: computed(() => services?.editorService.get<MApp>('root')),
+      page: computed(() => services?.editorService.get<MPage>('page')),
+      zoom: computed(() => services?.uiService.get<number>('zoom')),
+
+      node,
+
+      selectHandler(el: HTMLElement) {
+        services?.editorService.select(el.id);
+      },
+
+      updateNodeHandler(node: MComponent | MContainer | MPage) {
+        services?.editorService.update(node);
+      },
+
+      sortNodeHandler(ev: SortEventData) {
+        services?.editorService.sort(ev.src, ev.dist);
+      },
+    };
+  },
+});
+</script>