@deck.gl/widgets 9.1.4 → 9.1.5

package/src/screenshot-widget.tsx

@@ -0,0 +1,91 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+/* global document */
+import {WidgetImpl, WidgetImplProps} from './widget-impl';
+import {h, render} from 'preact';
+import {IconButton} from './components';
+import type {WidgetPlacement} from '@deck.gl/core';
+
+/** Properties for the ScreenshotWidget */
+export type ScreenshotWidgetProps = WidgetImplProps & {
+  /** Widget positioning within the view. Default 'top-left'. */
+  placement?: WidgetPlacement;
+  /** Tooltip message */
+  label?: string;
+  /** Filename to save to */
+  filename?: string;
+  /** Image format */
+  imageFormat?: 'image/png' | 'image/jpeg';
+  /** Callback, if defined user overrides the capture logic */
+  onCapture?: (widget: ScreenshotWidget) => void;
+};
+
+/**
+ * A button widget that captures a screenshot of the current canvas and downloads it as a (png) file.
+ * @note only captures canvas contents, not HTML DOM or CSS styles
+ */
+export class ScreenshotWidget extends WidgetImpl<ScreenshotWidgetProps> {
+  static defaultProps: Required<ScreenshotWidgetProps> = {
+    ...WidgetImpl.defaultProps,
+    id: 'screenshot',
+    placement: 'top-left',
+    label: 'Screenshot',
+    filename: 'screenshot.png',
+    imageFormat: 'image/png',
+    onCapture: undefined!
+  };
+
+  className = 'deck-widget-screenshot';
+  placement: WidgetPlacement = 'top-left';
+
+  constructor(props: ScreenshotWidgetProps = {}) {
+    super({...ScreenshotWidget.defaultProps, ...props});
+    this.placement = props.placement ?? this.placement;
+  }
+
+  setProps(props: Partial<ScreenshotWidgetProps>) {
+    this.placement = props.placement ?? this.placement;
+    super.setProps(props);
+  }
+
+  onRenderHTML() {
+    const element = this.element;
+    if (!element) return;
+    render(
+      <IconButton
+        className="deck-widget-camera"
+        label={this.props.label}
+        onClick={this.handleClick.bind(this)}
+      />,
+      element
+    );
+  }
+
+  handleClick() {
+    // Allow user to override the capture logic
+    if (this.props.onCapture) {
+      this.props.onCapture(this);
+      return;
+    }
+    const dataURL = this.captureScreenToDataURL(this.props.imageFormat);
+    if (dataURL) {
+      this.downloadDataURL(dataURL, this.props.filename);
+    }
+  }
+
+  /** @note only captures canvas contents, not HTML DOM or CSS styles */
+  captureScreenToDataURL(imageFormat: string): string | undefined {
+    const canvas = this.deck?.getCanvas();
+    return canvas?.toDataURL(imageFormat);
+  }
+
+  /** Download a data URL */
+  downloadDataURL(dataURL: string, filename: string): void {
+    const link = document.createElement('a');
+    link.href = dataURL;
+    link.download = filename;
+    link.click();
+  }
+}

package/src/stylesheet.css

@@ -147,3 +147,15 @@
     url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 26 26" fill="black"> wBox="0 0 26 26" fill="none"><path d="M7.89332 13.8866C7.64334 13.8866 7.43196 13.8 7.25918 13.6268C7.08639 13.4535 7 13.2416 7 12.9909C7 12.7403 7.08639 12.5291 7.25918 12.3575C7.43196 12.1858 7.64334 12.1 7.89332 12.1H18.099C18.349 12.1 18.5617 12.1866 18.737 12.3598C18.9123 12.5331 19 12.745 19 12.9957C19 13.2463 18.9123 13.4575 18.737 13.6291C18.5617 13.8008 18.349 13.8866 18.099 13.8866H7.89332Z"/></svg>')
   );
 }
