@tmagic/editor 1.3.3 → 1.3.4

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.3",
+  "version": "1.3.4",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -47,14 +47,14 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.3.3",
-    "@tmagic/dep": "1.3.3",
-    "@tmagic/design": "1.3.3",
-    "@tmagic/form": "1.3.3",
-    "@tmagic/schema": "1.3.3",
-    "@tmagic/stage": "1.3.3",
-    "@tmagic/table": "1.3.3",
-    "@tmagic/utils": "1.3.3",
+    "@tmagic/core": "1.3.4",
+    "@tmagic/dep": "1.3.4",
+    "@tmagic/design": "1.3.4",
+    "@tmagic/form": "1.3.4",
+    "@tmagic/schema": "1.3.4",
+    "@tmagic/stage": "1.3.4",
+    "@tmagic/table": "1.3.4",
+    "@tmagic/utils": "1.3.4",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "events": "^3.3.0",
@@ -67,8 +67,8 @@
     "vue": "^3.3.8"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.3.3",
-    "@tmagic/form": "1.3.3",
+    "@tmagic/design": "1.3.4",
+    "@tmagic/form": "1.3.4",
     "monaco-editor": "^0.41.0",
     "vue": "^3.3.8"
   },

package/src/components/ScrollViewer.vue

@@ -25,6 +25,8 @@
 <script lang="ts" setup>
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 
+import { isNumber } from '@tmagic/utils';
+
 import type { ScrollViewerEvent } from '@editor/type';
 import { ScrollViewer } from '@editor/utils/scroll-viewer';
 
