@tmagic/editor 1.3.0-alpha.9 → 1.3.0-beta.1

package/src/fields/UISelect.vue

@@ -1,13 +1,41 @@
 <template>
   <div class="m-fields-ui-select" v-if="uiSelectMode" @click="cancelHandler">
-    <TMagicButton type="danger" :icon="Delete" text style="padding: 0">取消</TMagicButton>
+    <TMagicButton type="danger" :icon="Delete" :disabled="disabled" :size="size" text style="padding: 0"
+      >取消</TMagicButton
+    >
   </div>
-  <div class="m-fields-ui-select" v-else @click="startSelect" style="display: flex">
-    <TMagicTooltip v-if="val" content="清除">
-      <TMagicButton style="padding: 0" type="danger" :icon="Close" text @click.stop="deleteHandler"></TMagicButton>
-    </TMagicTooltip>
-    <TMagicTooltip :content="val ? toName + '_' + val : '点击此处选择'">
-      <TMagicButton text style="padding: 0; margin: 0">{{ val ? toName + '_' + val : '点击此处选择' }}</TMagicButton>
+  <div class="m-fields-ui-select" v-else style="display: flex">
+    <template v-if="val">
+      <TMagicTooltip content="清除" placement="top">
+        <TMagicButton
+          style="padding: 0"
+          type="danger"
+          :icon="Close"
+          :disabled="disabled"
+          :size="size"
+          text
+          @click.stop="deleteHandler"
+        ></TMagicButton>
+      </TMagicTooltip>
+
+      <TMagicTooltip content="点击选中组件" placement="top">
+        <TMagicButton
+          text
+          style="padding: 0; margin: 0"
+          :disabled="disabled"
+          :size="size"
+          @click="selectNode(val)"
+          @mouseenter="highlight(val)"
+          @mouseleave="unhightlight"
+          >{{ `${toName}_${val}` }}</TMagicButton
+        >
+      </TMagicTooltip>
+    </template>
+
+    <TMagicTooltip v-else content="点击此处选择" placement="top">
+      <TMagicButton text style="padding: 0; margin: 0" :disabled="disabled" :size="size" @click="startSelect"
+        >点击此处选择</TMagicButton
+      >
     </TMagicTooltip>
   </div>
 </template>
@@ -15,9 +43,11 @@
 <script lang="ts" setup>
 import { computed, inject, ref } from 'vue';
 import { Close, Delete } from '@element-plus/icons-vue';
+import { throttle } from 'lodash-es';
 
 import { TMagicButton, TMagicTooltip } from '@tmagic/design';
-import { FormState } from '@tmagic/form';
+import type { FieldProps, FormState } from '@tmagic/form';
+import type { Id } from '@tmagic/schema';
 
 import type { Services } from '@editor/type';
 
@@ -25,12 +55,7 @@ defineOptions({
   name: 'MEditorUISelect',
 });
 
-const props = defineProps<{
-  config: any;
-  model: any;
-  prop: string;
-  name: string;
-}>();
+const props = defineProps<FieldProps<any>>();
 
 const emit = defineEmits(['change']);
 
@@ -77,6 +102,21 @@ const deleteHandler = () => {
     mForm?.$emit('field-change', props.prop, '');
   }
 };
+
+const selectNode = async (id: Id) => {
+  await services?.editorService.select(id);
+  services?.editorService.get('stage')?.select(id);
+};
+
+const highlight = throttle((id: Id) => {
+  services?.editorService.highlight(id);
+  services?.editorService.get('stage')?.highlight(id);
+}, 150);
+
+const unhightlight = () => {
+  services?.editorService.set('highlightNode', null);
+  services?.editorService.get('stage')?.clearHighlight();
+};
 </script>
 
 <style lang="scss">

package/src/hooks/index.ts

@@ -0,0 +1,21 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './use-code-block-edit';
+export * from './use-data-source-method';
+export * from './use-stage';

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

