@xtctwins/tctwins-industry-engine 0.0.12 → 0.1.1

package/README.md

@@ -1,3 +1,196 @@
-## @xtctwins/tctwins-industry-engine
-
-### mode: prod
+## @xtctwins/tctwins-bimx-engine
+
+# xtc 三维文件查看器
+
+## 安装相关依赖
+
+## UI element-plus
+
+<https://www.npmjs.com/package/element-plus>
+
+```ssh
+npm i element-plus
+```
+
+## 事件总线 mitt
+
+<https://www.npmjs.com/package/mitt>
+
+```ssh
+npm i mitt
+```
+
+## 状态管理 pinia
+
+<https://www.npmjs.com/package/pinia>
+
+```ssh
+npm i pinia
+```
+
+## 文件获取 ali-oss
+
+<https://www.npmjs.com/package/ali-oss>
+
+```ssh
+npm i ali-oss
+```
+
+# 安装依赖
+
+```ssh
+// 安装依赖
+npm i @xtctwins/tctwins-bimx-engine
+// 引入样式
+import "@xtctwins/tctwins-bimx-engine/dist/style.css";
+```
+
+# Example
+
+```ts
+<template>
+	<!-- 一个模型 -->
+	<!-- :model-buffer 和 :file-path 选一个使用即可-->
+	<!-- :model-buffer 是直接传入模型buffer数据-->
+	<!-- :file-path 是传入文件下载路径-->
+	<IndustryViewer
+		v-if="initialzed"
+		:load-meta="true"
+		:file-path="filePath"
+		:nav-cube-size="120"
+		:background-color="'#d0d0d0'"
+		@emit-handler="EmitHandler" />
+
+	<!-- 集成模型 -->
+	<!-- 请使用-->
+	<!--:file-paths="filePaths"-->
+	<!--:multi-model="true"-->
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from "vue";
+import { IndustryViewer } from "@xtctwins/tctwins-industry-engine";
+import type { EventContent } from "@xtctwins/tctwins-industry-engine";
+import "@xtctwins/tctwins-industry-engine/dist/style.css";
+
+const initialzed = ref(false);
+const filePath = ref(`https://tctwins-oss-test.oss-cn-beijing.aliyuncs.com/test/1公寓幕墙.xtc`);
+const filePaths = [
+	"https://tctwins-oss-test.oss-cn-beijing.aliyuncs.com/tests/models/multiModel/model2/20250205170745913287.xtc",
+	"https://tctwins-oss-test.oss-cn-beijing.aliyuncs.com/tests/models/multiModel/model2/20250205170736552499.xtc",
+	"https://tctwins-oss-test.oss-cn-beijing.aliyuncs.com/tests/models/multiModel/model2/20250205170731500203.xtc"
+];
+const modelBuffer = ref<ArrayBuffer>();
+
+onMounted(() => {
+	//如果选择直接传入模型modelBuffer，请在获取到buffer后再初始化IndustryViewer
+	// getModel(() => {
+	// 	initialzed.value = true;
+	// });
+
+	//如果使用filePath或者filePaths则直接初始化IndustryViewer即可
+	initialzed.value = true;
+});
+
+//监听引擎传出的事件
+const EmitHandler = (content: EventContent) => {
+	console.log(content);
+};
+
+//xtc模型数据
+const getModel = (callback: () => void) => {
+	// 自行填写获取模型文件的内容
+	// ...
+	// modelBuffer.value = ...
+	callback();
+};
+</script>
+
+<style>
+#app {
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	width: 100%;
+	height: 100%;
+}
+</style>
+
+```
+
+## 其他参数解释
+
+### 基础设置
+
+是否载入构件属性信息（xts文件），
+如果要载入，在模型xtc文件相同路径下必须有同名xts文件
+
+```ssh
+:load-meta="true"
+```
+
+是否显示导航盒
+
+```ssh
+:showNavCube="true"
+```
+
+导航盒尺寸
+
+```ssh
+:nav-cube-size="120"
+```
+
+背景颜色
+
+```ssh
+:background-color="#d0d0d0"
+```
+
+### 功能
+
+添加需要的即可
+
+```ssh
+inspector
+```
+
+inspector - 构建属性面板开启 (需要开启loadMeta)
+
+```ssh
+reseta
+```
+
+reseta - 重置模型视角
+
+## 事件
+
+```ssh
+//监听引擎传出的事件
+const EmitHandler = (content: EventContent) => {
+	console.log(content);
+};
+```
+
+```ts
+//事件内容
+type EventContent = {
+	isTool: boolean;
+	event_target: ComponentName | "IndustryViewer" | "ToolBar";
+	event_name: string;
+	content: {};
+};
+```
+
+事件内容包括：
+
+```ssh
+"pickedEntity" - 点击构件
+"pickedNothing" - 点击空白处
+...
+```
+
+---
+##### 正式

package/dist/AnnotationTool-C5L5i2tf.mjs

@@ -0,0 +1,166 @@
+import { _ as D } from "./alert-CYzWSnHi.mjs";
+import { defineComponent as H, ref as p, watch as O, onMounted as q, onBeforeUnmount as F, openBlock as i, createElementBlock as a, unref as n, createCommentVNode as b, createElementVNode as r, normalizeClass as f, Fragment as B, renderList as C, toDisplayString as R, withDirectives as U, createVNode as z, vShow as G } from "vue";
+import { F as j, G as J, H as o, I as v, al as l, P as c, M as K } from "./index-DoJj-LVm.mjs";
+const Q = { class: "annotation_component" }, Y = {
+  key: 0,
+  id: "annotation_toolbar",
+  class: "annotation_toolbar"
+}, Z = {
+  key: 0,
+  class: "toolbar_trangle"
+}, ee = { class: "annotation_toolbar_group" }, ne = ["id", "disabled", "onClick"], te = ["src"], oe = {
+  key: 1,
+  class: "toolbar_trangle"
+}, ie = {
+  key: 1,
+  class: "mobile_annotation_toolbar"
+}, ae = { class: "anno_toolList" }, se = { class: "label-list" }, re = ["onClick"], le = { class: "item-img" }, ce = ["src"], _e = { class: "item-name" }, de = /* @__PURE__ */ H({
+  __name: "AnnotationTool",
+  props: ["componentId"],
+  emits: ["uploadImage", "clickAnnotation", "emitHandler"],
+  setup(y, { emit: P }) {
+    const $ = j(), T = J(), M = P, d = (e) => {
+      M("emitHandler", e);
+    };
+    let w;
+    const A = p(!0), s = p("");
+    let m;
+    const S = p(), h = y;
+    O(
+      () => T.isToolActive(h.componentId),
+      (e) => {
+        e || (s.value = "");
+      }
+    ), q(() => {
+      S.value = o("annoLimit"), T.setReadyById(h.componentId);
+    });
+    const x = {
+      image: `${c}/BIMX_Website/main/mainView/function_icon/annotation_icons/image_active.png`,
+      file: `${c}/BIMX_Website/main/mainView/function_icon/annotation_icons/file_active.png`,
+      record: `${c}/BIMX_Website/main/mainView/function_icon/annotation_icons/record_active.png`,
+      text: `${c}/BIMX_Website/main/mainView/function_icon/annotation_icons/text_active.png`,
+      video: `${c}/BIMX_Website/main/mainView/function_icon/annotation_icons/video_active.png`
+    }, k = () => {
+      w = window.bimViewer.annotationTool, w.setTypeImage(x), m = window.bimViewer.eventTrigger, m.on("createAnnotation", (e) => {
+        d({
+          isTool: !0,
+          event_target: "AnnotationTool",
+          event_name: "createAnnotation",
+          content: {
+            currentAnnotation: e
+          }
+        });
+      }), m.on("markerClicked", (e) => {
+        d({
+          isTool: !0,
+          event_target: "AnnotationTool",
+          event_name: "clickAnnotation",
+          content: {
+            targetAnno: e
+          }
+        });
+      }), o("isMobile") || m.on("requestDeleteMarker", (e) => {
+        d({
+          isTool: !0,
+          event_target: "AnnotationTool",
+          event_name: "requestDelAnno",
+          content: {
+            msg: "请求删除指定标注",
+            annoId: e
+          }
+        });
+      });
+    };
+    v.on("BimViewer", k);
+    const I = (e) => {
+      g(L(e.type));
+    };
+    v.on("setAnnoStatus", I), F(() => {
+      v.off("BimViewer", k), v.off("setAnnoStatus", I);
+    });
+    const L = (e) => {
+      if (e === "image")
+        return l[0];
+      if (e === "record")
+        return l[1];
+      if (e === "video")
+        return l[2];
+      if (e === "file")
+        return l[3];
+      if (e === "text")
+        return l[4];
+    }, g = (e) => {
+      o("editPrivilege") != 1 && (s.value === e.code ? (s.value = "", V(e, !1)) : (s.value = e.code, V(e, !0)));
+    }, N = (e) => {
+      window.bimViewer.annotationTool.setEnabled(e);
+    }, V = (e, _) => {
+      N(_), E(e.code, _);
+    }, E = (e, _) => {
+      window.bimViewer.annotationTool.setCurrentType(e), d({
+        isTool: !0,
+        event_target: "AnnotationTool",
+        event_name: "clickAnnoTool",
+        content: {
+          active: _,
+          tool_type: e
+        }
+      });
+    };
+    return (e, _) => {
+      const W = D;
+      return i(), a("div", Q, [
+        n(o)("isMobile") ? (i(), a("div", ie, [
+          r("div", ae, [
+            r("div", se, [
+              (i(!0), a(B, null, C(n(l), (t, u) => (i(), a("div", {
+                key: u,
+                class: f(["label-item", { "label-item-active": s.value === t.code && n(o)("editPrivilege") == 0, noPermission: n(o)("editPrivilege") == 1 }]),
+                onClick: (X) => g(t)
+              }, [
+                r("div", le, [
+                  r("img", {
+                    class: "label-item-img",
+                    src: n(c) + `/industry-viewer/annotation-bar/${s.value === t.code && n(o)("editPrivilege") == 0 ? t.imgActive : t.img}.svg`,
+                    alt: ""
+                  }, null, 8, ce),
+                  r("div", _e, R(n($)(t.name)), 1)
+                ])
+              ], 10, re))), 128))
+            ])
+          ])
+        ])) : (i(), a("div", Y, [
+          n(o)("annotationPos").pos.includes("top") ? (i(), a("div", Z)) : b("", !0),
+          r("div", {
+            class: f(["annotation_toolbar_wrapper", { annotation_toolbar_wrapper_disable: n(o)("editPrivilege") == 1 }])
+          }, [
+            r("div", ee, [
+              (i(!0), a(B, null, C(n(l), (t, u) => (i(), a("button", {
+                id: `annotation_tool_btn_${u}`,
+                key: u,
+                class: f(["annotation_tool_btn", { active: s.value === t.code }]),
+                disabled: n(o)("editPrivilege") == 1,
+                onClick: (X) => g(t)
+              }, [
+                b("", !0),
+                r("img", {
+                  src: `${n(c)}/bim-viewer/action-bars/panno-${s.value !== t.code ? t.img : t.imgActive}.svg`
+                }, null, 8, te)
+              ], 10, ne))), 128))
+            ])
+          ], 2),
+          n(o)("annotationPos").pos.includes("bottom") ? (i(), a("div", oe)) : b("", !0)
+        ])),
+        U(z(W, {
+          "click-handle": () => {
+            A.value = !1;
+          }
+        }, null, 8, ["click-handle"]), [
+          [G, A.value && n(o)("editPrivilege") == 0]
+        ])
+      ]);
+    };
+  }
+}), ge = /* @__PURE__ */ K(de, [["__scopeId", "data-v-0df82279"]]);
+export {
+  ge as default
+};

package/dist/CameraViewTool-CM0qckrp.mjs

@@ -0,0 +1,164 @@
+import { G as X, H as Y, I as x, W as z, P as y, M as A } from "./index-DoJj-LVm.mjs";
+import { defineComponent as G, ref as l, watch as k, onMounted as O, onBeforeUnmount as j, openBlock as u, createElementBlock as g, normalizeClass as T, createElementVNode as t, createBlock as q, withCtx as F, unref as B, withDirectives as I, vModelText as N, createCommentVNode as J } from "vue";
+const K = { class: "cameraView_tool_btn" }, Q = ["src"], Z = {
+  key: 1,
+  class: "cameraView_tool_btn"
+}, ee = ["src"], te = { class: "dialog-container" }, oe = { class: "dialog-header" }, ae = { class: "dialog-content" }, se = { class: "preview-shot" }, ne = ["src"], le = { class: "form-group" }, ie = { class: "form-group" }, ce = { class: "dialog-footer" }, re = /* @__PURE__ */ G({
+  __name: "CameraViewTool",
+  props: ["componentId", "instruction"],
+  emits: ["emitHandler"],
+  setup(E, { emit: S }) {
+    const _ = X();
+    let v;
+    const w = l(!Y("isMobile")), p = E;
+    k(
+      () => _.isToolActive(p.componentId),
+      (o) => {
+      }
+    ), k(
+      () => p.instruction,
+      (o) => {
+        if (o && o.instruct_name == "setCameraView") {
+          const e = o.content.cameraView;
+          v.flyToNewView({ ...e, duration: 1 });
+        }
+      },
+      { deep: !0 }
+    ), O(() => {
+      _.setReadyById(p.componentId);
+    });
+    const V = () => {
+      v = window.bimViewer, window.bimViewer.eventTrigger;
+    };
+    x.on("BimViewer", V);
+    const H = (o, e) => {
+      const a = document.getElementById("myCanvas"), s = document.createElement("a");
+      s.download = "screenshot.png";
+      const d = document.createElement("canvas"), i = d.getContext("2d");
+      if (a && i) {
+        d.width = o, d.height = e;
+        const D = o / a.width, L = e / a.height, b = Math.max(D, L), C = a.width * b, h = a.height * b, P = (o - C) / 2, W = (e - h) / 2;
+        return i.clearRect(0, 0, o, e), i.fillStyle = "transparent", i.fillRect(0, 0, o, e), i.drawImage(a, 0, 0, a.width, a.height, P, W, C, h), d.toDataURL("image/png");
+      } else
+        return "";
+    }, M = S, R = (o) => {
+      M("emitHandler", o);
+    }, c = l(""), r = l(""), n = l(!1), m = l(""), f = l(), U = () => {
+      n.value = !0, f.value = v.getCameraView(), m.value = H(220, 124);
+    }, $ = () => {
+      R({
+        isTool: !0,
+        event_target: "CameraViewTool",
+        event_name: "newCameraView",
+        content: {
+          cameraView: f.value,
+          title: c.value,
+          description: r.value,
+          img_data: m.value
+        }
+      }), n.value = !1, c.value = "", r.value = "", f.value = null, m.value = "";
+    };
+    return j(() => {
+      x.off("BimViewer", V);
+    }), (o, e) => {
+      const a = z;
+      return u(), g("div", {
+        class: T(["cameraView_component", { is_mobile: !w.value }])
+      }, [
+        t("div", {
+          class: "new_btn",
+          onClick: U
+        }, [
+          w.value ? (u(), q(a, {
+            key: 0,
+            content: "添加视角",
+            placement: "top",
+            effect: "light"
+          }, {
+            default: F(() => [
+              t("div", K, [
+                t("img", {
+                  class: "img",
+                  src: `${B(y)}/bim-viewer/cameraView/cameraViewNew.svg`,
+                  alt: ""
+                }, null, 8, Q)
+              ])
+            ]),
+            _: 1
+          })) : (u(), g("div", Z, [
+            t("img", {
+              class: "img",
+              src: `${B(y)}/bim-viewer/cameraView/cameraViewNew.svg`,
+              alt: ""
+            }, null, 8, ee)
+          ]))
+        ]),
+        n.value ? (u(), g("div", {
+          key: 0,
+          class: T(["newViewDialog", { mobile_dialog: !w.value }])
+        }, [
+          t("div", {
+            class: "dialog-overlay",
+            onClick: e[0] || (e[0] = (s) => n.value = !1)
+          }),
+          t("div", te, [
+            t("div", oe, [
+              e[6] || (e[6] = t("span", { class: "dialog-title" }, "添加视角", -1)),
+              t("button", {
+                class: "dialog-close",
+                onClick: e[1] || (e[1] = (s) => n.value = !1)
+              }, [...e[5] || (e[5] = [
+                t("span", null, "✕", -1)
+              ])])
+            ]),
+            t("div", ae, [
+              t("div", se, [
+                t("img", {
+                  src: m.value,
+                  alt: "视角预览"
+                }, null, 8, ne)
+              ]),
+              t("div", le, [
+                e[7] || (e[7] = t("label", { class: "form-label" }, "视角名称", -1)),
+                I(t("input", {
+                  "onUpdate:modelValue": e[2] || (e[2] = (s) => c.value = s),
+                  type: "text",
+                  class: "form-input",
+                  placeholder: "请输入视角名称",
+                  maxlength: "50"
+                }, null, 512), [
+                  [N, c.value]
+                ])
+              ]),
+              t("div", ie, [
+                e[8] || (e[8] = t("label", { class: "form-label" }, "视角描述", -1)),
+                I(t("textarea", {
+                  "onUpdate:modelValue": e[3] || (e[3] = (s) => r.value = s),
+                  class: "form-textarea",
+                  placeholder: "请输入视角描述",
+                  maxlength: "200",
+                  rows: "4"
+                }, null, 512), [
+                  [N, r.value]
+                ])
+              ])
+            ]),
+            t("div", ce, [
+              t("button", {
+                class: "btn btn-secondary",
+                onClick: e[4] || (e[4] = (s) => n.value = !1)
+              }, "取 消"),
+              t("button", {
+                class: "btn btn-primary",
+                onClick: $
+              }, "确 定")
+            ])
+          ])
+        ], 2)) : J("", !0)
+      ], 2);
+    };
+  }
+}), ue = /* @__PURE__ */ A(re, [["__scopeId", "data-v-2c9174bb"]]);
+export {
+  ue as default
+};