build-dxf 0.0.19-8 → 0.0.19-9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "build-dxf",
-  "version": "0.0.19-8",
+  "version": "0.0.19-9",
   "description": "线段构建双线墙壁的dxf版本",
   "main": "./src/index.js",
   "types": "./src/index.d.ts",

package/src/index.css

@@ -31,6 +31,8 @@
     --spacing: .25rem;
     --font-weight-bold: 700;
     --radius-lg: .5rem;
+    --default-transition-duration: .15s;
+    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
   }
@@ -322,6 +324,10 @@
     top: 50px;
   }
 
+  .bottom-\[10px\] {
+    bottom: 10px;
+  }
+
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
@@ -372,6 +378,10 @@
     }
   }
 
+  .m-\[0px_5px\] {
+    margin: 0 5px;
+  }
+
   .mt-\[5px\] {
     margin-top: 5px;
   }
@@ -380,10 +390,18 @@
     margin-top: 10px;
   }
 
+  .mr-\[10px\] {
+    margin-right: 10px;
+  }
+
   .ml-\[1\.4em\] {
     margin-left: 1.4em;
   }
 
+  .ml-\[10px\] {
+    margin-left: 10px;
+  }
+
   .box-border {
     box-sizing: border-box;
   }
@@ -418,6 +436,10 @@
     height: 6px;
   }
 
+  .h-\[20px\] {
+    height: 20px;
+  }
+
   .h-\[100vh\] {
     height: 100vh;
   }
@@ -426,6 +448,14 @@
     height: fit-content;
   }
 
+  .h-full {
+    height: 100%;
+  }
+
+  .w-\[20px\] {
+    width: 20px;
+  }
+
   .w-\[100vw\] {
     width: 100vw;
   }
@@ -446,6 +476,14 @@
     min-width: 100px;
   }
 
+  .min-w-\[140px\] {
+    min-width: 140px;
+  }
+
+  .min-w-\[150px\] {
+    min-width: 150px;
+  }
+
   .cursor-pointer {
     cursor: pointer;
   }
@@ -454,6 +492,10 @@
     resize: both;
   }
 
+  .flex-col {
+    flex-direction: column;
+  }
+
   .flex-row {
     flex-direction: row;
   }
@@ -474,6 +516,14 @@
     gap: 5px;
   }
 
+  .gap-\[10px\] {
+    gap: 10px;
+  }
+
+  .overflow-hidden {
+    overflow: hidden;
+  }
+
   .rounded-\[6px\] {
     border-radius: 6px;
   }
@@ -499,6 +549,23 @@
     border-width: 1px;
   }
 
+  .border-b-1 {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+
+  .border-b-\[\#eee\] {
+    border-bottom-color: #eee;
+  }
+
+  .border-b-\[rgba\(255\,255\,255\,0\.1\)\] {
+    border-bottom-color: #ffffff1a;
+  }
+
+  .bg-\[\#f0f0f0\] {
+    background-color: #f0f0f0;
+  }
+
   .bg-\[rgba\(255\,255\,255\,1\)\] {
     background-color: #fff;
   }
@@ -511,6 +578,16 @@
     background-color: var(--color-black);
   }
 
+  .bg-black\/15 {
+    background-color: #00000026;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-black\/15 {
+      background-color: color-mix(in oklab, var(--color-black) 15%, transparent);
+    }
+  }
+
   .bg-white {
     background-color: var(--color-white);
   }
@@ -519,10 +596,18 @@
     padding: 0 10px;
   }
 
+  .p-\[2px_0px\] {
+    padding: 2px 0;
+  }
+
   .p-\[5px\] {
     padding: 5px;
   }
 
+  .p-\[5px_0px\] {
+    padding: 5px 0;
+  }
+
   .p-\[5px_20px\] {
     padding: 5px 20px;
   }
@@ -553,6 +638,14 @@
     font-weight: var(--font-weight-bold);
   }
 
+  .text-\[\#333\] {
+    color: #333;
+  }
+
+  .text-\[\#888\] {
+    color: #888;
+  }
+
   .text-\[\#c9c9c9\] {
     color: #c9c9c9;
   }
@@ -566,10 +659,27 @@
     filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
   }
 
