@tmagic/editor 1.0.0-beta.1

package/src/layouts/Framework.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="m-editor">
+    <slot name="nav" class="m-editor-nav-menu"></slot>
+
+    <magic-code-editor v-if="showSrc" class="m-editor-content" :init-values="root" @save="saveCode"></magic-code-editor>
+
+    <div class="m-editor-content" v-else>
+      <div class="m-editor-framework-left" :style="`width: ${columnWidth?.left}px`">
+        <slot name="sidebar"></slot>
+      </div>
+
+      <resizer type="left"></resizer>
+
+      <template v-if="pageLength > 0">
+        <div class="m-editor-framework-center" :style="`width: ${columnWidth?.center}px`">
+          <slot name="workspace"></slot>
+        </div>
+
+        <resizer type="right"></resizer>
+
+        <div class="m-editor-framework-right" :style="`width: ${columnWidth?.right}px`">
+          <el-scrollbar>
+            <slot name="propsPanel"></slot>
+          </el-scrollbar>
+        </div>
+      </template>
+
+      <slot v-else name="empty">
+        <add-page-box></add-page-box>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, inject } from 'vue';
+
+import type { MApp } from '@tmagic/schema';
+
+import { GetColumnWidth, Services } from '@editor/type';
+
+import AddPageBox from './AddPageBox.vue';
+import Resizer from './Resizer.vue';
+
+export default defineComponent({
+  components: {
+    AddPageBox,
+    Resizer,
+  },
+
+  setup() {
+    const services = inject<Services>('services');
+
+    const root = computed(() => services?.editorService.get<MApp>('root'));
+
+    return {
+      root,
+      pageLength: computed(() => root.value?.items?.length || 0),
+      showSrc: computed(() => services?.uiService.get<boolean>('showSrc')),
+      columnWidth: computed(() => services?.uiService.get<GetColumnWidth>('columnWidth')),
+
+      saveCode(value: string) {
+        try {
+          // eslint-disable-next-line no-eval
+          services?.editorService.set('root', eval(value));
+        } catch (e: any) {
+          console.error(e);
+        }
+      },
+    };
+  },
+});
+</script>

package/src/layouts/NavMenu.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="m-editor-nav-menu" :style="{ height: `${height}px` }">
+    <div v-for="key in keys" :class="`menu-${key}`" :key="key">
+      <tool-button :data="item" v-for="(item, index) in data[key]" :key="index"></tool-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from 'vue';
+
+import ToolButton from '@editor/components/ToolButton.vue';
+import { MenuBarData } from '@editor/type';
+
+export default defineComponent({
+  name: 'nav-menu',
+
+  components: { ToolButton },
+
+  props: {
+    data: {
+      type: Object as PropType<MenuBarData>,
+      default: () => ({}),
+    },
+
+    height: {
+      type: Number,
+    },
+  },
+
+  setup(props) {
+    return {
+      keys: computed(() => Object.keys(props.data) as Array<keyof MenuBarData>),
+    };
+  },
+});
+</script>

package/src/layouts/PropsPanel.vue

@@ -0,0 +1,81 @@
+<template>
+  <m-form
+    class="m-editor-props-panel"
+    ref="configForm"
+    size="small"
+    :init-values="values"
+    :config="curFormConfig"
+    @change="submit"
+  ></m-form>
+</template>
+
+<script lang="ts">
+import { defineComponent, getCurrentInstance, inject, onMounted, ref, watchEffect } from 'vue';
+import { ElMessage } from 'element-plus';
+
+import type { FormValue, MForm } from '@tmagic/form';
+import type { MNode } from '@tmagic/schema';
+
+import type { Services } from '@editor/type';
+
+export default defineComponent({
+  name: 'm-editor-props-panel',
+
+  emits: ['mounted'],
+
+  setup(props, { emit }) {
+    const internalInstance = getCurrentInstance();
+    const values = ref<FormValue>({});
+    const configForm = ref<InstanceType<typeof MForm>>();
+    // ts类型应该是FormConfig， 但是打包时会出错，所以暂时用any
+    const curFormConfig = ref<any>([]);
+    const services = inject<Services>('services');
+
+    const init = async () => {
+      const node = services?.editorService.get<MNode | null>('node');
+
+      if (!node) {
+        curFormConfig.value = [];
+        return;
+      }
+
+      if (node.devconfig && node.style && !isNaN(+node.style.height) && !isNaN(+node.style.width)) {
+        node.devconfig.ratio = node.style.height / node.style.width || 1;
+      }
+
+      values.value = node;
+      const type = node.type || (node.items ? 'container' : 'text');
+      curFormConfig.value = (await services?.propsService.getPropsConfig(type)) || [];
+    };
+
+    watchEffect(init);
+    services?.propsService.on('props-configs-change', init);
+
+    onMounted(() => {
+      emit('mounted', internalInstance);
+    });
+
+    return {
+      values,
+      configForm,
+      curFormConfig,
+
+      async submit() {
+        try {
+          const values = await configForm.value?.submitForm();
+          services?.editorService.update(values);
+        } catch (e: any) {
+          console.error(e);
+          ElMessage.closeAll();
+          ElMessage.error({
+            duration: 10000,
+            showClose: true,
+            message: e.message,
+            dangerouslyUseHTMLString: true,
+          });
+        }
+      },
+    };
+  },
+});
+</script>

