Tools ​

Every tool in a toolbox, with mutually exclusive groups (one drag tool and one wheel tool at a time) and a reset button.

ts
import {
  d3pAutoInteractionArea, D3PAxis, D3PAxisDomain, D3PChart, D3PClickZoomTool, D3PCursorIndicator,
  D3PLineRenderer, D3PPanTool, D3PResetTool, D3PScatterRenderer, D3PSeries, D3PToolbox, D3PWheelPanTool,
  D3PWheelZoomTool, D3PZoomSelectionTool, getGlobalBus,
} from 'd3pict'
// your series data: replace these generators with your own values
import { indexed, walk } from './data'

const bus = getGlobalBus()

const container = document.getElementById('app')! // any element with a size: the chart fills it

const data = indexed(walk(7, 120, 0, 30, -100, 100))
const dx = new D3PAxisDomain({ bus, domain: [0, 119] })
const dy = new D3PAxisDomain({ bus, domain: [-100, 100] })
const series = new D3PSeries({ bus, name: 'signal', data })
const x = new D3PAxis({ bus, name: 'x', domain: dx, props: { grid: { enabled: true } } })
const y = new D3PAxis({ bus, name: 'y', domain: dy, position: 'left', props: { grid: { enabled: true } } })
const line = new D3PLineRenderer({ bus, series, props: { style: { color: '#59a14f', strokeWidth: 1.5 } } })
const dots = new D3PScatterRenderer({ bus, series, name: 'points', props: { style: { color: '#59a14f', radius: 3 } } })
const cursor = new D3PCursorIndicator({ bus })

const toolbox = new D3PToolbox({ bus, mutuallyExclusiveGroups: [['pan', 'zoom-selection', 'zoom-click'], ['wheel-zoom', 'wheel-pan']] })
const reset = new D3PResetTool({ bus })
for (const t of [new D3PPanTool({ bus }), new D3PZoomSelectionTool({ bus }), new D3PClickZoomTool({ bus }), new D3PWheelZoomTool({ bus }), new D3PWheelPanTool({ bus }), reset]) toolbox.addTool(t)
for (const name of ['pan', 'wheel-zoom', 'reset']) toolbox.setToolActive(name)

const objects = [x, y, line, dots, cursor, toolbox]

const bar = Object.assign(document.createElement('div'), { className: 'toolbar' })
container.before(bar)
const chart = new D3PChart({ container, bus })
const stopArea = d3pAutoInteractionArea(chart) // the tools ask for an interaction area: answer before adding them
objects.forEach((o) => o.addToChart(chart))

// a button per tool, lit while the tool is active
const buttons = ['pan', 'zoom-selection', 'zoom-click', 'wheel-zoom', 'wheel-pan'].map((name) => {
  const button = Object.assign(document.createElement('button'), { textContent: name, onclick: () => toolbox.setToolActive(name, !toolbox.isToolActive(name)) })
  return { name, button }
})
const refresh = () => buttons.forEach(({ name, button }) => button.classList.toggle('on', toolbox.isToolActive(name)))
const stopTools = bus.on(toolbox.e.toolStateChanged, refresh)
bar.append(...buttons.map(({ button }) => button), Object.assign(document.createElement('button'), { textContent: 'reset', onclick: () => reset.reset() }))
refresh()