@deck.gl-community/graph-layers 9.0.2 → 9.1.0-beta.2

package/dist/layouts/gpu-force/gpu-force-layout.js

@@ -1,18 +1,20 @@
 // deck.gl-community
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
-import { BaseLayout } from "../../core/base-layout.js";
+import { GraphLayout } from "../../core/graph-layout.js";
 import { EDGE_TYPE } from "../../core/constants.js";
-const defaultOptions = {
-    alpha: 0.3,
-    resumeAlpha: 0.1,
-    nBodyStrength: -900,
-    nBodyDistanceMin: 100,
-    nBodyDistanceMax: 400,
-    getCollisionRadius: 0
-};
-// TODO: this layout should be updated with the organizational and logic improvements made in d3-force
-export class GPUForceLayout extends BaseLayout {
+/**
+ * @todo this layout should be updated with the organizational and logic improvements made in d3-force
+ */
+export class GPUForceLayout extends GraphLayout {
+    static defaultOptions = {
+        alpha: 0.3,
+        resumeAlpha: 0.1,
+        nBodyStrength: -900,
+        nBodyDistanceMin: 100,
+        nBodyDistanceMax: 400,
+        getCollisionRadius: 0
+    };
     _name = 'GPU';
     _d3Graph;
     _nodeMap;
@@ -20,13 +22,14 @@ export class GPUForceLayout extends BaseLayout {
     _graph;
     _worker;
     _callbacks;
-    constructor(options) {
-        super(options);
-        this._name = 'GPU';
-        this._options = {
-            ...defaultOptions,
+    constructor(options = {}) {
+        const _options = {
+            ...GPUForceLayout.defaultOptions,
             ...options
         };
+        super(_options);
+        this._name = 'GPU';
+        this._options = _options;
         // store graph and prepare internal data
         this._d3Graph = { nodes: [], edges: [] };
         this._nodeMap = {};
@@ -82,8 +85,7 @@ export class GPUForceLayout extends BaseLayout {
             this._worker.terminate();
         }
         this._worker = new Worker(new URL('./worker.js', import.meta.url).href);
-        const { alpha, nBodyStrength, nBodyDistanceMin, nBodyDistanceMax, getCollisionRadius } = this
-            ._options;
+        const { alpha, nBodyStrength, nBodyDistanceMin, nBodyDistanceMax, getCollisionRadius } = this._options;
         this._worker.postMessage({
             nodes: this._d3Graph.nodes,
             edges: this._d3Graph.edges,

package/dist/layouts/gpu-force/worker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"worker.d.ts","sourceRoot":"","sources":["../../../src/layouts/gpu-force/worker.ts"],"names":[],"mappings":""}
+{"version":3,"file":"worker.d.ts","sourceRoot":"","sources":["../../../src/layouts/gpu-force/worker.js"],"names":[],"mappings":""}

package/dist/layouts/simple-layout.d.ts

@@ -0,0 +1,42 @@
+import { GraphLayout, GraphLayoutOptions } from "../core/graph-layout.js";
+import { Node } from "../graph/node.js";
+import { Graph } from "../graph/graph.js";
+export type SimpleLayoutOptions = GraphLayoutOptions & {
+    /** The accessor lets the application supply the position ([x, y]) of each node.
+     * @example
+      ```js
+      <GraphGL
+        {...otherProps}
+        layout={
+          new SimpleLayout({
+            nodePositionAccessor: node => [
+              node.getPropertyValue('x'),
+              node.getPropertyValue('y'),
+            ]
+          })
+        }
+      />
+      ```
+    */
+    nodePositionAccessor?: (node: Node) => [number, number];
+};
+/** A basic layout where the application controls positions of each node */
+export declare class SimpleLayout extends GraphLayout<SimpleLayoutOptions> {
+    static defaultOptions: Required<SimpleLayoutOptions>;
+    protected readonly _name = "SimpleLayout";
+    protected _graph: Graph | null;
+    protected _nodeMap: Record<string, Node>;
+    protected _nodePositionMap: Record<string, (node: Node) => [number, number]>;
+    constructor(options?: SimpleLayoutOptions);
+    initializeGraph(graph: Graph): void;
+    _notifyLayoutComplete(): void;
+    start(): void;
+    update(): void;
+    resume(): void;
+    updateGraph(graph: Graph): void;
+    setNodePositionAccessor: (accessor: any) => void;
+    getNodePosition: (node: any) => any;
+    getEdgePosition: (edge: any) => any;
+    lockNodePosition: (node: any, x: any, y: any) => void;
+}
+//# sourceMappingURL=simple-layout.d.ts.map

package/dist/layouts/simple-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"simple-layout.d.ts","sourceRoot":"","sources":["../../src/layouts/simple-layout.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,WAAW,EAAE,kBAAkB,EAAC,gCAA6B;AACrE,OAAO,EAAC,IAAI,EAAC,yBAAsB;AAEnC,OAAO,EAAC,KAAK,EAAC,0BAAuB;AAErC,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,GAAG;IACrD;;;;;;;;;;;;;;;MAeE;IACF,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACzD,CAAC;AAEF,2EAA2E;AAC3E,qBAAa,YAAa,SAAQ,WAAW,CAAC,mBAAmB,CAAC;IAChE,MAAM,CAAC,cAAc,EAAE,QAAQ,CAAC,mBAAmB,CAAC,CAGlD;IAEF,SAAS,CAAC,QAAQ,CAAC,KAAK,kBAAkB;IAC1C,SAAS,CAAC,MAAM,EAAE,KAAK,GAAG,IAAI,CAAQ;IACtC,SAAS,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,CAAM;IAC9C,SAAS,CAAC,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAM;gBAEtE,OAAO,GAAE,mBAAwB;IAI7C,eAAe,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAInC,qBAAqB,IAAI,IAAI;IAM7B,KAAK,IAAI,IAAI;IAIb,MAAM,IAAI,IAAI;IAId,MAAM,IAAI,IAAI;IAId,WAAW,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAY/B,uBAAuB,0BAErB;IAEF,eAAe,iBAAoD,GAAG,CAAC;IAEvE,eAAe,iBAQR,GAAG,CACR;IAEF,gBAAgB,sCAId;CACH"}

package/dist/layouts/{simple-layout/simple-layout.js → simple-layout.js}

@@ -1,18 +1,19 @@
 // deck.gl-community
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
-import { BaseLayout } from "../../core/base-layout.js";
-import { EDGE_TYPE } from "../../core/constants.js";
-const defaultOptions = {
-    nodePositionAccessor: (node) => [node.getPropertyValue('x'), node.getPropertyValue('y')]
-};
-export class SimpleLayout extends BaseLayout {
+import { GraphLayout } from "../core/graph-layout.js";
+import { EDGE_TYPE } from "../core/constants.js";
+/** A basic layout where the application controls positions of each node */
+export class SimpleLayout extends GraphLayout {
+    static defaultOptions = {
+        nodePositionAccessor: (node) => [node.getPropertyValue('x'), node.getPropertyValue('y')]
+    };
     _name = 'SimpleLayout';
     _graph = null;
     _nodeMap = {};
     _nodePositionMap = {};
     constructor(options = {}) {
-        super({ ...defaultOptions, ...options });
+        super({ ...SimpleLayout.defaultOptions, ...options });
     }
     initializeGraph(graph) {
         this.updateGraph(graph);

package/dist/loaders/create-graph.d.ts

@@ -0,0 +1,13 @@
+import { Graph } from "../graph/graph.js";
+/**
+ * @deprecated Use `new Graph(name, nodes, edges)`
+ * Create a graph from a list of Nodes and edges
+ */
+export declare function createGraph(props: {
+    name: any;
+    nodes: any;
+    edges: any;
+    nodeParser: any;
+    edgeParser: any;
+}): Graph;
+//# sourceMappingURL=create-graph.d.ts.map

package/dist/loaders/create-graph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-graph.d.ts","sourceRoot":"","sources":["../../src/loaders/create-graph.ts"],"names":[],"mappings":"AAMA,OAAO,EAAC,KAAK,EAAC,0BAAuB;AAErC;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE;IAAC,IAAI,MAAC;IAAC,KAAK,MAAC;IAAC,KAAK,MAAC;IAAC,UAAU,MAAC;IAAC,UAAU,MAAA;CAAC,SA8B9E"}

package/dist/{utils → loaders}/create-graph.js

@@ -1,10 +1,15 @@
 // deck.gl-community
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
-import { Edge } from "../core/edge.js";
-import { Node } from "../core/node.js";
-import { Graph } from "../core/graph.js";
-export function createGraph({ name, nodes, edges, nodeParser, edgeParser }) {
+import { Edge } from "../graph/edge.js";
+import { Node } from "../graph/node.js";
+import { Graph } from "../graph/graph.js";
+/**
+ * @deprecated Use `new Graph(name, nodes, edges)`
+ * Create a graph from a list of Nodes and edges
+ */
+export function createGraph(props) {
+    const { name, nodes, edges, nodeParser, edgeParser } = props;
     // create a new empty graph
     const graph = new Graph();
     const graphName = name || Date.now();

package/dist/loaders/edge-parsers.d.ts

@@ -1,7 +1,3 @@
-export declare function basicEdgeParser(edge: any): {
-    id: any;
-    directed: any;
-    sourceId: any;
-    targetId: any;
-};
+import type { EdgeOptions } from "../graph/edge.js";
+export declare function basicEdgeParser(edge: any): Omit<EdgeOptions, 'data'>;
 //# sourceMappingURL=edge-parsers.d.ts.map

package/dist/loaders/edge-parsers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"edge-parsers.d.ts","sourceRoot":"","sources":["../../src/loaders/edge-parsers.ts"],"names":[],"mappings":"AAMA,wBAAgB,eAAe,CAAC,IAAI,KAAA;;;;;EAcnC"}
+{"version":3,"file":"edge-parsers.d.ts","sourceRoot":"","sources":["../../src/loaders/edge-parsers.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,WAAW,EAAC,yBAAsB;AAG/C,wBAAgB,eAAe,CAAC,IAAI,EAAE,GAAG,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,CAcpE"}

package/dist/loaders/json-loader.js

@@ -1,7 +1,7 @@
 // deck.gl-community
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
-import { createGraph } from "../utils/create-graph.js";
+import { createGraph } from "./create-graph.js";
 import { basicNodeParser } from "./node-parsers.js";
 import { basicEdgeParser } from "./edge-parsers.js";
 import { log } from "../utils/log.js";

package/dist/loaders/node-parsers.d.ts

@@ -1,4 +1,3 @@
-export declare function basicNodeParser(node: any): {
-    id: any;
-};
+import type { NodeOptions } from "../graph/node.js";
+export declare function basicNodeParser(node: any): Pick<NodeOptions, 'id'>;
 //# sourceMappingURL=node-parsers.d.ts.map

package/dist/loaders/node-parsers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"node-parsers.d.ts","sourceRoot":"","sources":["../../src/loaders/node-parsers.ts"],"names":[],"mappings":"AAMA,wBAAgB,eAAe,CAAC,IAAI,KAAA;;EAMnC"}
+{"version":3,"file":"node-parsers.d.ts","sourceRoot":"","sources":["../../src/loaders/node-parsers.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,WAAW,EAAC,yBAAsB;AAG/C,wBAAgB,eAAe,CAAC,IAAI,EAAE,GAAG,GAAG,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,CAMlE"}

package/dist/loaders/simple-json-graph-loader.d.ts

@@ -0,0 +1,12 @@
+/** @deprecated Use loadSimpleJSONGraph */
+export declare const JSONLoader: ({ json, nodeParser, edgeParser }: {
+    json: any;
+    nodeParser: any;
+    edgeParser: any;
+}) => import("..").Graph;
+/** A loader for a simple graph format  */
+export declare function loadSimpleJSONGraph(json: Record<string, unknown>, options?: {
+    nodeParser: any;
+    edgeParser: any;
+}): import("..").Graph;
+//# sourceMappingURL=simple-json-graph-loader.d.ts.map

package/dist/loaders/simple-json-graph-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"simple-json-graph-loader.d.ts","sourceRoot":"","sources":["../../src/loaders/simple-json-graph-loader.ts"],"names":[],"mappings":"AASA,0CAA0C;AAC1C,eAAO,MAAM,UAAU;;;;wBAC8B,CAAC;AAEtD,0CAA0C;AAC1C,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC7B,OAAO,CAAC,EAAE;IAAC,UAAU,MAAC;IAAC,UAAU,MAAA;CAAC,sBAWnC"}

package/dist/loaders/simple-json-graph-loader.js

@@ -0,0 +1,20 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { createGraph } from "./create-graph.js";
+import { log } from "../utils/log.js";
+import { basicNodeParser } from "./node-parsers.js";
+import { basicEdgeParser } from "./edge-parsers.js";
+/** @deprecated Use loadSimpleJSONGraph */
+export const JSONLoader = ({ json, nodeParser, edgeParser }) => loadSimpleJSONGraph(json, { nodeParser, edgeParser });
+/** A loader for a simple graph format  */
+export function loadSimpleJSONGraph(json, options) {
+    const { nodeParser = basicNodeParser, edgeParser = basicEdgeParser } = options;
+    const { name = 'default', nodes, edges } = json;
+    if (!nodes) {
+        log.error('Invalid graph: nodes is missing.')();
+        return null;
+    }
+    const graph = createGraph({ name, nodes, edges, nodeParser, edgeParser });
+    return graph;
+}

package/dist/loaders/table-graph-loader.d.ts

@@ -0,0 +1,17 @@
+import type { NodeOptions } from "../graph/node.js";
+import type { EdgeOptions } from "../graph/edge.js";
+import { Graph } from "../graph/graph.js";
+export type ParseGraphOptions = {
+    nodeIdField?: string;
+    edgeSourceField?: string;
+    edgeTargetField?: string;
+    edgeDirectedField?: string;
+    edgeDirected?: boolean;
+    nodeParser?: (nodeRow: any) => NodeOptions;
+    edgeParser?: (edgeRow: any) => EdgeOptions;
+};
+export declare function tableGraphLoader(tables: {
+    nodes: any[];
+    edges: any[];
+}, options?: ParseGraphOptions): Graph;
+//# sourceMappingURL=table-graph-loader.d.ts.map

package/dist/loaders/table-graph-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-graph-loader.d.ts","sourceRoot":"","sources":["../../src/loaders/table-graph-loader.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,WAAW,EAAC,yBAAsB;AAC/C,OAAO,KAAK,EAAC,WAAW,EAAC,yBAAsB;AAG/C,OAAO,EAAC,KAAK,EAAC,0BAAuB;AAIrC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,WAAW,CAAC;IAC3C,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,WAAW,CAAC;CAC5C,CAAC;AAqBF,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE;IAAC,KAAK,EAAE,GAAG,EAAE,CAAC;IAAC,KAAK,EAAE,GAAG,EAAE,CAAA;CAAC,EACpC,OAAO,CAAC,EAAE,iBAAiB,GAC1B,KAAK,CAuDP"}

package/dist/loaders/table-graph-loader.js

@@ -0,0 +1,91 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { Edge } from "../graph/edge.js";
+import { Node } from "../graph/node.js";
+import { Graph } from "../graph/graph.js";
+import { log } from "../utils/log.js";
+const defaultParseGraphOptions = {
+    nodeIdField: 'id',
+    edgeSourceField: 'sourceId',
+    edgeTargetField: 'targetId',
+    edgeDirectedField: undefined,
+    edgeDirected: false
+    // nodeParser: (nodeRow: any, options: ParseGraphOptions) => ({id: nodeRow.name, data: nodeRow}),
+    // edgeParser: (edgeRow: any, nodeIndexMap, options: ParseGraphOptions)=> {
+    //   const sourceNodeId = edge[options.edgeSourceField];
+    //   const targetNodeId = edge[options.edgeTargetField];
+    //   return {
+    //     id: `${sourceNodeId}-${targetNodeId}`,
+    //     sourceId: nodeIndexMap[sourceNodeId],
+    //     targetId: nodeIndexMap[targetNodeId],
+    //     directed: true
+    //   };
+    // };
+};
+export function tableGraphLoader(tables, options) {
+    options = { ...defaultParseGraphOptions, ...options };
+    const { nodes, edges } = tables;
+    // const nodeIndexMap = nodes.reduce((res, node, idx) => {
+    //   res[idx] = node[options.nodeIdField];
+    //   return res;
+    // }, {});
+    function defaultNodeParser(nodeRow) {
+        return { id: nodeRow[options.nodeIdField] };
+    }
+    function defaultEdgeParser(edgeRow) {
+        const sourceNodeId = edgeRow[options.edgeSourceField];
+        const targetNodeId = edgeRow[options.edgeTargetField];
+        return {
+            id: edgeRow.id || `${sourceNodeId}-${targetNodeId}`,
+            sourceId: sourceNodeId,
+            targetId: targetNodeId,
+            directed: options.edgeDirected
+        };
+    }
+    const nodeParser = options.nodeParser || defaultNodeParser;
+    const edgeParser = options.edgeParser || defaultEdgeParser;
+    // add nodes
+    if (!nodes) {
+        log.error('Invalid graph: nodes is missing.')();
+        return null;
+    }
+    const glNodes = nodes.map((node) => {
+        const { id } = nodeParser(node);
+        return new Node({ id, data: node });
+    });
+    const glEdges = edges.map((edge) => {
+        const { id, sourceId, targetId, directed } = edgeParser(edge);
+        return new Edge({
+            id,
+            sourceId,
+            targetId,
+            directed: directed || false,
+            data: edge
+        });
+    });
+    // create a new empty graph
+    const name = 'loaded';
+    const graph = new Graph({ name, nodes: glNodes, edges: glEdges });
+    return graph;
+}
+// export function basicNodeParser(node: any): Pick<NodeOptions, 'id'> {
+//   if (node.id === undefined) {
+//     log.error('Invalid node: id is missing.')();
+//     return null;
+//   }
+//   return {id: node.id};
+// }
+// export function basicEdgeParser(edge: any): Omit<EdgeOptions, 'data'> {
+//   const {id, directed, sourceId, targetId} = edge;
+//   if (sourceId === undefined || targetId === undefined) {
+//     log.error('Invalid edge: sourceId or targetId is missing.')();
+//     return null;
+//   }
+//   return {
+//     id,
+//     directed: directed || false,
+//     sourceId,
+//     targetId
+//   };
+// }

package/dist/utils/log.d.ts

@@ -1,3 +1,3 @@
-import { Log } from 'probe.gl';
+import { Log } from '@probe.gl/log';
 export declare const log: Log;
 //# sourceMappingURL=log.d.ts.map

package/dist/utils/log.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"log.d.ts","sourceRoot":"","sources":["../../src/utils/log.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,GAAG,EAAQ,MAAM,UAAU,CAAC;AAEpC,eAAO,MAAM,GAAG,KAA+C,CAAC"}
+{"version":3,"file":"log.d.ts","sourceRoot":"","sources":["../../src/utils/log.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,GAAG,EAAQ,MAAM,eAAe,CAAC;AAEzC,eAAO,MAAM,GAAG,KAAyC,CAAC"}

package/dist/utils/log.js

@@ -1,6 +1,6 @@
 // deck.gl-community
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
-import { Log, COLOR } from 'probe.gl';
-export const log = new Log({ id: 'react-graph-layers' }).enable();
-log.log({ color: COLOR.CYAN }, 'Initialize react-graph-layers logger.')();
+import { Log, COLOR } from '@probe.gl/log';
+export const log = new Log({ id: 'graph-layers' }).enable();
+log.log({ color: COLOR.CYAN }, 'Initialize graph-layers logger.')();

package/dist/widgets/long-press-button.d.ts

@@ -0,0 +1,13 @@
+import { Component } from 'preact';
+export type LongPressButtonProps = {
+    onClick: () => void;
+    children: any;
+};
+export declare class LongPressButton extends Component<LongPressButtonProps> {
+    buttonPressTimer: ReturnType<typeof setTimeout> | null;
+    _repeat: () => void;
+    _handleButtonPress: () => void;
+    _handleButtonRelease: () => void;
+    render(): import("preact").JSX.Element;
+}
+//# sourceMappingURL=long-press-button.d.ts.map

package/dist/widgets/long-press-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"long-press-button.d.ts","sourceRoot":"","sources":["../../src/widgets/long-press-button.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,SAAS,EAAC,MAAM,QAAQ,CAAC;AAEjC,MAAM,MAAM,oBAAoB,GAAG;IACjC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,GAAG,CAAC;CACf,CAAC;AAEF,qBAAa,eAAgB,SAAQ,SAAS,CAAC,oBAAoB,CAAC;IAClE,gBAAgB,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,GAAG,IAAI,CAAQ;IAE9D,OAAO,aAKL;IAEF,kBAAkB,aAEhB;IAEF,oBAAoB,aAKlB;IAEF,MAAM;CAiBP"}

package/dist/widgets/long-press-button.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { Component } from 'preact';
+export class LongPressButton extends Component {
+    buttonPressTimer = null;
+    _repeat = () => {
+        if (this.buttonPressTimer) {
+            this.props.onClick();
+            this.buttonPressTimer = setTimeout(this._repeat, 100);
+        }
+    };
+    _handleButtonPress = () => {
+        this.buttonPressTimer = setTimeout(this._repeat, 100);
+    };
+    _handleButtonRelease = () => {
+        if (this.buttonPressTimer) {
+            clearTimeout(this.buttonPressTimer);
+        }
+        this.buttonPressTimer = null;
+    };
+    render() {
+        return (_jsx("div", { className: "deck-widget-button", children: _jsx("div", { style: {
+                    pointerEvents: 'auto'
+                }, onMouseDown: (event) => {
+                    this._handleButtonPress();
+                    document.addEventListener('mouseup', this._handleButtonRelease, { once: true });
+                }, children: this.props.children }) }));
+    }
+}

package/dist/widgets/view-control-widget.d.ts

@@ -0,0 +1,78 @@
+import { Component } from 'preact';
+import type { Deck, Viewport, Widget, WidgetPlacement } from '@deck.gl/core';
+export declare const ViewControlWrapper: ({ children }: {
+    children: any;
+}) => import("preact").JSX.Element;
+export declare const NavigationButtonContainer: ({ children }: {
+    children: any;
+}) => import("preact").JSX.Element;
+export type NavigationButtonProps = {
+    left: any;
+    top: any;
+    rotate?: number;
+    children?: any;
+    onClick?: () => void;
+};
+export declare const NavigationButton: (props: NavigationButtonProps) => import("preact").JSX.Element;
+export declare const ZoomControlWrapper: ({ children }: {
+    children: any;
+}) => import("preact").JSX.Element;
+export declare const VerticalSlider: ({ children }: {
+    children: any;
+}) => import("preact").JSX.Element;
+export declare const ZoomControlButton: ({ children }: {
+    children: any;
+}) => import("preact").JSX.Element;
+export type ViewControlProps = {
+    id?: string;
+    viewId?: string;
+    placement?: WidgetPlacement;
+    fitBounds: () => void;
+    panBy?: (dx: number, dy: number) => void;
+    zoomBy?: (delta: number) => void;
+    zoomLevel: number;
+    minZoom: number;
+    maxZoom: number;
+    deltaPan: number;
+    deltaZoom: number;
+    /** CSS inline style overrides. */
+    style?: Partial<CSSStyleDeclaration>;
+    /** Additional CSS class. */
+    className?: string;
+};
+export declare class ViewControl extends Component<ViewControlProps> {
+    static displayName: string;
+    static defaultProps: Required<ViewControlProps>;
+    panUp: () => void;
+    panDown: () => void;
+    panLeft: () => void;
+    panRight: () => void;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    onChangeZoomLevel: (evt: any) => void;
+    render(): import("preact").JSX.Element;
+}
+export declare class ViewControlWidget implements Widget<ViewControlProps> {
+    id: string;
+    props: ViewControlProps;
+    placement: WidgetPlacement;
+    orientation: 'vertical' | 'horizontal';
+    viewId?: string | null;
+    viewports: {
+        [id: string]: Viewport;
+    };
+    deck?: Deck<any>;
+    element?: HTMLDivElement;
+    constructor(props: ViewControlProps);
+    onAdd({ deck }: {
+        deck: Deck<any>;
+    }): HTMLDivElement;
+    onRemove(): void;
+    setProps(props: Partial<ViewControlProps>): void;
+    onViewportChange(viewport: Viewport): void;
+    handleDeltaZoom(deltaZoom: number): void;
+    handlePanBy(deltaX: number, deltaY: number): void;
+    handleZoomView(viewport: Viewport, nextZoom: number): void;
+    handlePanViewport(viewport: Viewport, deltaX: number, deltaY: number): void;
+}
+//# sourceMappingURL=view-control-widget.d.ts.map

package/dist/widgets/view-control-widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-control-widget.d.ts","sourceRoot":"","sources":["../../src/widgets/view-control-widget.tsx"],"names":[],"mappings":"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"}