@@ -36,8 +38,8 @@ defineOptions({
 
 const props = withDefaults(
   defineProps<{
-    width?: number;
-    height?: number;
+    width?: number | string;
+    height?: number | string;
     wrapWidth?: number;
     wrapHeight?: number;
     zoom?: number;
@@ -63,8 +65,8 @@ const container = ref<HTMLDivElement>();
 const el = ref<HTMLDivElement>();
 const style = computed(
   () => `
-        width: ${props.width}px;
-        height: ${props.height}px;
+        width: ${isNumber(`${props.width}`) ? `${props.width}px` : props.width};
+        height: ${isNumber(`${props.height}`) ? `${props.height}px` : props.height};
         position: absolute;
         margin-top: 30px;
       `,

package/src/fields/DataSourceFields.vue

@@ -38,6 +38,7 @@ import { TMagicButton, tMagicMessage, tMagicMessageBox } from '@tmagic/design';
 import { type FieldProps, type FormConfig, type FormState, MFormDrawer } from '@tmagic/form';
 import type { DataSchema } from '@tmagic/schema';
 import { MagicTable } from '@tmagic/table';
+import { getDefaultValueFromFields } from '@tmagic/utils';
 
 import type { Services } from '@editor/type';
 
@@ -96,7 +97,7 @@ const fieldColumns = [
   },
   {
     label: '属性描述',
-    prop: 'desc',
+    prop: 'description',
   },
   {
     label: '默认值',
@@ -229,6 +230,7 @@ const jsonFromValues = ref({
 });
 
 const newFromJsonHandler = () => {
+  jsonFromValues.value.data = getDefaultValueFromFields(props.model[props.name]);
   addFromJsonDialog.value?.show();
 };
 
@@ -243,38 +245,41 @@ const getValueType = (value: any) => {
   return 'any';
 };
 
-const getFieldsConfig = (value: any) => {
+const getFieldsConfig = (value: any, fields: DataSchema[] = []) => {
   if (!value || typeof value !== 'object') throw new Error('数据格式错误');
 
-  const fields: DataSchema[] = [];
+  const newFields: DataSchema[] = [];
   Object.entries(value).forEach(([key, value]) => {
     const type = getValueType(value);
 
+    const oldField = fields.find((field) => field.name === key);
+
     let childFields: DataSchema[] = [];
     if (Array.isArray(value) && value.length > 0) {
-      childFields = getFieldsConfig(value[0]);
+      childFields = getFieldsConfig(value[0], oldField?.fields);
     } else if (type === 'object') {
-      childFields = getFieldsConfig(value);
+      childFields = getFieldsConfig(value, oldField?.fields);
     }
 
-    fields.push({
+    newFields.push({
       name: key,
-      title: key,
+      title: oldField?.title || key,
       type,
+      description: oldField?.description || '',
+      enable: oldField?.enable ?? true,
       defaultValue: value,
       fields: childFields,
     });
   });
 
-  return fields;
+  return newFields;
 };
 
 const addFromJsonFromChange = ({ data }: { data: string }) => {
-  console.log(data);
   try {
     const value = JSON.parse(data);
 
-    props.model[props.name] = getFieldsConfig(value);
+    props.model[props.name] = getFieldsConfig(value, props.model[props.name]);
 
     addFromJsonDialog.value?.hide();
 

package/src/fields/KeyValue.vue

@@ -1,37 +1,60 @@
 <template>
   <div class="m-fields-key-value">
-    <div class="m-fields-key-value-item" v-for="(item, index) in records" :key="index">
-      <TMagicInput
-        placeholder="key"
-        v-model="records[index][0]"
-        :disabled="disabled"
-        :size="size"
-        @change="keyChangeHandler"
-      ></TMagicInput>
-      <span class="m-fileds-key-value-delimiter">:</span>
-      <TMagicInput
-        placeholder="value"
-        v-model="records[index][1]"
-        :disabled="disabled"
-        :size="size"
-        @change="valueChangeHandler"
-      ></TMagicInput>
-
-      <TMagicButton
-        class="m-fileds-key-value-delete"
-        type="danger"
-        :size="size"
-        :disabled="disabled"
-        circle
-        plain
-        :icon="Delete"
-        @click="deleteHandler(index)"
-      ></TMagicButton>
+    <div v-if="!showCode">
+      <div class="m-fields-key-value-item" v-for="(item, index) in records" :key="index">
+        <TMagicInput
+          placeholder="key"
+          v-model="records[index][0]"
+          :disabled="disabled"
+          :size="size"
+          @change="keyChangeHandler"
+        ></TMagicInput>
+        <span class="m-fileds-key-value-delimiter">:</span>
+        <TMagicInput
+          placeholder="value"
+          v-model="records[index][1]"
+          :disabled="disabled"
+          :size="size"
+          @change="valueChangeHandler"
+        ></TMagicInput>
+
+        <TMagicButton
+          class="m-fileds-key-value-delete"
+          type="danger"
+          :size="size"
+          :disabled="disabled"
+          circle
+          plain
+          :icon="Delete"
+          @click="deleteHandler(index)"
+        ></TMagicButton>
+      </div>
+
+      <TMagicButton type="primary" :size="size" :disabled="disabled" plain :icon="Plus" @click="addHandler"
+        >添加</TMagicButton
+      >
     </div>
 
-    <TMagicButton type="primary" :size="size" :disabled="disabled" plain :icon="Plus" @click="addHandler"
-      >添加</TMagicButton
-    >
+    <MagicCodeEditor
+      v-if="config.advanced && showCode"
+      height="200px"
+      :init-values="model[name]"
+      language="json"
+      :options="{
+        readOnly: disabled,
+      }"
+      :parse="true"
+      @save="save"
+    ></MagicCodeEditor>
+
+    <TMagicButton
+      v-if="config.advanced"
+      size="default"
+      :disabled="disabled"
+      text
+      :icon="CodeIcon"
+      @click="showCode = !showCode"
+    ></TMagicButton>
   </div>
 </template>
 
@@ -42,6 +65,9 @@ import { Delete, Plus } from '@element-plus/icons-vue';
 import { TMagicButton, TMagicInput } from '@tmagic/design';
 import type { FieldProps } from '@tmagic/form';
 
+import CodeIcon from '@editor/icons/CodeIcon.vue';
+import MagicCodeEditor from '@editor/layouts/CodeEditor.vue';
+
 defineOptions({
   name: 'MEditorKeyValue',
 });
@@ -52,6 +78,7 @@ const props = withDefaults(
       type: 'key-value';
       name: string;
       text: string;
+      advanced?: boolean;
     }>
   >(),
   {
@@ -62,9 +89,19 @@ const props = withDefaults(
 const emit = defineEmits<(e: 'change', value: Record<string, any>) => void>();
 
 const records = ref<[string, string][]>([]);
+const showCode = ref(false);
 
 watchEffect(() => {
-  records.value = Object.entries(props.model[props.name] || {});
+  const initValues: [string, any][] = Object.entries(props.model[props.name] || {});
+
+  for (const [, value] of initValues) {
+    if (typeof value !== 'string') {
+      showCode.value = true;
+      break;
+    }
+  }
+
+  records.value = initValues;
 });
 
 const getValue = () => {
@@ -93,4 +130,8 @@ const deleteHandler = (index: number) => {
   records.value.splice(index, 1);
   emit('change', getValue());
 };
+
+const save = (v: string | any) => {
+  emit('change', v);
+};
 </script>

package/src/layouts/workspace/viewer/Stage.vue

@@ -191,7 +191,11 @@ const dropHandler = async (e: DragEvent) => {
     let left = 0;
     let position = 'relative';
 
-    if (layout === Layout.ABSOLUTE) {
+    if (style.position === 'fixed') {
+      position = 'fixed';
+      top = e.clientY - containerRect.top;
+      left = e.clientX - containerRect.left;
+    } else if (layout === Layout.ABSOLUTE) {
       position = 'absolute';
       top = e.clientY - containerRect.top + scrollTop;
       left = e.clientX - containerRect.left + scrollLeft;

package/src/services/editor.ts

@@ -548,7 +548,9 @@ class Editor extends BaseService {
 
     const newNodes = await Promise.all(nodes.map((node) => this.doUpdate(node)));
 
-    this.pushHistoryState();
+    if (newNodes[0]?.type !== NodeType.ROOT) {
+      this.pushHistoryState();
+    }
 
     this.emit('update', newNodes);
     return Array.isArray(config) ? newNodes : newNodes[0];

package/src/services/ui.ts

@@ -18,6 +18,8 @@
 
 import { reactive } from 'vue';
 
+import { convertToNumber } from '@tmagic/utils';
+
 import editorService from '@editor/services/editor';
 import type { StageRect, UiState } from '@editor/type';
 
@@ -86,9 +88,12 @@ class Ui extends BaseService {
     const { height, width } = stageContainerRect;
     if (!width || !height) return 1;
 
+    let stageWidth: number = convertToNumber(stageRect.width, width);
+    let stageHeight: number = convertToNumber(stageRect.height, height);
+
     // 30为标尺的大小
-    const stageWidth = stageRect.width + 30;
-    const stageHeight = stageRect.height + 30;
+    stageWidth = stageWidth + 30;
+    stageHeight = stageHeight + 30;
 
     if (width > stageWidth && height > stageHeight) {
       return 1;

package/src/theme/key-value.scss

@@ -1,3 +1,10 @@
+.m-fields-key-value {
+  display: flex;
+  justify-items: center;
+  align-items: top;
+  width: 100%;
+}
+
 .m-fields-key-value-item {
   display: flex;
   margin-bottom: 10px;

package/src/type.ts

@@ -173,8 +173,8 @@ export interface GetColumnWidth {
 }
 
 export interface StageRect {
-  width: number;
-  height: number;
+  width: number | string;
+  height: number | string;
 }
 
 export interface UiState {
@@ -185,7 +185,10 @@ export interface UiState {
   /** 画布显示放大倍数，默认为 1 */
   zoom: number;
   /** 画布容器的宽高 */
-  stageContainerRect: StageRect;
+  stageContainerRect: {
+    width: number;
+    height: number;
+  };
   /** 画布顶层div的宽高，可用于改变画布的大小 */
   stageRect: StageRect;
   /** 编辑器列布局每一列的宽度，分为左中右三列 */

package/src/utils/data-source/formConfigs/http.ts

@@ -46,6 +46,7 @@ export default [
         name: 'data',
         type: 'key-value',
         defaultValue: {},
+        advanced: true,
         text: '请求体',
       },
       {

package/types/components/ScrollViewer.vue.d.ts

@@ -1,6 +1,6 @@
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    width?: number | undefined;
-    height?: number | undefined;
+    width?: string | number | undefined;
+    height?: string | number | undefined;
     wrapWidth?: number | undefined;
     wrapHeight?: number | undefined;
     zoom?: number | undefined;
@@ -21,8 +21,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>, {
     container: import("vue").Ref<HTMLDivElement | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    width?: number | undefined;
-    height?: number | undefined;
+    width?: string | number | undefined;
+    height?: string | number | undefined;
     wrapWidth?: number | undefined;
     wrapHeight?: number | undefined;
     zoom?: number | undefined;
@@ -41,8 +41,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         height: number;
     };
 }>>>, {
-    width: number;
-    height: number;
+    width: string | number;
+    height: string | number;
     zoom: number;
     wrapWidth: number;
     wrapHeight: number;

package/types/fields/KeyValue.vue.d.ts

@@ -3,6 +3,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     type: "key-value";
     name: string;
     text: string;
+    advanced?: boolean | undefined;
 }>>, {
     disabled: boolean;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -11,6 +12,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     type: "key-value";
     name: string;
     text: string;
+    advanced?: boolean | undefined;
 }>>, {
     disabled: boolean;
 }>>> & {

package/types/services/ui.d.ts

@@ -12,8 +12,8 @@ declare class Ui extends BaseService {
             height: number;
         };
         stageRect: {
-            width: number;
-            height: number;
+            width: string | number;
+            height: string | number;
         };
         columnWidth: {
             left: number;

package/types/type.d.ts

@@ -143,8 +143,8 @@ export interface GetColumnWidth {
     [ColumnLayout.RIGHT]: number;
 }
 export interface StageRect {
-    width: number;
-    height: number;
+    width: number | string;
+    height: number | string;
 }
 export interface UiState {
     /** 当前点击画布是否触发选中，true: 不触发，false: 触发，默认为false */
@@ -154,7 +154,10 @@ export interface UiState {
     /** 画布显示放大倍数，默认为 1 */
     zoom: number;
     /** 画布容器的宽高 */
-    stageContainerRect: StageRect;
+    stageContainerRect: {
+        width: number;
+        height: number;
+    };
     /** 画布顶层div的宽高，可用于改变画布的大小 */
     stageRect: StageRect;
     /** 编辑器列布局每一列的宽度，分为左中右三列 */