fix: 修改bug

src/core/components/rectangle/index.ts

@@ -22,12 +22,13 @@ export const defaultStyle = {
 export const getMouseStyle = (data: RectangleData) => {
   const fillStatus = data.fill && getMouseColors(data.fill);
   const strokeStatus = data.stroke && getMouseColors(data.stroke);
-  const strokeWidth = data.strokeWidth ;
+  const strokeWidth = data.strokeWidth;
 
+  console.log(data)
   return {
     default: {
       fill: data.fill,
-      stroke: data.stroke ,
+      stroke: data.stroke,
       strokeWidth,
     },
     hover: { fill: fillStatus && fillStatus.hover, stroke: strokeStatus && strokeStatus.hover },
@@ -71,6 +72,7 @@ export const interactiveToData: InteractiveTo<"rectangle"> = ({
   if (info.cur) {
     const item = {
       ...getBaseItem(),
+      ...defaultStyle,
       ...preset,
       id: onlyId(),
       createTime: Date.now(),

src/core/hook/use-viewer.ts

@@ -213,7 +213,7 @@ export const useSetViewport = () => {
   const { viewer } = useViewer();
   const config = useViewerTransformConfig();
 
-  const initViewport = () => {
+  const initViewport = (padding = 20) => {
     const rect = formalLayer
       .value!.findOne<Group>("#" + DataGroupId)!
       .getClientRect();
@@ -233,7 +233,7 @@ export const useSetViewport = () => {
     });
     let width = end.x - start.x;
     let height = end.y - start.y;
-    setViewport({ ...start, width, height });
+    setViewport({ ...start, width, height }, padding);
   };
   const setViewport = (rect: IRect, padding = 20, isPixel = true) => {
     const invMat = viewer.transform.invert();

src/example/components/slide/actions.ts

@@ -11,14 +11,15 @@ import { MenuItem } from "./menu";
 import { copy } from "@/utils/shared";
 import { ElMessage } from "element-plus";
 import { getRealPixel } from "@/example/fuse/views/tabulation/gen-tab";
-
+import { Mode } from "@/constant/mode";
+import { nextTick } from "vue";
+import { Rect } from "konva/lib/shapes/Rect";
 
 export type PresetAdd<T extends ShapeType = ShapeType> = {
   type: T;
   preset?: Partial<DrawItem<T>>;
 };
 
-
 const genDrawItem = <T extends ShapeType>(
   type: T,
   preset: PresetAdd<T>["preset"] = {}
@@ -34,7 +35,7 @@ export const draw: MenuItem = {
   value: uuid(),
   children: [
     // { icon: "line", ...genDrawItem('sequentLine') },
-    { icon: "line", ...genDrawItem('line') },
+    { icon: "line", ...genDrawItem("line") },
     { icon: "arrows", ...genDrawItem("arrow"), single: true },
     { icon: "rectangle", ...genDrawItem("rectangle"), single: true },
     { icon: "circle", ...genDrawItem("circle"), single: true },
@@ -46,7 +47,7 @@ export const draw: MenuItem = {
 export const text: MenuItem = {
   icon: "text",
   ...genDrawItem("text", { content: "文本" }),
-  single: true
+  single: true,
 };
 
 export const table: MenuItem = {
@@ -60,7 +61,7 @@ export const serial: MenuItem = {
 };
 
 export const imp: MenuItem = {
-  icon: 'import',
+  icon: "import",
   name: "导入",
   value: uuid(),
   children: [
@@ -71,53 +72,57 @@ export const imp: MenuItem = {
       handler: async (draw: Draw) => {
         const aiData = await selectAI();
         drawPlatformResource(aiData, draw);
-      }
+      },
     },
     {
       value: uuid(),
       icon: "local_i",
       name: "本地",
       handler: async (draw: Draw) => {
-        let files: File[]
+        let files: File[];
         try {
-          files = await selectFile(false, '.png, .jpg, .jpeg')
+          files = await selectFile(false, ".png, .jpg");
         } catch (e: any) {
-          ElMessage.error(e.message)
+          ElMessage.error(e.message);
           return;
         }
-        const url = await window.platform.uploadResourse(files[0])
-        const image = await getImage(url)
-        ElMessage.warning('请在画图面板中选择放置位置，鼠标右键取消')
-        console.log(image)
-        draw.enterDrawShape('image', {
-          width: image.width,
-          height: image.height,
-          url
-        }, true)
-      }
-    }
-  ]
-}
+        const url = await window.platform.uploadResourse(files[0]);
+        const image = await getImage(url);
+        ElMessage.warning("请在画图面板中选择放置位置，鼠标右键取消");
+        console.log(image);
+        draw.enterDrawShape(
+          "image",
+          {
+            width: image.width,
+            height: image.height,
+            url,
+          },
+          true
+        );
+      },
+    },
+  ],
+};
 
 export const getPaperConfig = (p: number[], scale: number) => {
   const pad = 5 * scale;
   const size = { width: p[0] * scale, height: p[1] * scale };
   const margin = [pad, pad, pad, pad * 5];
-  console.log(margin)
-  const a = getRealPixel(5, 'a4')
-  console.log([a, getRealPixel(25, 'a4')])
-  return {size, margin}
-}
+  console.log(margin);
+  const a = getRealPixel(5, "a4");
+  console.log([a, getRealPixel(25, "a4")]);
+  return { size, margin };
+};
 export const paperConfigs = {
-  'a4': { size: [297, 210], scale: 2.5 },
-  'a3': { size: [420, 297], scale: 2.5 }
-}
-export type PaperKey = keyof typeof paperConfigs
+  a4: { size: [297, 210], scale: 2.5 },
+  a3: { size: [420, 297], scale: 2.5 },
+};
+export type PaperKey = keyof typeof paperConfigs;
 
 const setPaper = (draw: Draw, p: number[], scale: number) => {
-  const { size, margin } = getPaperConfig(p, scale)
+  const { size, margin } = getPaperConfig(p, scale);
   // draw.config.size = size;
-  draw.viewer.setViewSize(size)
+  draw.viewer.setViewSize(size);
   draw.config.back = { color: "#fff", opacity: 1 };
   draw.config.border = {
     margin: margin,
@@ -131,7 +136,7 @@ const setPaper = (draw: Draw, p: number[], scale: number) => {
 export const paper = {
   icon: "drawing",
   name: "纸张",
-  type: 'sub-menu-horizontal',
+  type: "sub-menu-horizontal",
   value: uuid(),
   children: [
     // {
@@ -144,9 +149,10 @@ export const paper = {
     {
       value: uuid(),
       icon: "A4_h",
-      key: 'a4',
+      key: "a4",
       name: "A4横版",
-      handler: (draw: Draw) => setPaper(draw, paperConfigs.a4.size, paperConfigs.a4.scale),
+      handler: (draw: Draw) =>
+        setPaper(draw, paperConfigs.a4.size, paperConfigs.a4.scale),
     },
     // {
     //   value: uuid(),
@@ -158,9 +164,10 @@ export const paper = {
     {
       value: uuid(),
       icon: "A3_h",
-      key: 'a3',
+      key: "a3",
       name: "A3横版",
-      handler: (draw: Draw) => setPaper(draw, paperConfigs.a3.size, paperConfigs.a3.scale),
+      handler: (draw: Draw) =>
+        setPaper(draw, paperConfigs.a3.size, paperConfigs.a3.scale),
     },
   ],
 };
@@ -183,7 +190,9 @@ export const dbImage: MenuItem = {
         } else if (info.ratio > 1) {
           proportion = { scale: info.ratio, unit: "m" };
         }
-        const url = await window.platform.uploadResourse(new File([info.blob], 'map.png'))
+        const url = await window.platform.uploadResourse(
+          new File([info.blob], "map.png")
+        );
 
         draw.history.onceTrack(() => {
           draw.addShape(
@@ -207,14 +216,14 @@ export const test: MenuItem = {
   value: uuid(),
   icon: "debugger",
   name: "测试",
-  type: 'sub-menu-horizontal',
+  type: "sub-menu-horizontal",
   children: [
     {
       value: uuid(),
       icon: "",
       name: "视图恢复",
       handler: (draw: Draw) => {
-        draw.viewer.setViewMat( [1, 0, 0, 1, 0, 0])
+        draw.viewer.setViewMat([1, 0, 0, 1, 0, 0]);
       },
     },
     {
@@ -262,8 +271,29 @@ export const test: MenuItem = {
       icon: "",
       name: "获取当前数据",
       handler: (draw: Draw) => {
-        console.log(copy(draw.store.$state))
+        console.log(copy(draw.store.$state));
+      },
+    },
+    {
+      value: uuid(),
+      icon: "",
+      name: "切换a4导出视图",
+      async handler(draw) {
+        draw.viewer.setViewMat([1, 0, 0, 1, 0, 0]);
+        await nextTick();
+
+        const viewSize = draw.viewer.viewSize!;
+        const size = {
+          width: draw.stage!.width(),
+          height: draw.stage!.height(),
+        };
+        const rect = {
+          x: (size.width - viewSize.width) / 2,
+          y: (size.height - viewSize.height) / 2,
+          ...viewSize,
+        };
+        draw.stage?.children[2].add(new Rect({ ...rect, fill: 'red' }))
       },
-    }
+    },
   ],
 };

src/example/dialog/vr/vr.vue

@@ -68,7 +68,7 @@ const searchSenects = async (keyword: string) => {
 
 searchSenects("");
 defineExpose({
-  disabled: () => !value.value,
+  disabled: computed(() => !value.value),
   submit: () => value.value,
 });
 </script>

src/example/fuse/views/overview/header.vue

@@ -46,7 +46,7 @@ const actions = [
   [
     baseActions.clear,
     baseActions.rotateView,
-    baseActions.initViewport,
+    { ...baseActions.initViewport, handler: () => draw.initViewport(40) },
     baseActions.toggleShow,
   ],
   [
@@ -95,11 +95,18 @@ const setViewToTableCover = async () => {
   draw.config.labelLineConfig.fontSize = 16;
 
   await nextTick();
-  draw.initViewport();
+  const padding = 20;
+  draw.initViewport(padding);
   await nextTick();
 
+  const currentRect = getRect();
   return [
-    getRect(),
+    {
+      x: currentRect.x - padding,
+      y: currentRect.y - padding,
+      width: currentRect.width + 2 * padding,
+      height: currentRect.height + 2 * padding,
+    },
     () => {
       pop();
       draw.config.size = oldSize;
@@ -123,7 +130,6 @@ const saveHandler = async () => {
     const scale =
       lineLen(mat.point({ x: 1, y: 0 }), mat.point({ x: 0, y: 0 })) *
       draw.store.config.proportion.scale;
-
     const blob = await getImage(draw, "image/png");
     recover();
     await nextTick();
@@ -152,7 +158,7 @@ const saveHandler = async () => {
     tabulationData.value.paperKey,
     storeData.config.compass.rotation,
     cover,
-    tabulationData.value.isAutoGen ? undefined : tabulationData.value.store,
+    tabulationData.value.isAutoGen ? undefined : tabulationData.value.store
   );
 
   tabStore.config.compass = storeData.config.compass;

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

@@ -42,7 +42,7 @@ export const transformPaper = (
 export const getCoverPaperScale = (cover: ImageData, paperKey: PaperKey) => {
   let pixelScale = (cover.widthRaw! / cover.width) * cover.proportion!.scale;
   const realPixelScale = paperConfigs[paperKey].scale;
-  return Math.round(realPixelScale * pixelScale);
+  return realPixelScale * pixelScale;
 };
 
 export const setCoverPaperScale = (cover: ImageData, paperKey: PaperKey, scale: number) => {
@@ -57,7 +57,6 @@ export const genTabulationData = async (paperKey: PaperKey, compass?: number, co
     paperConfigs[paperKey].scale
   );
 
-  console.log(size, margin, paperKey)
   const getTable = () => {
     const w1 = getRealPixel(25, paperKey);
     const w2 = getRealPixel(55, paperKey);

src/example/platform/platform-draw.ts

@@ -7,7 +7,6 @@ import { LineData, defaultStyle } from "@/core/components/line";
 import { getInitCtx, normalLineData } from "@/core/components/line/use-draw";
 import { defaultStyle as iconDefaultStyle } from "@/core/components/icon";
 import { Transform } from "konva/lib/Util";
-import { MathUtils } from "three";
 
 const scaleResource = (info: AIExposeData, scale: number) => {
   const floors = info.floors.map((item) => ({
@@ -96,6 +95,12 @@ const getResourceLayers = (data: AIExposeData) => {
           scale: 1,
           rotate: 0,
         };
+
+        if (isNaN(box.bound.z_min) || isNaN(box.bound.z_max)) {
+          box.bound.z_min = -999999;
+          box.bound.z_max = 999999;
+        }
+        floor.box = box;
       } else {
         box = floor.box;
       }
@@ -105,13 +110,6 @@ const getResourceLayers = (data: AIExposeData) => {
         box,
         taggings: data.taggings
           .filter((item) => {
-            // console.log(
-            //   item,
-            //   item.position.z,
-            //   box.bound,
-            //   item.position.z > box.bound.z_min &&
-            //     item.position.z <= box.bound.z_max
-            // );
             return (
               item.position.z === undefined ||
               (item.position.z > box.bound.z_min &&
@@ -260,7 +258,7 @@ export const drawPlatformResource = (data: AIExposeData, draw: Draw) => {
       // draw.store.setCurrentLayer(layer.name);
       layerBounds.push(drawLayerResource(layer, draw)!);
     }
-    console.log(data.compass)
+    console.log(data.compass);
     if (typeof data.compass === "number") {
       draw.store.setConfig({
         compass: {

src/example/platform/platform-resource.ts

@@ -223,8 +223,8 @@ export const taggingGets = {
                 y: signage.pos[2],
                 z:
                   signage.pos[1] < 0
-                    ? (Math.ceil(signage.pos[1]) * 10) / 10
-                    : (Math.floor(signage.pos[1]) * 10) / 10,
+                    ? (Math.ceil(signage.pos[1] * 10)) / 10
+                    : (Math.floor(signage.pos[1] * 10)) / 10,
               },
               rotate: 0,
               size: {
@@ -246,6 +246,7 @@ export const taggingGets = {
       .then((url) => fetch(url))
       .then((res) => res.json())
       .then((datas) => {
+        datas = [datas[1]]
         for (const data of datas) {
           const reg = data.imagePath.match(/floor_(\d)\.png/);
           const subgroup = reg ? Number(reg[1]) : undefined;
@@ -293,7 +294,7 @@ export const taggingGets = {
         console.error(e);
       });
 
-    console.log(tags);
+    console.log('tags', tags);
     return tags;
   },
 };

src/utils/dom.ts

@@ -58,11 +58,11 @@ $fileInput.style = `
 export const selectFile = (multiple = false, accept = "") =>
   new Promise<File[]>((resolve, reject) => {
     $fileInput.multiple = multiple;
-    $fileInput.accept = accept;
+    const accepts = accept.split(',').flatMap(s => [s.trim().toLowerCase(), s.trim().toUpperCase()])
+    $fileInput.accept = accepts.join(',');
     $fileInput.onchange = () => {
       $fileInput.accept = "";
       $fileInput.multiple = false;
-      const accepts = accept.split(',').map(s => s.trim())
       const files = [...$fileInput.files!]
       for (const f of files) {
         if (!accepts.some(ac => f.name.endsWith(ac))) {