@tmagic/editor 1.5.2 → 1.5.4

package/src/fields/StyleSetter/pro/Layout.vue

@@ -0,0 +1,164 @@
+<template>
+  <MContainer :config="config" :model="values" @change="change"></MContainer>
+  <Box :model="values" @change="change"></Box>
+</template>
+
+<script lang="ts" setup>
+import { markRaw } from 'vue';
+
+import type { ContainerChangeEventData, FormState } from '@tmagic/form';
+import { MContainer } from '@tmagic/form';
+import type { StyleSchema } from '@tmagic/schema';
+
+import Box from '../components/Box.vue';
+import { DisplayBlock, DisplayFlex, DisplayInline, DisplayInlineBlock, DisplayNone } from '../icons/display';
+import {
+  FlexDirectionColumn,
+  FlexDirectionColumnReverse,
+  FlexDirectionRow,
+  FlexDirectionRowReverse,
+} from '../icons/flex-direction';
+import {
+  JustifyContentCenter,
+  JustifyContentFlexEnd,
+  JustifyContentFlexStart,
+  JustifyContentSpaceAround,
+  JustifyContentSpaceBetween,
+} from '../icons/justify-content';
+
+defineProps<{
+  values: Partial<StyleSchema>;
+}>();
+
+const emit = defineEmits<{
+  change: [v: string | StyleSchema, eventData: ContainerChangeEventData];
+}>();
+
+const config = {
+  items: [
+    {
+      name: 'display',
+      text: '模式',
+      type: 'radioGroup',
+      childType: 'button',
+      labelWidth: '68px',
+      options: [
+        { value: 'inline', icon: markRaw(DisplayInline), tooltip: '内联布局 inline' },
+        { value: 'flex', icon: markRaw(DisplayFlex), tooltip: '弹性布局 flex' },
+        { value: 'block', icon: markRaw(DisplayBlock), tooltip: '块级布局 block' },
+        { value: 'inline-block', icon: markRaw(DisplayInlineBlock), tooltip: '内联块布局 inline-block' },
+        { value: 'none', icon: markRaw(DisplayNone), tooltip: '隐藏 none' },
+      ],
+    },
+    {
+      name: 'flexDirection',
+      text: '主轴方向',
+      type: 'radioGroup',
+      childType: 'button',
+      labelWidth: '68px',
+      options: [
+        { value: 'row', icon: markRaw(FlexDirectionRow), tooltip: '水平方向 起点在左侧 row' },
+        { value: 'row-reverse', icon: markRaw(FlexDirectionRowReverse), tooltip: '水平方向 起点在右侧 row-reverse' },
+        { value: 'column', icon: markRaw(FlexDirectionColumn), tooltip: '垂直方向 起点在上沿 column' },
+        {
+          value: 'column-reverse',
+          icon: markRaw(FlexDirectionColumnReverse),
+          tooltip: '垂直方向 起点在下沿 column-reverse',
+        },
+      ],
+      display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.display === 'flex',
+    },
+    {
+      name: 'justifyContent',
+      text: '主轴对齐',
+      type: 'radioGroup',
+      childType: 'button',
+      labelWidth: '68px',
+      options: [
+        { value: 'flex-start', icon: markRaw(JustifyContentFlexStart), tooltip: '左对齐 flex-start' },
+        { value: 'flex-end', icon: markRaw(JustifyContentFlexEnd), tooltip: '右对齐 flex-end' },
+        { value: 'center', icon: markRaw(JustifyContentCenter), tooltip: '居中 center' },
+        { value: 'space-between', icon: markRaw(JustifyContentSpaceBetween), tooltip: '两端对齐 space-between' },
+        { value: 'space-around', icon: markRaw(JustifyContentSpaceAround), tooltip: '横向平分 space-around' },
+      ],
+      display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.display === 'flex',
+    },
+    {
+      name: 'alignItems',
+      text: '辅轴对齐',
+      type: 'radioGroup',
+      childType: 'button',
+      labelWidth: '68px',
+      options: [
+        { value: 'flex-start', icon: markRaw(JustifyContentFlexStart), tooltip: '左对齐 flex-start' },
+        { value: 'flex-end', icon: markRaw(JustifyContentFlexEnd), tooltip: '右对齐 flex-end' },
+        { value: 'center', icon: markRaw(JustifyContentCenter), tooltip: '居中 center' },
+        { value: 'space-between', icon: markRaw(JustifyContentSpaceBetween), tooltip: '两端对齐 space-between' },
+        { value: 'space-around', icon: markRaw(JustifyContentSpaceAround), tooltip: '横向平分 space-around' },
+      ],
+      display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.display === 'flex',
+    },
+    {
+      name: 'flexWrap',
+      text: '换行',
+      type: 'radioGroup',
+      childType: 'button',
+      labelWidth: '68px',
+      options: [
+        { value: 'nowrap', text: '不换行', tooltip: '不换行 nowrap' },
+        { value: 'wrap', text: '正换行', tooltip: '第一行在上方 wrap' },
+        { value: 'wrap-reverse', text: '逆换行', tooltip: '第一行在下方 wrap-reverse' },
+      ],
+      display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.display === 'flex',
+    },
+    {
+      type: 'row',
+      items: [
+        {
+          name: 'width',
+          text: '宽度',
+          labelWidth: '68px',
+          type: 'data-source-field-select',
+          fieldConfig: {
+            type: 'text',
+          },
+        },
+        {
+          name: 'height',
+          text: '宽度',
+          labelWidth: '68px',
+          type: 'data-source-field-select',
+          fieldConfig: {
+            type: 'text',
+          },
+        },
+      ],
+    },
+    {
+      type: 'data-source-field-select',
+      text: 'overflow',
+      name: 'overflow',
+      checkStrictly: false,
+      dataSourceFieldType: ['string'],
+      fieldConfig: {
+        type: 'select',
+        clearable: true,
+        allowCreate: true,
+        options: [
+          { text: 'visible', value: 'visible' },
+          { text: 'hidden', value: 'hidden' },
+          { text: 'clip', value: 'clip' },
+          { text: 'scroll', value: 'scroll' },
+          { text: 'auto', value: 'auto' },
+          { text: 'overlay', value: 'overlay' },
+          { text: 'initial', value: 'initial' },
+        ],
+      },
+    },
+  ],
+};
+
+const change = (value: string | StyleSchema, eventData: ContainerChangeEventData) => {
+  emit('change', value, eventData);
+};
+</script>