package/src/layouts/Resizer.vue

@@ -0,0 +1,61 @@
+<template>
+  <span ref="target" class="m-editor-resizer">
+    <slot></slot>
+  </span>
+</template>
+
+<script lang="ts">
+import { defineComponent, inject, onMounted, onUnmounted, ref, toRaw } from 'vue';
+import Gesto from 'gesto';
+
+import { Services } from '@editor/type';
+
+export default defineComponent({
+  name: 'm-editor-resize',
+
+  props: {
+    type: {
+      type: String,
+    },
+  },
+
+  setup(props) {
+    const services = inject<Services>('services');
+
+    const target = ref<HTMLSpanElement>();
+
+    let getso: Gesto;
+
+    onMounted(() => {
+      if (!target.value) return;
+      getso = new Gesto(target.value, {
+        container: window,
+        pinchOutside: true,
+      }).on('drag', (e) => {
+        if (!target.value || !services) return;
+
+        let { left, right } = {
+          ...toRaw(services.uiService.get('columnWidth')),
+        };
+        if (props.type === 'left') {
+          left += e.deltaX;
+        } else if (props.type === 'right') {
+          right -= e.deltaX;
+        }
+        services.uiService.set('columnWidth', {
+          left,
+          right,
+        });
+      });
+    });
+
+    onUnmounted(() => {
+      getso?.unset();
+    });
+
+    return {
+      target,
+    };
+  },
+});
+</script>

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -0,0 +1,69 @@
+<template>
+  <el-scrollbar>
+    <el-collapse class="ui-component-panel" :model-value="collapseValue">
+      <el-input
+        prefix-icon="el-icon-search"
+        placeholder="输入关键字进行过滤"
+        class="search-input"
+        size="small"
+        clearable
+        v-model="searchText"
+      />
+      <template v-for="(group, index) in list">
+        <el-collapse-item v-if="group.items && group.items.length" :key="index" :name="index">
+          <template #title><i class="el-icon-s-grid"></i>{{ group.title }}</template>
+          <div class="component-item" v-for="item in group.items" :key="item.type" @click="appendComponent(item)">
+            <m-icon :icon="item.icon"></m-icon>
+
+            <el-tooltip effect="dark" placement="bottom" :content="item.text">
+              <span>{{ item.text }}</span>
+            </el-tooltip>
+          </div>
+        </el-collapse-item>
+      </template>
+    </el-collapse>
+  </el-scrollbar>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, inject, ref } from 'vue';
+
+import MIcon from '@editor/components/Icon.vue';
+import type { ComponentGroup, ComponentItem, Services } from '@editor/type';
+
+export default defineComponent({
+  name: 'ui-component-panel',
+
+  components: { MIcon },
+
+  setup() {
+    const searchText = ref('');
+    const services = inject<Services>('services');
+    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),
+    );
+
+    return {
+      searchText,
+      collapseValue,
+      list,
+
+      appendComponent({ text, type, ...config }: ComponentItem): void {
+        services?.editorService.add({
+          name: text,
+          type,
+          ...config,
+        });
+      },
+    };
+  },
+});
+</script>

package/src/layouts/sidebar/LayerMenu.vue

