@tmagic/editor 1.4.6 → 1.4.8

package/src/layouts/PropsPanel.vue

@@ -1,130 +0,0 @@
-<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"
-      :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

@@ -1,48 +0,0 @@
-<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

@@ -1,159 +0,0 @@
-<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

@@ -1,156 +0,0 @@
-<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

@@ -1,45 +0,0 @@
-<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

@@ -1,134 +0,0 @@
-<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>