fix: 修改代码编辑器问题

apps/shalu-bigscreen-designer/src/hooks/useAdsorb.ts

@@ -2,11 +2,10 @@ import { useProjectStore } from "@/store/modules/project";
 import { calcComboInfo } from "@/utils/calc";
 
 const ABSORB_DISTANCE = 10;
-
 export function useAdsorb() {
   const projectStore = useProjectStore();
 
-  const getAdsorb = ( move: number, xy: number, wh: number, targetVal: number) => {
+  const getMoveAdsorb = ( move: number, xy: number, wh: number, targetVal: number) => {
     // 始端吸附
     if (Math.abs((xy + move) - targetVal) < ABSORB_DISTANCE) {
       move = targetVal - xy;
@@ -23,14 +22,35 @@ export function useAdsorb() {
     return move;
   }
 
+  const getScaleAdsorb = ( xy: number, wh: number, targetVal: number) => {
+    // 始端吸附
+    if (Math.abs(xy - targetVal) < ABSORB_DISTANCE) {
+      xy = targetVal;
+    }
+    // 中间吸附
+    if (Math.abs((xy + wh / 2 ) - targetVal) < ABSORB_DISTANCE) {
+      xy = targetVal - wh / 2;
+    }
+    // 终端吸附
+    if (Math.abs((xy + wh ) - targetVal) < ABSORB_DISTANCE) {
+      xy = targetVal - wh;
+    }
+
+    if (Math.abs(xy + wh - targetVal) < ABSORB_DISTANCE) {
+      wh = targetVal - xy;
+    }
+    
+    return {xy, wh};
+  }
+
   /**
-   * 获取吸附信息
+   * 获取移动吸附信息
    * @param moveX 移动x坐标
    * @param moveY 移动y坐标
    * @param moveW 移动宽度
    * @param moveH 移动高度
    */
-  const getAdsorbInfo = ({ moveX, moveY, moveW, moveH }: { moveX: number, moveY: number, moveW: number, moveH: number }) => {
+  const getMoveAdsorbInfo = ({ moveX, moveY }: { moveX: number, moveY: number }) => {
     // 1、获取当前操作元素
     const selcetedElements = projectStore.currentSelectedElements;
     // 2、获取所有组件及参考线
@@ -45,43 +65,77 @@ export function useAdsorb() {
     elements.forEach(item => {
       const { x: itemX = 0, y: itemY = 0, width = 0, height = 0 } = item.container.props;
       // 左
-      moveX = getAdsorb(moveX, x, w, itemX);
+      moveX = getMoveAdsorb(moveX, x, w, itemX);
       // 中
-      moveX = getAdsorb(moveX, x, w, itemX + (width / 2));
+      moveX = getMoveAdsorb(moveX, x, w, itemX + (width / 2));
       // 右
-      moveX = getAdsorb(moveX, x, w, itemX + width);
+      moveX = getMoveAdsorb(moveX, x, w, itemX + width);
 
       // 上
-      moveY = getAdsorb(moveY, y, h, itemY);
+      moveY = getMoveAdsorb(moveY, y, h, itemY);
       // 中
-      moveY = getAdsorb(moveY, y, h, itemY + (height / 2));
+      moveY = getMoveAdsorb(moveY, y, h, itemY + (height / 2));
       // 下
-      moveY = getAdsorb(moveY, y, h, itemY + height);
+      moveY = getMoveAdsorb(moveY, y, h, itemY + height);
     })
 
     referLines.forEach(line => {
       if (line.type === "vertical") {
-        moveY = getAdsorb(moveY, y, h, line.value);
+        moveY = getMoveAdsorb(moveY, y, h, line.value);
       } else {
-        moveX = getAdsorb(moveX, x, w, line.value);
+        moveX = getMoveAdsorb(moveX, x, w, line.value);
       }
     })
 
     // 屏幕边线吸附
-    moveY = getAdsorb(moveY, y, h, 0);
-    moveY = getAdsorb(moveY, y, h, projectStore.projectInfo.height);
-    moveX = getAdsorb(moveX, x, w, 0);
-    moveX = getAdsorb(moveX, x, w, projectStore.projectInfo.width);
+    moveY = getMoveAdsorb(moveY, y, h, 0);
+    moveY = getMoveAdsorb(moveY, y, h, projectStore.projectInfo.height);
+    moveX = getMoveAdsorb(moveX, x, w, 0);
+    moveX = getMoveAdsorb(moveX, x, w, projectStore.projectInfo.width);
 
     return {
       newMoveX: moveX,
       newMoveY: moveY,
-      newMoveW: moveW,
-      newMoveH: moveH
+    }
+  }
+
+  /**
+   * 获取缩放吸附信息
+   * @param x X坐标
+   * @param y Y坐标
+   * @param w 宽
+   * @param h 高
+   */
+  const getScaleAdsorbInfo = ({x, y, width, height}: {x: number, y: number, width: number, height: number}) => {
+    // TODO 完善缩放吸附功能
+    // 1、获取当前操作元素
+    // const selcetedElements = projectStore.currentSelectedElements;
+    // 2、获取所有组件及参考线
+    const referLines = projectStore.showReffer ? projectStore.referLines : [];
+    // const elements = projectStore.elements.filter(item => selcetedElements.findIndex(ele => ele.key === item.key) === -1);
+
+    referLines.forEach(line => {
+      if (line.type === "vertical") {
+        const res = getScaleAdsorb(y, height, line.value);
+        y = res.xy;
+        height = res.wh;
+      } else {
+        const res = getScaleAdsorb(x, width, line.value);
+        x = res.xy;
+        width = res.wh;
+      }
+    })
+
+    return {
+      newX: x,
+      newY: y,
+      newWidth: width,
+      newHeight: height
     }
   }
 
   return {
-    getAdsorbInfo
+    getMoveAdsorbInfo,
+    getScaleAdsorbInfo
   }
 }

apps/shalu-bigscreen-designer/src/utils/scale.ts

@@ -1,7 +1,7 @@
 /**
  * 对选中的组件进行缩放
  * 如果操作的是group组件，递归缩放子元素
- * 
+ *
  * @param projectStore 项目store
  * @param type 缩放类型
  * @param moveX x轴移动距离
@@ -40,27 +40,27 @@ export const scaleAction = ({
       case "top-left":
         width -= moveX;
         height -= moveY;
-        if(!parentKey) {
+        if (!parentKey) {
           x += moveX;
           y += moveY;
         }
         break;
       case "top-center":
         height -= moveY;
-        if(!parentKey) {
+        if (!parentKey) {
           y += moveY;
         }
         break;
       case "top-right":
         width += moveX;
         height -= moveY;
-        if(!parentKey) {
+        if (!parentKey) {
           y += moveY;
         }
         break;
       case "left-center":
         width -= moveX;
-        if(!parentKey) {
+        if (!parentKey) {
           x += moveX;
         }
         break;
@@ -70,7 +70,7 @@ export const scaleAction = ({
       case "bottom-left":
         width -= moveX;
         height += moveY;
-        if(!parentKey) {
+        if (!parentKey) {
           x += moveX;
         }
         break;

apps/shalu-bigscreen-designer/src/views/designer/component/ComponentWrapper.vue

@@ -64,7 +64,7 @@ const componentWrapperRef = ref<HTMLElement | null>(null);
 const stageStore = useStageStore();
 const projectStore = useProjectStore();
 const actionStore = useAcionStore();
-const { getAdsorbInfo } = useAdsorb();
+const { getMoveAdsorbInfo } = useAdsorb();
 const editWapperStyle = computed(() => {
   const { width = 400, height = 260 } = componentData.container.props || {};
 
@@ -139,11 +139,9 @@ useDraggable(componentWrapperRef, {
     const xMoveLength = position.x - originPosition.left;
     const yMoveLentgh = position.y - originPosition.top;
 
-    const { newMoveX, newMoveY } = getAdsorbInfo({
+    const { newMoveX, newMoveY } = getMoveAdsorbInfo({
       moveX: xMoveLength,
       moveY: yMoveLentgh,
-      moveH: 0,
-      moveW: 0,
     });
 
     moveLeft = Math.max(Math.abs(newMoveX), Math.abs(newMoveY));

packages/shalu-dashboard-ui/components/charts/DataConfig.vue

@@ -67,7 +67,7 @@
       </Form.Item>
     </template>
   </Form>
-  <CodeEditorModal ref="codeEditorRef" title="编辑数据" @ok="handleCodeSave" />
+  <CodeEditorModal ref="codeEditorRef" title="编辑" @ok="handleCodeSave" />
 </template>
 
 <script setup lang="ts">
@@ -82,13 +82,10 @@ import {
   Select,
   SelectOption,
   RadioGroup,
-  Radio
+  Radio,
 } from "ant-design-vue";
 import { DataSourceType } from "./chartEnum";
-import {
-  CodeEditorModal,
-  type CodeEditorModalInstance,
-} from "../codeEditor";
+import { CodeEditorModal, type CodeEditorModalInstance } from "../codeEditor";
 
 /**
  * 通用数据data约定内容结构
@@ -117,7 +114,7 @@ const formModel = ref({
   // 静态数据相关
   data: "",
   // 接口相关
-  url: '',
+  url: "",
   method: "",
   params: {},
   headers: {},
@@ -127,7 +124,8 @@ const formModel = ref({
 });
 
 const handleRefreshTimeChange = (val: unknown) => {
-  formModel.value.refreshTime = val === 0 || val as number >= 60 ? val as number : 60;
+  formModel.value.refreshTime =
+    val === 0 || (val as number) >= 60 ? (val as number) : 60;
 };
 
 /* =====================编辑代码======================= */
@@ -135,10 +133,18 @@ let pathKey: "data" | "params" | "headers" | "dataProcess";
 const codeEditorRef = ref<Ref<CodeEditorModalInstance> | null>(null);
 const handleEditData = (key: "data" | "params" | "headers" | "dataProcess") => {
   pathKey = key;
-  codeEditorRef.value?.open(JSON.stringify(formModel.value[key]));
+  codeEditorRef.value?.open(
+    typeof formModel.value[key] === "string"
+      ? formModel.value[key]
+      : JSON.stringify(formModel.value[key])
+  );
 };
 const handleCodeSave = (code: string) => {
-  formModel.value[pathKey] = JSON.parse(code);
+  try {
+    formModel.value[pathKey] = JSON.parse(code);
+  } catch (error) {
+    formModel.value[pathKey] = code;
+  }
 };
 
 watch(

packages/shalu-dashboard-ui/components/codeEditor/src/Editor.vue

@@ -5,7 +5,7 @@
     style="height: 500px;"
     :model-value="modelValue"
     :tab-size="2"
-    :auto-focus="true"
+    :auto-focus="false"
     :indent-with-tabs="true"
     :extensions="[
       oneDark,
@@ -30,17 +30,28 @@ const props = defineProps({
     default: ''
   }
 });
+const jsBeautifyOption = {
+  "indent_size": "2",
+  "indent_char": " ",
+  "max_preserve_newlines": "5",
+  "preserve_newlines": true,
+  "keep_array_indentation": false,
+  "break_chained_methods": false,
+  "indent_scripts": "normal",
+  "brace_style": "collapse",
+  "space_before_conditional": true,
+  "unescape_strings": false,
+  "jslint_happy": false,
+  "end_with_newline": true,
+  "wrap_line_length": "0",
+  "indent_inner_html": false,
+  "comma_first": false,
+  "e4x": false,
+  "indent_empty_lines": false
+}
 const emit = defineEmits(['update:code', 'change']);
 const editorRef = ref(null);
-const modelValue = ref(props.code);
-
-watch(
-  () => props.code,
-  (val) => {
-    modelValue.value = jsBeautify.js(val, { indent_size: 2 });
-  },
-  { immediate: true }
-)
+const modelValue = ref(jsBeautify(props.code, jsBeautifyOption));
 
 const handleCodeChange = (val: string) => {
   try {

packages/shalu-dashboard-ui/components/codeEditor/src/index.vue

@@ -3,6 +3,7 @@
     v-model:open="open"
     :title="title"
     :width="width"
+    :destroyOnClose="true"
     @ok="handleOk"
   >
     <Editor v-model:code="code"/>