+
+/* Screenshot styles */
+.deck-widget.deck-widget-screenshot button.deck-widget-camera .deck-widget-icon {
+  mask-image: var(
+    --icon-camera,
+    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="black"><path d="M480-260q75 0 127.5-52.5T660-440q0-75-52.5-127.5T480-620q-75 0-127.5 52.5T300-440q0 75 52.5 127.5T480-260Zm0-80q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29ZM160-120q-33 0-56.5-23.5T80-200v-480q0-33 23.5-56.5T160-760h126l74-80h240l74 80h126q33 0 56.5 23.5T880-680v480q0 33-23.5 56.5T800-120H160Zm0-80h640v-480H638l-73-80H395l-73 80H160v480Zm320-240Z"/></svg>')
+  );
+  -webkit-mask-image: var(
+    --icon-camera,
+    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="black"><path d="M480-260q75 0 127.5-52.5T660-440q0-75-52.5-127.5T480-620q-75 0-127.5 52.5T300-440q0 75 52.5 127.5T480-260Zm0-80q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29ZM160-120q-33 0-56.5-23.5T80-200v-480q0-33 23.5-56.5T160-760h126l74-80h240l74 80h126q33 0 56.5 23.5T880-680v480q0 33-23.5 56.5T800-120H160Zm0-80h640v-480H638l-73-80H395l-73 80H160v480Zm320-240Z"/></svg>')
+  );
+}

package/src/widget-impl.ts

@@ -0,0 +1,88 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+/* global document */
+import {_deepEqual, _applyStyles, _removeStyles} from '@deck.gl/core';
+import type {Deck, Widget} from '@deck.gl/core';
+
+export type WidgetImplProps = {
+  id?: string;
+  /** CSS inline style overrides. */
+  style?: Partial<CSSStyleDeclaration>;
+  /** Additional CSS class. */
+  className?: string;
+};
+export abstract class WidgetImpl<PropsT extends WidgetImplProps> implements Widget<PropsT> {
+  id: string;
+  props: Required<PropsT>;
+
+  deck?: Deck<any>;
+  element?: HTMLDivElement;
+
+  static defaultProps: Required<WidgetImplProps> = {
+    id: 'widget',
+    style: {},
+    className: ''
+  };
+
+  abstract className: Required<string>;
+
+  constructor(props: Required<PropsT>) {
+    this.id = props.id || 'widget';
+    this.props = props;
+  }
+
+  abstract onRenderHTML(): void;
+
+  onAdd({deck}: {deck: Deck<any>}): HTMLDivElement {
+    this.deck = deck;
+    const {style, className} = this.props;
+    const el = this._createRootElement({
+      widgetClassName: this.className,
+      className,
+      style
+    });
+    this.element = el;
+    this.onRenderHTML();
+    return this.element;
+  }
+
+  onRemove() {
+    this.deck = undefined;
+    this.element = undefined;
+  }
+
+  setProps(props: Partial<PropsT>) {
+    const oldProps = this.props;
+    const el = this.element;
+    if (el) {
+      if (oldProps.className !== props.className) {
+        if (oldProps.className) el.classList.remove(oldProps.className);
+        if (props.className) el.classList.add(props.className);
+      }
+
+      if (!_deepEqual(oldProps.style, props.style, 1)) {
+        _removeStyles(el, oldProps.style);
+        _applyStyles(el, props.style);
+      }
+    }
+
+    Object.assign(this.props, props);
+    this.onRenderHTML();
+  }
+
+  _createRootElement(props: {
+    widgetClassName: string;
+    className?: string;
+    style?: Partial<CSSStyleDeclaration>;
+  }) {
+    const {widgetClassName, className, style} = props;
+    const element = document.createElement('div');
+    ['deck-widget', widgetClassName, className]
+      .filter((cls): cls is string => typeof cls === 'string' && cls.length > 0)
+      .forEach(className => element.classList.add(className));
+    _applyStyles(element, style);
+    return element;
+  }
+}