@@ -0,0 +1,117 @@
+<template>
+  <div v-if="node" class="magic-editor-content-menu">
+    <div
+      v-if="node.items"
+      class="magic-editor-content-menu-item"
+      @mouseenter="setSubVisiable(true)"
+      @mouseleave="setSubVisiable(false)"
+    >
+      新增
+    </div>
+    <div v-if="node.type !== 'app'" class="magic-editor-content-menu-item" @click="() => copy(node)">复制</div>
+    <div
+      v-if="node.type !== 'app' && node.type !== 'page'"
+      class="magic-editor-content-menu-item"
+      @click="() => remove()"
+    >
+      删除
+    </div>
+    <div class="subMenu" v-show="subVisible" @mouseenter="setSubVisiable(true)" @mouseleave="setSubVisiable(false)">
+      <el-scrollbar>
+        <template v-if="node.type === 'tabs'">
+          <div
+            class="magic-editor-content-menu-item"
+            @click="
+              () =>
+                append({
+                  type: 'tab-pane',
+                })
+            "
+          >
+            标签
+          </div>
+        </template>
+
+        <template v-else-if="node.type === 'app'">
+          <div
+            class="magic-editor-content-menu-item"
+            v-for="item in menu.app"
+            :key="item.type"
+            @click="() => append(item)"
+          >
+            {{ item.text }}
+          </div>
+        </template>
+
+        <template v-else-if="node.items">
+          <div v-for="list in menu.component" :key="list.title">
+            <template v-for="item in list.items">
+              <div class="magic-editor-content-menu-item" v-if="item" :key="item.type" @click="() => append(item)">
+                {{ item.text }}
+              </div>
+            </template>
+            <div class="separation"></div>
+          </div>
+        </template>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, inject, PropType, ref } from 'vue';
+
+import type { ComponentGroup, Services } from '@editor/type';
+
+export default defineComponent({
+  name: 'magic-editor-content-menu',
+
+  props: {
+    componentGroupList: {
+      type: Array as PropType<ComponentGroup[]>,
+      default: () => [],
+    },
+  },
+
+  setup(props) {
+    const services = inject<Services>('services');
+    const subVisible = ref(false);
+    const node = computed(() => services?.editorService.get('node'));
+
+    return {
+      subVisible,
+
+      node,
+
+      menu: computed(() => ({
+        app: [
+          {
+            type: 'page',
+            text: '页面',
+          },
+        ],
+        component: props.componentGroupList,
+      })),
+
+      append(config: any) {
+        services?.editorService.add({
+          name: config.text,
+          type: config.type,
+        });
+      },
+
+      remove() {
+        node.value && services?.editorService.remove(node.value);
+      },
+
+      copy(node: any) {
+        services?.editorService.copy(node);
+      },
+
+      setSubVisiable(v: any) {
+        subVisible.value = v;
+      },
+    };
+  },
+});
+</script>

package/src/layouts/sidebar/LayerPanel.vue