@@ -0,0 +1,84 @@
+import { nextTick, ref } from 'vue';
+import { cloneDeep } from 'lodash-es';
+
+import { tMagicMessage } from '@tmagic/design';
+import type { CodeBlockContent } from '@tmagic/schema';
+
+import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
+import type { CodeBlockService } from '@editor/services/codeBlock';
+
+export const useCodeBlockEdit = (codeBlockService?: CodeBlockService) => {
+  const codeConfig = ref<CodeBlockContent>();
+  const codeId = ref<string>();
+  const codeBlockEditor = ref<InstanceType<typeof CodeBlockEditor>>();
+
+  // 新增代码块
+  const createCodeBlock = async () => {
+    if (!codeBlockService) {
+      tMagicMessage.error('新增代码块失败');
+      return;
+    }
+
+    codeConfig.value = {
+      name: '代码块',
+      content: `({app, params}) => {\n  // place your code here\n}`,
+      params: [],
+    };
+
+    codeId.value = await codeBlockService.getUniqueId();
+
+    await nextTick();
+
+    codeBlockEditor.value?.show();
+  };
+
+  // 编辑代码块
+  const editCode = async (id: string) => {
+    const codeBlock = await codeBlockService?.getCodeContentById(id);
+
+    if (!codeBlock) {
+      tMagicMessage.error('获取代码块内容失败');
+      return;
+    }
+
+    let codeContent = codeBlock.content;
+
+    if (typeof codeContent !== 'string') {
+      codeContent = codeContent.toString();
+    }
+
+    codeConfig.value = {
+      ...cloneDeep(codeBlock),
+      content: codeContent,
+    };
+    codeId.value = id;
+
+    await nextTick();
+
+    codeBlockEditor.value?.show();
+  };
+
+  // 删除代码块
+  const deleteCode = async (key: string) => {
+    codeBlockService?.deleteCodeDslByIds([key]);
+  };
+
+  const submitCodeBlockHandler = async (values: CodeBlockContent) => {
+    if (!codeId.value) return;
+
+    await codeBlockService?.setCodeDslById(codeId.value, values);
+
+    codeBlockEditor.value?.hide();
+  };
+
+  return {
+    codeId,
+    codeConfig,
+    codeBlockEditor,
+
+    createCodeBlock,
+    editCode,
+    deleteCode,
+    submitCodeBlockHandler,
+  };
+};

package/src/hooks/use-data-source-method.ts

@@ -0,0 +1,100 @@
+import { nextTick, ref } from 'vue';
+import { cloneDeep } from 'lodash-es';
+
+import { tMagicMessage } from '@tmagic/design';
+import type { CodeBlockContent, DataSourceSchema } from '@tmagic/schema';
+
+import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
+import { getConfig } from '@editor/utils/config';
+
+export const useDataSourceMethod = () => {
+  const codeConfig = ref<CodeBlockContent>();
+  const codeBlockEditor = ref<InstanceType<typeof CodeBlockEditor>>();
+
+  const dataSource = ref<DataSourceSchema>();
+  const dataSourceMethod = ref('');
+
+  return {
+    codeConfig,
+    codeBlockEditor,
+
+    createCode: async (model: DataSourceSchema) => {
+      codeConfig.value = {
+        name: '',
+        content: `({ params, dataSource, app }) => {\n  // place your code here\n}`,
+        params: [],
+      };
+
+      await nextTick();
+
+      dataSource.value = model;
+      dataSourceMethod.value = '';
+
+      codeBlockEditor.value?.show();
+    },
+
+    editCode: async (model: DataSourceSchema, methodName: string) => {
+      const method = model.methods?.find((method) => method.name === methodName);
+
+      if (!method) {
+        tMagicMessage.error('获取数据源方法失败');
+        return;
+      }
+
+      let codeContent = method.content;
+
+      if (typeof codeContent !== 'string') {
+        codeContent = codeContent.toString();
+      }
+
+      codeConfig.value = {
+        ...cloneDeep(method),
+        content: codeContent,
+      };
+
+      await nextTick();
+
+      dataSource.value = model;
+      dataSourceMethod.value = methodName;
+
+      codeBlockEditor.value?.show();
+    },
+
+    deleteCode: async (model: DataSourceSchema, methodName: string) => {
+      if (!model.methods) return;
+
+      const index = model.methods.findIndex((method) => method.name === methodName);
+
+      if (index === -1) {
+        return;
+      }
+
+      model.methods.splice(index, 1);
+    },
+
+    submitCode: (values: CodeBlockContent) => {
+      if (!dataSource.value) return;
+
+      if (!dataSource.value.methods) {
+        dataSource.value.methods = [];
+      }
+
+      if (values.content) {
+        // 在保存的时候转换代码内容
+        const parseDSL = getConfig('parseDSL');
+        if (typeof values.content === 'string') {
+          values.content = parseDSL<(...args: any[]) => any>(values.content);
+        }
+      }
+
+      if (dataSourceMethod.value) {
+        const index = dataSource.value.methods.findIndex((method) => method.name === dataSourceMethod.value);
+        dataSource.value.methods.splice(index, 1, values);
+      } else {
+        dataSource.value.methods.push(values);
+      }
+
+      codeBlockEditor.value?.hide();
+    },
+  };
+};