package/src/fields/StyleSetter/pro/Position.vue

@@ -0,0 +1,48 @@
+<template>
+  <MContainer :config="config" :model="values" @change="change"></MContainer>
+  <Position v-show="values['position'] !== 'static'" :model="values" @change="change"></Position>
+</template>
+
+<script lang="ts" setup>
+import { ContainerChangeEventData, MContainer } from '@tmagic/form';
+import type { StyleSchema } from '@tmagic/schema';
+
+import Position from '../components/Position.vue';
+
+defineProps<{ values: Partial<StyleSchema> }>();
+
+const emit = defineEmits<{
+  change: [v: string | StyleSchema, eventData: ContainerChangeEventData];
+}>();
+
+const config = {
+  items: [
+    {
+      name: 'position',
+      text: '定位',
+      labelWidth: '68px',
+      type: 'data-source-field-select',
+      fieldConfig: {
+        type: 'select',
+        options: ['static', 'relative', 'absolute', 'fixed', 'sticky'].map((item) => ({
+          value: item,
+          text: item,
+        })),
+      },
+    },
+    {
+      labelWidth: '68px',
+      name: 'zIndex',
+      text: 'zIndex',
+      type: 'data-source-field-select',
+      fieldConfig: {
+        type: 'text',
+      },
+    },
+  ],
+};
+
+const change = (value: string | StyleSchema, eventData: ContainerChangeEventData) => {
+  emit('change', value, eventData);
+};
+</script>

package/src/fields/StyleSetter/pro/index.ts

@@ -0,0 +1,5 @@
+export { default as Background } from './Background.vue';
+export { default as Font } from './Font.vue';
+export { default as Layout } from './Layout.vue';
+export { default as Position } from './Position.vue';
+export { default as Border } from './Border.vue';

