drawing-board-service/src/core/hook/use-dxf.ts

import {
  DxfWriter,
  point2d,
  LWPolylineFlags,
  point3d,
  TrueColor,
  pattern,
  HatchPredefinedPatterns,
  HatchBoundaryPaths,
  HatchPolylineBoundary,
  vertex,
} from "@tarikjabiri/dxf";
import { useStore } from "../store";
import Zip from "jszip";
import { LineData } from "../components/line";
import { CircleData } from "../components/circle";
import { Transform } from "konva/lib/Util";
import {
  lineLen,
  lineVector,
  Pos,
  Size,
  verticalVectorLine,
  zeroEq,
} from "@/utils/math";
import { RectangleData } from "../components/rectangle";
import { useStage } from "./use-global-vars";
import { Group } from "konva/lib/Group";
import { Text } from "konva/lib/shapes/Text";
import { TextData } from "../components/text";
import { ImageData } from "../components/image";
import { asyncTimeout, onlyId } from "@/utils/shared";
import { ArrowData, PointerPosition } from "../components/arrow";
import { IconData } from "../components/icon";
import {
  useSetViewport,
  useViewer,
  useViewerInvertTransform,
} from "./use-viewer";
import { nextTick } from "vue";
import { SLineData } from "../components/sequent-line";
import { IRect } from "konva/lib/types";
import { LineIconData } from "../components/line-icon";
import { Line } from "konva/lib/shapes/Line";

