feat: 表格调整大小优化

src/core/components/arrow/index.ts

@@ -5,7 +5,6 @@ import { BaseItem, generateSnapInfos, getBaseItem } from "../util.ts";
 import { getMouseColors } from "@/utils/colors.ts";
 import { InteractiveFix, InteractiveTo, MatResponseProps } from "../index.ts";
 import { Transform } from "konva/lib/Util";
-import { themeColor } from "@/constant/help-style.ts";
 
 export { default as Component } from "./arrow.vue";
 export { default as TempComponent } from "./temp-arrow.vue";
@@ -110,4 +109,10 @@ export const matResponse = ({data, mat, increment}: MatResponseProps<'arrow'>) =
   data.points = data.points.map((v) => transfrom.point(v));
   data.attitude = transfrom.copy().multiply(attitude).m;
   return data;
+}
+
+export const getPredefine = (key: keyof ArrowData) => {
+  if (key === 'strokeWidth') {
+    return { proportion: true }
+  }
 }

src/core/components/circle/index.ts

@@ -1,5 +1,4 @@
 import { CircleConfig } from "konva/lib/shapes/Circle";
-import { themeColor, themeMouseColors } from "@/constant/help-style.ts";
 import {
   BaseItem,
   generateSnapInfos,
@@ -127,5 +126,7 @@ if (!initRadius) {
 export const getPredefine = (key: keyof CircleData) => {
   if (key === 'fill') {
     return { canun: true }
+  } else if (key === 'strokeWidth') {
+    return { proportion: true }
   }
 }

src/core/components/line/index.ts

@@ -3,7 +3,6 @@ import { BaseItem, generateSnapInfos, getBaseItem } from "../util.ts";
 import { getMouseColors } from "@/utils/colors.ts";
 import { InteractiveFix, InteractiveTo, MatResponseProps } from "../index.ts";
 import { Transform } from "konva/lib/Util";
-import { themeColor } from "@/constant/help-style.ts";
 import { inRevise } from "@/utils/shared.ts";
 
 export { default as Component } from "./line.vue";
@@ -92,4 +91,10 @@ export const matResponse = ({data, mat, increment}: MatResponseProps<'line'>) =>
   data.points = data.points.map((v) => transfrom.point(v));
   data.attitude = transfrom.copy().multiply(attitude).m;
   return data;
+}
+
+export const getPredefine = (key: keyof LineData) => {
+  if (key === 'strokeWidth') {
+    return { proportion: true }
+  }
 }

src/core/components/polygon/index.ts

@@ -1,5 +1,4 @@
 import { Pos } from "@/utils/math.ts";
-import { themeColor } from "@/constant/help-style.ts";
 import { BaseItem, generateSnapInfos, getBaseItem } from "../util.ts";
 import { getMouseColors } from "@/utils/colors.ts";
 import { InteractiveFix, InteractiveTo, MatResponseProps } from "../index.ts";
@@ -107,3 +106,10 @@ export const matResponse = ({
   data.attitude = transfrom.copy().multiply(attitude).m;
   return data;
 };
+
+
+export const getPredefine = (key: keyof PolygonData) => {
+  if (key === 'strokeWidth') {
+    return { proportion: true }
+  }
+}

src/core/components/rectangle/index.ts

@@ -1,5 +1,4 @@
 import { Pos } from "@/utils/math.ts";
-import { themeColor, themeMouseColors } from "@/constant/help-style.ts";
 import { getMouseColors } from "@/utils/colors.ts";
 import { onlyId } from "@/utils/shared.ts";
 import { BaseItem, generateSnapInfos, getBaseItem } from "../util.ts";
@@ -13,11 +12,11 @@ export const shapeName = "矩形";
 export const defaultStyle = {
   dash: [30, 0],
   strokeWidth: 1,
-  stroke: '#000000',
+  stroke: "#000000",
   fontSize: 16,
   align: "center",
   fontStyle: "normal",
-  fontColor: '#000000',
+  fontColor: "#000000",
 };
 
 export const getMouseStyle = (data: RectangleData) => {
@@ -26,11 +25,18 @@ export const getMouseStyle = (data: RectangleData) => {
   const strokeWidth = data.strokeWidth || defaultStyle.strokeWidth;
 
   return {
-    default: { fill: data.fill , stroke: data.stroke || defaultStyle.stroke, strokeWidth },
+    default: {
+      fill: data.fill,
+      stroke: data.stroke || defaultStyle.stroke,
+      strokeWidth,
+    },
     hover: { fill: fillStatus && fillStatus.hover, stroke: strokeStatus.hover },
     focus: { fill: fillStatus && fillStatus.hover, stroke: strokeStatus.hover },
     press: { fill: fillStatus && fillStatus.press, stroke: strokeStatus.press },
-    select: { fill: fillStatus && fillStatus.select, stroke: strokeStatus.select },
+    select: {
+      fill: fillStatus && fillStatus.select,
+      stroke: strokeStatus.select,
+    },
   };
 };
 
@@ -47,16 +53,16 @@ export type RectangleData = Partial<typeof defaultStyle> &
     stroke?: string;
     fill?: string;
     strokeWidth?: number;
-    content?: string
+    content?: string;
   };
 
+export const getSnapPoints = (data: RectangleData) => {
+  return data.points;
+};
+
+export const getSnapInfos = (data: RectangleData) =>
+  generateSnapInfos(getSnapPoints(data), true, false);
 
-  export const getSnapPoints = (data: RectangleData) => {
-    return data.points
-  }
-  
-  export const getSnapInfos = (data: RectangleData) => generateSnapInfos(getSnapPoints(data), true, false)
-  
 export const interactiveToData: InteractiveTo<"rectangle"> = ({
   info,
   preset = {},
@@ -94,23 +100,28 @@ export const interactiveFixData: InteractiveFix<"rectangle"> = ({
   return data;
 };
 
-
-export const matResponse = ({data, mat, increment}: MatResponseProps<'rectangle'>) => {
-  let transfrom: Transform
+export const matResponse = ({
+  data,
+  mat,
+  increment,
+}: MatResponseProps<"rectangle">) => {
+  let transfrom: Transform;
   const attitude = new Transform(data.attitude);
   if (!increment) {
     const inverMat = attitude.copy().invert();
     transfrom = mat.copy().multiply(inverMat);
   } else {
-    transfrom = mat
+    transfrom = mat;
   }
 
   data.points = data.points.map((v) => transfrom.point(v));
   data.attitude = transfrom.copy().multiply(attitude).m;
   return data;
-}
+};
 export const getPredefine = (key: keyof RectangleData) => {
-  if (key === 'fill') {
-    return { canun: true }
+  if (key === "fill") {
+    return { canun: true };
+  } else if (key === "strokeWidth") {
+    return { proportion: true };
   }
-}
+};

src/core/components/table/index.ts

@@ -1,5 +1,5 @@
 import { Transform } from "konva/lib/Util";
-import { themeColor, themeMouseColors } from "@/constant/help-style.ts";
+import { themeMouseColors } from "@/constant/help-style.ts";
 import {
   BaseItem,
   generateSnapInfos,
@@ -159,31 +159,98 @@ export const matResponse = (
   data.height = dec.scaleY * initData.height;
   data.width = dec.scaleX * initData.width;
 
+  let minwNdxs: number[] = []
+  let minhNdxs: number[] = []
   let w = 0;
   let h = 0;
-  data.content.forEach((row, rndx) => {
-    row.forEach((col, cndx) => {
-      const initCol = initData.content[rndx][cndx];
-      const minSize = getColMinSize(initCol);
-      col.width = Math.max(
-        minSize.w,
-        data.width * (initCol.width / initData.width)
-      );
-      col.height = Math.max(
-        minSize.h,
-        data.height * (initCol.height / initData.height)
-      );
-      if (rndx === 0) {
-        w += col.width;
-      }
-      if (cndx === 0) {
-        h += col.height;
-      }
+
+  const updateColSize = () => {
+    // 调整最小值
+    let curMinwNdxs = [...minwNdxs]
+    let curMinhNdxs = [...minhNdxs]
+    
+    const getNewWidth = (ndx: number) => {
+
+      // data.width * (initCol.width / initData.width)
+
+      const initCol = initData.content[0][ndx]
+      let initWidth = initData.width
+      const index = minwNdxs.indexOf(ndx)
+      const spMinwNdxs = ~index ? minwNdxs.slice(0, index) : minwNdxs
+      spMinwNdxs.forEach(ndx => initWidth -= initData.content[0][ndx].width)
+      const width = (data.width - w) * (initCol.width / initWidth);
+      return width
+    }
+    const getNewHeight = (ndx: number) => {
+      const initCol = initData.content[ndx][0]
+      let initHeight = initData.height
+      const index = minhNdxs.indexOf(ndx)
+      const spMinhNdxs = ~index ? minhNdxs.slice(0, index) : minhNdxs
+      spMinhNdxs.forEach(ndx => initHeight -= initData.content[ndx][0].height)
+      const height = (data.height - h) * (initCol.height / initHeight)
+      return height
+    }
+
+    data.content.forEach((row, rndx) => {
+      row.forEach((col, cndx) => {
+        const initCol = initData.content[rndx][cndx];
+        const minSize = getColMinSize(initCol);
+
+        if (!curMinwNdxs.includes(cndx)) {
+          const neww = getNewWidth(cndx)
+          if (neww < minSize.w) {
+            col.width = minSize.w
+            if (rndx === 0) {
+              minwNdxs.push(cndx)
+              w += col.width
+            }
+          }
+        }
+        if (!curMinhNdxs.includes(rndx)) {
+          const newh = getNewHeight(rndx)
+          if (newh < minSize.h) {
+            col.height = minSize.h
+            if (cndx === 0) {
+              minhNdxs.push(rndx)
+              h += col.height
+            }
+          }
+        }
+      });
     });
-  });
+
+    if (curMinwNdxs.length !== minwNdxs.length || curMinhNdxs.length !== minhNdxs.length) {
+      return updateColSize()
+    }
+    const needUpdateH = curMinhNdxs.length !== data.content.length
+    const needUpdateW = curMinhNdxs.length !== data.content.length
+    if (!needUpdateH && !needUpdateW) return;
+
+    data.content.forEach((row, rndx) => {
+      row.forEach((col, cndx) => {
+        if (needUpdateW && !minwNdxs.includes(cndx)) {
+          col.width = getNewWidth(cndx)
+        }
+        if (needUpdateH && !minhNdxs.includes(rndx)) {
+          col.height = getNewHeight(rndx)
+        }
+      })
+    })
+    
+    data.content.forEach((row, rndx) => {
+      row.forEach((col, cndx) => {
+        if (needUpdateW && !minwNdxs.includes(cndx) && rndx === 0) {
+          w += col.width
+        }
+        if (needUpdateH &&!minhNdxs.includes(rndx) && cndx === 0) {
+          h += col.height
+        }
+      })
+    })
+  }
+  updateColSize()
   const eqW = numEq(w, data.width);
   const eqH = numEq(h, data.height);
-
   if (!eqW || !eqH) {
     if (operType) {
       Object.assign(data, oldData);

src/core/components/triangle/index.ts

@@ -97,9 +97,10 @@ export const matResponse = ({data, mat, increment}: MatResponseProps<'triangle'>
   data.attitude = transfrom.copy().multiply(attitude).m;
   return data;
 }
-
 export const getPredefine = (key: keyof TriangleData) => {
-  if (key === 'fill') {
-    return { canun: true }
+  if (key === "fill") {
+    return { canun: true };
+  } else if (key === "strokeWidth") {
+    return { proportion: true };
   }
-}
+};

src/core/html-mount/propertys/components/num.vue

@@ -1,29 +1,41 @@
 <template>
-  <el-slider
-    class="property-num-slider"
-    :modelValue="value"
-    @update:model-value="(val: any) => changeHandler(val)"
-    @change="$emit('change')"
-    size="small"
-    height="200px"
-    width="50px"
-    style="cursor: pointer"
-    :step="step || 0.1"
-    :min="min"
-    :max="max"
-    show-input
-  />
+  <div class="property-num-slider-layout">
+    <el-slider
+      class="property-num-slider"
+      :class="{ proportion: props.proportion }"
+      :modelValue="value"
+      @update:model-value="(val: any) => changeHandler(val)"
+      @change="$emit('change')"
+      size="small"
+      height="200px"
+      width="50px"
+      :show-input-controls="false"
+      style="cursor: pointer"
+      :step="step || 0.1"
+      :min="min"
+      :max="max"
+      show-input
+    />
+    <span v-if="props.proportion" class="show-proportion">
+      {{ proportion.unit }}
+    </span>
+  </div>
 </template>
 
 <script lang="ts" setup>
+import { useProportion } from "@/core/hook/use-proportion";
 import { ElSlider } from "element-plus";
 
-defineProps<{
+const props = defineProps<{
   value: number;
   min?: number;
   max?: number;
   step?: number;
+  proportion?: boolean;
 }>();
+
+const { proportion } = useProportion();
+
 const emit = defineEmits<{
   (e: "update:value", val: number): void;
   (e: "change"): void;
@@ -33,6 +45,19 @@ const changeHandler = (val: number) => {
 };
 </script>
 
+<style lang="scss" scoped>
+.property-num-slider-layout {
+  position: relative;
+  .show-proportion {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--el-input-text-color, var(--el-text-color-regular));
+  }
+}
+</style>
+
 <style lang="scss">
 .property-num-slider {
   --el-slider-height: 4px;
@@ -41,15 +66,18 @@ const changeHandler = (val: number) => {
     margin-top: -2px;
   }
   .el-input__wrapper {
-    padding: 0 !important;
+    // padding: 0 !important;
   }
   .el-slider__input {
     width: 98px;
     height: 32px;
   }
+
+  &.proportion .el-input__inner {
+    padding-right: 20px;
+  }
   .el-input__inner {
     text-align: left;
-    padding: 0 8px;
   }
   .el-input-number__increase,
   .el-input-number__decrease {

src/example/components/slide/actions.ts

@@ -9,6 +9,7 @@ import { getImage } from "@/utils/resource";
 import { Draw } from "../container/use-draw";
 import { MenuItem } from "./menu";
 import { uploadResourse } from "@/example/fuse/req";
+import { copy } from "@/utils/shared";
 
 
 export type PresetAdd<T extends ShapeType = ShapeType> = {
@@ -201,6 +202,14 @@ export const test: MenuItem = {
     {
       value: uuid(),
       icon: "",
+      name: "视图恢复",
+      handler: (draw: Draw) => {
+        draw.viewer.setViewMat( [1, 0, 0, 1, 0, 0])
+      },
+    },
+    {
+      value: uuid(),
+      icon: "",
       name: "切换栅栏显示",
       handler: (draw: Draw) => {
         draw.config.showGrid = !draw.config.showGrid;
@@ -238,5 +247,13 @@ export const test: MenuItem = {
         draw.toggleHit();
       },
     },
+    {
+      value: uuid(),
+      icon: "",
+      name: "获取当前数据",
+      handler: (draw: Draw) => {
+        console.log(copy(draw.store.$state))
+      },
+    },
   ],
 };

src/example/fuse/views/tabulation/gen.ts

@@ -123,6 +123,7 @@ const genDefaultTable = () => {
     height: nameColl.height * 5,
     mat: [1, 0, 0, 1, 0, 0],
   };
+  console.log({...data})
   return matResponse({ data, mat: new Transform() })
 };