venue-js 1.2.0-next.5 → 1.2.0-next.7

package/dist/index.d.mts

@@ -736,14 +736,16 @@ type Element3DRendererOptions = {
     unit?: TypeRenderOptions<CreateExtrudePolygonOptionType>;
 };
 /** RendererManager */
-type RendererManagerOptions = {
+type BaseRenderManagerOptions = {
+    delayBeforeCreateElements?: number;
+    onRendererReady?: () => void;
+};
+type RendererManagerOptions = BaseRenderManagerOptions & {
     type: "2D";
     elements: Element2DRendererOptions;
-    onRendererReady?: () => void;
-} | {
+} | BaseRenderManagerOptions & {
     type: "3D";
     elements: Element3DRendererOptions;
-    onRendererReady?: () => void;
 };
 
 declare class RendererManager extends EventTarget {

package/dist/index.d.ts

@@ -736,14 +736,16 @@ type Element3DRendererOptions = {
     unit?: TypeRenderOptions<CreateExtrudePolygonOptionType>;
 };
 /** RendererManager */
-type RendererManagerOptions = {
+type BaseRenderManagerOptions = {
+    delayBeforeCreateElements?: number;
+    onRendererReady?: () => void;
+};
+type RendererManagerOptions = BaseRenderManagerOptions & {
     type: "2D";
     elements: Element2DRendererOptions;
-    onRendererReady?: () => void;
-} | {
+} | BaseRenderManagerOptions & {
     type: "3D";
     elements: Element3DRendererOptions;
-    onRendererReady?: () => void;
 };
 
 declare class RendererManager extends EventTarget {

package/dist/index.js

@@ -3072,7 +3072,7 @@ var CameraManager = class {
     return this.map.getView();
   };
   setView = (value) => {
-    if (this.map) {
+    if (this.map && Object.keys(value).length !== 0) {
       this.map.setView(value);
     }
   };
@@ -3127,7 +3127,7 @@ var THREE3 = __toESM(require("three"));
 
 // src/IndoorMap/renderer/3d/Element3DRenderer.ts
 var maptalks4 = __toESM(require("maptalks-gl"));
-var THREE2 = __toESM(require("three"));
+var THREE = __toESM(require("three"));
 var import_buffer2 = __toESM(require("@turf/buffer"));
 
 // src/IndoorMap/renderer/3d/element3DRendererOptions.ts
@@ -3155,203 +3155,6 @@ var element3DRendererOptions = {
   }
 };
 
-// src/IndoorMap/renderer/3d/objects/TextSpriteMarker.ts
-var import_maptalks7 = require("maptalks");
-var THREE = __toESM(require("three"));
-var import_maptalks8 = require("maptalks.three");
-var import_lodash6 = require("lodash");
-
-// src/IndoorMap/renderer/utils/interpolateStops.ts
-var interpolateStops = ({ stops }, zoom) => {
-  if (zoom <= stops[0][0]) return stops[0][1];
-  if (zoom >= stops[stops.length - 1][0]) return stops[stops.length - 1][1];
-  for (let i = 0; i < stops.length - 1; i++) {
-    const [z1, v1] = stops[i];
-    const [z2, v2] = stops[i + 1];
-    if (zoom >= z1 && zoom <= z2) {
-      const t = (zoom - z1) / (z2 - z1);
-      return v1 + t * (v2 - v1);
-    }
-  }
-};
-
-// src/IndoorMap/renderer/3d/objects/TextSpriteMarker.ts
-var OPTIONS4 = {
-  // Texture options
-  text: "",
-  textAlign: "center",
-  color: "#ffffff",
-  fontFamily: "sans-serif",
-  fontSize: 28,
-  fontWeight: 400,
-  background: "rgba(0, 0, 0, 0.2)",
-  lineHeight: 32,
-  padding: 8,
-  strokeColor: "#000000",
-  strokeWidth: 6,
-  strokeStyle: "round",
-  // Sprite options
-  /* Overall scale multiplier  */
-  scale: 1,
-  altitude: 0,
-  opacity: 1
-};
-var TextSpriteMarker = class extends import_maptalks8.BaseObject {
-  #altitudeOffset = 0;
-  constructor(coordinate, options, layer, properties = {}) {
-    options = import_maptalks7.Util.extend({}, OPTIONS4, options, { layer });
-    super();
-    this._coordinate = new import_maptalks7.Coordinate(coordinate);
-    this._initOptions(options);
-    this._createGroup();
-    this.properties = { ...properties };
-    const sprite = this._createSprite();
-    this.getObject3d().add(sprite);
-    this._updatePosition();
-    this.type = "TextSpriteMarker";
-  }
-  getOptions() {
-    return super.getOptions();
-  }
-  _createSprite() {
-    const options = this.getOptions();
-    const texture = this._createTextTexture(options.text, options);
-    const material = new THREE.SpriteMaterial({
-      map: texture,
-      transparent: true,
-      alphaTest: 0.1
-    });
-    const sprite = new THREE.Sprite(material);
-    const w = texture.image.width;
-    const h = texture.image.height;
-    const base = 1 / 16;
-    const normalizedScale = options.scale / this.getMap().getGLRes();
-    sprite.scale.set(w * base * normalizedScale, h * base * normalizedScale, 1);
-    this.#altitudeOffset = Math.max(
-      h * base * options.scale * 0.5,
-      0.05
-      // minimum lift in world units
-    );
-    return sprite;
-  }
-  _createTextTexture(text, options = {}) {
-    const {
-      padding,
-      fontSize,
-      fontFamily,
-      fontWeight,
-      lineHeight,
-      background,
-      color,
-      textAlign,
-      strokeColor,
-      strokeWidth,
-      maxWidth
-    } = options || {};
-    const canvas = document.createElement("canvas");
-    const ctx = canvas.getContext("2d");
-    ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
-    const paragraphs = String(text).split("\n");
-    const wrappedLines = [];
-    paragraphs.forEach((paragraph) => {
-      if ((0, import_lodash6.isNil)(maxWidth) || isNaN(maxWidth)) {
-        wrappedLines.push(paragraph);
-        return;
-      }
-      const words = paragraph.split(/\s+/);
-      let currentLine = "";
-      words.forEach((word) => {
-        const testLine = currentLine ? currentLine + " " + word : word;
-        const testWidth = ctx.measureText(testLine).width;
-        if (testWidth > maxWidth && currentLine) {
-          wrappedLines.push(currentLine);
-          currentLine = word;
-        } else {
-          currentLine = testLine;
-        }
-      });
-      if (currentLine) {
-        wrappedLines.push(currentLine);
-      }
-    });
-    const lines = wrappedLines.length ? wrappedLines : [""];
-    const widest = Math.max(...lines.map((l) => ctx.measureText(l).width), 0);
-    const finalWidth = (maxWidth ? Math.min(widest, maxWidth) : widest) + padding * 2;
-    const finalHeight = lineHeight * lines.length + padding * 2;
-    canvas.width = finalWidth;
-    canvas.height = finalHeight;
-    const ctx2 = canvas.getContext("2d");
-    ctx2.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
-    ctx2.textAlign = textAlign;
-    if (background && background !== "transparent") {
-      ctx2.fillStyle = background;
-      ctx2.fillRect(0, 0, canvas.width, canvas.height);
-    }
-    lines.forEach((line, i) => {
-      const y = padding + lineHeight * (i + 0.8);
-      let x = padding;
-      if (textAlign === "center") x = canvas.width / 2;
-      if (textAlign === "right" || textAlign === "end")
-        x = canvas.width - padding;
-      if (strokeWidth > 0) {
-        ctx2.lineWidth = strokeWidth;
-        ctx2.lineJoin = "round";
-        ctx2.miterLimit = 2;
-        ctx2.strokeStyle = strokeColor;
-        ctx2.strokeText(line, x, y);
-      }
-      ctx2.fillStyle = color;
-      ctx2.fillText(line, x, y);
-    });
-    const texture = new THREE.CanvasTexture(canvas);
-    texture.needsUpdate = true;
-    texture.minFilter = THREE.LinearFilter;
-    return texture;
-  }
-  _updatePosition() {
-    const options = this.getOptions();
-    const layer = options.layer;
-    if (!layer) return;
-    const altitude = (options.altitude || 0) + this.#altitudeOffset;
-    const z = layer.altitudeToVector3(altitude, altitude).x;
-    const position = layer.coordinateToVector3(this._coordinate, z);
-    (0, import_lodash6.set)(this.properties, "default.position", position);
-    this.getObject3d().position.copy(position);
-  }
-  _animation() {
-    const layer = this.getLayer();
-    if (!this.isAdd || !layer) return;
-    if (this._visible === true) {
-      const zoom = layer.map.getZoom();
-      const object3d = this.getObject3d();
-      const { opacity } = this.getOptions();
-      let opacityValue;
-      if (typeof opacity === "number") {
-        opacityValue = opacity ?? 1;
-      } else if (Array.isArray(opacity.stops)) {
-        opacityValue = interpolateStops(opacity, zoom);
-      } else {
-        throw new Error(`Unknown opacity value ${opacity}`);
-      }
-      const visible = opacityValue > 0.5;
-      object3d.visible = visible;
-    }
-  }
-  setText(text) {
-    const options = this.getOptions();
-    options.text = text;
-    const newSprite = this._createSprite();
-    const group = this.getObject3d();
-    group.children.forEach((child) => group.remove(child));
-    group.add(newSprite);
-    this._updatePosition();
-  }
-  setAltitude(altitude) {
-    const bottomHeight = this.options.bottomHeight ?? 0;
-    return super.setAltitude(altitude + bottomHeight + this.#altitudeOffset);
-  }
-};
-
 // src/IndoorMap/renderer/3d/Element3DRenderer.ts
 var DEFAULT_POLYGON_OPTION = {
   color: "#FFFFFF",
@@ -3377,7 +3180,6 @@ var Element3DRenderer = class extends EventTarget {
   // private dracoLoader: DRACOLoader
   lineMaterial;
   materialByColorMap;
-  markerRenderer;
   // Renderer is Ready
   isReady = false;
   constructor(map, options) {
@@ -3387,7 +3189,7 @@ var Element3DRenderer = class extends EventTarget {
     const groupLayer = this.map.getLayer("group");
     this.threeLayer = groupLayer.getLayer("three");
     this.gltfLayer = groupLayer.getLayer("gltf");
-    this.lineMaterial = new THREE2.LineBasicMaterial({ color: "#000" });
+    this.lineMaterial = new THREE.LineBasicMaterial({ color: "#000" });
     this.render();
   }
   animation() {
@@ -3402,7 +3204,7 @@ var Element3DRenderer = class extends EventTarget {
     if (!this.materialByColorMap) this.materialByColorMap = /* @__PURE__ */ new Map();
     const existingMaterial = this.materialByColorMap.get(color);
     if (existingMaterial) return existingMaterial;
-    const created = new THREE2.MeshLambertMaterial({ color, transparent: true });
+    const created = new THREE.MeshLambertMaterial({ color, transparent: true });
     created.toneMapped = false;
     this.materialByColorMap.set(color, created);
     return created;
@@ -3527,19 +3329,6 @@ var Element3DRenderer = class extends EventTarget {
       }
     });
   }
-  createMarker = (coordinates, ordinal, text) => {
-    const options = {
-      // scale: 0.05,
-      // altitude: ordinal * HEIGHT_METER,
-      text
-      // interactive: true,
-    };
-    const marker = new TextSpriteMarker(coordinates, options, this.threeLayer);
-    this.threeLayer.addMesh([marker]);
-    return marker;
-  };
-  removeMarker = () => {
-  };
   render() {
     this.threeLayer._needsUpdate = !this.threeLayer._needsUpdate;
     if (this.threeLayer._needsUpdate) {
@@ -3767,6 +3556,203 @@ var createSpriteMaterialByLabelSymbol2 = (labelSymbol) => {
   return material;
 };
 
+// src/IndoorMap/renderer/3d/objects/TextSpriteMarker.ts
+var import_maptalks7 = require("maptalks");
+var THREE2 = __toESM(require("three"));
+var import_maptalks8 = require("maptalks.three");
+var import_lodash6 = require("lodash");
+
+// src/IndoorMap/renderer/utils/interpolateStops.ts
+var interpolateStops = ({ stops }, zoom) => {
+  if (zoom <= stops[0][0]) return stops[0][1];
+  if (zoom >= stops[stops.length - 1][0]) return stops[stops.length - 1][1];
+  for (let i = 0; i < stops.length - 1; i++) {
+    const [z1, v1] = stops[i];
+    const [z2, v2] = stops[i + 1];
+    if (zoom >= z1 && zoom <= z2) {
+      const t = (zoom - z1) / (z2 - z1);
+      return v1 + t * (v2 - v1);
+    }
+  }
+};
+
+// src/IndoorMap/renderer/3d/objects/TextSpriteMarker.ts
+var OPTIONS4 = {
+  // Texture options
+  text: "",
+  textAlign: "center",
+  color: "#ffffff",
+  fontFamily: "sans-serif",
+  fontSize: 28,
+  fontWeight: 400,
+  background: "rgba(0, 0, 0, 0.2)",
+  lineHeight: 32,
+  padding: 8,
+  strokeColor: "#000000",
+  strokeWidth: 6,
+  strokeStyle: "round",
+  // Sprite options
+  /* Overall scale multiplier  */
+  scale: 1,
+  altitude: 0,
+  opacity: 1
+};
+var TextSpriteMarker = class extends import_maptalks8.BaseObject {
+  #altitudeOffset = 0;
+  constructor(coordinate, options, layer, properties = {}) {
+    options = import_maptalks7.Util.extend({}, OPTIONS4, options, { layer });
+    super();
+    this._coordinate = new import_maptalks7.Coordinate(coordinate);
+    this._initOptions(options);
+    this._createGroup();
+    this.properties = { ...properties };
+    const sprite = this._createSprite();
+    this.getObject3d().add(sprite);
+    this._updatePosition();
+    this.type = "TextSpriteMarker";
+  }
+  getOptions() {
+    return super.getOptions();
+  }
+  _createSprite() {
+    const options = this.getOptions();
+    const texture = this._createTextTexture(options.text, options);
+    const material = new THREE2.SpriteMaterial({
+      map: texture,
+      transparent: true,
+      alphaTest: 0.1
+    });
+    const sprite = new THREE2.Sprite(material);
+    const w = texture.image.width;
+    const h = texture.image.height;
+    const base = 1 / 16;
+    const normalizedScale = options.scale / this.getMap().getGLRes();
+    sprite.scale.set(w * base * normalizedScale, h * base * normalizedScale, 1);
+    this.#altitudeOffset = Math.max(
+      h * base * options.scale * 0.5,
+      0.05
+      // minimum lift in world units
+    );
+    return sprite;
+  }
+  _createTextTexture(text, options = {}) {
+    const {
+      padding,
+      fontSize,
+      fontFamily,
+      fontWeight,
+      lineHeight,
+      background,
+      color,
+      textAlign,
+      strokeColor,
+      strokeWidth,
+      maxWidth
+    } = options || {};
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+    const paragraphs = String(text).split("\n");
+    const wrappedLines = [];
+    paragraphs.forEach((paragraph) => {
+      if ((0, import_lodash6.isNil)(maxWidth) || isNaN(maxWidth)) {
+        wrappedLines.push(paragraph);
+        return;
+      }
+      const words = paragraph.split(/\s+/);
+      let currentLine = "";
+      words.forEach((word) => {
+        const testLine = currentLine ? currentLine + " " + word : word;
+        const testWidth = ctx.measureText(testLine).width;
+        if (testWidth > maxWidth && currentLine) {
+          wrappedLines.push(currentLine);
+          currentLine = word;
+        } else {
+          currentLine = testLine;
+        }
+      });
+      if (currentLine) {
+        wrappedLines.push(currentLine);
+      }
+    });
+    const lines = wrappedLines.length ? wrappedLines : [""];
+    const widest = Math.max(...lines.map((l) => ctx.measureText(l).width), 0);
+    const finalWidth = (maxWidth ? Math.min(widest, maxWidth) : widest) + padding * 2;
+    const finalHeight = lineHeight * lines.length + padding * 2;
+    canvas.width = finalWidth;
+    canvas.height = finalHeight;
+    const ctx2 = canvas.getContext("2d");
+    ctx2.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+    ctx2.textAlign = textAlign;
+    if (background && background !== "transparent") {
+      ctx2.fillStyle = background;
+      ctx2.fillRect(0, 0, canvas.width, canvas.height);
+    }
+    lines.forEach((line, i) => {
+      const y = padding + lineHeight * (i + 0.8);
+      let x = padding;
+      if (textAlign === "center") x = canvas.width / 2;
+      if (textAlign === "right" || textAlign === "end")
+        x = canvas.width - padding;
+      if (strokeWidth > 0) {
+        ctx2.lineWidth = strokeWidth;
+        ctx2.lineJoin = "round";
+        ctx2.miterLimit = 2;
+        ctx2.strokeStyle = strokeColor;
+        ctx2.strokeText(line, x, y);
+      }
+      ctx2.fillStyle = color;
+      ctx2.fillText(line, x, y);
+    });
+    const texture = new THREE2.CanvasTexture(canvas);
+    texture.needsUpdate = true;
+    texture.minFilter = THREE2.LinearFilter;
+    return texture;
+  }
+  _updatePosition() {
+    const options = this.getOptions();
+    const layer = options.layer;
+    if (!layer) return;
+    const altitude = (options.altitude || 0) + this.#altitudeOffset;
+    const z = layer.altitudeToVector3(altitude, altitude).x;
+    const position = layer.coordinateToVector3(this._coordinate, z);
+    (0, import_lodash6.set)(this.properties, "default.position", position);
+    this.getObject3d().position.copy(position);
+  }
+  _animation() {
+    const layer = this.getLayer();
+    if (!this.isAdd || !layer) return;
+    if (this._visible === true) {
+      const zoom = layer.map.getZoom();
+      const object3d = this.getObject3d();
+      const { opacity } = this.getOptions();
+      let opacityValue;
+      if (typeof opacity === "number") {
+        opacityValue = opacity ?? 1;
+      } else if (Array.isArray(opacity.stops)) {
+        opacityValue = interpolateStops(opacity, zoom);
+      } else {
+        throw new Error(`Unknown opacity value ${opacity}`);
+      }
+      const visible = opacityValue > 0.5;
+      object3d.visible = visible;
+    }
+  }
+  setText(text) {
+    const options = this.getOptions();
+    options.text = text;
+    const newSprite = this._createSprite();
+    const group = this.getObject3d();
+    group.children.forEach((child) => group.remove(child));
+    group.add(newSprite);
+    this._updatePosition();
+  }
+  setAltitude(altitude) {
+    const bottomHeight = this.options.bottomHeight ?? 0;
+    return super.setAltitude(altitude + bottomHeight + this.#altitudeOffset);
+  }
+};
+
 // src/IndoorMap/renderer/3d/Marker3DRenderer.ts
 var HEIGHT_METER2 = 4;
 var MULTIORDINAL_HEIGHT_METER3 = 9;
@@ -3870,6 +3856,9 @@ var angleBetweenLineStrings = (line1, line2) => {
 };
 
 // src/IndoorMap/renderer/RendererManager.ts
+function delay(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
 var RendererManager = class extends EventTarget {
   map;
   options;
@@ -3953,6 +3942,7 @@ var RendererManager = class extends EventTarget {
     }
   };
   async #createElements() {
+    await delay(this.options.delayBeforeCreateElements ?? 0);
     const levels = await this.#dataClient.filterByType("level", {
       populate: true
     });
@@ -4314,19 +4304,6 @@ var IndoorMap = class extends EventTarget {
     let elements = {};
     let object3ds = [];
     const scene = this.threeLayer.getScene();
-    if (scene) {
-      const {
-        ambientLight: ambientLightConfig = {},
-        directionalLight: directionalLightConfig = {}
-      } = import_lodash7.default.get(this.#mapConfig, "light", {
-        ambientLight: {},
-        directionalLight: {}
-      });
-      const ambientLight = createAmbientLight(ambientLightConfig);
-      scene.add(ambientLight);
-      const light = createDirectionalLight(directionalLightConfig);
-      scene.add(light);
-    }
     for (const feature2 of this.#features) {
       try {
         const { feature_type: featureType, properties, id } = feature2;