package/src/hooks/use-getso.ts

@@ -0,0 +1,35 @@
+import { onMounted, onUnmounted, type Ref, ref } from 'vue';
+import Gesto, { type OnDrag } from 'gesto';
+
+export const useGetSo = (target: Ref<HTMLElement | undefined>, emit: (evt: 'change', e: OnDrag<Gesto>) => void) => {
+  let getso: Gesto;
+  const isDraging = ref(false);
+
+  onMounted(() => {
+    if (!target.value) return;
+    getso = new Gesto(target.value, {
+      container: window,
+      pinchOutside: true,
+    })
+      .on('drag', (e) => {
+        if (!target.value) return;
+
+        emit('change', e);
+      })
+      .on('dragStart', () => {
+        isDraging.value = true;
+      })
+      .on('dragEnd', () => {
+        isDraging.value = false;
+      });
+  });
+
+  onUnmounted(() => {
+    getso?.unset();
+    isDraging.value = false;
+  });
+
+  return {
+    isDraging,
+  };
+};

package/src/{utils/stage.ts → hooks/use-stage.ts}

@@ -1,12 +1,12 @@
 import { computed } from 'vue';
 
+import type { MNode } from '@tmagic/schema';
 import StageCore, { GuidesType, RemoveEventData, SortEventData, UpdateEventData } from '@tmagic/stage';
 
 import editorService from '@editor/services/editor';
 import uiService from '@editor/services/ui';
 import { H_GUIDE_LINE_STORAGE_KEY, StageOptions, V_GUIDE_LINE_STORAGE_KEY } from '@editor/type';
-
-import { getGuideLineFromCache } from './editor';
+import { getGuideLineFromCache } from '@editor/utils/editor';
 
 const root = computed(() => editorService.get('root'));
 const page = computed(() => editorService.get('page'));
@@ -74,11 +74,8 @@ export const useStage = (stageOptions: StageOptions) => {
   });
 
   stage.on('remove', (ev: RemoveEventData) => {
-    editorService.remove(
-      ev.data.map(({ el }) => ({
-        id: el.id,
-      })),
-    );
+    const nodes = ev.data.map(({ el }) => editorService.getNodeById(el.id));
+    editorService.remove(nodes.filter((node) => Boolean(node)) as MNode[]);
   });
 
   stage.on('select-parent', () => {

package/src/icons/CenterIcon.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M2 4H21V6H2V4Z" fill="black" fill-opacity="0.9" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M5 11H18V13H5V11Z" fill="black" fill-opacity="0.9" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M2 18H21V20H2V18Z" fill="black" fill-opacity="0.9" />
+  </svg>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  name: 'MEditorCenterIcon',
+});
+</script>

package/src/icons/CodeIcon.vue

@@ -1,7 +1,5 @@
 <template>
-  <!-- 代码icon，cdn链接：https://cloudcache.tencent-cloud.com/qcloud/ui/static/government/0d463ed5-6407-4498-8865-3d05b5e70115.svg -->
   <svg viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 60.1 (88133) - https://sketch.com -->
     <defs><rect id="path-1" x="0" y="0" width="32" height="32"></rect></defs>
     <g id="组件规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
       <g id="03图标" transform="translate(-561.000000, -2356.000000)">

package/src/icons/FolderMinusIcon.vue

@@ -0,0 +1,22 @@
+<template>
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 16 16"
+    class="bi bi-folder-minus"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M9.828 4H2.19a1 1 0 0 0-.996 1.09l.637 7a1 1 0 0 0 .995.91H9v1H2.826a2 2 0 0 1-1.991-1.819l-.637-7a1.99 1.99 0 0 1 .342-1.31L.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3h3.982a2 2 0 0 1 1.992 2.181L15.546 8H14.54l.265-2.91A1 1 0 0 0 13.81 4H9.828zm-2.95-1.707L7.587 3H2.19c-.24 0-.47.042-.684.12L1.5 2.98a1 1 0 0 1 1-.98h3.672a1 1 0 0 1 .707.293z"
+    />
+    <path fill-rule="evenodd" d="M11 11.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5z" />
+  </svg>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  name: 'MEditorFolderMinusIcon',
+});
+</script>

package/src/icons/PinIcon.vue

