@tmagic/editor 1.4.8 → 1.4.9

package/src/layouts/PropsPanel.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="m-editor-props-panel" v-show="nodes.length === 1">
+    <slot name="props-panel-header"></slot>
+    <MForm
+      ref="configForm"
+      :class="propsPanelSize"
+      :popper-class="`m-editor-props-panel-popper ${propsPanelSize}`"
+      :size="propsPanelSize"
+      :init-values="values"
+      :config="curFormConfig"
+      :extend-state="extendState"
+      @change="submit"
+      @error="errorHandler"
+    ></MForm>
+
+    <TMagicButton
+      v-if="!disabledShowSrc"
+      class="m-editor-props-panel-src-icon"
+      circle
+      size="large"
+      title="源码"
+      :type="showSrc ? 'primary' : ''"
+      @click="showSrc = !showSrc"
+    >
+      <MIcon :icon="DocumentIcon"></MIcon>
+    </TMagicButton>
+
+    <CodeEditor
+      v-if="showSrc"
+      class="m-editor-props-panel-src-code"
+      :height="`${editorContentHeight}px`"
+      :init-values="values"
+      :options="codeOptions"
+      :parse="true"
+      @save="saveCode"
+    ></CodeEditor>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, getCurrentInstance, inject, onBeforeUnmount, onMounted, ref, watchEffect } from 'vue';
+import { Document as DocumentIcon } from '@element-plus/icons-vue';
+
+import { TMagicButton } from '@tmagic/design';
+import type { FormState, FormValue } from '@tmagic/form';
+import { MForm } from '@tmagic/form';
+import type { MNode } from '@tmagic/schema';
+
+import MIcon from '@editor/components/Icon.vue';
+import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height';
+import type { PropsPanelSlots, Services } from '@editor/type';
+
+import CodeEditor from './CodeEditor.vue';
+
+defineSlots<PropsPanelSlots>();
+
+defineOptions({
+  name: 'MEditorPropsPanel',
+});
+
+defineProps<{
+  disabledShowSrc?: boolean;
+  extendState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
+}>();
+
+const codeOptions = inject('codeOptions', {});
+
+const emit = defineEmits(['mounted', 'submit-error', 'form-error']);
+
+const showSrc = ref(false);
+
+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 node = computed(() => services?.editorService.get('node'));
+const nodes = computed(() => services?.editorService.get('nodes') || []);
+const propsPanelSize = computed(() => services?.uiService.get('propsPanelSize') || 'small');
+const stage = computed(() => services?.editorService.get('stage'));
+
+const { height: editorContentHeight } = useEditorContentHeight();
+
+const init = async () => {
+  if (!node.value) {
+    curFormConfig.value = [];
+    return;
+  }
+
+  const type = node.value.type || (node.value.items ? 'container' : 'text');
+  curFormConfig.value = (await services?.propsService.getPropsConfig(type)) || [];
+  values.value = node.value;
+};
+
+watchEffect(init);
+services?.propsService.on('props-configs-change', init);
+
+onMounted(() => {
+  emit('mounted', internalInstance);
+});
+
+onBeforeUnmount(() => {
+  services?.propsService.off('props-configs-change', init);
+});
+
+watchEffect(() => {
+  if (configForm.value && stage.value) {
+    configForm.value.formState.stage = stage.value;
+  }
+});
+
+const submit = async () => {
+  try {
+    const values = await configForm.value?.submitForm();
+    services?.editorService.update(values);
+  } catch (e: any) {
+    emit('submit-error', e);
+  }
+};
+
+const errorHandler = (e: any) => {
+  emit('form-error', e);
+};
+
+const saveCode = (values: MNode) => {
+  services?.editorService.update(values);
+};
+
+defineExpose({ configForm, submit });
+</script>

package/src/layouts/page-bar/AddButton.vue

@@ -0,0 +1,48 @@
+<template>
+  <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"
+  >
+    <Icon :icon="Plus"></Icon>
+  </div>
+  <div v-else style="width: 21px"></div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, toRaw } from 'vue';
+import { Plus } from '@element-plus/icons-vue';
+
+import { NodeType } from '@tmagic/schema';
+
+import Icon from '@editor/components/Icon.vue';
+import type { Services } from '@editor/type';
+import { generatePageNameByApp } from '@editor/utils/editor';
+
+defineOptions({
+  name: 'MEditorPageBarAddButton',
+});
+
+const props = defineProps<{
+  type: NodeType.PAGE | NodeType.PAGE_FRAGMENT;
+}>();
+
+const services = inject<Services>('services');
+const uiService = services?.uiService;
+const editorService = services?.editorService;
+
+const showAddPageButton = computed(() => uiService?.get('showAddPageButton'));
+
+const addPage = () => {
+  if (!editorService) return;
+  const root = toRaw(editorService.get('root'));
+  if (!root) throw new Error('root 不能为空');
+  const pageConfig = {
+    type: props.type,
+    name: generatePageNameByApp(root, props.type),
+    items: [],
+  };
+  editorService.add(pageConfig);
+};
+</script>

