@focusbc/bbs-lib 0.0.9 → 0.0.11

package/dist/browser/bbs-lib.js

@@ -63676,7 +63676,7 @@ function rewindPolygon(coords, reverse) {
 var lodash = __toESM(require_lodash(), 1);
 var import_lodash = __toESM(require_lodash(), 1);
 
-// node_modules/polylabel/node_modules/tinyqueue/index.js
+// node_modules/@focusbc/map-rendering/node_modules/tinyqueue/index.js
 var TinyQueue2 = class {
   constructor(data = [], compare = (a2, b2) => a2 < b2 ? -1 : a2 > b2 ? 1 : 0) {
     this.data = data;
@@ -63733,7 +63733,7 @@ var TinyQueue2 = class {
   }
 };
 
-// node_modules/polylabel/polylabel.js
+// node_modules/@focusbc/map-rendering/node_modules/polylabel/polylabel.js
 function polylabel(polygon3, precision = 1, debug2 = false) {
   let minX = Infinity;
   let minY = Infinity;
@@ -78338,6 +78338,30 @@ var FbcEditableDynamicLayer = class extends FbcEditableLayer {
 };
 FbcEditableDynamicLayer.layerName = "FbcEditableDynamicLayer";
 
+// src/utils/color.utils.ts
+var ColorUtils = class {
+  /**
+   * Converts a hex color string to an rgba color.
+   * @param hex - The hex color string to convert to rgba.
+   * @param opacity - The opacity of the color.
+   * @returns
+   */
+  static hexToRgba(hex, opacity) {
+    if (!hex) {
+      return [0, 0, 0, 0];
+    }
+    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{0,2})$/i.exec(hex);
+    if (!result?.length || result.length < 3) {
+      return [0, 0, 0, 0];
+    }
+    let alpha = result[4] ? parseInt(result[4], 16) : 255;
+    if (opacity !== null && opacity !== void 0) {
+      alpha = Math.round(opacity / 100 * 255);
+    }
+    return [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16), alpha];
+  }
+};
+
 // src/overlay/overlay-dynamic-layer.builder.ts
 var SHAPES_LAYER_ID = "bbs-shapes";
 var OverlayDynamicLayerBuilder = class {
@@ -78350,6 +78374,7 @@ var OverlayDynamicLayerBuilder = class {
     this._onEdit = () => {
     };
   }
+  // #region Setters
   setSelectedShapeId(shapeId) {
     this._selectedShapeId = shapeId;
     return this;
@@ -78366,23 +78391,21 @@ var OverlayDynamicLayerBuilder = class {
     this._onEdit = onEdit;
     return this;
   }
+  // #endregion
+  // #region Build
   build() {
-    const mapPolygon = (polygon3) => {
-      return [...polygon3.map((point3) => [point3[0], point3[1]]), [polygon3[0][0], polygon3[0][1]]];
-    };
     const objects = [];
+    const labelObjects = [];
     for (const shape of this._shapes) {
       const segments = ShapeInstanceToShapeSegmentsMapper.map(shape);
       for (const segment of segments) {
-        objects.push({
-          id: segment.shapeId + Math.random(),
+        const object = {
+          id: `${segment.shapeId}-${segment.segmentIndex}`,
           groupId: segment.shapeId,
           geometry: {
             type: "MultiPolygon",
-            coordinates: [[mapPolygon(segment.polygon)]],
-            style: segment.style
+            coordinates: segment.geometry.coordinates
           },
-          label: segment.style?.text,
           type: ObjectType.POLYGON,
           visible: true,
           selectable: true,
@@ -78394,13 +78417,6 @@ var OverlayDynamicLayerBuilder = class {
           editable: true,
           style: {
             pattern: LayerObjectPolygonPattern.NONE,
-            label: {
-              size: 10,
-              color: segment.style?.textColorHex ?? "#000000",
-              family: LayerObjectLabelFamily.ARIAL,
-              weight: 400,
-              opacity: 100
-            },
             borderFormat: {
               gap: 0,
               width: 1
@@ -78411,13 +78427,21 @@ var OverlayDynamicLayerBuilder = class {
             borderOpacity: 100,
             borderSize: segment.style?.borderWidth ?? 1
           }
+        };
+        const rotationAngle = shape.rotationRadians ? RotationUtils.radiansToDegrees(shape.rotationRadians) : void 0;
+        labelObjects.push({
+          segment,
+          rotationAngle,
+          initialRotationAngle: rotationAngle
         });
+        objects.push(object);
       }
     }
-    return new FbcEditableDynamicLayer({
+    return new BbsDynamicLayer({
       selectedIndexes: this._selectedShapeId ? objects.flatMap((object, index) => object.groupId === this._selectedShapeId ? [index] : []) : void 0,
       id: SHAPES_LAYER_ID,
       data: objects,
+      labelObjects,
       mode: this._edit ? ModeType.TRANSFORM : ModeType.VIEW,
       pickable: true,
       modeConfig: {
@@ -78430,6 +78454,7 @@ var OverlayDynamicLayerBuilder = class {
       }
     });
   }
+  // #endregion
 };
 var DEFAULT_WIDTH_METERS = 6;
 var ShapeInstanceToShapeSegmentsMapper = class {
@@ -78447,25 +78472,37 @@ var ShapeInstanceToShapeSegmentsMapper = class {
     const rotationRadians = shape.rotationRadians ?? 0;
     const rows = shape.type.rows ?? [];
     const hasGrid = rows.length > 0 && rows.some((row) => row.columns.length > 0);
-    const toSegment = (minEast, maxEast, minNorth, maxNorth, segmentIndex2) => ({
+    const mapPolygon = (polygon3) => {
+      return [...polygon3.map((point3) => [point3[0], point3[1]]), [polygon3[0][0], polygon3[0][1]]];
+    };
+    const toSegment = (minEast, maxEast, minNorth, maxNorth, segmentIndex2, size2) => ({
       shapeId: shape.id,
       segmentIndex: segmentIndex2,
-      polygon: this.localPointsToPolygon(
-        [
-          { east: minEast, north: minNorth },
-          { east: maxEast, north: minNorth },
-          { east: maxEast, north: maxNorth },
-          { east: minEast, north: maxNorth }
-        ],
-        shape.center,
-        rotationRadians
-      ),
+      geometry: {
+        type: "MultiPolygon",
+        coordinates: [
+          [
+            mapPolygon(
+              this.localPointsToPolygon(
+                [
+                  { east: minEast, north: minNorth },
+                  { east: maxEast, north: minNorth },
+                  { east: maxEast, north: maxNorth },
+                  { east: minEast, north: maxNorth }
+                ],
+                shape.center,
+                rotationRadians
+              )
+            )
+          ]
+        ]
+      },
       style: shape.styling?.[segmentIndex2],
       shape,
-      size
+      size: size2
     });
     if (!hasGrid) {
-      return [toSegment(-halfWidth, halfWidth, -halfHeight, halfHeight, 0)];
+      return [toSegment(-halfWidth, halfWidth, -halfHeight, halfHeight, 0, size)];
     }
     const rowWeights = this.normalizeWeights(rows.map((row) => row.height));
     const segments = [];
@@ -78488,12 +78525,14 @@ var ShapeInstanceToShapeSegmentsMapper = class {
         const colMinEast = east;
         const colMaxEast = east + columnWidth;
         east = colMaxEast;
-        segments.push(toSegment(colMinEast, colMaxEast, rowMinNorth, rowMaxNorth, segmentIndex));
+        segments.push(
+          toSegment(colMinEast, colMaxEast, rowMinNorth, rowMaxNorth, segmentIndex, { widthMeters: columnWidth, heightMeters: rowHeight })
+        );
         segmentIndex++;
       }
     }
     if (segments.length === 0) {
-      return [toSegment(-halfWidth, halfWidth, -halfHeight, halfHeight, 0)];
+      return [toSegment(-halfWidth, halfWidth, -halfHeight, halfHeight, 0, size)];
     }
     return segments;
   }
@@ -78538,6 +78577,152 @@ var ShapeInstanceToShapeSegmentsMapper = class {
     return rotatedRing.slice(0, -1);
   }
 };
+var BaseLayer = FbcEditableDynamicLayer;
+var BbsDynamicLayer = class extends BaseLayer {
+  initializeState(context) {
+    super.initializeState(context);
+    this.setState({
+      labelObjects: this.props.labelObjects ?? [],
+      changedLabelRanges: null
+    });
+  }
+  updateState(params) {
+    super.updateState(params);
+    const { props, oldProps, changeFlags } = params;
+    if (changeFlags.dataChanged || props.labelObjects !== oldProps.labelObjects) {
+      this.setState({
+        labelObjects: props.labelObjects ?? [],
+        changedLabelRanges: null
+      });
+    }
+  }
+  getModeProps(props) {
+    const modeProps = super.getModeProps(props);
+    const baseOnEdit = modeProps.onEdit;
+    modeProps.onEdit = (action) => {
+      baseOnEdit(action);
+      if (action.phase === "live") {
+        this.patchLabels(action);
+      }
+    };
+    return modeProps;
+  }
+  renderLayers() {
+    const layers = super.renderLayers() ?? [];
+    return [...layers, this.buildLabelLayer()];
+  }
+  patchLabels(action) {
+    const objects = action.updatedData;
+    const indexes = action.editContext?.objectInstanceIndexes;
+    if (!objects || !indexes?.length) {
+      return;
+    }
+    const labelObjects = [...this.state.labelObjects ?? []];
+    let changed = false;
+    for (const index of indexes) {
+      const object = objects[index];
+      const label = labelObjects[index];
+      if (!object || !label) {
+        continue;
+      }
+      labelObjects[index] = {
+        ...label,
+        segment: { ...label.segment, geometry: object.geometry },
+        rotationAngle: (label.initialRotationAngle ?? 0) + (object.config?.rotation ?? 0)
+      };
+      changed = true;
+    }
+    if (!changed) {
+      return;
+    }
+    this.setState({
+      labelObjects,
+      changedLabelRanges: [...new Set(indexes)].sort((a2, b2) => a2 - b2).map((index) => ({
+        startRow: index,
+        endRow: index + 1
+      }))
+    });
+  }
+  buildLabelLayer() {
+    const labelObjects = this.state.labelObjects ?? [];
+    const changedLabelRanges = this.state.changedLabelRanges;
+    return new text_layer_default(
+      this.getSubLayerProps({
+        id: "labels",
+        data: labelObjects,
+        // Empty ranges would suppress attribute updates (truthy []); use undefined for full rebuild.
+        _dataDiff: changedLabelRanges?.length ? () => changedLabelRanges : void 0,
+        pickable: false,
+        fontFamily: "Open Sans",
+        sizeUnits: "meters",
+        billboard: false,
+        getAlignmentBaseline: () => "center",
+        getText: (d2) => d2.segment.style?.text ?? "",
+        getTextAnchor: (d2) => {
+          const angle3 = d2.rotationAngle ?? 0;
+          switch (d2.segment.style?.textPosition) {
+            case "left":
+              return angle3 > 90 && angle3 < 270 ? "start" : "end";
+            case "right":
+              return angle3 > 90 && angle3 < 270 ? "end" : "start";
+            default:
+              return "middle";
+          }
+        },
+        getPosition: (d2) => {
+          const feature3 = feature(d2.segment.geometry);
+          const centroid3 = centroid(feature3);
+          const offsetX = Number(d2.segment.style?.textPosition);
+          if (isNaN(offsetX)) {
+            return centroid3.geometry.coordinates;
+          }
+          const angle3 = d2.rotationAngle ?? 0;
+          const offsetPoint = destination(point(centroid3.geometry.coordinates), offsetX, angle3 + 90, {
+            units: "meters"
+          });
+          return offsetPoint.geometry.coordinates;
+        },
+        getSize: (d2) => {
+          if (!d2.segment.style?.text?.length) {
+            return 0;
+          }
+          const ring = d2.segment.geometry.coordinates[0][0];
+          const measuredWidth = distance5(ring[0], ring[1], { units: "meters" });
+          const style = d2.segment.style;
+          const size = measuredWidth / style.text.length * 1.5;
+          switch (style.textSize) {
+            case "medium":
+              return size * 0.75;
+            case "small":
+              return size * 0.5;
+            case "large":
+              return size;
+            default:
+              const textSizeNumber = Number(style.textSize);
+              if (!isNaN(textSizeNumber)) {
+                return size / textSizeNumber;
+              }
+              return size;
+          }
+        },
+        getColor: (d2) => {
+          if (d2.segment.style?.textColorHex) {
+            return ColorUtils.hexToRgba(d2.segment.style.textColorHex);
+          }
+          return [0, 0, 0, 255];
+        },
+        getFontFamily: (_2) => LayerObjectLabelFamily.ARIAL,
+        getAngle: (d2) => {
+          if (d2.rotationAngle) {
+            return -d2.rotationAngle;
+          }
+          return 0;
+        }
+      })
+    );
+  }
+};
+BbsDynamicLayer.layerName = "BbsDynamicLayer";
 
 // src/overlay/overlay-static-layer.builder.ts
 var OverlayStaticLayerBuilder = class {
@@ -78565,17 +78750,6 @@ var OverlayStaticLayerBuilder = class {
       return this.createRasterTileLayer(layer, index);
     });
   }
-  hexToRgba(hex, opacity) {
-    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{0,2})$/i.exec(hex);
-    if (!result?.length || result.length < 3) {
-      return [0, 0, 0, 0];
-    }
-    let alpha = result[4] ? parseInt(result[4], 16) : 255;
-    if (opacity !== null && opacity !== void 0) {
-      alpha = Math.round(opacity / 100 * 255);
-    }
-    return [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16), alpha];
-  }
   createVectorTileLayer(layer, index) {
     const id = layer.id;
     const version2 = layer.version;
@@ -78583,7 +78757,7 @@ var OverlayStaticLayerBuilder = class {
     const maxZoom = layer.maxZoom;
     const tileUrl = `${this._apiUrl}/bbs/map/get-map-vector-tile/?layerId=${id}&x={x}&y={y}&z={z}&version=${version2}`;
     const hexColor = layer.lineColor ?? "#000000";
-    const lineColor = this.hexToRgba(hexColor);
+    const lineColor = ColorUtils.hexToRgba(hexColor);
     return new mvt_layer_default({
       id,
       index,
@@ -78704,8 +78878,9 @@ var MapOverlay = class _MapOverlay {
         dataTransfer: event.dataTransfer
       });
     };
-    const { zoom, heading, tilt } = options;
-    const { center: center3, defaultLevelId, rotation } = context;
+    const { zoom, heading: optionsHeading, tilt } = options;
+    const { center: center3, defaultLevelId, heading: contextHeading } = context;
+    const heading = _MapOverlay.convertHeading(optionsHeading ?? contextHeading);
     this._context = context;
     this._htmlElement = htmlElement;
     this._levelId = defaultLevelId;
@@ -78713,7 +78888,7 @@ var MapOverlay = class _MapOverlay {
       zoom: zoom ?? DEFAULT_ZOOM,
       latitude: center3?.lat ?? 0,
       longitude: center3?.lng ?? 0,
-      bearing: (heading || rotation) ?? 0,
+      bearing: heading,
       pitch: tilt ?? 0,
       maxZoom: MAX_ZOOM
     };
@@ -78757,7 +78932,7 @@ var MapOverlay = class _MapOverlay {
     if (this._blueprint) {
       staticLayers = new OverlayStaticLayerBuilder(this._context.apiUrl, this._context.apiKey, this._levelId).setLayers(this._context.staticLayers).setSurroundings(this._surroundings).build();
     }
-    return [dynamicLayer, ...staticLayers];
+    return [...staticLayers, dynamicLayer];
   }
   rebuildLayers() {
     this._deck.setProps({ layers: this.createLayers() });
@@ -78835,7 +79010,7 @@ var MapOverlay = class _MapOverlay {
       this.rebuildLayers();
     }
   }
-  normalizeShapeInstance(shape) {
+  static normalizeShapeInstance(shape) {
     const DEFAULT_WIDTH_METERS2 = 6;
     const type = shape.type;
     const widthMeters = type.widthInMeters != null && type.widthInMeters > 0 ? type.widthInMeters : DEFAULT_WIDTH_METERS2;
@@ -78855,6 +79030,10 @@ var MapOverlay = class _MapOverlay {
       rotationRadians: RotationUtils.normalizeRadians(shape.rotationRadians ?? 0)
     };
   }
+  static convertHeading(heading) {
+    heading = heading % 360;
+    return (360 - heading) % 360;
+  }
   //#endregion
   //#region Public methods
   /**
@@ -78875,14 +79054,14 @@ var MapOverlay = class _MapOverlay {
   }
   //#region Getters and Setters
   setContext(context) {
-    const { center: center3, defaultLevelId, rotation } = context;
+    const { center: center3, defaultLevelId, heading } = context;
     this._context = context;
     this._levelId = defaultLevelId;
     this._viewState = {
       ...this._viewState,
       latitude: center3.lat ?? 0,
       longitude: center3.lng ?? 0,
-      bearing: rotation ?? this._viewState.bearing ?? 0
+      bearing: _MapOverlay.convertHeading(heading)
     };
     this._deck.setProps({ viewState: this._viewState });
     this.rebuildLayers();
@@ -78944,17 +79123,17 @@ var MapOverlay = class _MapOverlay {
     this._centerChangedEvent.emit(center3);
   }
   getHeading() {
-    return this._viewState.bearing ?? 0;
+    return _MapOverlay.convertHeading(this._viewState.bearing ?? 0);
   }
   setHeading(heading) {
-    this.applyViewState({ ...this._viewState, bearing: heading });
+    this.applyViewState({ ...this._viewState, bearing: _MapOverlay.convertHeading(heading) });
     this._headingChangedEvent.emit(heading);
   }
   getShapes() {
     return this._shapes;
   }
   setShapes(shapes) {
-    this._shapes = shapes.map((shape) => this.normalizeShapeInstance(shape));
+    this._shapes = shapes.map((shape) => _MapOverlay.normalizeShapeInstance(shape));
     if (this._selectedShapeId && !this._shapes.some((s2) => s2.id === this._selectedShapeId)) {
       this._selectedShapeId = null;
     }