@@ -0,0 +1,25 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    class="icon icon-tabler icon-tabler-pin"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    stroke-width="2"
+    stroke="currentColor"
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M15 4.5l-4 4l-4 1.5l-1.5 1.5l7 7l1.5 -1.5l1.5 -4l4 -4" />
+    <line x1="9" y1="15" x2="4.5" y2="19.5" />
+    <line x1="14.5" y1="4" x2="20" y2="9.5" />
+  </svg>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  name: 'MEditorPinIcon',
+});
+</script>

package/src/icons/PinnedIcon.vue

@@ -0,0 +1,25 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    class="icon icon-tabler icon-tabler-pinned"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    stroke-width="2"
+    stroke="currentColor"
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M9 4v6l-2 4v2h10v-2l-2 -4v-6" />
+    <line x1="12" y1="16" x2="12" y2="21" />
+    <line x1="8" y1="4" x2="16" y2="4" />
+  </svg>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  name: 'MEditorPinnedIcon',
+});
+</script>

package/src/index.ts

@@ -22,7 +22,10 @@ import CodeLink from './fields/CodeLink.vue';
 import CodeSelect from './fields/CodeSelect.vue';
 import CodeSelectCol from './fields/CodeSelectCol.vue';
 import DataSourceFields from './fields/DataSourceFields.vue';
+import DataSourceFieldSelect from './fields/DataSourceFieldSelect.vue';
 import DataSourceInput from './fields/DataSourceInput.vue';
+import DataSourceMethods from './fields/DataSourceMethods.vue';
+import DataSourceMethodSelect from './fields/DataSourceMethodSelect.vue';
 import DataSourceSelect from './fields/DataSourceSelect.vue';
 import EventSelect from './fields/EventSelect.vue';
 import KeyValue from './fields/KeyValue.vue';
@@ -34,8 +37,11 @@ import type { InstallOptions } from './type';
 
 import './theme/index.scss';
 
+export type { OnDrag } from 'gesto';
+
 export type { MoveableOptions } from '@tmagic/stage';
 export * from './type';
+export * from './hooks';
 export * from './utils';
 export { default as TMagicEditor } from './Editor.vue';
 export { default as TMagicCodeEditor } from './layouts/CodeEditor.vue';
@@ -53,11 +59,15 @@ export { default as LayerPanel } from './layouts/sidebar/LayerPanel.vue';
 export { default as CodeSelect } from './fields/CodeSelect.vue';
 export { default as CodeSelectCol } from './fields/CodeSelectCol.vue';
 export { default as DataSourceFields } from './fields/DataSourceFields.vue';
+export { default as DataSourceMethods } from './fields/DataSourceMethods.vue';
 export { default as DataSourceInput } from './fields/DataSourceInput.vue';
 export { default as DataSourceSelect } from './fields/DataSourceSelect.vue';
+export { default as DataSourceMethodSelect } from './fields/DataSourceMethodSelect.vue';
+export { default as DataSourceFieldSelect } from './fields/DataSourceFieldSelect.vue';
 export { default as EventSelect } from './fields/EventSelect.vue';
 export { default as KeyValue } from './fields/KeyValue.vue';
 export { default as CodeBlockList } from './layouts/sidebar/code-block/CodeBlockList.vue';
+export { default as CodeBlockListPanel } from './layouts/sidebar/code-block/CodeBlockListPanel.vue';
 export { default as PropsPanel } from './layouts/PropsPanel.vue';
 export { default as ToolButton } from './components/ToolButton.vue';
 export { default as ContentMenu } from './components/ContentMenu.vue';
@@ -65,6 +75,7 @@ export { default as Icon } from './components/Icon.vue';
 export { default as LayoutContainer } from './components/SplitView.vue';
 export { default as SplitView } from './components/SplitView.vue';
 export { default as Resizer } from './components/Resizer.vue';
+export { default as CodeBlockEditor } from './components/CodeBlockEditor.vue';
 
 const defaultInstallOpt: InstallOptions = {
   // eslint-disable-next-line no-eval
@@ -90,5 +101,8 @@ export default {
     app.component('m-fields-key-value', KeyValue);
     app.component('m-fields-data-source-input', DataSourceInput);
     app.component('m-fields-data-source-select', DataSourceSelect);
+    app.component('m-fields-data-source-methods', DataSourceMethods);
+    app.component('m-fields-data-source-method-select', DataSourceMethodSelect);
+    app.component('m-fields-data-source-field-select', DataSourceFieldSelect);
   },
 };