package/src/layouts/page-bar/PageBar.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="m-editor-page-bar-tabs">
+    <SwitchTypeButton v-if="!disabledPageFragment" v-model="active" />
+
+    <PageBarScrollContainer :type="active">
+      <template #prepend>
+        <AddButton :type="active"></AddButton>
+      </template>
+
+      <div
+        v-for="item in list"
+        class="m-editor-page-bar-item"
+        :key="item.id"
+        :class="{ active: page?.id === item.id }"
+        @click="switchPage(item.id)"
+      >
+        <div class="m-editor-page-bar-title">
+          <slot name="page-bar-title" :page="item">
+            <span :title="item.name">{{ item.name || item.id }}</span>
+          </slot>
+        </div>
+
+        <TMagicPopover popper-class="page-bar-popover" placement="top" :width="160" trigger="hover">
+          <div>
+            <slot name="page-bar-popover" :page="item">
+              <ToolButton
+                :data="{
+                  type: 'button',
+                  text: '复制',
+                  icon: DocumentCopy,
+                  handler: () => copy(item),
+                }"
+              ></ToolButton>
+              <ToolButton
+                :data="{
+                  type: 'button',
+                  text: '删除',
+                  icon: Delete,
+                  handler: () => remove(item),
+                }"
+              ></ToolButton>
+            </slot>
+          </div>
+          <template #reference>
+            <TMagicIcon class="m-editor-page-bar-menu-icon">
+              <CaretBottom></CaretBottom>
+            </TMagicIcon>
+          </template>
+        </TMagicPopover>
+      </div>
+    </PageBarScrollContainer>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, ref, watch } from 'vue';
+import { CaretBottom, Delete, DocumentCopy } from '@element-plus/icons-vue';
+
+import { TMagicIcon, TMagicPopover } from '@tmagic/design';
+import { Id, type MPage, type MPageFragment, NodeType } from '@tmagic/schema';
+import { isPage, isPageFragment } from '@tmagic/utils';
+
+import ToolButton from '@editor/components/ToolButton.vue';
+import type { Services } from '@editor/type';
+import { getPageFragmentList, getPageList } from '@editor/utils';
+
+import AddButton from './AddButton.vue';
+import PageBarScrollContainer from './PageBarScrollContainer.vue';
+import SwitchTypeButton from './SwitchTypeButton.vue';
+
+defineOptions({
+  name: 'MEditorPageBar',
+});
+
+defineProps<{
+  disabledPageFragment: boolean;
+}>();
+
+const active = ref<NodeType.PAGE | NodeType.PAGE_FRAGMENT>(NodeType.PAGE);
+
+const services = inject<Services>('services');
+const editorService = services?.editorService;
+
+const root = computed(() => editorService?.get('root'));
+const page = computed(() => editorService?.get('page'));
+const pageList = computed(() => getPageList(root.value));
+const pageFragmentList = computed(() => getPageFragmentList(root.value));
+
+const list = computed(() => (active.value === NodeType.PAGE ? pageList.value : pageFragmentList.value));
+
+const activePage = ref<Id>('');
+const activePageFragment = ref<Id>('');
+
+watch(
+  page,
+  (page) => {
+    if (!page) {
+      if (active.value === NodeType.PAGE) {
+        activePage.value = '';
+      }
+      if (active.value === NodeType.PAGE_FRAGMENT) {
+        activePageFragment.value = '';
+      }
+      return;
+    }
+
+    if (isPage(page)) {
+      activePage.value = page?.id;
+      if (active.value !== NodeType.PAGE) {
+        active.value = NodeType.PAGE;
+      }
+    } else if (isPageFragment(page)) {
+      activePageFragment.value = page?.id;
+      if (active.value !== NodeType.PAGE_FRAGMENT) {
+        active.value = NodeType.PAGE_FRAGMENT;
+      }
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+watch(active, (active) => {
+  if (active === NodeType.PAGE) {
+    if (!activePage.value && !pageList.value.length) {
+      editorService?.selectRoot();
+      return;
+    }
+    switchPage(activePage.value);
+    return;
+  }
+
+  if (active === NodeType.PAGE_FRAGMENT) {
+    // 之前没有选中过页面片并且当前没有页面片
+    if (!activePageFragment.value && !pageFragmentList.value.length) {
+      editorService?.selectRoot();
+      return;
+    }
+    switchPage(activePageFragment.value || pageFragmentList.value[0].id);
+  }
+});
+
+const switchPage = (id: Id) => {
+  editorService?.select(id);
+};
+
+const copy = (node: MPage | MPageFragment) => {
+  node && editorService?.copy(node);
+  editorService?.paste({
+    left: 0,
+    top: 0,
+  });
+};
+
+const remove = (node: MPage | MPageFragment) => {
+  editorService?.remove(node);
+};
+</script>

package/src/layouts/page-bar/PageBarScrollContainer.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="m-editor-page-bar" ref="pageBar">
+    <slot name="prepend"></slot>
+
+    <div v-if="canScroll" class="m-editor-page-bar-item m-editor-page-bar-item-icon" @click="scroll('left')">
+      <Icon :icon="ArrowLeftBold"></Icon>
+    </div>
+
+    <div
+      v-if="(type === NodeType.PAGE && pageLength) || (type === NodeType.PAGE_FRAGMENT && pageFragmentLength)"
+      class="m-editor-page-bar-items"
+      ref="itemsContainer"
+      :style="`width: ${itemsContainerWidth}px`"
+    >
+      <slot></slot>
+    </div>
+
+    <div v-if="canScroll" class="m-editor-page-bar-item m-editor-page-bar-item-icon" @click="scroll('right')">
+      <Icon :icon="ArrowRightBold"></Icon>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  computed,
+  type ComputedRef,
+  inject,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+  type WatchStopHandle,
+} from 'vue';
+import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue';
+
+import { NodeType } from '@tmagic/schema';
+
+import Icon from '@editor/components/Icon.vue';
+import type { Services } from '@editor/type';
+
+defineOptions({
+  name: 'MEditorPageBarScrollContainer',
+});
+
+const props = defineProps<{
+  type: NodeType.PAGE | NodeType.PAGE_FRAGMENT;
+}>();
+
+const services = inject<Services>('services');
+const editorService = services?.editorService;
+const uiService = services?.uiService;
+
+const itemsContainer = ref<HTMLDivElement>();
+const canScroll = ref(false);
+
+const showAddPageButton = computed(() => uiService?.get('showAddPageButton'));
+
+const itemsContainerWidth = ref(0);
+
+const setCanScroll = () => {
+  // 减去新增、左移、右移三个按钮的宽度
+  // 37 = icon width 16 + padding 10 * 2 + border-right 1
+  itemsContainerWidth.value = (pageBar.value?.clientWidth || 0) - 37 * 2 - (showAddPageButton.value ? 37 : 21);
+
+  nextTick(() => {
+    if (itemsContainer.value) {
+      canScroll.value = itemsContainer.value.scrollWidth - itemsContainerWidth.value > 1;
+    }
+  });
+};
+
+const resizeObserver = new ResizeObserver(() => {
+  setCanScroll();
+});
+
+const pageBar = ref<HTMLDivElement>();
+onMounted(() => {
+  pageBar.value && resizeObserver.observe(pageBar.value);
+});
+
+onBeforeUnmount(() => {
+  resizeObserver.disconnect();
+});
+
+let translateLeft = 0;
+
+const scroll = (type: 'left' | 'right' | 'start' | 'end') => {
+  if (!itemsContainer.value) return;
+
+  const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
+
+  if (type === 'left') {
+    translateLeft += 100;
+
+    if (translateLeft > 0) {
+      translateLeft = 0;
+    }
+  } else if (type === 'right') {
+    translateLeft -= 100;
+
+    if (-translateLeft > maxScrollLeft) {
+      translateLeft = -maxScrollLeft;
+    }
+  } else if (type === 'start') {
+    translateLeft = 0;
+  } else if (type === 'end') {
+    translateLeft = -maxScrollLeft;
+  }
+
+  itemsContainer.value.style.transform = `translate(${translateLeft}px, 0px)`;
+};
+
+const pageLength = computed(() => editorService?.get('pageLength') || 0);
+const pageFragmentLength = computed(() => editorService?.get('pageFragmentLength') || 0);
+
+const crateWatchLength = (length: ComputedRef<number>) =>
+  watch(
+    length,
+    (length = 0, preLength = 0) => {
+      setTimeout(() => {
+        setCanScroll();
+        if (length < preLength) {
+          scroll('start');
+        } else {
+          scroll('end');
+        }
+      });
+    },
+    {
+      immediate: true,
+    },
+  );
+
+let unWatchPageLength: WatchStopHandle | null;
+let unWatchPageFragmentLength: WatchStopHandle | null;
+
+watch(
+  () => props.type,
+  (type) => {
+    if (type === NodeType.PAGE) {
+      unWatchPageFragmentLength?.();
+      unWatchPageFragmentLength = null;
+      unWatchPageLength = crateWatchLength(pageLength);
+    } else {
+      unWatchPageLength?.();
+      unWatchPageLength = null;
+      unWatchPageFragmentLength = crateWatchLength(pageFragmentLength);
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+</script>

package/src/layouts/page-bar/SwitchTypeButton.vue

@@ -0,0 +1,45 @@
+<template>
+  <TMagicButton
+    v-for="item in data"
+    class="m-editor-page-bar-switch-type-button"
+    size="small"
+    :key="item.type"
+    link
+    :class="{ active: modelValue === item.type }"
+    :type="modelValue === item.type ? 'primary' : ''"
+    @click="clickHandler(item.type)"
+    >{{ item.text }}</TMagicButton
+  >
+</template>
+
+<script setup lang="ts">
+import { TMagicButton } from '@tmagic/design';
+import { NodeType } from '@tmagic/schema';
+
+defineOptions({
+  name: 'MEditorPageBarSwitchTypeButton',
+});
+
+defineProps<{
+  modelValue: NodeType.PAGE | NodeType.PAGE_FRAGMENT;
+}>();
+
+const data: { type: NodeType.PAGE | NodeType.PAGE_FRAGMENT; text: string }[] = [
+  {
+    type: NodeType.PAGE,
+    text: '页面',
+  },
+  {
+    type: NodeType.PAGE_FRAGMENT,
+    text: '页面片',
+  },
+];
+
+const emit = defineEmits<{
+  'update:modelValue': [value: NodeType.PAGE | NodeType.PAGE_FRAGMENT];
+}>();
+
+const clickHandler = (value: NodeType.PAGE | NodeType.PAGE_FRAGMENT) => {
+  emit('update:modelValue', value);
+};
+</script>

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -0,0 +1,134 @@
+<template>
+  <TMagicScrollbar>
+    <slot name="component-list-panel-header"></slot>
+
+    <TMagicCollapse class="ui-component-panel" :model-value="collapseValue">
+      <SearchInput @search="filterTextChangeHandler"></SearchInput>
+      <template v-for="(group, index) in list">
+        <TMagicCollapseItem v-if="group.items && group.items.length" :key="index" :name="`${index}`">
+          <template #title><MIcon :icon="Grid"></MIcon>{{ group.title }}</template>
+          <div
+            v-for="item in group.items"
+            class="component-item"
+            draggable="true"
+            :key="item.type"
+            @click="appendComponent(item)"
+            @dragstart="dragstartHandler(item, $event)"
+            @dragend="dragendHandler"
+            @drag="dragHandler"
+          >
+            <slot name="component-list-item" :component="item">
+              <TMagicTooltip placement="right" :disabled="!Boolean(item.desc)" :content="item.desc">
+                <MIcon :icon="item.icon"></MIcon>
+              </TMagicTooltip>
+              <span :title="item.text">{{ item.text }}</span>
+            </slot>
+          </div>
+        </TMagicCollapseItem>
+      </template>
+    </TMagicCollapse>
+  </TMagicScrollbar>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, ref } from 'vue';
+import { Grid } from '@element-plus/icons-vue';
+import serialize from 'serialize-javascript';
+
+import { TMagicCollapse, TMagicCollapseItem, TMagicScrollbar, TMagicTooltip } from '@tmagic/design';
+import { removeClassNameByClassName } from '@tmagic/utils';
+
+import MIcon from '@editor/components/Icon.vue';
+import SearchInput from '@editor/components/SearchInput.vue';
+import {
+  type ComponentGroup,
+  type ComponentItem,
+  ComponentListPanelSlots,
+  DragType,
+  type Services,
+  type StageOptions,
+} from '@editor/type';
+
+defineSlots<ComponentListPanelSlots>();
+
+defineOptions({
+  name: 'MEditorComponentListPanel',
+});
+
+const searchText = ref('');
+
+const filterTextChangeHandler = (v: string) => {
+  searchText.value = v;
+};
+
+const services = inject<Services>('services');
+const stageOptions = inject<StageOptions>('stageOptions');
+
+const stage = computed(() => services?.editorService.get('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) => {
+  e.dataTransfer?.setData(
+    'text/json',
+    serialize({
+      dragType: DragType.COMPONENT_LIST,
+      data: {
+        name: text,
+        type,
+        ...data,
+      },
+    }),
+  );
+};
+
+const dragendHandler = () => {
+  if (timeout) {
+    globalThis.clearTimeout(timeout);
+    timeout = undefined;
+  }
+  const doc = stage.value?.renderer.getDocument();
+  if (doc && stageOptions?.containerHighlightClassName) {
+    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.delayedMarkContainer(e);
+};
+</script>