@@ -0,0 +1,209 @@
+<template>
+  <el-scrollbar class="magic-editor-layer-panel">
+    <el-input
+      class="filterInput"
+      size="small"
+      placeholder="输入关键字进行过滤"
+      clearable
+      v-model="filterText"
+      @change="filterTextChangeHandler"
+    ></el-input>
+
+    <el-tree
+      v-if="values.length"
+      ref="tree"
+      node-key="id"
+      draggable
+      :load="loadItems"
+      :data="values"
+      :expand-on-click-node="false"
+      :highlight-current="true"
+      :props="{
+        children: 'items',
+      }"
+      :filter-node-method="filterNode"
+      :allow-drop="allowDrop"
+      @node-click="clickHandler"
+      @node-contextmenu="contextmenu"
+      @node-drag-end="handleDragEnd"
+      empty-text="页面空荡荡的"
+    >
+      <template #default="{ node, data }">
+        <slot name="layer-node-content" :node="node" :data="data">
+          <span>
+            {{ `${data.name} (${data.id})` }}
+          </span>
+        </slot>
+      </template>
+    </el-tree>
+
+    <teleport to="body">
+      <layer-menu :style="menuStyle"></layer-menu>
+    </teleport>
+  </el-scrollbar>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, inject, onMounted, Ref, ref, watchEffect } from 'vue';
+import type { ElTree } from 'element-plus';
+
+import type { MNode, MPage } from '@tmagic/schema';
+
+import type { EditorService } from '@editor/services/editor';
+import type { Services } from '@editor/type';
+
+import LayerMenu from './LayerMenu.vue';
+
+const select = (data: MNode, editorService?: EditorService) => {
+  if (!data.id) {
+    throw new Error('没有id');
+  }
+
+  editorService?.select(data);
+};
+
+const useDrop = (tree: Ref<InstanceType<typeof ElTree> | undefined>, editorService?: EditorService) => ({
+  allowDrop: (draggingNode: any, dropNode: any, type: string): boolean => {
+    const { data } = dropNode || {};
+    const { data: ingData } = draggingNode;
+
+    const { type: ingType } = ingData;
+
+    if (ingType !== 'page' && data.type === 'page') return false;
+    if (ingType === 'page' && data.type !== 'page') return false;
+    if (!data || !data.type) return false;
+    if (['prev', 'next'].includes(type)) return true;
+    if (data.items || data.type === 'container') return true;
+
+    return false;
+  },
+
+  handleDragEnd() {
+    if (!tree.value) return;
+    const { data } = tree.value;
+    const [page] = data as [MPage];
+    editorService?.update(page);
+  },
+});
+
+const useStatus = (tree: Ref<InstanceType<typeof ElTree> | undefined>, editorService?: EditorService) => {
+  const page = computed(() => editorService?.get('page'));
+
+  watchEffect(() => {
+    if (!tree.value) return;
+
+    const node = editorService?.get('node');
+    node && tree.value.setCurrentKey(node.id, true);
+
+    const parent = editorService?.get('parent');
+    if (!parent?.id) return;
+
+    const treeNode = tree.value.getNode(parent.id);
+    treeNode?.updateChildren();
+  });
+
+  return {
+    values: computed(() => (page.value ? [page.value] : [])),
+
+    loadItems: (node: any, resolve: Function) => {
+      if (Array.isArray(node.data)) {
+        return resolve(node.data);
+      }
+      if (Array.isArray(node.data?.items)) {
+        return resolve(node.data?.items);
+      }
+      resolve([]);
+    },
+  };
+};
+
+const useFilter = (tree: Ref<InstanceType<typeof ElTree> | undefined>) => ({
+  filterText: ref(''),
+
+  filterNode: (value: string, data: MNode): boolean => {
+    if (!value) {
+      return true;
+    }
+    let name = '';
+    if (data.name) {
+      name = data.name;
+    } else if (data.type) {
+      name = data.type;
+    } else if (data.items) {
+      name = 'container';
+    }
+    return name.indexOf(value) !== -1;
+  },
+
+  filterTextChangeHandler(val: string) {
+    tree.value?.filter(val);
+  },
+});
+
+const useContentMenu = (editorService?: EditorService) => {
+  const menuStyle = ref({
+    position: 'absolute',
+    left: '0',
+    top: '0',
+    display: 'none',
+  });
+
+  onMounted(() => {
+    document.addEventListener(
+      'click',
+      () => {
+        menuStyle.value.display = 'none';
+      },
+      true,
+    );
+  });
+
+  return {
+    menuStyle,
+
+    contextmenu(event: MouseEvent, data: MNode) {
+      const bodyHeight = globalThis.document.body.clientHeight;
+
+      const left = `${event.clientX + 20}px`;
+      let top = `${event.clientY - 10}px`;
+
+      if (event.clientY + 300 > bodyHeight) {
+        top = `${bodyHeight - 300}px`;
+      }
+
+      menuStyle.value.left = left;
+      menuStyle.value.top = top;
+      menuStyle.value.display = '';
+
+      select(data, editorService);
+    },
+  };
+};
+
+export default defineComponent({
+  name: 'magic-editor-layer-panel',
+
+  components: { LayerMenu },
+
+  setup() {
+    const services = inject<Services>('services');
+    const tree = ref<InstanceType<typeof ElTree>>();
+    const editorService = services?.editorService;
+    return {
+      tree,
+      ...useDrop(tree, editorService),
+      ...useStatus(tree, editorService),
+      ...useFilter(tree),
+      ...useContentMenu(editorService),
+
+      clickHandler(data: MNode): void {
+        if (services?.uiService.get<boolean>('uiSelectMode')) {
+          document.dispatchEvent(new CustomEvent('ui-select', { detail: data }));
+          return;
+        }
+        select(data, editorService);
+      },
+    };
+  },
+});
+</script>