@deck.gl/widgets 9.0.0-beta.9 → 9.0.1

package/dist/compass-widget.d.ts

@@ -0,0 +1,46 @@
+import type { Deck, Viewport, Widget, WidgetPlacement } from '@deck.gl/core';
+interface CompassWidgetProps {
+    id: string;
+    placement?: WidgetPlacement;
+    /**
+     * View to attach to and interact with. Required when using multiple views.
+     */
+    viewId?: string | null;
+    /**
+     * Tooltip message.
+     */
+    label?: string;
+    /**
+     * Bearing and pitch reset transition duration in ms.
+     */
+    transitionDuration?: number;
+    /**
+     * CSS inline style overrides.
+     */
+    style?: Partial<CSSStyleDeclaration>;
+    /**
+     * Additional CSS class.
+     */
+    className?: string;
+}
+export declare class CompassWidget implements Widget<CompassWidgetProps> {
+    id: string;
+    props: CompassWidgetProps;
+    placement: WidgetPlacement;
+    viewId?: string | null;
+    viewport?: Viewport;
+    deck?: Deck;
+    element?: HTMLDivElement;
+    constructor(props: CompassWidgetProps);
+    setProps(props: Partial<CompassWidgetProps>): void;
+    onViewportChange(viewport: any): void;
+    onAdd({ deck }: {
+        deck: Deck;
+    }): HTMLDivElement;
+    getRotation(): number[];
+    update(): void;
+    onRemove(): void;
+    handleCompassReset(): void;
+}
+export {};
+//# sourceMappingURL=compass-widget.d.ts.map

package/dist/compass-widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"compass-widget.d.ts","sourceRoot":"","sources":["../src/compass-widget.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,eAAe,EAAC,MAAM,eAAe,CAAC;AAG3E,UAAU,kBAAkB;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;IACrC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,qBAAa,aAAc,YAAW,MAAM,CAAC,kBAAkB,CAAC;IAC9D,EAAE,SAAa;IACf,KAAK,EAAE,kBAAkB,CAAC;IAC1B,SAAS,EAAE,eAAe,CAAc;IACxC,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC9B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,OAAO,CAAC,EAAE,cAAc,CAAC;gBAEb,KAAK,EAAE,kBAAkB;IAUrC,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,kBAAkB,CAAC;IAI3C,gBAAgB,CAAC,QAAQ,KAAA;IAKzB,KAAK,CAAC,EAAC,IAAI,EAAC,EAAE;QAAC,IAAI,EAAE,IAAI,CAAA;KAAC,GAAG,cAAc;IAc3C,WAAW;IASX,MAAM;IAgCN,QAAQ;IAKR,kBAAkB;CAcnB"}

