SplitterWidget (Experimental)

This widget lets the user to stack multiple views across the deck.gl canvas, and resize them by draggable splitter handles. This widget will only work if the views prop of Deck is unset.

JavaScript

import {_SplitterWidget as SplitterWidget} from '@deck.gl/widgets';
import {Deck, OrbitView} from '@deck.gl/core';
import '@deck.gl/widgets/stylesheet.css';

new Deck({
  initialViewState: {
    front: {target: [0, 0, 0], rotationX: 0, rotationOrbit: 90, zoom: 0},
    perspective: {target: [0, 0, 0], rotationX: 45, rotationOrbit: 30, zoom: 0}
  },
  widgets: [
    new SplitterWidget({
      viewLayout: {
        orientation: 'horizontal',
        views: [
          new OrbitView({id: 'front', orbitAxis: 'Z', orthographic: true, controller: true}),
          new OrbitView({id: 'perspective', orbitAxis: 'Z', controller: true})
        ]
      }
    })
  ]
});

TypeScript

import {_SplitterWidget as SplitterWidget} from '@deck.gl/widgets';
import {Deck, OrbitView, type OrbitViewState} from '@deck.gl/core';
import '@deck.gl/widgets/stylesheet.css';

new Deck({
  initialViewState: {
    front: {target: [0, 0, 0], rotationX: 0, rotationOrbit: 90, zoom: 0} satisfies OrbitViewState,
    perspective: {target: [0, 0, 0], rotationX: 45, rotationOrbit: 30, zoom: 0} satisfies OrbitViewState
  },
  widgets: [
    new SplitterWidget({
      viewLayout: {
        orientation: 'horizontal',
        views: [
          new OrbitView({id: 'front', orbitAxis: 'Z', orthographic: true, controller: true}),
          new OrbitView({id: 'perspective', orbitAxis: 'Z', controller: true})
        ]
      }
    })
  ]
});

React

import React from 'react';
import DeckGL, {_SplitterWidget as SplitterWidget} from '@deck.gl/react';
import {OrbitView, type OrbitViewState} from '@deck.gl/core';
import '@deck.gl/widgets/stylesheet.css';

function App() {
  return (
    <DeckGL
      initialViewState={{
        front: {target: [0, 0, 0], rotationX: 0, rotationOrbit: 90, zoom: 0} satisfies OrbitViewState,
        perspective: {target: [0, 0, 0], rotationX: 45, rotationOrbit: 30, zoom: 0} satisfies OrbitViewState
      }}
    >
      <SplitterWidget
        viewLayout={{
          orientation: 'horizontal',
          views: [
          new OrbitView({id: 'front', orbitAxis: 'Z', orthographic: true, controller: true}),
          new OrbitView({id: 'perspective', orbitAxis: 'Z', controller: true})
          ]
        }}
      />
    </DeckGL>
  );
}

Installation

npm install deck.gl
# or
npm install @deck.gl/core @deck.gl/widgets

import {_SplitterWidget as SplitterWidget, type SplitterWidgetProps} from '@deck.gl/widgets';
import '@deck.gl/widgets/stylesheet.css';
new SplitterWidget({} satisfies SplitterWidgetProps);

To use pre-bundled scripts:

<script src="https://unpkg.com/deck.gl@^9.0.0/dist.min.js"></script>
<link href="https://unpkg.com/deck.gl@^9.0.0/dist/stylesheet.css" rel='stylesheet' />
<!-- or -->
<script src="https://unpkg.com/@deck.gl/core@^9.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/widgets@^9.0.0/dist.min.js"></script>
<link href="https://unpkg.com/@deck.gl/widgets@^9.0.0/dist/stylesheet.css" rel='stylesheet' />

new deck._SplitterWidget({});

Types

SplitterWidgetProps

The SplitterWidget accepts the generic WidgetProps and:

viewLayout (ViewLayout, required)

Layout descriptor of how views are arranged on the canvas. Contains the following fields:

• views (View[]) - two view instances used to compose this layout. x, y, width and height of the views' props at render time will be resolved according to the following settings as well as user input.
• orientation (string, required) - the stacking orientation of the views. one of 'vertical', 'horizontal'.
• initialSplit (number, optional) - The ratio of view1's share over the whole available height (vertical) or width (horizontal). Between 0-1. Default 0.5.
• editable (boolean, optional) - Whether the split can be changed by dragging the border between the two views. Default true.
• minSplit (number, optional) - Min value of the split. The user cannot make the first view smaller than this ratio. Default 0.05.
• maxSplit (number, optional) - Max value of the split. The user cannot make the first view larger than this ratio. Default 0.95.

You may also replace one or both item in views with a ViewLayout object, composing more than two views into a complex layout.

onChange (Function, optional)

(views: View[]) => void

• Default: () => {}

Callback invoked during dragging with the updated view instances

onDragStart (Function, optional)

() => void

• Default: () => {}

Callback invoked when the user begins dragging the splitter.

onDragEnd (Function, optional)

() => void

• Default: () => {}

Callback invoked when the user releases the splitter.

Source

modules/widgets/src/splitter-widget.tsx