+  .transition-all {
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
   .select-none {
     -webkit-user-select: none;
     user-select: none;
   }
+
+  .last-of-type\:border-b-0:last-of-type {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 0;
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-\[\#ddd\]:hover {
+      background-color: #ddd;
+    }
+  }
 }
 
 @property --tw-border-style {

package/src/index2.js

@@ -1,208 +1,10 @@
 import { C as Component, P as Point, V as Variable, D as DxfSystem, M as ModelDataPlugin, a as DetailsPoint, W as WhiteModel } from "./build.js";
 import * as THREE from "three";
-import { Group, Vector2 } from "three";
+import { Group } from "three";
 import "clipper-lib";
 import "dxf-writer";
-import { CSS3DObject, CSS3DSprite, CSS3DRenderer } from "three/addons/renderers/CSS3DRenderer.js";
-import { CSS2DObject, CSS2DRenderer } from "three/addons/renderers/CSS2DRenderer.js";
-import { OrbitControls } from "three/addons/controls/OrbitControls.js";
-import * as TWEEN from "@tweenjs/tween.js";
+import { E as ElButton, R as Renderer, L as Lines, D as DomEventRegister, a as DomContainer, b as ElCheckbox, S as SelectLocalFile } from "./selectLocalFile.js";
 import { defineComponent, createElementBlock, openBlock, createElementVNode, toDisplayString, createVNode, unref, withCtx, createTextVNode, createApp, ref, watch, onMounted, onUnmounted, createCommentVNode, createStaticVNode } from "vue";
-import { E as ElButton, L as Lines, a as ElCheckbox, S as SelectLocalFile } from "./selectLocalFile.js";
-THREE.Object3D.DEFAULT_UP = new THREE.Vector3(0, 0, 1);
-class Renderer extends Component {
-  static name = "Renderer";
-  static CSS2DObject = CSS2DObject;
-  static CSS3DObject = CSS3DObject;
-  static CSS3DSprite = CSS3DSprite;
-  static Group = THREE.Group;
-  static Object3D = THREE.Object3D;
-  static Mesh = THREE.Mesh;
-  static Line = THREE.Line;
-  static LineSegments = THREE.LineSegments;
-  static Points = THREE.Points;
-  scene;
-  camera;
-  renderer;
-  orbitControls;
-  resizeObserver;
-  description;
-  html2DRenderer;
-  html3DRenderer;
-  container = new THREE.Group();
-  onUpdate;
-  onResize;
-  tweenTaskList = [];
-  constructor(description) {
-    super();
-    this.description = description;
-    const {
-      scene = new THREE.Scene(),
-      camera = new THREE.PerspectiveCamera(45, 1, 0.01, 1e3)
-    } = description;
-    this.camera = camera;
-    this.scene = scene;
-    scene.add(this.container);
-    this.renderer = new THREE.WebGLRenderer({
-      canvas: this.description.canvas,
-      antialias: true
-    });
-    this.renderer.setPixelRatio(window.devicePixelRatio);
-    if (description.htmlRenderer) {
-      if (description.htmlRenderer["2d"]) {
-        this.html2DRenderer = new CSS2DRenderer();
-        Object.assign(this.html2DRenderer.domElement.style, { position: "absolute", left: "0px", top: "0px" });
-        description.htmlRenderer["2d"].appendChild(this.html2DRenderer.domElement);
-      }
-      if (description.htmlRenderer["3d"]) {
-        this.html3DRenderer = new CSS3DRenderer();
-        Object.assign(this.html3DRenderer.domElement.style, { position: "absolute", left: "0px", top: "0px" });
-        description.htmlRenderer["3d"].appendChild(this.html3DRenderer.domElement);
-      }
-    }
-    if (description.orbitControls) {
-      this.orbitControls = new OrbitControls(this.camera, description.orbitControls.domElement);
-      Object.assign(this.orbitControls, description.orbitControls);
-    }
-    if (this.description.resizeObserver) {
-      const dom = this.description.resizeObserver;
-      this.resizeObserver = new ResizeObserver(() => {
-        const camera2 = this.camera;
-        const { width, height } = dom.getBoundingClientRect();
-        this.renderer.setSize(width, height);
-        if (this.html2DRenderer) this.html2DRenderer.setSize(width, height);
-        if (this.html3DRenderer) this.html3DRenderer.setSize(width, height);
-        if (camera2 instanceof THREE.PerspectiveCamera) {
-          camera2.aspect = width / height;
-        } else if (camera2 instanceof THREE.OrthographicCamera) {
-          camera2.left = -width * 0.5;
-          camera2.right = width * 0.5;
-          camera2.top = height * 0.5;
-          camera2.bottom = -height * 0.5;
-        }
-        camera2.updateProjectionMatrix();
-        this.onResize && this.onResize(width, height);
-        this.dispatchEvent({ type: "resize", width, height });
-      });
-      this.resizeObserver.observe(dom);
-    }
-    this.renderer.setAnimationLoop(() => {
-      if (this.html2DRenderer) this.html2DRenderer.render(this.scene, this.camera);
-      if (this.html3DRenderer) this.html3DRenderer.render(this.scene, this.camera);
-      this.renderer.render(this.scene, this.camera);
-      if (this.orbitControls && this.orbitControls.enabled) this.orbitControls.update();
-      this.tweenTaskList.forEach((tween) => tween.update());
-      this.onUpdate && this.onUpdate();
-      this.parent?.components.forEach((c) => c.dispatchEvent({ type: "update" }));
-    });
-    this.scene.add(new THREE.AmbientLight(16777215, 0.5));
-    this.scene.background = new THREE.Color(3355443);
-    const directLight = new THREE.DirectionalLight(16777215, 4);
-    directLight.position.set(100, -100, 100);
-    this.scene.add(directLight);
-    camera.position.set(10, 10, 10);
-  }
-  /**
-   * 世界坐标转屏幕坐标
-   * @param worldPosition 
-   * @param camera 
-   * @param renderer 
-   * @returns 
-   */
-  worldToScreenPosition(worldPosition) {
-    const vector = new THREE.Vector3();
-    vector.copy(worldPosition);
-    vector.project(this.camera);
-    const x = (vector.x * 0.5 + 0.5) * this.renderer.domElement.clientWidth;
-    const z = (-vector.z * 0.5 + 0.5) * this.renderer.domElement.clientHeight;
-    return new THREE.Vector2(x, z);
-  }
-  cameraPositionRecord = [];
-  /**
-   * 相机
-   * @param position 
-   * @param lookAt 
-   * @param onEnd 
-   */
-  cameraTo(position, lookAt, onEnd) {
-    this.cameraPositionRecord.push([
-      this.camera.position.clone(),
-      this.camera.quaternion.clone()
-    ]);
-    const tween = new TWEEN.Tween(this.camera.position);
-    tween.to(position, 600);
-    tween.start();
-    tween.onUpdate(() => {
-      this.camera.lookAt(lookAt);
-    });
-    tween.onComplete(() => {
-      const i = this.tweenTaskList.indexOf(tween);
-      this.tweenTaskList.splice(i, 1);
-      onEnd && onEnd();
-    });
-    this.tweenTaskList.push(tween);
-  }
-  cameraBack() {
-    if (this.cameraPositionRecord.length) {
-      const [pos, quat] = this.cameraPositionRecord.pop();
-      this.camera.position.copy(pos);
-      this.camera.quaternion.copy(quat);
-    }
-  }
-  /**
-   * 创建点
-   * @param pos 
-   */
-  createPointMesh(pos, size = 0.02, parameters, parent = this.container) {
-    const box = new THREE.Mesh(
-      new THREE.SphereGeometry(size),
-      new THREE.MeshBasicMaterial(parameters)
-    );
-    if (pos instanceof Point) box.position.set(pos.x, pos.y, 0);
-    else if (pos instanceof THREE.Vector3) box.position.copy(pos);
-    parent.add(box);
-    return box;
-  }
-  /**
-   * 创建文本
-   * @param text 
-   * @param pos 
-   * @param style 
-   */
-  createText(text, pos, style, parent = this.container) {
-    const div = document.createElement("div");
-    div.innerHTML = text;
-    div.style.pointerEvents = "none";
-    Object.assign(div.style, { fontSize: "10px", color: "#ffffff", ...style });
-    const css2DObject = new Renderer.CSS2DObject(div);
-    if (pos instanceof Point) css2DObject.position.set(pos.x, pos.y, 0);
-    else if (pos instanceof THREE.Vector3) css2DObject.position.copy(pos);
-    parent.add(css2DObject);
-    return css2DObject;
-  }
-  /**
-   * 创建几何缓冲区
-   * @param map 
-   * @param count 
-   */
-  createLineSegments(map, count, parameters, parent = this.container) {
-    const geometry = new THREE.BufferGeometry();
-    Object.keys(map).forEach((key) => {
-      const value = map[key];
-      geometry.setAttribute(key, new THREE.BufferAttribute(new Float32Array(value), value.length / count));
-    });
-    const lineSegmentList = new THREE.LineSegments(geometry, new THREE.LineBasicMaterial({ ...parameters }));
-    parent.add(lineSegmentList);
-    return lineSegmentList;
-  }
-  destroy() {
-    if (this.resizeObserver) {
-      this.renderer.dispose();
-      this.resizeObserver.disconnect();
-      this.resizeObserver = void 0;
-    }
-  }
-}
 function drawLinePathToPng(points, width, height, color = "#fff", lineWidth = 2) {
   const can = document.createElement("canvas"), ctx = can.getContext("2d");
   can.width = width;
@@ -456,42 +258,6 @@ class DetailsPointRender extends Component {
     renderer.camera.updateProjectionMatrix();
   }
 }
-class DomContainer extends Component {
-  static name = "DomContainer";
-  domElement = document.createElement("div");
-  canvas = document.createElement("canvas");
-  html2DRenderer = document.createElement("div");
-  html3DRenderer = document.createElement("div");
-  constructor() {
-    super();
-    this.domElement.id = "build-dxf-container";
-    this.domElement.appendChild(this.canvas);
-    this.domElement.appendChild(this.html3DRenderer);
-    this.domElement.appendChild(this.html2DRenderer);
-    Object.assign(this.domElement.style, {
-      width: "100%",
-      height: "100%",
-      position: "relative",
-      userSelect: "none"
-    });
-    Object.assign(this.html3DRenderer.style, {
-      position: "absolute",
-      left: 0,
-      top: 0,
-      // zIndex: 9,
-      width: "100%",
-      height: "100%"
-    });
-    Object.assign(this.html2DRenderer.style, {
-      position: "absolute",
-      left: 0,
-      top: 0,
-      // zIndex: 10,
-      width: "100%",
-      height: "100%"
-    });
-  }
-}
 class OriginalLineRender extends Component {
   static name = "OriginalLineRender";
   Dxf = null;
@@ -618,172 +384,6 @@ class ModelDataRender extends Component {
     variable?.addEventListener("currentKeyUp", (e) => e.value === "e" && variable.set("whiteModelVisible", !variable.whiteModelVisible));
   }
 }
-class DomEventRegister extends Component {
-  static name = "DomEventRegister";
-  cancelDefaultBehaviorList = [];
-  pointer = new Vector2();
-  _isMouseEnter = false;
-  set isMouseEnter(isMouseEnter) {
-    if (this._isMouseEnter === isMouseEnter) return;
-    this._isMouseEnter = isMouseEnter;
-  }
-  get isMouseEnter() {
-    return this._isMouseEnter;
-  }
-  /**
-   * 组件被添加到父组件上时调用
-   */
-  onAddFromParent() {
-    this.initMouseMoveEventProxy();
-    this.initKeyEvent();
-    this.initWheelEvent();
-    this.autoBodyCursor();
-  }
-  /**
-   * 初始化鼠标事件代理(判断鼠标是否在domElement上)
-   */
-  initMouseMoveEventProxy() {
-    const domContainer = this.parent?.findComponentByType(DomContainer), domElement = domContainer.domElement, variable = this.parent?.findComponentByType(Variable), globalMousemoveFun = (e) => {
-      const rect = domElement.getBoundingClientRect(), offsetX = e.clientX - rect.left, offsetY = e.clientY - rect.top;
-      if (offsetX >= 0 && offsetY >= 0 && offsetX <= rect.width && offsetY <= rect.height) {
-        this.pointer.set(offsetX, offsetY);
-        this.dispatchEvent({
-          type: "mousemove",
-          x: offsetX,
-          y: offsetY,
-          moveX: e.movementX,
-          moveY: e.movementY
-        });
-        this.isMouseEnter = true;
-      } else {
-        this.isMouseEnter = false;
-      }
-    }, globalMousedownFun = (e) => {
-      if (!this.isMouseEnter) return;
-      const rect = domElement.getBoundingClientRect();
-      variable.set("currentMouseDown", "mouse_" + e.button);
-      this.dispatchEvent({
-        type: "mousedown",
-        x: e.clientX - rect.left,
-        y: e.clientY - rect.top
-      });
-    }, globalMouseupFun = (e) => {
-      if (!this.isMouseEnter) return;
-      variable.set("currentMouseUp", "mouse_" + e.button);
-    };
-    document.addEventListener("mousemove", globalMousemoveFun);
-    document.addEventListener("mousedown", globalMousedownFun);
-    document.addEventListener("mouseup", globalMouseupFun);
-    this.addEventRecord("destory", () => {
-      document.removeEventListener("mousemove", globalMousemoveFun);
-      document.removeEventListener("mousedown", globalMousedownFun);
-      document.removeEventListener("mouseup", globalMouseupFun);
-    });
-  }
-  /**
-   * 初始化键盘事件
-   */
-  initKeyEvent() {
-    const variable = this.parent?.findComponentByType(Variable);
-    document.body.tabIndex = 1;
-    const onKeyup = (e) => {
-      if (!this.isMouseEnter) return;
-      const key = e.key.toLocaleLowerCase();
-      variable.set("currentKeyUp", key);
-      for (let i = 0; i < this.cancelDefaultBehaviorList.length; i++) {
-        const element = this.cancelDefaultBehaviorList[i];
-        if (element(e)) e.preventDefault();
-      }
-    };
-    document.body.addEventListener("keyup", onKeyup);
-    const onKeydown = (e) => {
-      if (!this.isMouseEnter) return;
-      const key = e.key.toLocaleLowerCase();
-      variable.set("currentKeyDown", key);
-      for (let i = 0; i < this.cancelDefaultBehaviorList.length; i++) {
-        const element = this.cancelDefaultBehaviorList[i];
-        if (element(e)) e.preventDefault();
-      }
-    };
-    document.body.addEventListener("keydown", onKeydown);
-    const onFocus = () => variable.set("focus", true);
-    document.body.addEventListener("focus", onFocus);
-    const onBlur = () => variable.set("focus", false);
-    document.body.addEventListener("blur", onBlur);
-    this.addEventRecord("destory", () => {
-      document.body.removeEventListener("keyup", onKeyup);
-      document.body.removeEventListener("keydown", onKeydown);
-      document.body.removeEventListener("focus", onFocus);
-      document.body.removeEventListener("blur", onBlur);
-    });
-  }
-  /**
-   * 初始化滚轮事件
-   */
-  initWheelEvent() {
-    const variable = this.parent?.findComponentByType(Variable);
-    const onWheel = (e) => variable.set("currentWheel", e.wheelDelta);
-    document.body.addEventListener("wheel", onWheel);
-    this.addEventRecord("destory", () => {
-      document.body.removeEventListener("wheel", onWheel);
-    });
-  }
-  /**
-   * 根据domElement的cursor自动设置body的cursor
-   */
-  autoBodyCursor() {
-    const domContainer = this.parent?.findComponentByType(DomContainer), domElement = domContainer.domElement;
-    let bodyCursor = null;
-    this.addEventListener("update", () => {
-      if (this.isMouseEnter) {
-        if (bodyCursor === null) {
-          bodyCursor = document.body.style.cursor;
-        }
-        document.body.style.cursor = domElement.style.cursor;
-      } else {
-        if (bodyCursor !== null) {
-          document.body.style.cursor = bodyCursor;
-          bodyCursor = null;
-        }
-      }
-    });
-  }
-  /**
-   * 
-   * @param callBack 
-   */
-  addCancelDefaultBehavior(callBack) {
-    this.cancelDefaultBehaviorList.push(callBack);
-    return this;
-  }
-  /**
-   * 
-   * @param el 
-   * @param callBack 
-   * @param offset 
-   * @param condition 
-   */
-  dragMoveHelper(el, callBack, offset = { x: 0, y: 0 }, condition = () => true) {
-    el.addEventListener("mousedown", () => {
-      if (!condition()) return;
-      const move = (e) => {
-        offset.x += e.movementX;
-        offset.y += e.movementY;
-        callBack({ ...offset }, e.movementX, e.movementY);
-      };
-      const end = () => {
-        document.removeEventListener("mousemove", move);
-        document.removeEventListener("mouseup", end);
-      };
-      document.addEventListener("mousemove", move);
-      document.addEventListener("mouseup", end);
-    });
-    callBack({ ...offset }, 0, 0);
-  }
-  destroy() {
-    this.canceEventRecord("destory");
-  }
-}
 class EventInput extends Component {
   static name = "EventInput";
   keyList = /* @__PURE__ */ new Set();