package/dist/compass-widget.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+/* global document */
+import { FlyToInterpolator, WebMercatorViewport, _GlobeViewport } from '@deck.gl/core';
+import { render } from 'preact';
+export class CompassWidget {
+    constructor(props) {
+        this.id = 'compass';
+        this.placement = 'top-left';
+        this.viewId = null;
+        this.id = props.id || 'compass';
+        this.viewId = props.viewId || null;
+        this.placement = props.placement || 'top-left';
+        props.transitionDuration = props.transitionDuration || 200;
+        props.label = props.label || 'Compass';
+        props.style = props.style || {};
+        this.props = props;
+    }
+    setProps(props) {
+        Object.assign(this.props, props);
+    }
+    onViewportChange(viewport) {
+        this.viewport = viewport;
+        this.update();
+    }
+    onAdd({ deck }) {
+        const { style, className } = this.props;
+        const element = document.createElement('div');
+        element.classList.add('deck-widget', 'deck-widget-compass');
+        if (className)
+            element.classList.add(className);
+        if (style) {
+            Object.entries(style).map(([key, value]) => element.style.setProperty(key, value));
+        }
+        this.deck = deck;
+        this.element = element;
+        this.update();
+        return element;
+    }
+    getRotation() {
+        if (this.viewport instanceof WebMercatorViewport) {
+            return [-this.viewport.bearing, this.viewport.pitch];
+        }
+        else if (this.viewport instanceof _GlobeViewport) {
+            return [0, Math.max(-80, Math.min(80, this.viewport.latitude))];
+        }
+        return [0, 0];
+    }
+    update() {
+        const [rz, rx] = this.getRotation();
+        const element = this.element;
+        if (!element) {
+            return;
+        }
+        const ui = (_jsx("div", { className: "deck-widget-button", style: { perspective: 100 }, children: _jsx("button", { type: "button", onClick: () => this.handleCompassReset(), label: this.props.label, style: { transform: `rotateX(${rx}deg)` }, children: _jsx("svg", { fill: "none", width: "100%", height: "100%", viewBox: "0 0 26 26", children: _jsxs("g", { transform: `rotate(${rz},13,13)`, children: [_jsx("path", { d: "M10 13.0001L12.9999 5L15.9997 13.0001H10Z", fill: "var(--icon-compass-north-color, #F05C44)" }), _jsx("path", { d: "M16.0002 12.9999L13.0004 21L10.0005 12.9999H16.0002Z", fill: "var(--icon-compass-south-color, #C2C2CC)" })] }) }) }) }));
+        render(ui, element);
+    }
+    onRemove() {
+        this.deck = undefined;
+        this.element = undefined;
+    }
+    handleCompassReset() {
+        const viewId = this.viewId || 'default-view';
+        if (this.viewport instanceof WebMercatorViewport) {
+            const nextViewState = {
+                ...this.viewport,
+                bearing: 0,
+                ...(this.getRotation()[0] === 0 ? { pitch: 0 } : {}),
+                transitionDuration: this.props.transitionDuration,
+                transitionInterpolator: new FlyToInterpolator()
+            };
+            // @ts-ignore Using private method temporary until there's a public one
+            this.deck._onViewStateChange({ viewId, viewState: nextViewState, interactionState: {} });
+        }
+    }
+}

package/dist/components.d.ts

@@ -1,2 +1,4 @@
 export declare const IconButton: (props: any) => import("preact").JSX.Element;
+export declare const ButtonGroup: (props: any) => import("preact").JSX.Element;
+export declare const GroupedIconButton: (props: any) => import("preact").JSX.Element;
 //# sourceMappingURL=components.d.ts.map

package/dist/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../src/components.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,8CActB,CAAC"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../src/components.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,8CActB,CAAC;AAEF,eAAO,MAAM,WAAW,8CAGvB,CAAC;AAEF,eAAO,MAAM,iBAAiB,8CAY7B,CAAC"}

package/dist/components.js

@@ -1,5 +1,13 @@
 import { jsx as _jsx } from "preact/jsx-runtime";
 export const IconButton = props => {
     const { className, label, onClick } = props;
-    return (_jsx("div", { className: "deck-widget-button-border", children: _jsx("button", { className: `deck-widget-button ${className}`, type: "button", onClick: onClick, title: label, children: _jsx("div", { className: "deck-widget-icon" }) }) }));
+    return (_jsx("div", { className: "deck-widget-button", children: _jsx("button", { className: `deck-widget-icon-button ${className}`, type: "button", onClick: onClick, title: label, children: _jsx("div", { className: "deck-widget-icon" }) }) }));
+};
+export const ButtonGroup = props => {
+    const { children, orientation } = props;
+    return _jsx("div", { className: `deck-widget-button-group ${orientation}`, children: children });
+};
+export const GroupedIconButton = props => {
+    const { className, label, onClick } = props;
+    return (_jsx("button", { className: `deck-widget-icon-button ${className}`, type: "button", onClick: onClick, title: label, children: _jsx("div", { className: "deck-widget-icon" }) }));
 };