package/src/hooks/use-code-block-edit.ts

@@ -10,7 +10,7 @@ import type { CodeBlockService } from '@editor/services/codeBlock';
 export const useCodeBlockEdit = (codeBlockService?: CodeBlockService) => {
   const codeConfig = ref<CodeBlockContent>();
   const codeId = ref<string>();
-  const codeBlockEditor = useTemplateRef<InstanceType<typeof CodeBlockEditor>>('codeBlockEditor');
+  const codeBlockEditorRef = useTemplateRef<InstanceType<typeof CodeBlockEditor>>('codeBlockEditor');
 
   // 新增代码块
   const createCodeBlock = async () => {
@@ -29,7 +29,7 @@ export const useCodeBlockEdit = (codeBlockService?: CodeBlockService) => {
 
     await nextTick();
 
-    codeBlockEditor.value?.show();
+    codeBlockEditorRef.value?.show();
   };
 
   // 编辑代码块
@@ -54,7 +54,7 @@ export const useCodeBlockEdit = (codeBlockService?: CodeBlockService) => {
     codeId.value = id;
 
     await nextTick();
-    codeBlockEditor.value?.show();
+    codeBlockEditorRef.value?.show();
   };
 
   // 删除代码块
@@ -67,13 +67,13 @@ export const useCodeBlockEdit = (codeBlockService?: CodeBlockService) => {
 
     await codeBlockService?.setCodeDslById(codeId.value, values);
 
-    codeBlockEditor.value?.hide();
+    codeBlockEditorRef.value?.hide();
   };
 
   return {
     codeId,
     codeConfig,
-    codeBlockEditor,
+    codeBlockEditor: codeBlockEditorRef,
 
     createCodeBlock,
     editCode,

package/src/index.ts

@@ -39,6 +39,7 @@ import DisplayConds from './fields/DisplayConds.vue';
 import EventSelect from './fields/EventSelect.vue';
 import KeyValue from './fields/KeyValue.vue';
 import PageFragmentSelect from './fields/PageFragmentSelect.vue';
+import StyleSetter from './fields/StyleSetter/Index.vue';
 import uiSelect from './fields/UISelect.vue';
 import CodeEditor from './layouts/CodeEditor.vue';
 import { setEditorConfig } from './utils/config';
@@ -106,6 +107,7 @@ export { default as TreeNode } from './components/TreeNode.vue';
 export { default as PageFragmentSelect } from './fields/PageFragmentSelect.vue';
 export { default as DisplayConds } from './fields/DisplayConds.vue';
 export { default as CondOpSelect } from './fields/CondOpSelect.vue';
+export { default as StyleSetter } from './fields/StyleSetter/Index.vue';
 
 const defaultInstallOpt: EditorInstallOptions = {
   // eslint-disable-next-line no-eval
@@ -143,5 +145,6 @@ export default {
     app.component('m-fields-page-fragment-select', PageFragmentSelect);
     app.component('m-fields-display-conds', DisplayConds);
     app.component('m-fields-cond-op-select', CondOpSelect);
+    app.component('m-form-style-setter', StyleSetter);
   },
 };

package/src/initService.ts

@@ -1,6 +1,7 @@
 import { computed, onBeforeUnmount, reactive, toRaw, watch } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
+import type TMagicCore from '@tmagic/core';
 import type {
   CodeBlockContent,
   DataSourceSchema,
@@ -263,67 +264,46 @@ export const initServiceEvents = (
 
       if (!node) return;
 
-      collectIdle([node], true).then(() => {
-        afterUpdateNodes([node]);
-      });
+      collectIdle([node], true);
+      updateStage([node]);
     });
   });
 
-  const getApp = () => stage.value?.renderer?.runtime?.getApp?.();
-
-  const updateDataSourceSchema = (nodes: MNode[], deep: boolean) => {
-    const root = editorService.get('root');
-    const app = getApp();
-
-    if (root && app?.dsl) {
-      app.dsl.dataSourceDeps = root.dataSourceDeps;
-      app.dsl.dataSourceCondDeps = root.dataSourceCondDeps;
-      app.dsl.dataSources = root.dataSources;
+  const getApp = () => {
+    const renderer = stage.value?.renderer;
+    if (!renderer) {
+      return undefined;
     }
 
-    if (root?.dataSources) {
-      getApp()?.dataSourceManager?.updateSchema(root.dataSources);
+    if (renderer.runtime) {
+      return renderer.runtime.getApp?.();
     }
 
-    if (!root || !stage.value) return;
+    return new Promise<TMagicCore | undefined>((resolve) => {
+      const timeout = globalThis.setTimeout(() => {
+        resolve(undefined);
+      }, 10000);
 
-    const allNodes: MNode[] = [];
-
-    if (deep) {
-      nodes.forEach((node) => {
-        traverseNode<MNode>(node, (node) => {
-          if (!allNodes.includes(node)) {
-            allNodes.push(node);
-          }
-        });
-      });
-    } else {
-      allNodes.push(...nodes);
-    }
-
-    const deps = Object.values(root.dataSourceDeps || {});
-    deps.forEach((dep) => {
-      Object.keys(dep).forEach((id) => {
-        const node = allNodes.find((node) => node.id === id);
-        node &&
-          stage.value?.update({
-            config: cloneDeep(node),
-            parentId: editorService.getParentById(node.id)?.id,
-            root: cloneDeep(root),
-          });
+      renderer.on('runtime-ready', () => {
+        if (timeout) {
+          globalThis.clearTimeout(timeout);
+        }
+        resolve(renderer.runtime?.getApp?.());
       });
     });
   };
 
-  const afterUpdateNodes = (nodes: MNode[]) => {
+  const updateDataSourceSchema = async () => {
     const root = editorService.get('root');
-    if (!root) return;
-    for (const node of nodes) {
-      stage.value?.update({
-        config: cloneDeep(node),
-        parentId: editorService.getParentById(node.id)?.id,
-        root: cloneDeep(root),
-      });
+    const app = await getApp();
+
+    if (root && app?.dsl) {
+      app.dsl.dataSourceDeps = root.dataSourceDeps;
+      app.dsl.dataSources = root.dataSources;
+    }
+
+    if (root?.dataSources) {
+      app?.dataSourceManager?.updateSchema(root.dataSources);
     }
   };
 
@@ -360,18 +340,72 @@ export const initServiceEvents = (
     }
   };
 
-  const depCollectedHandler = () => {
+  /**
+   * 修改dsl后会执行依赖收集并调用此方法
+   * 所以这个方法是会被执行两次，当时updateStage应当时一次，所以通过inDeps参数来区分调用时机
+   * inDeps为true是则更新依赖收集到的节点，否则则更新没有依赖的节点
+   * @param nodes 需要更新的节点
+   * @param inDeps 是否依赖收集完成事件中执行的
+   * @returns
+   */
+  const updateStage = (nodes: MNode[], inDeps = false) => {
     const root = editorService.get('root');
     if (!root) return;
-    const app = getApp();
+
+    const update = (node: MNode) =>
+      stage.value?.update({
+        config: cloneDeep(node),
+        parentId: editorService.getParentById(node.id)?.id,
+        root: cloneDeep(root),
+      });
+
+    nodes.forEach((node) => {
+      const inDepsNodeId: Id[] = [];
+      const deps = Object.values(root.dataSourceDeps || {});
+      deps.forEach((dep) => {
+        Object.keys(dep).forEach((id) => {
+          inDepsNodeId.push(id);
+        });
+      });
+
+      if (inDeps) {
+        if (inDepsNodeId.includes(node.id)) {
+          update(node);
+        }
+      } else {
+        if (!inDepsNodeId.includes(node.id)) {
+          update(node);
+        }
+      }
+    });
+  };
+
+  const dsDepCollectedHandler = async (nodes: MNode[], deep: boolean) => {
+    const root = editorService.get('root');
+    if (!root) return;
+    const app = await getApp();
     if (app?.dsl) {
       app.dsl.dataSourceDeps = root.dataSourceDeps;
     }
+    if (deep) {
+      nodes.forEach((node) => {
+        traverseNode<MNode>(
+          node,
+          (node) => {
+            updateStage([node], true);
+          },
+          [],
+          true,
+        );
+      });
+    } else {
+      updateStage(nodes, true);
+    }
   };
 
   depService.on('add-target', targetAddHandler);
   depService.on('remove-target', targetRemoveHandler);
-  depService.on('collected', depCollectedHandler);
+  depService.on('ds-collected', dsDepCollectedHandler);
 
   const initDataSourceDepTarget = (ds: DataSourceSchema) => {
     depService.addTarget(createDataSourceTarget(ds, reactive({})));
@@ -396,9 +430,9 @@ export const initServiceEvents = (
 
   // 新增节点，收集依赖
   const nodeAddHandler = (nodes: MNode[]) => {
-    collectIdle(nodes, true).then(() => {
-      afterUpdateNodes(nodes);
-    });
+    collectIdle(nodes, true);
+
+    updateStage(nodes);
   };
 
   // 节点更新，收集依赖
@@ -430,11 +464,10 @@ export const initServiceEvents = (
     });
 
     if (needRecollectNodes.length) {
-      collectIdle(needRecollectNodes, true).then(() => {
-        afterUpdateNodes(needRecollectNodes);
-      });
+      collectIdle(needRecollectNodes, true);
+      updateStage(needRecollectNodes);
     } else if (normalNodes.length) {
-      afterUpdateNodes(normalNodes);
+      updateStage(normalNodes);
     }
   };
 
@@ -446,7 +479,7 @@ export const initServiceEvents = (
   // 由于历史记录变化是更新整个page，所以历史记录变化时，需要重新收集依赖
   const historyChangeHandler = (page: MPage | MPageFragment) => {
     collectIdle([page], true).then(() => {
-      updateDataSourceSchema([page], true);
+      updateDataSourceSchema();
     });
   };
 
@@ -472,12 +505,16 @@ export const initServiceEvents = (
   codeBlockService.on('addOrUpdate', codeBlockAddOrUpdateHandler);
   codeBlockService.on('remove', codeBlockRemoveHandler);
 
-  const dataSourceAddHandler = (config: DataSourceSchema) => {
+  const dataSourceAddHandler = async (config: DataSourceSchema) => {
     initDataSourceDepTarget(config);
-    getApp()?.dataSourceManager?.addDataSource(config);
+    const app = await getApp();
+    app?.dataSourceManager?.addDataSource(config);
   };
 
-  const dataSourceUpdateHandler = (config: DataSourceSchema, { changeRecords }: { changeRecords: ChangeRecord[] }) => {
+  const dataSourceUpdateHandler = async (
+    config: DataSourceSchema,
+    { changeRecords }: { changeRecords: ChangeRecord[] },
+  ) => {
     let needRecollectDep = false;
     for (const changeRecord of changeRecords) {
       if (!changeRecord.propPath) {
@@ -506,11 +543,12 @@ export const initServiceEvents = (
         initDataSourceDepTarget(config);
 
         collectIdle(root.items, true).then(() => {
-          updateDataSourceSchema(root?.items || [], true);
+          updateDataSourceSchema();
         });
       }
     } else if (root?.dataSources) {
-      getApp()?.dataSourceManager?.updateSchema(root.dataSources);
+      const app = await getApp();
+      app?.dataSourceManager?.updateSchema(root.dataSources);
     }
   };
 
@@ -525,7 +563,7 @@ export const initServiceEvents = (
     const nodeIds = Object.keys(root?.dataSourceDeps?.[id] || {});
     const nodes = getNodes(nodeIds, root?.items);
     collectIdle(nodes, false).then(() => {
-      updateDataSourceSchema(nodes, false);
+      updateDataSourceSchema();
     });
 
     removeDataSourceTarget(id);
@@ -538,7 +576,7 @@ export const initServiceEvents = (
   onBeforeUnmount(() => {
     depService.off('add-target', targetAddHandler);
     depService.off('remove-target', targetRemoveHandler);
-    depService.off('collected', depCollectedHandler);
+    depService.off('ds-collected', dsDepCollectedHandler);
 
     editorService.off('history-change', historyChangeHandler);
     editorService.off('root-change', rootChangeHandler);

package/src/layouts/CodeEditor.vue

@@ -93,7 +93,7 @@ let vsDiffEditor: monaco.editor.IStandaloneDiffEditor | null = null;
 
 const values = ref('');
 const loading = ref(false);
-const codeEditor = useTemplateRef<HTMLDivElement>('codeEditor');
+const codeEditorEl = useTemplateRef<HTMLDivElement>('codeEditor');
 
 const resizeObserver = new globalThis.ResizeObserver(
   throttle((): void => {
@@ -122,7 +122,7 @@ const getEditorValue = () =>
   (props.type === 'diff' ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue()) || '';
 
 const init = async () => {
-  if (!codeEditor.value) return;
+  if (!codeEditorEl.value) return;
 
   const options = {
     value: values.value,
@@ -132,9 +132,9 @@ const init = async () => {
   };
 
   if (props.type === 'diff') {
-    vsDiffEditor = monaco.editor.createDiffEditor(codeEditor.value, options);
+    vsDiffEditor = monaco.editor.createDiffEditor(codeEditorEl.value, options);
   } else {
-    vsEditor = monaco.editor.create(codeEditor.value, options);
+    vsEditor = monaco.editor.create(codeEditorEl.value, options);
   }
 
   setEditorValue(props.initValues, props.modifiedValues);
@@ -143,7 +143,7 @@ const init = async () => {
 
   emit('initd', vsEditor);
 
-  codeEditor.value.addEventListener('keydown', (e) => {
+  codeEditorEl.value.addEventListener('keydown', (e) => {
     if (e.keyCode === 83 && (navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)) {
       e.preventDefault();
       e.stopPropagation();
@@ -163,7 +163,7 @@ const init = async () => {
     });
   }
 
-  resizeObserver.observe(codeEditor.value);
+  resizeObserver.observe(codeEditorEl.value);
 };
 
 watch(

package/src/layouts/Framework.vue

@@ -90,8 +90,8 @@ const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
 const codeOptions = inject('codeOptions', {});
 const { editorService, uiService } = inject<Services>('services') || {};
 
-const content = useTemplateRef<HTMLDivElement>('content');
-const splitView = useTemplateRef<InstanceType<typeof SplitView>>('splitView');
+const contentEl = useTemplateRef<HTMLDivElement>('content');
+const splitViewRef = useTemplateRef<InstanceType<typeof SplitView>>('splitView');
 
 const root = computed(() => editorService?.get('root'));
 const page = computed(() => editorService?.get('page'));
@@ -115,7 +115,7 @@ const columnWidth = ref<Partial<GetColumnWidth>>({
 });
 
 watch(pageLength, () => {
-  splitView.value?.updateWidth();
+  splitViewRef.value?.updateWidth();
 });
 
 watch(
@@ -146,8 +146,8 @@ const resizerObserver = new ResizeObserver((entries) => {
 });
 
 onMounted(() => {
-  if (content.value) {
-    resizerObserver.observe(content.value);
+  if (contentEl.value) {
+    resizerObserver.observe(contentEl.value);
   }
 });
 

package/src/layouts/NavMenu.vue

@@ -179,8 +179,10 @@ const buttons = computed(() => {
   return data;
 });
 
+const navMenuEl = useTemplateRef<HTMLDivElement>('navMenu');
+
 const resizeObserver = new ResizeObserver(() => {
-  const rect = navMenu.value?.getBoundingClientRect();
+  const rect = navMenuEl.value?.getBoundingClientRect();
   if (rect) {
     uiService?.set('navMenuRect', {
       left: rect.left,
@@ -190,10 +192,11 @@ const resizeObserver = new ResizeObserver(() => {
     });
   }
 });
-const navMenu = useTemplateRef<HTMLDivElement>('navMenu');
+
 onMounted(() => {
-  navMenu.value && resizeObserver.observe(navMenu.value);
+  navMenuEl.value && resizeObserver.observe(navMenuEl.value);
 });
+
 onBeforeUnmount(() => {
   resizeObserver.disconnect();
 });