export const useGetDXF = () => {
  const store = useStore();
  const stage = useStage();
  const invMat = useViewerInvertTransform();
  const { setViewport } = useSetViewport();
  const { viewer } = useViewer();

  return async () => {
    const writer = new DxfWriter();
    const $stage = stage.value!.getNode();
    const zip = new Zip();
    const genPromises: Promise<any>[] = [];

    const fontStyle = writer.tables.styleTable.records[0];
    fontStyle.fontFileName = "SimSun";

    type PL = {
      id?: string;
      points: Pos[];
      fill?: string;
      content?: string;
      strokeWidth?: number;
      stroke?: string;
    };
    const writerPolyline = (pl: PL) => {
      if (pl.fill) {
        const polyline = new HatchPolylineBoundary();
        const boundary = new HatchBoundaryPaths();
        pl.points.forEach((p) => polyline.add(vertex(p.x, -p.y)));
        boundary.addPolylineBoundary(polyline);
        writer.addHatch(
          boundary,
          pattern({ name: HatchPredefinedPatterns.SOLID }),
          { trueColor: TrueColor.fromHex(pl.fill).toString() }
        );
      }

      writer.addLWPolyline(
        pl.points.map((p) => ({ point: point2d(p.x, -p.y) })),
        {
          flags: LWPolylineFlags.Closed,
          constantWidth: pl.strokeWidth,
          trueColor: TrueColor.fromHex(pl.stroke || "#FFFFFF").toString(),
        }
      );

      if (!pl.content) return;
      const $text = $stage.findOne<Group>(`#${pl.id}`)?.findOne<Text>(".text");
      if ($text) {
        writeText($text);
      }
    };

    const writeText = ($text: Text, sp = true) => {
      const mat = $text.getTransform();
      const fontSize = $text.fontSize() * 0.8;
      let text = $text.text();
      text = text.replace(/(\n|\r|\t)/gi, "");
      const pad = $text.padding();
      const align = $text.align();
      const textArr: { content: string; charCount: number }[] = [];
      let lineNum = 1;
      const width = $text.width();
      const charWidth = fontSize * 0.9;

      const lineCharCount = sp
        ? Math.max(Math.floor(width / charWidth), 2)
        : Number.MAX_VALUE;
      let ndx = 0;
      let prevNdx = 0;
      let charCount = 0;

      while (ndx < text.length) {
        ndx++;
        const c = /[\u4e00-\u9fff]/.test(text.charAt(ndx)) ? 2.4 : 1;

        if (charCount === lineCharCount || ndx >= text.length) {
          charCount += c;
          textArr.push({
            content: text.substring(prevNdx, ndx + 1),
            charCount,
          });
          charCount = 0;
          prevNdx = ndx;
        } else if (charCount > lineCharCount) {
          textArr.push({
            content: text.substring(prevNdx, ndx),
            charCount,
          });
          charCount = 0;
          ndx--;
          prevNdx = ndx;
        } else {
          charCount += c;
        }
      }

      textArr.forEach((item) => {
        const lineWidth = charWidth * item.charCount;
        let p = { x: pad, y: pad + lineNum * fontSize * 1.2 };
        if (align === "center") {
          p.x = (width - lineWidth) / 2;
        } else if (align === "right") {
          p.x = width - lineWidth;
        }
        const start = mat.point(p);
        const text = writer.addText(
          point3d(start.x, -start.y),
          fontSize,
          item.content,
          {
            rotation: $text.rotation(),
            // horizontalAlignment:
            //   align === "center"
            //     ? TextHorizontalAlignment.Center
            //     : align === "right"
            //     ? TextHorizontalAlignment.Right
            //     : TextHorizontalAlignment.Left,
          }
        );
        text.trueColor = TrueColor.fromHex($text.fill() as string).toString();
        text.height = fontSize;
        lineNum++;
      });
    };

    const writeImage = async (
      imgGroup: Group,
      scaleCallback?: (scale: Size, box: IRect) => () => void
    ) => {
      let curRect = imgGroup.getClientRect();
      const oldViewMat = viewer.viewMat;
      setViewport(curRect);
      await nextTick();
      const imgRect = imgGroup.getClientRect();
      const back =
        scaleCallback &&
        scaleCallback(
          {
            width: imgRect.width / curRect.width,
            height: imgRect.height / curRect.height,
          },
          imgRect
        );
      await nextTick();
      const img = (await imgGroup!
        .toImage({
          pixelRatio: 1,
          quality: 1,
          mimeType: "image/png",
        })
        .catch((e) => {
          console.error(e);
          throw e;
        })) as HTMLImageElement;
      back && back();
      await nextTick();
      const start = invMat.value.point({
        x: imgRect.x,
        y: imgRect.y + imgRect.height,
      });
      const end = invMat.value.point({
        x: imgRect.x + imgRect.width,
        y: imgRect.y,
      });
      const name = onlyId().replace(/\-/g, "");
      const path = name + ".png";

      const image = writer.addImage(
        path,
        name,
        point3d(start.x, -start.y),
        img.width,
        img.height,
        1,
        0
      );
      image.ratio = Math.abs(end.x - start.x) / img.width;
      genPromises.push(
        fetch(img.src)
          .then((res) => res.blob())
          .then((blob) => zip.file(path, blob, {}))
          .catch((e) => {
            console.error(e);
          })
      );
      viewer.setViewMat(oldViewMat);
    };

    const initViewOperate = async (operate: () => void) => {
      const oldViewMat = viewer.viewMat;
      viewer.setViewMat(new Transform());
      await asyncTimeout(50);
      operate();
      viewer.setViewMat(oldViewMat);
      await asyncTimeout(50);
    };

    for (const _item of store.sortItems) {
      if (_item.hide) continue;

      const type = store.getType(_item.id);
      let item;
      let mat;
      switch (type) {
        case "sequentLine":
          item = _item as SLineData;
          writer.addLWPolyline(
            item.points.map((p) => ({ point: point2d(p.x, -p.y) })),
            {
              flags: LWPolylineFlags.None,
              constantWidth: item.strokeWidth,
              trueColor: TrueColor.fromHex(item.stroke || "#FFFFFF").toString(),
            }
          );
          break;
        case "lineChunk":
        case "line":
          const litem = _item as LineData;

          await initViewOperate(() => {
            litem.lines.forEach((line) => {
              const $lines = stage
                .value!.getNode()
                .find<Line>(`.${line.id}-view`)!;
              for (let i = 0; i < $lines.length; i++) {
                const flatPoints = $lines[i].points();
                const points: Pos[] = [];
                for (let i = 0; i < flatPoints.length; i += 2) {
                  points.push({ x: flatPoints[i], y: flatPoints[i + 1] });
                }
                const data: PL = {
                  id: litem.id,
                  points,
                  // stroke: '#000000',
                  // fill: line.stroke,
                  stroke: line.stroke,
                  strokeWidth: 1,
                };
                writerPolyline(data);
              }
            });
          });

          // litem.lines.forEach((line) => {
          //   const a = litem.points.find((p) => p.id === line.a)!;
          //   const b = litem.points.find((p) => p.id === line.b)!;
          //   writer.addLWPolyline(
          //     [
          //       { point: point3d(a.x, -a.y, 0) },
          //       { point: point3d(b.x, -b.y, 0) },
          //     ],
          //     {
          //       flags: LWPolylineFlags.None,
          //       constantWidth: line.strokeWidth,
          //       trueColor: TrueColor.fromHex(
          //         line.stroke || "#FFFFFF"
          //       ).toString(),
          //     }
          //   );
          // });

          break;

        case "triangle":
        case "rectangle":
        case "polygon":
          item = _item as RectangleData;
          writerPolyline(item);
          break;

        case "circle":
          item = _item as CircleData;
          mat = new Transform(item.mat);

          const points = [];
          for (let angle = 0; angle <= 360; angle += 1) {
            const rad = angle * (Math.PI / 180);
            const x = item.radiusX * Math.cos(rad);
            const y = item.radiusY * Math.sin(rad);
            points.push(mat.point({ x, y }));
          }
          writerPolyline({ ...item, points });
          break;

        case "text":
          item = _item as TextData;
          writeText($stage.findOne<Text>(`#${item.id}`)!, !!item.width);
          break;

        case "arrow":
          item = _item as ArrowData;
          if (zeroEq(lineLen(item.points[0], item.points[1]))) {
            item = {
              ...item,
              points: [...item.points],
            };
            item.points[0] = {
              ...item.points[0],
              x: item.points[1].x - (item.pointerLength || 1),
            };
          }
          const isEnd = [PointerPosition.end, PointerPosition.all].includes(
            item.pointerPosition || PointerPosition.start
          );
          const isStart = [PointerPosition.start, PointerPosition.all].includes(
            item.pointerPosition || PointerPosition.start
          );

          for (let i = 0; i < item.points.length - 1; i++) {
            const line = [item.points[i], item.points[i + 1]];
            const nline = [...line];
            const vector = lineVector(line);

            if (isStart) {
              const start = vector
                .clone()
                .multiplyScalar(item.pointerLength! * 2)
                .add(line[0]);
              nline[0] = start;
              const l1 = verticalVectorLine(vector, start, item.pointerLength!);
              const l2 = verticalVectorLine(
                vector,
                start,
                -item.pointerLength!
              );
              writerPolyline({
                points: [line[0], l1[1], l2[1]],
                fill: item.fill,
                stroke: item.fill,
              });
            }
            if (isEnd) {
              const start = vector
                .clone()
                .multiplyScalar(-item.pointerLength! * 2)
                .add(line[1]);
              nline[1] = start;
              const l1 = verticalVectorLine(vector, start, item.pointerLength!);
              const l2 = verticalVectorLine(
                vector,
                start,
                -item.pointerLength!
              );
              writerPolyline({
                points: [line[1], l1[1], l2[1]],
                fill: item.fill,
                stroke: item.fill,
              });
            }
            writer.addLWPolyline(
              nline.map((p) => ({ point: point2d(p.x, -p.y) })),
              {
                flags: LWPolylineFlags.None,
                constantWidth: item.strokeWidth,
                trueColor: TrueColor.fromHex(item.fill || "#FFFFFF").toString(),
              }
            );
          }
          break;

        case "image":
          item = _item as ImageData;
          await writeImage($stage.findOne<Group>(`#${item.id}`)!);
          break;

        case "icon":
          const iconItem = _item as IconData;
          const pathGroup = $stage
            .findOne<Group>(`#${iconItem.id}`)!
            .findOne<Group>(".rep-position")!;

          await writeImage(pathGroup, () => {
            iconItem.strokeScaleEnabled = true;
            return () => {
              iconItem.strokeScaleEnabled = false;
            };
          });
          break;
        case "lineIcon":
          const lineIconItem = _item as LineIconData;
          const linePathGroup = $stage
            .findOne<Group>(`#${lineIconItem.id}`)!
            .findOne<Group>(".rep-position")!;

          await writeImage(linePathGroup, () => {
            lineIconItem.strokeScaleEnabled = true;
            return () => {
              lineIconItem.strokeScaleEnabled = false;
            };
          });
          break;
      }
    }

    let dxfString = writer.stringify();
    zip.file(onlyId() + ".dxf", dxfString);
    return Promise.all(genPromises).then(() =>
      zip.generateAsync({ type: "blob" })
    );
  };
};