@deck.gl-community/editable-layers 9.2.0-beta.2 → 9.2.0-beta.3

package/dist/index.cjs

@@ -52,6 +52,7 @@ __export(dist_exports, {
   DrawSquareFromCenterMode: () => DrawSquareFromCenterMode,
   DrawSquareMode: () => DrawSquareMode,
   DuplicateMode: () => DuplicateMode,
+  EditModeTrayWidget: () => EditModeTrayWidget,
   EditableGeoJsonLayer: () => EditableGeoJsonLayer,
   EditableH3ClusterLayer: () => EditableH3ClusterLayer,
   ElevatedEditHandleLayer: () => ElevatedEditHandleLayer,
@@ -778,6 +779,22 @@ var VS_CODE = `  outline_setUV(gl_Position);
 `;
 var FS_CODE = `  fragColor = outline_filterColor(fragColor);
 `;
+var OUTLINE_SHADOWMAP_PARAMETERS = {
+  blend: true,
+  blendColorSrcFactor: "one",
+  blendColorDstFactor: "one",
+  blendColorOperation: "max",
+  blendAlphaSrcFactor: "one",
+  blendAlphaDstFactor: "one",
+  blendAlphaOperation: "max",
+  depthWriteEnabled: false,
+  depthCompare: "always"
+};
+var OUTLINE_RENDER_PARAMETERS = {
+  blend: false,
+  depthWriteEnabled: false,
+  depthCompare: "always"
+};
 var defaultProps = {
   getZLevel: () => 0
 };
@@ -795,9 +812,11 @@ var PathOutlineLayer = class extends import_layers4.PathLayer {
   // @ts-expect-error PathLayer is missing LayerContext arg
   initializeState(context) {
     super.initializeState();
+    const outlineFramebuffer = context.device.createFramebuffer({
+      colorAttachments: ["rgba8unorm"]
+    });
     this.setState({
-      outlineFramebuffer: context.device.createFramebuffer({}),
-      dummyTexture: context.device.createTexture({ width: 1, height: 1 })
+      outlineFramebuffer
     });
     this.state.attributeManager.addInstanced({
       instanceZLevel: {
@@ -809,6 +828,7 @@ var PathOutlineLayer = class extends import_layers4.PathLayer {
   }
   // Override draw to add render module
   draw({ moduleParameters = {}, parameters, uniforms, context }) {
+    var _a;
     const {
       jointRounded,
       capRounded,
@@ -829,28 +849,35 @@ var PathOutlineLayer = class extends import_layers4.PathLayer {
       widthMinPixels,
       widthMaxPixels
     });
-    const { outlineFramebuffer, dummyTexture } = this.state;
+    const { outlineFramebuffer } = this.state;
+    if (context == null ? void 0 : context.viewport) {
+      const viewportWidth = Math.max(1, Math.ceil(context.viewport.width));
+      const viewportHeight = Math.max(1, Math.ceil(context.viewport.height));
+      outlineFramebuffer.resize({ width: viewportWidth, height: viewportHeight });
+    } else {
+      outlineFramebuffer.resize();
+    }
+    const shadowmapTexture = (_a = outlineFramebuffer.colorAttachments[0]) == null ? void 0 : _a.texture;
+    if (!shadowmapTexture) {
+      return;
+    }
     this.state.model.updateModuleSettings({
       outlineEnabled: true,
       outlineRenderShadowmap: true,
-      outlineShadowmap: dummyTexture
+      outlineShadowmap: shadowmapTexture
     });
     this.state.model.draw({
       uniforms: Object.assign({}, uniforms, {
         jointType: 0,
         widthScale: this.props.widthScale * 1.3
       }),
-      parameters: {
-        depthTest: false,
-        // Biggest value needs to go into buffer
-        blendEquation: import_constants2.GL.MAX
-      },
+      parameters: OUTLINE_SHADOWMAP_PARAMETERS,
       framebuffer: outlineFramebuffer
     });
     this.state.model.updateModuleSettings({
       outlineEnabled: true,
       outlineRenderShadowmap: false,
-      outlineShadowmap: outlineFramebuffer
+      outlineShadowmap: shadowmapTexture
     });
     this.state.model.draw({
       uniforms: Object.assign({}, uniforms, {
@@ -858,9 +885,7 @@ var PathOutlineLayer = class extends import_layers4.PathLayer {
         capType: Number(capRounded),
         widthScale: this.props.widthScale
       }),
-      parameters: {
-        depthTest: false
-      }
+      parameters: OUTLINE_RENDER_PARAMETERS
     });
   }
 };
@@ -5469,6 +5494,224 @@ var ElevatedEditHandleLayer = class extends import_core8.CompositeLayer {
 __publicField(ElevatedEditHandleLayer, "layerName", "ElevatedEditHandleLayer");
 __publicField(ElevatedEditHandleLayer, "defaultProps", defaultProps7);
 
+// dist/widgets/edit-mode-tray-widget.js
+var import_jsx_runtime = require("preact/jsx-runtime");
+var import_preact = require("preact");
+var import_core9 = require("@deck.gl/core");
+var ROOT_STYLE = {
+  position: "absolute",
+  display: "flex",
+  pointerEvents: "auto",
+  userSelect: "none",
+  zIndex: "99"
+};
+var TRAY_BASE_STYLE = {
+  display: "flex",
+  gap: "6px",
+  background: "rgba(36, 40, 41, 0.88)",
+  borderRadius: "999px",
+  padding: "6px",
+  alignItems: "center",
+  justifyContent: "center",
+  boxShadow: "0 4px 12px rgba(0, 0, 0, 0.25)"
+};
+var BUTTON_BASE_STYLE = {
+  appearance: "none",
+  background: "transparent",
+  border: "none",
+  color: "#f0f0f0",
+  width: "34px",
+  height: "34px",
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  borderRadius: "50%",
+  cursor: "pointer",
+  padding: "0",
+  transition: "background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease"
+};
+var BUTTON_ACTIVE_STYLE = {
+  background: "#0071e3",
+  color: "#ffffff",
+  boxShadow: "0 0 0 2px rgba(255, 255, 255, 0.35)"
+};
+var BUTTON_LABEL_STYLE = {
+  fontSize: "10px",
+  marginTop: "2px",
+  lineHeight: "12px"
+};
+var _EditModeTrayWidget = class extends import_core9.Widget {
+  placement = "top-left";
+  className = "deck-widget-edit-mode-tray";
+  layout = "vertical";
+  selectedModeId = null;
+  deck = null;
+  appliedCustomClassName = null;
+  constructor(props = {}) {
+    super({ ..._EditModeTrayWidget.defaultProps, ...props });
+    this.placement = props.placement ?? _EditModeTrayWidget.defaultProps.placement;
+    this.layout = props.layout ?? _EditModeTrayWidget.defaultProps.layout;
+    this.selectedModeId = this.resolveSelectedModeId(props.modes ?? [], props);
+  }
+  setProps(props) {
+    if (props.placement !== void 0) {
+      this.placement = props.placement;
+    }
+    if (props.layout !== void 0) {
+      this.layout = props.layout;
+    }
+    const modes = props.modes ?? this.props.modes ?? [];
+    this.selectedModeId = this.resolveSelectedModeId(modes, props);
+    super.setProps(props);
+    this.renderTray();
+  }
+  onAdd({ deck }) {
+    this.deck = deck;
+  }
+  onRemove() {
+    this.deck = null;
+    const root = this.rootElement;
+    if (root) {
+      (0, import_preact.render)(null, root);
+    }
+    this.rootElement = null;
+  }
+  onRenderHTML(rootElement) {
+    const style = { ...ROOT_STYLE, ...this.props.style };
+    Object.assign(rootElement.style, style);
+    if (this.appliedCustomClassName && this.appliedCustomClassName !== this.props.className) {
+      rootElement.classList.remove(this.appliedCustomClassName);
+      this.appliedCustomClassName = null;
+    }
+    if (this.props.className) {
+      rootElement.classList.add(this.props.className);
+      this.appliedCustomClassName = this.props.className;
+    }
+    rootElement.classList.add(this.className);
+    this.renderTray();
+  }
+  renderTray() {
+    const root = this.rootElement;
+    if (!root) {
+      return;
+    }
+    const modes = this.props.modes ?? [];
+    const selectedId = this.selectedModeId;
+    const direction = this.layout === "horizontal" ? "row" : "column";
+    const trayStyle = {
+      ...TRAY_BASE_STYLE,
+      flexDirection: direction
+    };
+    const stopEvent = (event) => {
+      event.stopPropagation();
+      if (typeof event.stopImmediatePropagation === "function") {
+        event.stopImmediatePropagation();
+      }
+    };
+    const ui = (0, import_jsx_runtime.jsx)("div", { style: trayStyle, onPointerDown: stopEvent, onPointerMove: stopEvent, onPointerUp: stopEvent, onMouseDown: stopEvent, onMouseMove: stopEvent, onMouseUp: stopEvent, onTouchStart: stopEvent, onTouchMove: stopEvent, onTouchEnd: stopEvent, children: modes.map((option, index) => {
+      const id = this.getModeId(option, index);
+      const active = id === selectedId;
+      const label = option.label ?? "";
+      const title = option.title ?? label;
+      const buttonStyle = {
+        ...BUTTON_BASE_STYLE,
+        ...active ? BUTTON_ACTIVE_STYLE : {}
+      };
+      return (0, import_jsx_runtime.jsxs)("button", { type: "button", title: title || void 0, "aria-pressed": active, style: buttonStyle, onClick: (event) => {
+        stopEvent(event);
+        this.handleSelect(option, id);
+      }, children: [option.icon, label ? (0, import_jsx_runtime.jsx)("span", { style: BUTTON_LABEL_STYLE, children: label }) : null] }, id);
+    }) });
+    (0, import_preact.render)(ui, root);
+  }
+  handleSelect(option, id) {
+    var _a, _b;
+    if (this.selectedModeId !== id) {
+      this.selectedModeId = id;
+      this.renderTray();
+    }
+    (_b = (_a = this.props).onSelectMode) == null ? void 0 : _b.call(_a, {
+      id,
+      mode: option.mode,
+      option
+    });
+  }
+  resolveSelectedModeId(modes, props) {
+    var _a;
+    if (props.selectedModeId !== void 0) {
+      return props.selectedModeId;
+    }
+    const activeMode = props.activeMode ?? ((_a = this.props) == null ? void 0 : _a.activeMode) ?? null;
+    if (activeMode) {
+      const match = this.findOptionByMode(modes, activeMode);
+      if (match) {
+        return this.getModeId(match.option, match.index);
+      }
+    }
+    if (this.selectedModeId) {
+      const existing = this.findOptionById(modes, this.selectedModeId);
+      if (existing) {
+        return this.selectedModeId;
+      }
+    }
+    const first = modes[0];
+    return first ? this.getModeId(first, 0) : null;
+  }
+  findOptionByMode(modes, activeMode) {
+    for (let index = 0; index < modes.length; index++) {
+      const option = modes[index];
+      if (option.mode === activeMode) {
+        return { option, index };
+      }
+      if (this.isSameMode(option.mode, activeMode)) {
+        return { option, index };
+      }
+    }
+    return null;
+  }
+  findOptionById(modes, id) {
+    for (let index = 0; index < modes.length; index++) {
+      if (this.getModeId(modes[index], index) === id) {
+        return { option: modes[index], index };
+      }
+    }
+    return null;
+  }
+  getModeId(option, index) {
+    if (option.id) {
+      return option.id;
+    }
+    const mode = option.mode;
+    if (mode) {
+      if (typeof mode === "function" && mode.name) {
+        return mode.name;
+      }
+      if (mode && mode.constructor && mode.constructor.name) {
+        return mode.constructor.name;
+      }
+    }
+    return `mode-${index}`;
+  }
+  isSameMode(modeA, modeB) {
+    if (modeA === modeB) {
+      return true;
+    }
+    const constructorA = modeA == null ? void 0 : modeA.constructor;
+    const constructorB = modeB == null ? void 0 : modeB.constructor;
+    return Boolean(constructorA && constructorB && constructorA === constructorB);
+  }
+};
+var EditModeTrayWidget = _EditModeTrayWidget;
+__publicField(EditModeTrayWidget, "defaultProps", {
+  id: "edit-mode-tray",
+  placement: "top-left",
+  layout: "vertical",
+  modes: [],
+  style: {},
+  className: ""
+});
+
 // dist/edit-modes/resize-circle-mode.js
 var import_nearest_point_on_line2 = __toESM(require("@turf/nearest-point-on-line"), 1);
 var import_helpers17 = require("@turf/helpers");