sctj-components 1.1.2 → 1.1.4

package/lib/sctj-components.es.js

@@ -11230,6 +11230,8 @@ function useBimfaceGIS(options = {}) {
   const swipe = ref$1(null);
   const isSwipeAdded = ref$1(false);
   let registeredEvents = [];
+  const drawableMng = ref$1(null);
+  const markerMng = ref$1(null);
   const initViewer = async (domElement, viewToken, config = {}) => {
     return new Promise(async (resolve, reject) => {
       if (!domElement) {
@@ -11285,6 +11287,16 @@ function useBimfaceGIS(options = {}) {
       );
     });
   };
+  const initDrawableMng = () => {
+    let drawableConfig = new Glodon.Bimface.Earth.Plugins.Drawable.DrawableContainerConfig();
+    drawableConfig.viewer = viewer.value;
+    drawableMng.value = new Glodon.Bimface.Earth.Plugins.Drawable.DrawableContainer(drawableConfig);
+  };
+  const initMarkerMng = () => {
+    let markerConfig = new Glodon.Bimface.Earth.Plugins.Marker3D.Marker3DContainerConfig();
+    markerConfig.viewer = viewer.value;
+    markerMng.value = new Glodon.Bimface.Earth.Plugins.Marker3D.Marker3DContainer(markerConfig);
+  };
   const handleResize = () => {
     if (viewer.value) {
       viewer.value.resize(
@@ -11299,6 +11311,8 @@ function useBimfaceGIS(options = {}) {
       return;
     resizeHandler.value = handleResize;
     window.addEventListener("resize", resizeHandler.value);
+    initDrawableMng();
+    initMarkerMng();
   };
   const getLayer = (layerId) => {
     if (!layerManager.value) {
@@ -12203,6 +12217,109 @@ function useBimfaceGIS(options = {}) {
       clearSelection(layerId);
     }
   };
+  const handleObj2style = (styleObj) => {
+    return Object.entries(styleObj).map(([key, value]) => {
+      const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
+      return `${cssKey}: ${value}`;
+    }).join("; ");
+  };
+  const deleteLabelById = (id) => {
+    drawableMng.value.removeItemById(id);
+  };
+  const deleteLabelByIds = (ids) => {
+    ids.forEach((id) => {
+      drawableMng.value.removeItemById(id);
+    });
+  };
+  const deleteMarkerById = (id) => {
+    markerMng.value.removeItemById(id);
+  };
+  const deleteMarkerByIds = (ids) => {
+    ids.forEach((id) => {
+      markerMng.value.removeItemById(id);
+    });
+  };
+  const clearAllDraws = () => {
+    drawableMng.value.clear();
+    markerMng.value.clear();
+  };
+  function getElementSizeOffscreen(el) {
+    const originalDisplay = el.style.display;
+    const originalVisibility = el.style.visibility;
+    const originalPosition = el.style.position;
+    const originalLeft = el.style.left;
+    const originalTop = el.style.top;
+    el.style.position = "absolute";
+    el.style.visibility = "hidden";
+    el.style.left = "-9999px";
+    el.style.top = "-9999px";
+    el.style.display = "block";
+    document.body.appendChild(el);
+    const width = el.clientWidth;
+    const height = el.clientHeight;
+    document.body.removeChild(el);
+    el.style.display = originalDisplay;
+    el.style.visibility = originalVisibility;
+    el.style.position = originalPosition;
+    el.style.left = originalLeft;
+    el.style.top = originalTop;
+    return { width, height };
+  }
+  const drawTextLabel = (options2) => {
+    var _a;
+    let config = new Glodon.Bimface.Earth.Plugins.Drawable.CustomItemConfig({});
+    let html = document.createElement("div");
+    html.style = handleObj2style(options2.style);
+    html.style.width = "fit-content";
+    html.style.whiteSpace = "nowrap";
+    html.innerHTML = options2.text;
+    config.content = html;
+    config.visibleDistance = (_a = options2.visibleDistance) != null ? _a : 501;
+    config.location = options2.location;
+    const { width, height } = getElementSizeOffscreen(html);
+    console.log("width", width);
+    console.log("height", height);
+    config.offsetX = -(width / 2);
+    config.offsetY = -height;
+    const customItem = new Glodon.Bimface.Earth.Plugins.Drawable.CustomItem(config);
+    drawableMng.value.addItem(customItem);
+    return customItem;
+  };
+  const drawLeadLabel = (options2) => {
+    var _a;
+    let config = new Glodon.Bimface.Earth.Plugins.Drawable.LeadLabelConfig({});
+    config.text = options2.text;
+    config.height = options2.style.height;
+    config.width = options2.style.width;
+    config.style = options2.style;
+    config.style.backgroundColor = new Glodon.Web.Graphics.Color(
+      options2.style.backgroundColor.red,
+      options2.style.backgroundColor.green,
+      options2.style.backgroundColor.blue,
+      options2.style.backgroundColor.alpha
+    );
+    config.style.lineColor = new Glodon.Web.Graphics.Color(
+      options2.style.lineColor.red,
+      options2.style.lineColor.green,
+      options2.style.lineColor.blue,
+      options2.style.lineColor.alpha
+    );
+    config.visibleDistance = (_a = options2.visibleDistance) != null ? _a : 501;
+    config.worldPosition = options2.worldPosition;
+    const customItem = new Glodon.Bimface.Earth.Plugins.Drawable.LeadLabel(config);
+    drawableMng.value.addItem(customItem);
+    return customItem;
+  };
+  const drawMarker = (options2) => {
+    let config = new Glodon.Bimface.Earth.Plugins.Marker3D.Marker3DConfig();
+    config.src = options2.src;
+    config.location = options2.location;
+    config.size = options2.size;
+    config.tooltip = options2.text;
+    let marker3d = new Glodon.Bimface.Earth.Plugins.Marker3D.Marker3D(config);
+    markerMng.value.addItem(marker3d);
+    return marker3d;
+  };
   return {
     viewer,
     app,
@@ -12210,6 +12327,8 @@ function useBimfaceGIS(options = {}) {
     isLoaded,
     isLoading,
     error,
+    drawableMng,
+    markerMng,
     initViewer,
     getLayer,
     getAllLayers,
@@ -12267,6 +12386,14 @@ function useBimfaceGIS(options = {}) {
     openModelEditor,
     closeModelEditor,
     clearAllEffects,
+    drawTextLabel,
+    drawLeadLabel,
+    drawMarker,
+    deleteLabelById,
+    deleteLabelByIds,
+    deleteMarkerById,
+    deleteMarkerByIds,
+    clearAllDraws,
     swipe,
     isSwipeAdded,
     openSwipe,
@@ -12277,8 +12404,8 @@ function useBimfaceGIS(options = {}) {
     dispose
   };
 }
-const index_vue_vue_type_style_index_0_scoped_b3b0eda5_lang = "";
-const _withScopeId = (n) => (pushScopeId("data-v-b3b0eda5"), n = n(), popScopeId(), n);
+const index_vue_vue_type_style_index_0_scoped_9656d353_lang = "";
+const _withScopeId = (n) => (pushScopeId("data-v-9656d353"), n = n(), popScopeId(), n);
 const _hoisted_1 = {
   key: 0,
   class: "loading-mask"
@@ -12341,13 +12468,15 @@ const _sfc_main = {
   setup(__props, { expose, emit }) {
     const props = __props;
     useCssVars((_ctx) => ({
-      "7cf1f39e": __props.width,
-      "077d864f": __props.height
+      "5d362dc5": __props.width,
+      "2fc09108": __props.height
     }));
     const containerRef = ref$1(null);
     const {
       viewer,
       app,
+      drawableMng,
+      markerMng,
       layerManager,
       isLoaded,
       isLoading,
@@ -12416,6 +12545,14 @@ const _sfc_main = {
       showSwipe,
       toggleSwipe,
       destroySwipe,
+      drawTextLabel,
+      drawLeadLabel,
+      drawMarker,
+      deleteLabelById,
+      deleteLabelByIds,
+      deleteMarkerById,
+      deleteMarkerByIds,
+      clearAllDraws,
       dispose
     } = useBimfaceGIS({
       onModelTransformEnd: (data) => emit("model-transform-end", data)
@@ -12655,6 +12792,8 @@ const _sfc_main = {
     expose({
       viewer,
       app,
+      drawableMng,
+      markerMng,
       layerManager,
       isLoaded,
       isLoading,
@@ -12723,6 +12862,14 @@ const _sfc_main = {
       showSwipe,
       toggleSwipe,
       destroySwipe,
+      drawTextLabel,
+      drawLeadLabel,
+      drawMarker,
+      deleteLabelById,
+      deleteLabelByIds,
+      deleteMarkerById,
+      deleteMarkerByIds,
+      clearAllDraws,
       dispose
     });
     return (_ctx, _cache) => {
@@ -12754,7 +12901,7 @@ const _sfc_main = {
     };
   }
 };
-const SCTJGISViewer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b3b0eda5"]]);
+const SCTJGISViewer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-9656d353"]]);
 const components = [
   { component: SCTJDictTag, name: "SCTJDictTag" },
   { component: SCTJTreeSelect, name: "SCTJTreeSelect" },