@dxos/react-ui-canvas 0.8.4-main.84f28bd → 0.8.4-main.ae835ea
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/browser/index.mjs +12 -12
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +12 -12
- package/dist/lib/node-esm/index.mjs.map +3 -3
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/components/Canvas/Canvas.d.ts.map +1 -1
- package/dist/types/src/components/Canvas/Canvas.stories.d.ts +12 -4
- package/dist/types/src/components/Canvas/Canvas.stories.d.ts.map +1 -1
- package/dist/types/src/components/Grid/Grid.d.ts.map +1 -1
- package/dist/types/src/components/Grid/Grid.stories.d.ts +19 -4
- package/dist/types/src/components/Grid/Grid.stories.d.ts.map +1 -1
- package/dist/types/src/hooks/projection.d.ts +1 -1
- package/dist/types/src/hooks/projection.d.ts.map +1 -1
- package/dist/types/src/hooks/useWheel.d.ts.map +1 -1
- package/dist/types/src/types.d.ts +1 -1
- package/dist/types/src/types.d.ts.map +1 -1
- package/dist/types/src/util/svg.stories.d.ts +12 -4
- package/dist/types/src/util/svg.stories.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +21 -20
- package/src/components/Canvas/Canvas.stories.tsx +10 -8
- package/src/components/Canvas/Canvas.tsx +8 -12
- package/src/components/FPS.tsx +1 -1
- package/src/components/Grid/Grid.stories.tsx +11 -9
- package/src/components/Grid/Grid.tsx +2 -2
- package/src/hooks/projection.tsx +2 -2
- package/src/hooks/useWheel.tsx +2 -1
- package/src/types.ts +1 -1
- package/src/util/svg.stories.tsx +7 -7
|
@@ -5,22 +5,22 @@ import { useResizeDetector } from "react-resize-detector";
|
|
|
5
5
|
import { mx as mx2 } from "@dxos/react-ui-theme";
|
|
6
6
|
|
|
7
7
|
// src/hooks/projection.tsx
|
|
8
|
-
import { interpolate, interpolateObject, transition
|
|
8
|
+
import { easeSinOut, interpolate, interpolateObject, transition } from "d3";
|
|
9
9
|
import { applyToPoints, compose, identity, inverse, scale as scaleMatrix, translate as translateMatrix } from "transformation-matrix";
|
|
10
10
|
var defaultOrigin = {
|
|
11
11
|
x: 0,
|
|
12
12
|
y: 0
|
|
13
13
|
};
|
|
14
14
|
var ProjectionMapper = class {
|
|
15
|
+
_bounds = {
|
|
16
|
+
width: 0,
|
|
17
|
+
height: 0
|
|
18
|
+
};
|
|
19
|
+
_scale = 1;
|
|
20
|
+
_offset = defaultOrigin;
|
|
21
|
+
_toScreen = identity();
|
|
22
|
+
_toModel = identity();
|
|
15
23
|
constructor(bounds, scale, offset) {
|
|
16
|
-
this._bounds = {
|
|
17
|
-
width: 0,
|
|
18
|
-
height: 0
|
|
19
|
-
};
|
|
20
|
-
this._scale = 1;
|
|
21
|
-
this._offset = defaultOrigin;
|
|
22
|
-
this._toScreen = identity();
|
|
23
|
-
this._toModel = identity();
|
|
24
24
|
if (bounds && scale && offset) {
|
|
25
25
|
this.update(bounds, scale, offset);
|
|
26
26
|
}
|
|
@@ -500,7 +500,7 @@ var FPS = ({ classNames, width = 60, height = 30, bar = "bg-cyan-500" }) => {
|
|
|
500
500
|
frames: 0,
|
|
501
501
|
prevTime: Date.now()
|
|
502
502
|
});
|
|
503
|
-
const requestRef = useRef();
|
|
503
|
+
const requestRef = useRef(null);
|
|
504
504
|
const tick = () => {
|
|
505
505
|
dispatch();
|
|
506
506
|
requestRef.current = requestAnimationFrame(tick);
|
|
@@ -541,7 +541,7 @@ var FPS = ({ classNames, width = 60, height = 30, bar = "bg-cyan-500" }) => {
|
|
|
541
541
|
|
|
542
542
|
// src/components/Grid/Grid.tsx
|
|
543
543
|
import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
|
|
544
|
-
import React4, { forwardRef as forwardRef2, useMemo as useMemo2
|
|
544
|
+
import React4, { forwardRef as forwardRef2, useId, useMemo as useMemo2 } from "react";
|
|
545
545
|
import { useForwardedRef } from "@dxos/react-ui";
|
|
546
546
|
import { mx as mx4 } from "@dxos/react-ui-theme";
|
|
547
547
|
var gridRatios = [
|
|
@@ -616,7 +616,7 @@ var Grid = (props) => {
|
|
|
616
616
|
};
|
|
617
617
|
|
|
618
618
|
// src/types.ts
|
|
619
|
-
import
|
|
619
|
+
import * as Schema from "effect/Schema";
|
|
620
620
|
var Point = Schema.Struct({
|
|
621
621
|
x: Schema.Number,
|
|
622
622
|
y: Schema.Number
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/Canvas/Canvas.tsx", "../../../src/hooks/projection.tsx", "../../../src/hooks/useCanvasContext.tsx", "../../../src/hooks/useWheel.tsx", "../../../src/util/svg.tsx", "../../../src/util/util.ts", "../../../src/components/FPS.tsx", "../../../src/components/Grid/Grid.tsx", "../../../src/types.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport React, {\n type CSSProperties,\n type HTMLAttributes,\n type PropsWithChildren,\n forwardRef,\n useEffect,\n useImperativeHandle,\n useMemo,\n useState,\n} from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { defaultOrigin, CanvasContext, ProjectionMapper, type ProjectionState } from '../../hooks';\n\nexport interface CanvasController {\n setProjection(projection: ProjectionState): Promise<void>;\n}\n\nexport type CanvasProps = ThemedClassName<PropsWithChildren<Partial<ProjectionState> & HTMLAttributes<HTMLDivElement>>>;\n\n/**\n * Root canvas component.\n * Manages CSS projection.\n */\nexport const Canvas = forwardRef<CanvasController, CanvasProps>(\n ({ children, classNames, scale: _scale = 1, offset: _offset = defaultOrigin, ...props }, forwardedRef) => {\n // Size.\n const { ref, width = 0, height = 0 } = useResizeDetector();\n\n // Ready when initially resized.\n const [ready, setReady] = useState(false);\n\n // Projection.\n const [{ scale, offset }, setProjection] = useState<ProjectionState>({ scale: _scale, offset: _offset });\n useEffect(() => {\n if (width && height && offset === defaultOrigin) {\n setProjection({ scale, offset: { x: width / 2, y: height / 2 } });\n }\n }, [width, height, scale, offset]);\n\n // Projection mapper.\n const projection = useMemo(() => new ProjectionMapper(), []);\n useEffect(() => {\n projection.update({ width, height }, scale, offset);\n if (offset !== defaultOrigin) {\n setReady(true);\n }\n }, [projection, scale, offset, width, height]);\n\n // CSS transforms.\n const styles = useMemo<CSSProperties>(() => {\n return {\n // NOTE: Order is important.\n transform: `translate(${offset.x}px, ${offset.y}px) scale(${scale})`,\n visibility: width && height ? 'visible' : 'hidden',\n };\n }, [scale, offset]);\n\n // Controller.\n useImperativeHandle(\n forwardedRef,\n () => {\n return {\n setProjection: async (projection: ProjectionState) => {\n setProjection(projection);\n },\n };\n },\n [ref],\n );\n\n return (\n <CanvasContext.Provider\n value={{ root: ref.current, ready, width, height, scale, offset, styles, projection, setProjection }}\n >\n <div role='none' {...props} className={mx('absolute inset-0 overflow-hidden', classNames)} ref={ref}>\n {ready ? children : null}\n </div>\n </CanvasContext.Provider>\n );\n },\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { interpolate, interpolateObject, transition, easeSinOut } from 'd3';\nimport {\n type Matrix,\n applyToPoints,\n compose,\n identity,\n inverse,\n scale as scaleMatrix,\n translate as translateMatrix,\n} from 'transformation-matrix';\n\nimport { type Point, type Dimension } from '../types';\n\nexport const defaultOrigin: Point = { x: 0, y: 0 };\n\n// TODO(burdon): Rotation also?\nexport type ProjectionState = {\n scale: number;\n offset: Point;\n};\n\n/**\n * Maps between screen and model coordinates.\n */\nexport interface Projection {\n get bounds(): Dimension;\n get scale(): number;\n get offset(): Point;\n\n /**\n * Maps the model space to the screen offset (from the top-left of the element).\n */\n toScreen(points: Point[]): Point[];\n\n /**\n * Maps the pointer coordinate (from the top-left of the element) to the model space.\n */\n toModel(points: Point[]): Point[];\n}\n\nexport class ProjectionMapper implements Projection {\n private _bounds: Dimension = { width: 0, height: 0 };\n private _scale: number = 1;\n private _offset: Point = defaultOrigin;\n private _toScreen: Matrix = identity();\n private _toModel: Matrix = identity();\n\n constructor(bounds?: Dimension, scale?: number, offset?: Point) {\n if (bounds && scale && offset) {\n this.update(bounds, scale, offset);\n }\n }\n\n update(bounds: Dimension, scale: number, offset: Point): this {\n this._bounds = bounds;\n this._scale = scale;\n this._offset = offset;\n this._toScreen = compose(\n // NOTE: Order is important.\n translateMatrix(this._offset.x, this._offset.y),\n scaleMatrix(this._scale),\n // TODO(burdon): Flip.\n // flipX(),\n );\n this._toModel = inverse(this._toScreen);\n return this;\n }\n\n get bounds() {\n return this._bounds;\n }\n\n get scale() {\n return this._scale;\n }\n\n get offset() {\n return this._offset;\n }\n\n toScreen(points: Point[]): Point[] {\n return applyToPoints(this._toScreen, points);\n }\n\n toModel(points: Point[]): Point[] {\n return applyToPoints(this._toModel, points);\n }\n}\n\n/**\n * Maintain position while zooming.\n */\nexport const getZoomTransform = ({\n scale,\n offset,\n pos,\n newScale,\n}: ProjectionState & { pos: Point; newScale: number }): ProjectionState => {\n return {\n scale: newScale,\n offset: {\n x: pos.x - (pos.x - offset.x) * (newScale / scale),\n y: pos.y - (pos.y - offset.y) * (newScale / scale),\n },\n };\n};\n\n/**\n * Zoom while keeping the specified position in place.\n */\n// TODO(burdon): Convert to object.\nexport const zoomInPlace = (\n setTransform: (state: ProjectionState) => void,\n pos: Point,\n offset: Point,\n current: number,\n next: number,\n delay = 200,\n) => {\n const is = interpolate(current, next);\n transition()\n .ease(easeSinOut)\n .duration(delay)\n .tween('zoom', () => (t) => {\n const newScale = is(t);\n setTransform(getZoomTransform({ scale: current, newScale, offset, pos }));\n });\n};\n\nconst noop = () => {};\n\n/**\n * Zoom to new scale and position.\n */\n// TODO(burdon): Convert to object.\nexport const zoomTo = (\n setTransform: (state: ProjectionState) => void,\n current: ProjectionState,\n next: ProjectionState,\n delay = 200,\n cb = noop,\n) => {\n const is = interpolateObject({ scale: current.scale, ...current.offset }, { scale: next.scale, ...next.offset });\n transition()\n .ease(easeSinOut)\n .duration(delay)\n .tween('zoom', () => (t) => {\n const { scale, x, y } = is(t);\n setTransform({ scale, offset: { x, y } });\n })\n .on('end', cb);\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { type CSSProperties, type Dispatch, type SetStateAction, createContext, useContext } from 'react';\n\nimport { raise } from '@dxos/debug';\n\nimport { type Projection, type ProjectionState } from './projection';\n\nexport type CanvasContext = ProjectionState & {\n root: HTMLDivElement;\n ready: boolean;\n width: number;\n height: number;\n styles: CSSProperties;\n projection: Projection;\n setProjection: Dispatch<SetStateAction<ProjectionState>>;\n};\n\n/**\n * @internal\n */\n// TODO(burdon): Use radix?\nexport const CanvasContext = createContext<CanvasContext | null>(null);\n\nexport const useCanvasContext = (): CanvasContext => {\n return useContext(CanvasContext) ?? raise(new Error('Missing CanvasContext'));\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { bindAll } from 'bind-event-listener';\nimport { useEffect } from 'react';\n\nimport { getZoomTransform } from './projection';\nimport { useCanvasContext } from './useCanvasContext';\nimport { getRelativePoint } from '../util';\n\nexport type WheelOptions = {\n zoom?: boolean;\n};\n\nconst defaultOptions: WheelOptions = {\n zoom: true,\n};\n\n/**\n * Handle wheel events to update the transform state (zoom and offset).\n */\nexport const useWheel = (options: WheelOptions = defaultOptions) => {\n const { root, setProjection } = useCanvasContext();\n useEffect(() => {\n if (!root) {\n return;\n }\n\n return bindAll(root, [\n {\n type: 'wheel',\n options: { capture: true, passive: false },\n listener: (ev: WheelEvent) => {\n const zooming = isWheelZooming(ev);\n if (!hasFocus(root) && !zooming) {\n return;\n }\n\n ev.preventDefault();\n if (zooming && !options.zoom) {\n return;\n }\n\n // Zoom or pan.\n if (ev.ctrlKey) {\n if (!root) {\n return;\n }\n\n // Keep centered while zooming.\n setProjection(({ scale, offset }) => {\n const pos = getRelativePoint(root, ev);\n const scaleSensitivity = 0.01;\n const newScale = scale * Math.exp(-ev.deltaY * scaleSensitivity);\n return getZoomTransform({ scale, offset, newScale, pos });\n });\n } else {\n setProjection(({ scale, offset: { x, y } }) => {\n return {\n scale,\n offset: {\n x: x - ev.deltaX,\n y: y - ev.deltaY,\n },\n };\n });\n }\n },\n },\n ]);\n }, [root]);\n};\n\nconst isWheelZooming = (ev: WheelEvent): boolean => {\n // Check for ctrl/cmd key + wheel action.\n if (ev.ctrlKey || ev.metaKey) {\n // Some browsers use deltaY, others deltaZ for zoom.\n return Math.abs(ev.deltaY) > 0 || Math.abs(ev.deltaZ) > 0;\n }\n\n return false;\n};\n\nconst hasFocus = (element: HTMLElement): boolean => {\n const activeElement = document.activeElement;\n if (!activeElement) {\n return false;\n }\n\n // Handle shadow DOM.\n let shadowActive = activeElement;\n while (shadowActive?.shadowRoot?.activeElement) {\n shadowActive = shadowActive.shadowRoot.activeElement;\n }\n\n // Check if element or any parent has focus.\n let current: HTMLElement | null = element;\n while (current) {\n if (current === activeElement || current === shadowActive) {\n return true;\n }\n current = current.parentElement;\n }\n\n return false;\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { type PropsWithChildren, type SVGProps } from 'react';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { type Dimension, type Point } from '../types';\n\n// Refs\n// - https://airbnb.io/visx/gallery\n// - https://github.com/tldraw/tldraw/blob/main/packages/editor/src/lib/primitives/Vec.ts\n\nexport const createPath = (points: Point[], join = false) => {\n return ['M', points.map(({ x, y }) => `${x},${y}`).join(' L '), join ? 'Z' : ''].join(' ');\n};\n\n/**\n * https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths\n * NOTE: Leave space around shape for line width.\n */\nexport const Markers = ({ id = 'dx-marker', classNames }: ThemedClassName<{ id?: string }>) => {\n return (\n <>\n <Arrow id={`${id}-arrow-start`} dir='start' classNames={classNames} />\n <Arrow id={`${id}-arrow-end`} dir='end' classNames={classNames} />\n <Arrow id={`${id}-triangle-start`} dir='start' closed classNames={classNames} />\n <Arrow id={`${id}-triangle-end`} dir='end' closed classNames={classNames} />\n <Marker id={`${id}-circle`} pos={{ x: 8, y: 8 }} size={{ width: 16, height: 16 }}>\n <circle cx={8} cy={8} r={5} stroke={'context-stroke'} className={mx(classNames)} />\n </Marker>\n </>\n );\n};\n\nexport type MarkerProps = SVGProps<SVGMarkerElement> &\n PropsWithChildren<\n ThemedClassName<{\n id: string;\n pos: Point;\n size: Dimension;\n fill?: boolean;\n }>\n >;\n\n/**\n * https://www.w3.org/TR/SVG2/painting.html#Markers\n */\nexport const Marker = ({\n id,\n className,\n children,\n pos: { x: refX, y: refY },\n size: { width: markerWidth, height: markerHeight },\n fill,\n ...rest\n}: MarkerProps) => (\n <marker\n id={id}\n className={className}\n {...{\n refX,\n refY,\n markerWidth,\n markerHeight,\n markerUnits: 'strokeWidth',\n orient: 'auto',\n ...rest,\n }}\n >\n {children}\n </marker>\n);\n\nexport const Arrow = ({\n classNames,\n id,\n size = 16,\n dir = 'end',\n closed = false,\n}: ThemedClassName<{ id: string; size?: number; dir?: 'start' | 'end'; closed?: boolean }>) => (\n <Marker\n id={id}\n size={{ width: size, height: size }}\n pos={dir === 'end' ? { x: size, y: size / 2 } : { x: 0, y: size / 2 }}\n >\n <path\n fill={closed ? undefined : 'none'}\n stroke={'context-stroke'}\n className={mx(classNames)}\n d={createPath(\n dir === 'end'\n ? [\n { x: 1, y: 1 },\n { x: size, y: size / 2 },\n { x: 1, y: size - 1 },\n ]\n : [\n { x: size - 1, y: 1 },\n { x: 0, y: size / 2 },\n { x: size - 1, y: size - 1 },\n ],\n closed,\n )}\n />\n </Marker>\n);\n\nexport const GridPattern = ({\n classNames,\n id,\n size,\n offset,\n}: ThemedClassName<{ id: string; size: number; offset: Point }>) => (\n <pattern\n id={id}\n x={(size / 2 + offset.x) % size}\n y={(size / 2 + offset.y) % size}\n width={size}\n height={size}\n patternUnits='userSpaceOnUse'\n >\n {/* TODO(burdon): vars. */}\n <g className={mx(classNames)}>\n <line x1={0} y1={size / 2} x2={size} y2={size / 2} />\n <line x1={size / 2} y1={0} x2={size / 2} y2={size} />\n </g>\n </pattern>\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nlet logged = false;\n\n/**\n * Get the relative point of the cursor.\n * NOTE: ev.offset returns the position relative to the target.\n */\nexport const getRelativePoint = (el: HTMLElement, ev: MouseEvent) => {\n const rect = el.getBoundingClientRect();\n return { x: ev.clientX - rect.x, y: ev.clientY - rect.top };\n};\n\n/**\n *\n */\n// TODO(burdon): Factor out.\nexport const testId = <ID = string>(id: ID, inspect = false) => {\n if (inspect) {\n if (!logged) {\n // eslint-disable-next-line no-console\n console.log('Open storybook in expanded window;\\nthen run INSPECT()');\n logged = true;\n }\n\n (window as any).INSPECT = () => {\n const el = document.querySelector(`[data-test-id=\"${id}\"]`);\n (window as any).inspect(el);\n // eslint-disable-next-line no-console\n console.log(el);\n };\n }\n\n return { [DATA_TEST_ID]: id };\n};\n\nexport const inspectElement = (el: Element) => {\n (window as any).INSPECT = () => {\n (window as any).inspect(el);\n (window as any).element = el;\n // eslint-disable-next-line no-console\n console.log('Open storybook in expanded window;\\nthen run INSPECT()');\n // eslint-disable-next-line no-console\n console.log(el);\n };\n};\n\nexport const DATA_TEST_ID = 'data-test-id';\n", "//\n// Copyright 2024 DXOS.org\n// Adapted from: https://github.com/smplrspace/react-fps-stats\n//\n\nimport React, { useEffect, useReducer, useRef } from 'react';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nexport type FPSProps = ThemedClassName<{\n width?: number;\n height?: number;\n bar?: string;\n}>;\n\ntype State = {\n max: number;\n len: number;\n fps: number[];\n frames: number;\n prevTime: number;\n};\n\nconst SEC = 1_000;\n\nexport const FPS = ({ classNames, width = 60, height = 30, bar = 'bg-cyan-500' }: FPSProps) => {\n const [{ fps, max, len }, dispatch] = useReducer(\n (state: State) => {\n const currentTime = Date.now();\n if (currentTime > state.prevTime + SEC) {\n const nextFPS = [\n ...new Array(Math.floor((currentTime - state.prevTime - SEC) / SEC)).fill(0),\n Math.max(1, Math.round((state.frames * SEC) / (currentTime - state.prevTime))),\n ];\n return {\n max: Math.max(state.max, ...nextFPS),\n len: Math.min(state.len + nextFPS.length, width),\n fps: [...state.fps, ...nextFPS].slice(-width),\n frames: 1,\n prevTime: currentTime,\n };\n } else {\n return { ...state, frames: state.frames + 1 };\n }\n },\n {\n max: 0,\n len: 0,\n fps: [],\n frames: 0,\n prevTime: Date.now(),\n },\n );\n\n const requestRef = useRef<number>();\n const tick = () => {\n dispatch();\n requestRef.current = requestAnimationFrame(tick);\n };\n\n useEffect(() => {\n requestRef.current = requestAnimationFrame(tick);\n return () => {\n if (requestRef.current) {\n cancelAnimationFrame(requestRef.current);\n }\n };\n }, []);\n\n return (\n <div\n style={{ width: width + 6 }}\n className={mx(\n 'relative flex flex-col p-0.5',\n 'bg-baseSurface text-xs text-subdued font-thin pointer-events-none border border-separator',\n classNames,\n )}\n >\n <div>{fps[len - 1]} FPS</div>\n <div className='w-full relative' style={{ height }}>\n {fps.map((frame, i) => (\n <div\n key={`fps-${i}`}\n className={bar}\n style={{\n position: 'absolute',\n bottom: 0,\n right: `${len - 1 - i}px`,\n height: `${(height * frame) / max}px`,\n width: 1,\n }}\n />\n ))}\n </div>\n </div>\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { forwardRef, useMemo, useId } from 'react';\n\nimport { useForwardedRef, type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { useCanvasContext } from '../../hooks';\nimport { type Point } from '../../types';\nimport { GridPattern, testId } from '../../util';\n\nconst gridRatios = [1 / 4, 1, 4, 16];\n\nconst defaultGridSize = 16;\nconst defaultOffset: Point = { x: 0, y: 0 };\n\nconst createId = (parent: string, grid: number) => `dx-canvas-grid-${parent}-${grid}`;\n\nexport type GridProps = ThemedClassName<{\n size?: number;\n scale?: number;\n offset?: Point;\n showAxes?: boolean;\n}>;\n\nexport const GridComponent = forwardRef<SVGSVGElement, GridProps>(\n (\n { size: gridSize = defaultGridSize, scale = 1, offset = defaultOffset, showAxes = true, classNames },\n forwardedRef,\n ) => {\n const svgRef = useForwardedRef(forwardedRef);\n const instanceId = useId();\n const grids = useMemo(\n () =>\n gridRatios\n .map((ratio) => ({ id: ratio, size: ratio * gridSize * scale }))\n .filter(({ size }) => size >= gridSize && size <= 256),\n [gridSize, scale],\n );\n\n const { width = 0, height = 0 } = svgRef.current?.getBoundingClientRect() ?? {};\n\n return (\n <svg\n {...testId('dx-canvas-grid')}\n ref={svgRef}\n className={mx(\n 'absolute inset-0 w-full h-full pointer-events-none touch-none select-none',\n 'stroke-neutral-500',\n classNames,\n )}\n >\n {/* NOTE: The pattern is offset so that the middle of the pattern aligns with the grid. */}\n <defs>\n {grids.map(({ id, size }) => (\n <GridPattern key={id} id={createId(instanceId, id)} offset={offset} size={size} />\n ))}\n </defs>\n {showAxes && (\n <>\n <line x1={0} y1={offset.y} x2={width} y2={offset.y} className='stroke-neutral-500 opacity-40' />\n <line x1={offset.x} y1={0} x2={offset.x} y2={height} className='stroke-neutral-500 opacity-40' />\n </>\n )}\n <g>\n {grids.map(({ id }, i) => (\n <rect\n key={id}\n opacity={0.1 + i * 0.05}\n fill={`url(#${createId(instanceId, id)})`}\n width='100%'\n height='100%'\n />\n ))}\n </g>\n </svg>\n );\n },\n);\n\n// TODO(burdon): Use id of parent canvas.\nexport const Grid = (props: GridProps) => {\n const { scale, offset } = useCanvasContext();\n return <GridComponent {...props} scale={scale} offset={offset} />;\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { Schema } from 'effect';\n\nexport const Point = Schema.Struct({ x: Schema.Number, y: Schema.Number });\nexport const Dimension = Schema.Struct({ width: Schema.Number, height: Schema.Number });\nexport const Rect = Schema.extend(Point, Dimension);\n\nexport type Point = Schema.Schema.Type<typeof Point>;\nexport type Dimension = Schema.Schema.Type<typeof Dimension>;\nexport type Rect = Schema.Schema.Type<typeof Rect>;\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["React", "forwardRef", "useEffect", "useImperativeHandle", "useMemo", "useState", "useResizeDetector", "mx", "
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport React, {\n type CSSProperties,\n type HTMLAttributes,\n type PropsWithChildren,\n forwardRef,\n useEffect,\n useImperativeHandle,\n useMemo,\n useState,\n} from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { CanvasContext, ProjectionMapper, type ProjectionState, defaultOrigin } from '../../hooks';\n\nexport interface CanvasController {\n setProjection(projection: ProjectionState): Promise<void>;\n}\n\nexport type CanvasProps = ThemedClassName<PropsWithChildren<Partial<ProjectionState> & HTMLAttributes<HTMLDivElement>>>;\n\n/**\n * Root canvas component.\n * Manages CSS projection.\n */\nexport const Canvas = forwardRef<CanvasController, CanvasProps>(\n ({ children, classNames, scale: _scale = 1, offset: _offset = defaultOrigin, ...props }, forwardedRef) => {\n // Size.\n const { ref, width = 0, height = 0 } = useResizeDetector();\n\n // Ready when initially resized.\n const [ready, setReady] = useState(false);\n\n // Projection.\n const [{ scale, offset }, setProjection] = useState<ProjectionState>({ scale: _scale, offset: _offset });\n useEffect(() => {\n if (width && height && offset === defaultOrigin) {\n setProjection({ scale, offset: { x: width / 2, y: height / 2 } });\n }\n }, [width, height, scale, offset]);\n\n // Projection mapper.\n const projection = useMemo(() => new ProjectionMapper(), []);\n useEffect(() => {\n projection.update({ width, height }, scale, offset);\n if (offset !== defaultOrigin) {\n setReady(true);\n }\n }, [projection, scale, offset, width, height]);\n\n // CSS transforms.\n const styles = useMemo<CSSProperties>(() => {\n return {\n // NOTE: Order is important.\n transform: `translate(${offset.x}px, ${offset.y}px) scale(${scale})`,\n visibility: width && height ? 'visible' : 'hidden',\n };\n }, [scale, offset]);\n\n // Controller.\n useImperativeHandle(forwardedRef, () => {\n return {\n setProjection: async (projection: ProjectionState) => {\n setProjection(projection);\n },\n };\n }, [ref]);\n\n return (\n <CanvasContext.Provider\n value={{ root: ref.current, ready, width, height, scale, offset, styles, projection, setProjection }}\n >\n <div role='none' {...props} className={mx('absolute inset-0 overflow-hidden', classNames)} ref={ref}>\n {ready ? children : null}\n </div>\n </CanvasContext.Provider>\n );\n },\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { easeSinOut, interpolate, interpolateObject, transition } from 'd3';\nimport {\n type Matrix,\n applyToPoints,\n compose,\n identity,\n inverse,\n scale as scaleMatrix,\n translate as translateMatrix,\n} from 'transformation-matrix';\n\nimport { type Dimension, type Point } from '../types';\n\nexport const defaultOrigin: Point = { x: 0, y: 0 };\n\n// TODO(burdon): Rotation also?\nexport type ProjectionState = {\n scale: number;\n offset: Point;\n};\n\n/**\n * Maps between screen and model coordinates.\n */\nexport interface Projection {\n get bounds(): Dimension;\n get scale(): number;\n get offset(): Point;\n\n /**\n * Maps the model space to the screen offset (from the top-left of the element).\n */\n toScreen(points: Point[]): Point[];\n\n /**\n * Maps the pointer coordinate (from the top-left of the element) to the model space.\n */\n toModel(points: Point[]): Point[];\n}\n\nexport class ProjectionMapper implements Projection {\n private _bounds: Dimension = { width: 0, height: 0 };\n private _scale: number = 1;\n private _offset: Point = defaultOrigin;\n private _toScreen: Matrix = identity();\n private _toModel: Matrix = identity();\n\n constructor(bounds?: Dimension, scale?: number, offset?: Point) {\n if (bounds && scale && offset) {\n this.update(bounds, scale, offset);\n }\n }\n\n update(bounds: Dimension, scale: number, offset: Point): this {\n this._bounds = bounds;\n this._scale = scale;\n this._offset = offset;\n this._toScreen = compose(\n // NOTE: Order is important.\n translateMatrix(this._offset.x, this._offset.y),\n scaleMatrix(this._scale),\n // TODO(burdon): Flip.\n // flipX(),\n );\n this._toModel = inverse(this._toScreen);\n return this;\n }\n\n get bounds() {\n return this._bounds;\n }\n\n get scale() {\n return this._scale;\n }\n\n get offset() {\n return this._offset;\n }\n\n toScreen(points: Point[]): Point[] {\n return applyToPoints(this._toScreen, points);\n }\n\n toModel(points: Point[]): Point[] {\n return applyToPoints(this._toModel, points);\n }\n}\n\n/**\n * Maintain position while zooming.\n */\nexport const getZoomTransform = ({\n scale,\n offset,\n pos,\n newScale,\n}: ProjectionState & { pos: Point; newScale: number }): ProjectionState => {\n return {\n scale: newScale,\n offset: {\n x: pos.x - (pos.x - offset.x) * (newScale / scale),\n y: pos.y - (pos.y - offset.y) * (newScale / scale),\n },\n };\n};\n\n/**\n * Zoom while keeping the specified position in place.\n */\n// TODO(burdon): Convert to object.\nexport const zoomInPlace = (\n setTransform: (state: ProjectionState) => void,\n pos: Point,\n offset: Point,\n current: number,\n next: number,\n delay = 200,\n) => {\n const is = interpolate(current, next);\n transition()\n .ease(easeSinOut)\n .duration(delay)\n .tween('zoom', () => (t) => {\n const newScale = is(t);\n setTransform(getZoomTransform({ scale: current, newScale, offset, pos }));\n });\n};\n\nconst noop = () => {};\n\n/**\n * Zoom to new scale and position.\n */\n// TODO(burdon): Convert to object.\nexport const zoomTo = (\n setTransform: (state: ProjectionState) => void,\n current: ProjectionState,\n next: ProjectionState,\n delay = 200,\n cb = noop,\n) => {\n const is = interpolateObject({ scale: current.scale, ...current.offset }, { scale: next.scale, ...next.offset });\n transition()\n .ease(easeSinOut)\n .duration(delay)\n .tween('zoom', () => (t) => {\n const { scale, x, y } = is(t);\n setTransform({ scale, offset: { x, y } });\n })\n .on('end', cb);\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { type CSSProperties, type Dispatch, type SetStateAction, createContext, useContext } from 'react';\n\nimport { raise } from '@dxos/debug';\n\nimport { type Projection, type ProjectionState } from './projection';\n\nexport type CanvasContext = ProjectionState & {\n root: HTMLDivElement;\n ready: boolean;\n width: number;\n height: number;\n styles: CSSProperties;\n projection: Projection;\n setProjection: Dispatch<SetStateAction<ProjectionState>>;\n};\n\n/**\n * @internal\n */\n// TODO(burdon): Use radix?\nexport const CanvasContext = createContext<CanvasContext | null>(null);\n\nexport const useCanvasContext = (): CanvasContext => {\n return useContext(CanvasContext) ?? raise(new Error('Missing CanvasContext'));\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { bindAll } from 'bind-event-listener';\nimport { useEffect } from 'react';\n\nimport { getRelativePoint } from '../util';\n\nimport { getZoomTransform } from './projection';\nimport { useCanvasContext } from './useCanvasContext';\n\nexport type WheelOptions = {\n zoom?: boolean;\n};\n\nconst defaultOptions: WheelOptions = {\n zoom: true,\n};\n\n/**\n * Handle wheel events to update the transform state (zoom and offset).\n */\nexport const useWheel = (options: WheelOptions = defaultOptions) => {\n const { root, setProjection } = useCanvasContext();\n useEffect(() => {\n if (!root) {\n return;\n }\n\n return bindAll(root, [\n {\n type: 'wheel',\n options: { capture: true, passive: false },\n listener: (ev: WheelEvent) => {\n const zooming = isWheelZooming(ev);\n if (!hasFocus(root) && !zooming) {\n return;\n }\n\n ev.preventDefault();\n if (zooming && !options.zoom) {\n return;\n }\n\n // Zoom or pan.\n if (ev.ctrlKey) {\n if (!root) {\n return;\n }\n\n // Keep centered while zooming.\n setProjection(({ scale, offset }) => {\n const pos = getRelativePoint(root, ev);\n const scaleSensitivity = 0.01;\n const newScale = scale * Math.exp(-ev.deltaY * scaleSensitivity);\n return getZoomTransform({ scale, offset, newScale, pos });\n });\n } else {\n setProjection(({ scale, offset: { x, y } }) => {\n return {\n scale,\n offset: {\n x: x - ev.deltaX,\n y: y - ev.deltaY,\n },\n };\n });\n }\n },\n },\n ]);\n }, [root]);\n};\n\nconst isWheelZooming = (ev: WheelEvent): boolean => {\n // Check for ctrl/cmd key + wheel action.\n if (ev.ctrlKey || ev.metaKey) {\n // Some browsers use deltaY, others deltaZ for zoom.\n return Math.abs(ev.deltaY) > 0 || Math.abs(ev.deltaZ) > 0;\n }\n\n return false;\n};\n\nconst hasFocus = (element: HTMLElement): boolean => {\n const activeElement = document.activeElement;\n if (!activeElement) {\n return false;\n }\n\n // Handle shadow DOM.\n let shadowActive = activeElement;\n while (shadowActive?.shadowRoot?.activeElement) {\n shadowActive = shadowActive.shadowRoot.activeElement;\n }\n\n // Check if element or any parent has focus.\n let current: HTMLElement | null = element;\n while (current) {\n if (current === activeElement || current === shadowActive) {\n return true;\n }\n current = current.parentElement;\n }\n\n return false;\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { type PropsWithChildren, type SVGProps } from 'react';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { type Dimension, type Point } from '../types';\n\n// Refs\n// - https://airbnb.io/visx/gallery\n// - https://github.com/tldraw/tldraw/blob/main/packages/editor/src/lib/primitives/Vec.ts\n\nexport const createPath = (points: Point[], join = false) => {\n return ['M', points.map(({ x, y }) => `${x},${y}`).join(' L '), join ? 'Z' : ''].join(' ');\n};\n\n/**\n * https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths\n * NOTE: Leave space around shape for line width.\n */\nexport const Markers = ({ id = 'dx-marker', classNames }: ThemedClassName<{ id?: string }>) => {\n return (\n <>\n <Arrow id={`${id}-arrow-start`} dir='start' classNames={classNames} />\n <Arrow id={`${id}-arrow-end`} dir='end' classNames={classNames} />\n <Arrow id={`${id}-triangle-start`} dir='start' closed classNames={classNames} />\n <Arrow id={`${id}-triangle-end`} dir='end' closed classNames={classNames} />\n <Marker id={`${id}-circle`} pos={{ x: 8, y: 8 }} size={{ width: 16, height: 16 }}>\n <circle cx={8} cy={8} r={5} stroke={'context-stroke'} className={mx(classNames)} />\n </Marker>\n </>\n );\n};\n\nexport type MarkerProps = SVGProps<SVGMarkerElement> &\n PropsWithChildren<\n ThemedClassName<{\n id: string;\n pos: Point;\n size: Dimension;\n fill?: boolean;\n }>\n >;\n\n/**\n * https://www.w3.org/TR/SVG2/painting.html#Markers\n */\nexport const Marker = ({\n id,\n className,\n children,\n pos: { x: refX, y: refY },\n size: { width: markerWidth, height: markerHeight },\n fill,\n ...rest\n}: MarkerProps) => (\n <marker\n id={id}\n className={className}\n {...{\n refX,\n refY,\n markerWidth,\n markerHeight,\n markerUnits: 'strokeWidth',\n orient: 'auto',\n ...rest,\n }}\n >\n {children}\n </marker>\n);\n\nexport const Arrow = ({\n classNames,\n id,\n size = 16,\n dir = 'end',\n closed = false,\n}: ThemedClassName<{ id: string; size?: number; dir?: 'start' | 'end'; closed?: boolean }>) => (\n <Marker\n id={id}\n size={{ width: size, height: size }}\n pos={dir === 'end' ? { x: size, y: size / 2 } : { x: 0, y: size / 2 }}\n >\n <path\n fill={closed ? undefined : 'none'}\n stroke={'context-stroke'}\n className={mx(classNames)}\n d={createPath(\n dir === 'end'\n ? [\n { x: 1, y: 1 },\n { x: size, y: size / 2 },\n { x: 1, y: size - 1 },\n ]\n : [\n { x: size - 1, y: 1 },\n { x: 0, y: size / 2 },\n { x: size - 1, y: size - 1 },\n ],\n closed,\n )}\n />\n </Marker>\n);\n\nexport const GridPattern = ({\n classNames,\n id,\n size,\n offset,\n}: ThemedClassName<{ id: string; size: number; offset: Point }>) => (\n <pattern\n id={id}\n x={(size / 2 + offset.x) % size}\n y={(size / 2 + offset.y) % size}\n width={size}\n height={size}\n patternUnits='userSpaceOnUse'\n >\n {/* TODO(burdon): vars. */}\n <g className={mx(classNames)}>\n <line x1={0} y1={size / 2} x2={size} y2={size / 2} />\n <line x1={size / 2} y1={0} x2={size / 2} y2={size} />\n </g>\n </pattern>\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nlet logged = false;\n\n/**\n * Get the relative point of the cursor.\n * NOTE: ev.offset returns the position relative to the target.\n */\nexport const getRelativePoint = (el: HTMLElement, ev: MouseEvent) => {\n const rect = el.getBoundingClientRect();\n return { x: ev.clientX - rect.x, y: ev.clientY - rect.top };\n};\n\n/**\n *\n */\n// TODO(burdon): Factor out.\nexport const testId = <ID = string>(id: ID, inspect = false) => {\n if (inspect) {\n if (!logged) {\n // eslint-disable-next-line no-console\n console.log('Open storybook in expanded window;\\nthen run INSPECT()');\n logged = true;\n }\n\n (window as any).INSPECT = () => {\n const el = document.querySelector(`[data-test-id=\"${id}\"]`);\n (window as any).inspect(el);\n // eslint-disable-next-line no-console\n console.log(el);\n };\n }\n\n return { [DATA_TEST_ID]: id };\n};\n\nexport const inspectElement = (el: Element) => {\n (window as any).INSPECT = () => {\n (window as any).inspect(el);\n (window as any).element = el;\n // eslint-disable-next-line no-console\n console.log('Open storybook in expanded window;\\nthen run INSPECT()');\n // eslint-disable-next-line no-console\n console.log(el);\n };\n};\n\nexport const DATA_TEST_ID = 'data-test-id';\n", "//\n// Copyright 2024 DXOS.org\n// Adapted from: https://github.com/smplrspace/react-fps-stats\n//\n\nimport React, { useEffect, useReducer, useRef } from 'react';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nexport type FPSProps = ThemedClassName<{\n width?: number;\n height?: number;\n bar?: string;\n}>;\n\ntype State = {\n max: number;\n len: number;\n fps: number[];\n frames: number;\n prevTime: number;\n};\n\nconst SEC = 1_000;\n\nexport const FPS = ({ classNames, width = 60, height = 30, bar = 'bg-cyan-500' }: FPSProps) => {\n const [{ fps, max, len }, dispatch] = useReducer(\n (state: State) => {\n const currentTime = Date.now();\n if (currentTime > state.prevTime + SEC) {\n const nextFPS = [\n ...new Array(Math.floor((currentTime - state.prevTime - SEC) / SEC)).fill(0),\n Math.max(1, Math.round((state.frames * SEC) / (currentTime - state.prevTime))),\n ];\n return {\n max: Math.max(state.max, ...nextFPS),\n len: Math.min(state.len + nextFPS.length, width),\n fps: [...state.fps, ...nextFPS].slice(-width),\n frames: 1,\n prevTime: currentTime,\n };\n } else {\n return { ...state, frames: state.frames + 1 };\n }\n },\n {\n max: 0,\n len: 0,\n fps: [],\n frames: 0,\n prevTime: Date.now(),\n },\n );\n\n const requestRef = useRef<number | null>(null);\n const tick = () => {\n dispatch();\n requestRef.current = requestAnimationFrame(tick);\n };\n\n useEffect(() => {\n requestRef.current = requestAnimationFrame(tick);\n return () => {\n if (requestRef.current) {\n cancelAnimationFrame(requestRef.current);\n }\n };\n }, []);\n\n return (\n <div\n style={{ width: width + 6 }}\n className={mx(\n 'relative flex flex-col p-0.5',\n 'bg-baseSurface text-xs text-subdued font-thin pointer-events-none border border-separator',\n classNames,\n )}\n >\n <div>{fps[len - 1]} FPS</div>\n <div className='w-full relative' style={{ height }}>\n {fps.map((frame, i) => (\n <div\n key={`fps-${i}`}\n className={bar}\n style={{\n position: 'absolute',\n bottom: 0,\n right: `${len - 1 - i}px`,\n height: `${(height * frame) / max}px`,\n width: 1,\n }}\n />\n ))}\n </div>\n </div>\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { forwardRef, useId, useMemo } from 'react';\n\nimport { type ThemedClassName, useForwardedRef } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { useCanvasContext } from '../../hooks';\nimport { type Point } from '../../types';\nimport { GridPattern, testId } from '../../util';\n\nconst gridRatios = [1 / 4, 1, 4, 16];\n\nconst defaultGridSize = 16;\nconst defaultOffset: Point = { x: 0, y: 0 };\n\nconst createId = (parent: string, grid: number) => `dx-canvas-grid-${parent}-${grid}`;\n\nexport type GridProps = ThemedClassName<{\n size?: number;\n scale?: number;\n offset?: Point;\n showAxes?: boolean;\n}>;\n\nexport const GridComponent = forwardRef<SVGSVGElement, GridProps>(\n (\n { size: gridSize = defaultGridSize, scale = 1, offset = defaultOffset, showAxes = true, classNames },\n forwardedRef,\n ) => {\n const svgRef = useForwardedRef(forwardedRef);\n const instanceId = useId();\n const grids = useMemo(\n () =>\n gridRatios\n .map((ratio) => ({ id: ratio, size: ratio * gridSize * scale }))\n .filter(({ size }) => size >= gridSize && size <= 256),\n [gridSize, scale],\n );\n\n const { width = 0, height = 0 } = svgRef.current?.getBoundingClientRect() ?? {};\n\n return (\n <svg\n {...testId('dx-canvas-grid')}\n ref={svgRef}\n className={mx(\n 'absolute inset-0 w-full h-full pointer-events-none touch-none select-none',\n 'stroke-neutral-500',\n classNames,\n )}\n >\n {/* NOTE: The pattern is offset so that the middle of the pattern aligns with the grid. */}\n <defs>\n {grids.map(({ id, size }) => (\n <GridPattern key={id} id={createId(instanceId, id)} offset={offset} size={size} />\n ))}\n </defs>\n {showAxes && (\n <>\n <line x1={0} y1={offset.y} x2={width} y2={offset.y} className='stroke-neutral-500 opacity-40' />\n <line x1={offset.x} y1={0} x2={offset.x} y2={height} className='stroke-neutral-500 opacity-40' />\n </>\n )}\n <g>\n {grids.map(({ id }, i) => (\n <rect\n key={id}\n opacity={0.1 + i * 0.05}\n fill={`url(#${createId(instanceId, id)})`}\n width='100%'\n height='100%'\n />\n ))}\n </g>\n </svg>\n );\n },\n);\n\n// TODO(burdon): Use id of parent canvas.\nexport const Grid = (props: GridProps) => {\n const { scale, offset } = useCanvasContext();\n return <GridComponent {...props} scale={scale} offset={offset} />;\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport * as Schema from 'effect/Schema';\n\nexport const Point = Schema.Struct({ x: Schema.Number, y: Schema.Number });\nexport const Dimension = Schema.Struct({ width: Schema.Number, height: Schema.Number });\nexport const Rect = Schema.extend(Point, Dimension);\n\nexport type Point = Schema.Schema.Type<typeof Point>;\nexport type Dimension = Schema.Schema.Type<typeof Dimension>;\nexport type Rect = Schema.Schema.Type<typeof Rect>;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React", "forwardRef", "useEffect", "useImperativeHandle", "useMemo", "useState", "useResizeDetector", "mx", "easeSinOut", "interpolate", "interpolateObject", "transition", "applyToPoints", "compose", "identity", "inverse", "scale", "scaleMatrix", "translate", "translateMatrix", "defaultOrigin", "x", "y", "ProjectionMapper", "_bounds", "width", "height", "_scale", "_offset", "_toScreen", "identity", "_toModel", "bounds", "scale", "offset", "update", "compose", "translateMatrix", "scaleMatrix", "inverse", "toScreen", "points", "applyToPoints", "toModel", "getZoomTransform", "pos", "newScale", "zoomInPlace", "setTransform", "current", "next", "delay", "is", "interpolate", "transition", "ease", "easeSinOut", "duration", "tween", "t", "noop", "zoomTo", "cb", "interpolateObject", "on", "createContext", "useContext", "raise", "CanvasContext", "createContext", "useCanvasContext", "useContext", "raise", "Error", "bindAll", "useEffect", "React", "mx", "createPath", "points", "join", "map", "x", "y", "Markers", "id", "classNames", "Arrow", "dir", "closed", "Marker", "pos", "size", "width", "height", "circle", "cx", "cy", "r", "stroke", "className", "mx", "children", "refX", "refY", "markerWidth", "markerHeight", "fill", "rest", "marker", "markerUnits", "orient", "path", "undefined", "d", "GridPattern", "offset", "pattern", "patternUnits", "g", "line", "x1", "y1", "x2", "y2", "logged", "getRelativePoint", "el", "ev", "rect", "getBoundingClientRect", "x", "clientX", "y", "clientY", "top", "testId", "id", "inspect", "console", "log", "window", "INSPECT", "document", "querySelector", "DATA_TEST_ID", "inspectElement", "element", "defaultOptions", "zoom", "useWheel", "options", "root", "setProjection", "useCanvasContext", "useEffect", "bindAll", "type", "capture", "passive", "listener", "ev", "zooming", "isWheelZooming", "hasFocus", "preventDefault", "ctrlKey", "scale", "offset", "pos", "getRelativePoint", "scaleSensitivity", "newScale", "Math", "exp", "deltaY", "getZoomTransform", "x", "y", "deltaX", "metaKey", "abs", "deltaZ", "element", "activeElement", "document", "shadowActive", "shadowRoot", "current", "parentElement", "Canvas", "forwardRef", "children", "classNames", "scale", "_scale", "offset", "_offset", "defaultOrigin", "props", "forwardedRef", "ref", "width", "height", "useResizeDetector", "ready", "setReady", "useState", "setProjection", "useEffect", "x", "y", "projection", "useMemo", "ProjectionMapper", "update", "styles", "transform", "visibility", "useImperativeHandle", "React", "CanvasContext", "Provider", "value", "root", "current", "div", "role", "className", "mx", "React", "useEffect", "useReducer", "useRef", "mx", "SEC", "FPS", "classNames", "width", "height", "bar", "fps", "max", "len", "dispatch", "useReducer", "state", "currentTime", "Date", "now", "prevTime", "nextFPS", "Array", "Math", "floor", "fill", "round", "frames", "min", "length", "slice", "requestRef", "useRef", "tick", "current", "requestAnimationFrame", "useEffect", "cancelAnimationFrame", "React", "div", "style", "className", "mx", "map", "frame", "i", "key", "position", "bottom", "right", "React", "forwardRef", "useId", "useMemo", "useForwardedRef", "mx", "gridRatios", "defaultGridSize", "defaultOffset", "x", "y", "createId", "parent", "grid", "GridComponent", "forwardRef", "size", "gridSize", "scale", "offset", "showAxes", "classNames", "forwardedRef", "svgRef", "useForwardedRef", "instanceId", "useId", "grids", "useMemo", "map", "ratio", "id", "filter", "width", "height", "current", "getBoundingClientRect", "React", "svg", "testId", "ref", "className", "mx", "defs", "GridPattern", "key", "line", "x1", "y1", "x2", "y2", "g", "i", "rect", "opacity", "fill", "Grid", "props", "useCanvasContext", "Schema", "Point", "Struct", "x", "Number", "y", "Dimension", "width", "height", "Rect", "extend"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"src/hooks/projection.tsx":{"bytes":11707,"imports":[{"path":"d3","kind":"import-statement","external":true},{"path":"transformation-matrix","kind":"import-statement","external":true}],"format":"esm"},"src/hooks/useCanvasContext.tsx":{"bytes":2093,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/debug","kind":"import-statement","external":true}],"format":"esm"},"src/util/svg.tsx":{"bytes":13293,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"src/util/util.ts":{"bytes":4725,"imports":[],"format":"esm"},"src/util/index.ts":{"bytes":526,"imports":[{"path":"src/util/svg.tsx","kind":"import-statement","original":"./svg"},{"path":"src/util/util.ts","kind":"import-statement","original":"./util"}],"format":"esm"},"src/hooks/useWheel.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"src/hooks/projection.tsx":{"bytes":11707,"imports":[{"path":"d3","kind":"import-statement","external":true},{"path":"transformation-matrix","kind":"import-statement","external":true}],"format":"esm"},"src/hooks/useCanvasContext.tsx":{"bytes":2093,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/debug","kind":"import-statement","external":true}],"format":"esm"},"src/util/svg.tsx":{"bytes":13293,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"src/util/util.ts":{"bytes":4725,"imports":[],"format":"esm"},"src/util/index.ts":{"bytes":526,"imports":[{"path":"src/util/svg.tsx","kind":"import-statement","original":"./svg"},{"path":"src/util/util.ts","kind":"import-statement","original":"./util"}],"format":"esm"},"src/hooks/useWheel.tsx":{"bytes":10133,"imports":[{"path":"bind-event-listener","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"src/util/index.ts","kind":"import-statement","original":"../util"},{"path":"src/hooks/projection.tsx","kind":"import-statement","original":"./projection"},{"path":"src/hooks/useCanvasContext.tsx","kind":"import-statement","original":"./useCanvasContext"}],"format":"esm"},"src/hooks/index.ts":{"bytes":662,"imports":[{"path":"src/hooks/projection.tsx","kind":"import-statement","original":"./projection"},{"path":"src/hooks/useCanvasContext.tsx","kind":"import-statement","original":"./useCanvasContext"},{"path":"src/hooks/useWheel.tsx","kind":"import-statement","original":"./useWheel"}],"format":"esm"},"src/components/Canvas/Canvas.tsx":{"bytes":9573,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-resize-detector","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"src/hooks/index.ts","kind":"import-statement","original":"../../hooks"}],"format":"esm"},"src/components/Canvas/index.ts":{"bytes":470,"imports":[{"path":"src/components/Canvas/Canvas.tsx","kind":"import-statement","original":"./Canvas"}],"format":"esm"},"src/components/FPS.tsx":{"bytes":9371,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"src/components/Grid/Grid.tsx":{"bytes":9761,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"src/hooks/index.ts","kind":"import-statement","original":"../../hooks"},{"path":"src/util/index.ts","kind":"import-statement","original":"../../util"}],"format":"esm"},"src/components/Grid/index.ts":{"bytes":462,"imports":[{"path":"src/components/Grid/Grid.tsx","kind":"import-statement","original":"./Grid"}],"format":"esm"},"src/components/index.ts":{"bytes":618,"imports":[{"path":"src/components/Canvas/index.ts","kind":"import-statement","original":"./Canvas"},{"path":"src/components/FPS.tsx","kind":"import-statement","original":"./FPS"},{"path":"src/components/Grid/index.ts","kind":"import-statement","original":"./Grid"}],"format":"esm"},"src/types.ts":{"bytes":1697,"imports":[{"path":"effect/Schema","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":702,"imports":[{"path":"src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"src/hooks/index.ts","kind":"import-statement","original":"./hooks"},{"path":"src/types.ts","kind":"import-statement","original":"./types"},{"path":"src/util/index.ts","kind":"import-statement","original":"./util"}],"format":"esm"}},"outputs":{"dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":35628},"dist/lib/browser/index.mjs":{"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-resize-detector","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"d3","kind":"import-statement","external":true},{"path":"transformation-matrix","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/debug","kind":"import-statement","external":true},{"path":"bind-event-listener","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"effect/Schema","kind":"import-statement","external":true}],"exports":["Arrow","Canvas","CanvasContext","DATA_TEST_ID","Dimension","FPS","Grid","GridComponent","GridPattern","Marker","Markers","Point","ProjectionMapper","Rect","createPath","defaultOrigin","getRelativePoint","getZoomTransform","inspectElement","testId","useCanvasContext","useWheel","zoomInPlace","zoomTo"],"entryPoint":"src/index.ts","inputs":{"src/components/Canvas/Canvas.tsx":{"bytesInOutput":2301},"src/hooks/projection.tsx":{"bytesInOutput":2203},"src/hooks/index.ts":{"bytesInOutput":0},"src/hooks/useCanvasContext.tsx":{"bytesInOutput":260},"src/hooks/useWheel.tsx":{"bytesInOutput":2116},"src/util/svg.tsx":{"bytesInOutput":3523},"src/util/index.ts":{"bytesInOutput":0},"src/util/util.ts":{"bytesInOutput":800},"src/components/Canvas/index.ts":{"bytesInOutput":0},"src/components/index.ts":{"bytesInOutput":0},"src/components/FPS.tsx":{"bytesInOutput":2360},"src/components/Grid/Grid.tsx":{"bytesInOutput":2507},"src/components/Grid/index.ts":{"bytesInOutput":0},"src/index.ts":{"bytesInOutput":0},"src/types.ts":{"bytesInOutput":240}},"bytes":16992}}}
|
|
@@ -7,22 +7,22 @@ import { useResizeDetector } from "react-resize-detector";
|
|
|
7
7
|
import { mx as mx2 } from "@dxos/react-ui-theme";
|
|
8
8
|
|
|
9
9
|
// src/hooks/projection.tsx
|
|
10
|
-
import { interpolate, interpolateObject, transition
|
|
10
|
+
import { easeSinOut, interpolate, interpolateObject, transition } from "d3";
|
|
11
11
|
import { applyToPoints, compose, identity, inverse, scale as scaleMatrix, translate as translateMatrix } from "transformation-matrix";
|
|
12
12
|
var defaultOrigin = {
|
|
13
13
|
x: 0,
|
|
14
14
|
y: 0
|
|
15
15
|
};
|
|
16
16
|
var ProjectionMapper = class {
|
|
17
|
+
_bounds = {
|
|
18
|
+
width: 0,
|
|
19
|
+
height: 0
|
|
20
|
+
};
|
|
21
|
+
_scale = 1;
|
|
22
|
+
_offset = defaultOrigin;
|
|
23
|
+
_toScreen = identity();
|
|
24
|
+
_toModel = identity();
|
|
17
25
|
constructor(bounds, scale, offset) {
|
|
18
|
-
this._bounds = {
|
|
19
|
-
width: 0,
|
|
20
|
-
height: 0
|
|
21
|
-
};
|
|
22
|
-
this._scale = 1;
|
|
23
|
-
this._offset = defaultOrigin;
|
|
24
|
-
this._toScreen = identity();
|
|
25
|
-
this._toModel = identity();
|
|
26
26
|
if (bounds && scale && offset) {
|
|
27
27
|
this.update(bounds, scale, offset);
|
|
28
28
|
}
|
|
@@ -502,7 +502,7 @@ var FPS = ({ classNames, width = 60, height = 30, bar = "bg-cyan-500" }) => {
|
|
|
502
502
|
frames: 0,
|
|
503
503
|
prevTime: Date.now()
|
|
504
504
|
});
|
|
505
|
-
const requestRef = useRef();
|
|
505
|
+
const requestRef = useRef(null);
|
|
506
506
|
const tick = () => {
|
|
507
507
|
dispatch();
|
|
508
508
|
requestRef.current = requestAnimationFrame(tick);
|
|
@@ -543,7 +543,7 @@ var FPS = ({ classNames, width = 60, height = 30, bar = "bg-cyan-500" }) => {
|
|
|
543
543
|
|
|
544
544
|
// src/components/Grid/Grid.tsx
|
|
545
545
|
import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
|
|
546
|
-
import React4, { forwardRef as forwardRef2, useMemo as useMemo2
|
|
546
|
+
import React4, { forwardRef as forwardRef2, useId, useMemo as useMemo2 } from "react";
|
|
547
547
|
import { useForwardedRef } from "@dxos/react-ui";
|
|
548
548
|
import { mx as mx4 } from "@dxos/react-ui-theme";
|
|
549
549
|
var gridRatios = [
|
|
@@ -618,7 +618,7 @@ var Grid = (props) => {
|
|
|
618
618
|
};
|
|
619
619
|
|
|
620
620
|
// src/types.ts
|
|
621
|
-
import
|
|
621
|
+
import * as Schema from "effect/Schema";
|
|
622
622
|
var Point = Schema.Struct({
|
|
623
623
|
x: Schema.Number,
|
|
624
624
|
y: Schema.Number
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/Canvas/Canvas.tsx", "../../../src/hooks/projection.tsx", "../../../src/hooks/useCanvasContext.tsx", "../../../src/hooks/useWheel.tsx", "../../../src/util/svg.tsx", "../../../src/util/util.ts", "../../../src/components/FPS.tsx", "../../../src/components/Grid/Grid.tsx", "../../../src/types.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport React, {\n type CSSProperties,\n type HTMLAttributes,\n type PropsWithChildren,\n forwardRef,\n useEffect,\n useImperativeHandle,\n useMemo,\n useState,\n} from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { defaultOrigin, CanvasContext, ProjectionMapper, type ProjectionState } from '../../hooks';\n\nexport interface CanvasController {\n setProjection(projection: ProjectionState): Promise<void>;\n}\n\nexport type CanvasProps = ThemedClassName<PropsWithChildren<Partial<ProjectionState> & HTMLAttributes<HTMLDivElement>>>;\n\n/**\n * Root canvas component.\n * Manages CSS projection.\n */\nexport const Canvas = forwardRef<CanvasController, CanvasProps>(\n ({ children, classNames, scale: _scale = 1, offset: _offset = defaultOrigin, ...props }, forwardedRef) => {\n // Size.\n const { ref, width = 0, height = 0 } = useResizeDetector();\n\n // Ready when initially resized.\n const [ready, setReady] = useState(false);\n\n // Projection.\n const [{ scale, offset }, setProjection] = useState<ProjectionState>({ scale: _scale, offset: _offset });\n useEffect(() => {\n if (width && height && offset === defaultOrigin) {\n setProjection({ scale, offset: { x: width / 2, y: height / 2 } });\n }\n }, [width, height, scale, offset]);\n\n // Projection mapper.\n const projection = useMemo(() => new ProjectionMapper(), []);\n useEffect(() => {\n projection.update({ width, height }, scale, offset);\n if (offset !== defaultOrigin) {\n setReady(true);\n }\n }, [projection, scale, offset, width, height]);\n\n // CSS transforms.\n const styles = useMemo<CSSProperties>(() => {\n return {\n // NOTE: Order is important.\n transform: `translate(${offset.x}px, ${offset.y}px) scale(${scale})`,\n visibility: width && height ? 'visible' : 'hidden',\n };\n }, [scale, offset]);\n\n // Controller.\n useImperativeHandle(\n forwardedRef,\n () => {\n return {\n setProjection: async (projection: ProjectionState) => {\n setProjection(projection);\n },\n };\n },\n [ref],\n );\n\n return (\n <CanvasContext.Provider\n value={{ root: ref.current, ready, width, height, scale, offset, styles, projection, setProjection }}\n >\n <div role='none' {...props} className={mx('absolute inset-0 overflow-hidden', classNames)} ref={ref}>\n {ready ? children : null}\n </div>\n </CanvasContext.Provider>\n );\n },\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { interpolate, interpolateObject, transition, easeSinOut } from 'd3';\nimport {\n type Matrix,\n applyToPoints,\n compose,\n identity,\n inverse,\n scale as scaleMatrix,\n translate as translateMatrix,\n} from 'transformation-matrix';\n\nimport { type Point, type Dimension } from '../types';\n\nexport const defaultOrigin: Point = { x: 0, y: 0 };\n\n// TODO(burdon): Rotation also?\nexport type ProjectionState = {\n scale: number;\n offset: Point;\n};\n\n/**\n * Maps between screen and model coordinates.\n */\nexport interface Projection {\n get bounds(): Dimension;\n get scale(): number;\n get offset(): Point;\n\n /**\n * Maps the model space to the screen offset (from the top-left of the element).\n */\n toScreen(points: Point[]): Point[];\n\n /**\n * Maps the pointer coordinate (from the top-left of the element) to the model space.\n */\n toModel(points: Point[]): Point[];\n}\n\nexport class ProjectionMapper implements Projection {\n private _bounds: Dimension = { width: 0, height: 0 };\n private _scale: number = 1;\n private _offset: Point = defaultOrigin;\n private _toScreen: Matrix = identity();\n private _toModel: Matrix = identity();\n\n constructor(bounds?: Dimension, scale?: number, offset?: Point) {\n if (bounds && scale && offset) {\n this.update(bounds, scale, offset);\n }\n }\n\n update(bounds: Dimension, scale: number, offset: Point): this {\n this._bounds = bounds;\n this._scale = scale;\n this._offset = offset;\n this._toScreen = compose(\n // NOTE: Order is important.\n translateMatrix(this._offset.x, this._offset.y),\n scaleMatrix(this._scale),\n // TODO(burdon): Flip.\n // flipX(),\n );\n this._toModel = inverse(this._toScreen);\n return this;\n }\n\n get bounds() {\n return this._bounds;\n }\n\n get scale() {\n return this._scale;\n }\n\n get offset() {\n return this._offset;\n }\n\n toScreen(points: Point[]): Point[] {\n return applyToPoints(this._toScreen, points);\n }\n\n toModel(points: Point[]): Point[] {\n return applyToPoints(this._toModel, points);\n }\n}\n\n/**\n * Maintain position while zooming.\n */\nexport const getZoomTransform = ({\n scale,\n offset,\n pos,\n newScale,\n}: ProjectionState & { pos: Point; newScale: number }): ProjectionState => {\n return {\n scale: newScale,\n offset: {\n x: pos.x - (pos.x - offset.x) * (newScale / scale),\n y: pos.y - (pos.y - offset.y) * (newScale / scale),\n },\n };\n};\n\n/**\n * Zoom while keeping the specified position in place.\n */\n// TODO(burdon): Convert to object.\nexport const zoomInPlace = (\n setTransform: (state: ProjectionState) => void,\n pos: Point,\n offset: Point,\n current: number,\n next: number,\n delay = 200,\n) => {\n const is = interpolate(current, next);\n transition()\n .ease(easeSinOut)\n .duration(delay)\n .tween('zoom', () => (t) => {\n const newScale = is(t);\n setTransform(getZoomTransform({ scale: current, newScale, offset, pos }));\n });\n};\n\nconst noop = () => {};\n\n/**\n * Zoom to new scale and position.\n */\n// TODO(burdon): Convert to object.\nexport const zoomTo = (\n setTransform: (state: ProjectionState) => void,\n current: ProjectionState,\n next: ProjectionState,\n delay = 200,\n cb = noop,\n) => {\n const is = interpolateObject({ scale: current.scale, ...current.offset }, { scale: next.scale, ...next.offset });\n transition()\n .ease(easeSinOut)\n .duration(delay)\n .tween('zoom', () => (t) => {\n const { scale, x, y } = is(t);\n setTransform({ scale, offset: { x, y } });\n })\n .on('end', cb);\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { type CSSProperties, type Dispatch, type SetStateAction, createContext, useContext } from 'react';\n\nimport { raise } from '@dxos/debug';\n\nimport { type Projection, type ProjectionState } from './projection';\n\nexport type CanvasContext = ProjectionState & {\n root: HTMLDivElement;\n ready: boolean;\n width: number;\n height: number;\n styles: CSSProperties;\n projection: Projection;\n setProjection: Dispatch<SetStateAction<ProjectionState>>;\n};\n\n/**\n * @internal\n */\n// TODO(burdon): Use radix?\nexport const CanvasContext = createContext<CanvasContext | null>(null);\n\nexport const useCanvasContext = (): CanvasContext => {\n return useContext(CanvasContext) ?? raise(new Error('Missing CanvasContext'));\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { bindAll } from 'bind-event-listener';\nimport { useEffect } from 'react';\n\nimport { getZoomTransform } from './projection';\nimport { useCanvasContext } from './useCanvasContext';\nimport { getRelativePoint } from '../util';\n\nexport type WheelOptions = {\n zoom?: boolean;\n};\n\nconst defaultOptions: WheelOptions = {\n zoom: true,\n};\n\n/**\n * Handle wheel events to update the transform state (zoom and offset).\n */\nexport const useWheel = (options: WheelOptions = defaultOptions) => {\n const { root, setProjection } = useCanvasContext();\n useEffect(() => {\n if (!root) {\n return;\n }\n\n return bindAll(root, [\n {\n type: 'wheel',\n options: { capture: true, passive: false },\n listener: (ev: WheelEvent) => {\n const zooming = isWheelZooming(ev);\n if (!hasFocus(root) && !zooming) {\n return;\n }\n\n ev.preventDefault();\n if (zooming && !options.zoom) {\n return;\n }\n\n // Zoom or pan.\n if (ev.ctrlKey) {\n if (!root) {\n return;\n }\n\n // Keep centered while zooming.\n setProjection(({ scale, offset }) => {\n const pos = getRelativePoint(root, ev);\n const scaleSensitivity = 0.01;\n const newScale = scale * Math.exp(-ev.deltaY * scaleSensitivity);\n return getZoomTransform({ scale, offset, newScale, pos });\n });\n } else {\n setProjection(({ scale, offset: { x, y } }) => {\n return {\n scale,\n offset: {\n x: x - ev.deltaX,\n y: y - ev.deltaY,\n },\n };\n });\n }\n },\n },\n ]);\n }, [root]);\n};\n\nconst isWheelZooming = (ev: WheelEvent): boolean => {\n // Check for ctrl/cmd key + wheel action.\n if (ev.ctrlKey || ev.metaKey) {\n // Some browsers use deltaY, others deltaZ for zoom.\n return Math.abs(ev.deltaY) > 0 || Math.abs(ev.deltaZ) > 0;\n }\n\n return false;\n};\n\nconst hasFocus = (element: HTMLElement): boolean => {\n const activeElement = document.activeElement;\n if (!activeElement) {\n return false;\n }\n\n // Handle shadow DOM.\n let shadowActive = activeElement;\n while (shadowActive?.shadowRoot?.activeElement) {\n shadowActive = shadowActive.shadowRoot.activeElement;\n }\n\n // Check if element or any parent has focus.\n let current: HTMLElement | null = element;\n while (current) {\n if (current === activeElement || current === shadowActive) {\n return true;\n }\n current = current.parentElement;\n }\n\n return false;\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { type PropsWithChildren, type SVGProps } from 'react';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { type Dimension, type Point } from '../types';\n\n// Refs\n// - https://airbnb.io/visx/gallery\n// - https://github.com/tldraw/tldraw/blob/main/packages/editor/src/lib/primitives/Vec.ts\n\nexport const createPath = (points: Point[], join = false) => {\n return ['M', points.map(({ x, y }) => `${x},${y}`).join(' L '), join ? 'Z' : ''].join(' ');\n};\n\n/**\n * https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths\n * NOTE: Leave space around shape for line width.\n */\nexport const Markers = ({ id = 'dx-marker', classNames }: ThemedClassName<{ id?: string }>) => {\n return (\n <>\n <Arrow id={`${id}-arrow-start`} dir='start' classNames={classNames} />\n <Arrow id={`${id}-arrow-end`} dir='end' classNames={classNames} />\n <Arrow id={`${id}-triangle-start`} dir='start' closed classNames={classNames} />\n <Arrow id={`${id}-triangle-end`} dir='end' closed classNames={classNames} />\n <Marker id={`${id}-circle`} pos={{ x: 8, y: 8 }} size={{ width: 16, height: 16 }}>\n <circle cx={8} cy={8} r={5} stroke={'context-stroke'} className={mx(classNames)} />\n </Marker>\n </>\n );\n};\n\nexport type MarkerProps = SVGProps<SVGMarkerElement> &\n PropsWithChildren<\n ThemedClassName<{\n id: string;\n pos: Point;\n size: Dimension;\n fill?: boolean;\n }>\n >;\n\n/**\n * https://www.w3.org/TR/SVG2/painting.html#Markers\n */\nexport const Marker = ({\n id,\n className,\n children,\n pos: { x: refX, y: refY },\n size: { width: markerWidth, height: markerHeight },\n fill,\n ...rest\n}: MarkerProps) => (\n <marker\n id={id}\n className={className}\n {...{\n refX,\n refY,\n markerWidth,\n markerHeight,\n markerUnits: 'strokeWidth',\n orient: 'auto',\n ...rest,\n }}\n >\n {children}\n </marker>\n);\n\nexport const Arrow = ({\n classNames,\n id,\n size = 16,\n dir = 'end',\n closed = false,\n}: ThemedClassName<{ id: string; size?: number; dir?: 'start' | 'end'; closed?: boolean }>) => (\n <Marker\n id={id}\n size={{ width: size, height: size }}\n pos={dir === 'end' ? { x: size, y: size / 2 } : { x: 0, y: size / 2 }}\n >\n <path\n fill={closed ? undefined : 'none'}\n stroke={'context-stroke'}\n className={mx(classNames)}\n d={createPath(\n dir === 'end'\n ? [\n { x: 1, y: 1 },\n { x: size, y: size / 2 },\n { x: 1, y: size - 1 },\n ]\n : [\n { x: size - 1, y: 1 },\n { x: 0, y: size / 2 },\n { x: size - 1, y: size - 1 },\n ],\n closed,\n )}\n />\n </Marker>\n);\n\nexport const GridPattern = ({\n classNames,\n id,\n size,\n offset,\n}: ThemedClassName<{ id: string; size: number; offset: Point }>) => (\n <pattern\n id={id}\n x={(size / 2 + offset.x) % size}\n y={(size / 2 + offset.y) % size}\n width={size}\n height={size}\n patternUnits='userSpaceOnUse'\n >\n {/* TODO(burdon): vars. */}\n <g className={mx(classNames)}>\n <line x1={0} y1={size / 2} x2={size} y2={size / 2} />\n <line x1={size / 2} y1={0} x2={size / 2} y2={size} />\n </g>\n </pattern>\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nlet logged = false;\n\n/**\n * Get the relative point of the cursor.\n * NOTE: ev.offset returns the position relative to the target.\n */\nexport const getRelativePoint = (el: HTMLElement, ev: MouseEvent) => {\n const rect = el.getBoundingClientRect();\n return { x: ev.clientX - rect.x, y: ev.clientY - rect.top };\n};\n\n/**\n *\n */\n// TODO(burdon): Factor out.\nexport const testId = <ID = string>(id: ID, inspect = false) => {\n if (inspect) {\n if (!logged) {\n // eslint-disable-next-line no-console\n console.log('Open storybook in expanded window;\\nthen run INSPECT()');\n logged = true;\n }\n\n (window as any).INSPECT = () => {\n const el = document.querySelector(`[data-test-id=\"${id}\"]`);\n (window as any).inspect(el);\n // eslint-disable-next-line no-console\n console.log(el);\n };\n }\n\n return { [DATA_TEST_ID]: id };\n};\n\nexport const inspectElement = (el: Element) => {\n (window as any).INSPECT = () => {\n (window as any).inspect(el);\n (window as any).element = el;\n // eslint-disable-next-line no-console\n console.log('Open storybook in expanded window;\\nthen run INSPECT()');\n // eslint-disable-next-line no-console\n console.log(el);\n };\n};\n\nexport const DATA_TEST_ID = 'data-test-id';\n", "//\n// Copyright 2024 DXOS.org\n// Adapted from: https://github.com/smplrspace/react-fps-stats\n//\n\nimport React, { useEffect, useReducer, useRef } from 'react';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nexport type FPSProps = ThemedClassName<{\n width?: number;\n height?: number;\n bar?: string;\n}>;\n\ntype State = {\n max: number;\n len: number;\n fps: number[];\n frames: number;\n prevTime: number;\n};\n\nconst SEC = 1_000;\n\nexport const FPS = ({ classNames, width = 60, height = 30, bar = 'bg-cyan-500' }: FPSProps) => {\n const [{ fps, max, len }, dispatch] = useReducer(\n (state: State) => {\n const currentTime = Date.now();\n if (currentTime > state.prevTime + SEC) {\n const nextFPS = [\n ...new Array(Math.floor((currentTime - state.prevTime - SEC) / SEC)).fill(0),\n Math.max(1, Math.round((state.frames * SEC) / (currentTime - state.prevTime))),\n ];\n return {\n max: Math.max(state.max, ...nextFPS),\n len: Math.min(state.len + nextFPS.length, width),\n fps: [...state.fps, ...nextFPS].slice(-width),\n frames: 1,\n prevTime: currentTime,\n };\n } else {\n return { ...state, frames: state.frames + 1 };\n }\n },\n {\n max: 0,\n len: 0,\n fps: [],\n frames: 0,\n prevTime: Date.now(),\n },\n );\n\n const requestRef = useRef<number>();\n const tick = () => {\n dispatch();\n requestRef.current = requestAnimationFrame(tick);\n };\n\n useEffect(() => {\n requestRef.current = requestAnimationFrame(tick);\n return () => {\n if (requestRef.current) {\n cancelAnimationFrame(requestRef.current);\n }\n };\n }, []);\n\n return (\n <div\n style={{ width: width + 6 }}\n className={mx(\n 'relative flex flex-col p-0.5',\n 'bg-baseSurface text-xs text-subdued font-thin pointer-events-none border border-separator',\n classNames,\n )}\n >\n <div>{fps[len - 1]} FPS</div>\n <div className='w-full relative' style={{ height }}>\n {fps.map((frame, i) => (\n <div\n key={`fps-${i}`}\n className={bar}\n style={{\n position: 'absolute',\n bottom: 0,\n right: `${len - 1 - i}px`,\n height: `${(height * frame) / max}px`,\n width: 1,\n }}\n />\n ))}\n </div>\n </div>\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { forwardRef, useMemo, useId } from 'react';\n\nimport { useForwardedRef, type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { useCanvasContext } from '../../hooks';\nimport { type Point } from '../../types';\nimport { GridPattern, testId } from '../../util';\n\nconst gridRatios = [1 / 4, 1, 4, 16];\n\nconst defaultGridSize = 16;\nconst defaultOffset: Point = { x: 0, y: 0 };\n\nconst createId = (parent: string, grid: number) => `dx-canvas-grid-${parent}-${grid}`;\n\nexport type GridProps = ThemedClassName<{\n size?: number;\n scale?: number;\n offset?: Point;\n showAxes?: boolean;\n}>;\n\nexport const GridComponent = forwardRef<SVGSVGElement, GridProps>(\n (\n { size: gridSize = defaultGridSize, scale = 1, offset = defaultOffset, showAxes = true, classNames },\n forwardedRef,\n ) => {\n const svgRef = useForwardedRef(forwardedRef);\n const instanceId = useId();\n const grids = useMemo(\n () =>\n gridRatios\n .map((ratio) => ({ id: ratio, size: ratio * gridSize * scale }))\n .filter(({ size }) => size >= gridSize && size <= 256),\n [gridSize, scale],\n );\n\n const { width = 0, height = 0 } = svgRef.current?.getBoundingClientRect() ?? {};\n\n return (\n <svg\n {...testId('dx-canvas-grid')}\n ref={svgRef}\n className={mx(\n 'absolute inset-0 w-full h-full pointer-events-none touch-none select-none',\n 'stroke-neutral-500',\n classNames,\n )}\n >\n {/* NOTE: The pattern is offset so that the middle of the pattern aligns with the grid. */}\n <defs>\n {grids.map(({ id, size }) => (\n <GridPattern key={id} id={createId(instanceId, id)} offset={offset} size={size} />\n ))}\n </defs>\n {showAxes && (\n <>\n <line x1={0} y1={offset.y} x2={width} y2={offset.y} className='stroke-neutral-500 opacity-40' />\n <line x1={offset.x} y1={0} x2={offset.x} y2={height} className='stroke-neutral-500 opacity-40' />\n </>\n )}\n <g>\n {grids.map(({ id }, i) => (\n <rect\n key={id}\n opacity={0.1 + i * 0.05}\n fill={`url(#${createId(instanceId, id)})`}\n width='100%'\n height='100%'\n />\n ))}\n </g>\n </svg>\n );\n },\n);\n\n// TODO(burdon): Use id of parent canvas.\nexport const Grid = (props: GridProps) => {\n const { scale, offset } = useCanvasContext();\n return <GridComponent {...props} scale={scale} offset={offset} />;\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { Schema } from 'effect';\n\nexport const Point = Schema.Struct({ x: Schema.Number, y: Schema.Number });\nexport const Dimension = Schema.Struct({ width: Schema.Number, height: Schema.Number });\nexport const Rect = Schema.extend(Point, Dimension);\n\nexport type Point = Schema.Schema.Type<typeof Point>;\nexport type Dimension = Schema.Schema.Type<typeof Dimension>;\nexport type Rect = Schema.Schema.Type<typeof Rect>;\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["React", "forwardRef", "useEffect", "useImperativeHandle", "useMemo", "useState", "useResizeDetector", "mx", "
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport React, {\n type CSSProperties,\n type HTMLAttributes,\n type PropsWithChildren,\n forwardRef,\n useEffect,\n useImperativeHandle,\n useMemo,\n useState,\n} from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { CanvasContext, ProjectionMapper, type ProjectionState, defaultOrigin } from '../../hooks';\n\nexport interface CanvasController {\n setProjection(projection: ProjectionState): Promise<void>;\n}\n\nexport type CanvasProps = ThemedClassName<PropsWithChildren<Partial<ProjectionState> & HTMLAttributes<HTMLDivElement>>>;\n\n/**\n * Root canvas component.\n * Manages CSS projection.\n */\nexport const Canvas = forwardRef<CanvasController, CanvasProps>(\n ({ children, classNames, scale: _scale = 1, offset: _offset = defaultOrigin, ...props }, forwardedRef) => {\n // Size.\n const { ref, width = 0, height = 0 } = useResizeDetector();\n\n // Ready when initially resized.\n const [ready, setReady] = useState(false);\n\n // Projection.\n const [{ scale, offset }, setProjection] = useState<ProjectionState>({ scale: _scale, offset: _offset });\n useEffect(() => {\n if (width && height && offset === defaultOrigin) {\n setProjection({ scale, offset: { x: width / 2, y: height / 2 } });\n }\n }, [width, height, scale, offset]);\n\n // Projection mapper.\n const projection = useMemo(() => new ProjectionMapper(), []);\n useEffect(() => {\n projection.update({ width, height }, scale, offset);\n if (offset !== defaultOrigin) {\n setReady(true);\n }\n }, [projection, scale, offset, width, height]);\n\n // CSS transforms.\n const styles = useMemo<CSSProperties>(() => {\n return {\n // NOTE: Order is important.\n transform: `translate(${offset.x}px, ${offset.y}px) scale(${scale})`,\n visibility: width && height ? 'visible' : 'hidden',\n };\n }, [scale, offset]);\n\n // Controller.\n useImperativeHandle(forwardedRef, () => {\n return {\n setProjection: async (projection: ProjectionState) => {\n setProjection(projection);\n },\n };\n }, [ref]);\n\n return (\n <CanvasContext.Provider\n value={{ root: ref.current, ready, width, height, scale, offset, styles, projection, setProjection }}\n >\n <div role='none' {...props} className={mx('absolute inset-0 overflow-hidden', classNames)} ref={ref}>\n {ready ? children : null}\n </div>\n </CanvasContext.Provider>\n );\n },\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { easeSinOut, interpolate, interpolateObject, transition } from 'd3';\nimport {\n type Matrix,\n applyToPoints,\n compose,\n identity,\n inverse,\n scale as scaleMatrix,\n translate as translateMatrix,\n} from 'transformation-matrix';\n\nimport { type Dimension, type Point } from '../types';\n\nexport const defaultOrigin: Point = { x: 0, y: 0 };\n\n// TODO(burdon): Rotation also?\nexport type ProjectionState = {\n scale: number;\n offset: Point;\n};\n\n/**\n * Maps between screen and model coordinates.\n */\nexport interface Projection {\n get bounds(): Dimension;\n get scale(): number;\n get offset(): Point;\n\n /**\n * Maps the model space to the screen offset (from the top-left of the element).\n */\n toScreen(points: Point[]): Point[];\n\n /**\n * Maps the pointer coordinate (from the top-left of the element) to the model space.\n */\n toModel(points: Point[]): Point[];\n}\n\nexport class ProjectionMapper implements Projection {\n private _bounds: Dimension = { width: 0, height: 0 };\n private _scale: number = 1;\n private _offset: Point = defaultOrigin;\n private _toScreen: Matrix = identity();\n private _toModel: Matrix = identity();\n\n constructor(bounds?: Dimension, scale?: number, offset?: Point) {\n if (bounds && scale && offset) {\n this.update(bounds, scale, offset);\n }\n }\n\n update(bounds: Dimension, scale: number, offset: Point): this {\n this._bounds = bounds;\n this._scale = scale;\n this._offset = offset;\n this._toScreen = compose(\n // NOTE: Order is important.\n translateMatrix(this._offset.x, this._offset.y),\n scaleMatrix(this._scale),\n // TODO(burdon): Flip.\n // flipX(),\n );\n this._toModel = inverse(this._toScreen);\n return this;\n }\n\n get bounds() {\n return this._bounds;\n }\n\n get scale() {\n return this._scale;\n }\n\n get offset() {\n return this._offset;\n }\n\n toScreen(points: Point[]): Point[] {\n return applyToPoints(this._toScreen, points);\n }\n\n toModel(points: Point[]): Point[] {\n return applyToPoints(this._toModel, points);\n }\n}\n\n/**\n * Maintain position while zooming.\n */\nexport const getZoomTransform = ({\n scale,\n offset,\n pos,\n newScale,\n}: ProjectionState & { pos: Point; newScale: number }): ProjectionState => {\n return {\n scale: newScale,\n offset: {\n x: pos.x - (pos.x - offset.x) * (newScale / scale),\n y: pos.y - (pos.y - offset.y) * (newScale / scale),\n },\n };\n};\n\n/**\n * Zoom while keeping the specified position in place.\n */\n// TODO(burdon): Convert to object.\nexport const zoomInPlace = (\n setTransform: (state: ProjectionState) => void,\n pos: Point,\n offset: Point,\n current: number,\n next: number,\n delay = 200,\n) => {\n const is = interpolate(current, next);\n transition()\n .ease(easeSinOut)\n .duration(delay)\n .tween('zoom', () => (t) => {\n const newScale = is(t);\n setTransform(getZoomTransform({ scale: current, newScale, offset, pos }));\n });\n};\n\nconst noop = () => {};\n\n/**\n * Zoom to new scale and position.\n */\n// TODO(burdon): Convert to object.\nexport const zoomTo = (\n setTransform: (state: ProjectionState) => void,\n current: ProjectionState,\n next: ProjectionState,\n delay = 200,\n cb = noop,\n) => {\n const is = interpolateObject({ scale: current.scale, ...current.offset }, { scale: next.scale, ...next.offset });\n transition()\n .ease(easeSinOut)\n .duration(delay)\n .tween('zoom', () => (t) => {\n const { scale, x, y } = is(t);\n setTransform({ scale, offset: { x, y } });\n })\n .on('end', cb);\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { type CSSProperties, type Dispatch, type SetStateAction, createContext, useContext } from 'react';\n\nimport { raise } from '@dxos/debug';\n\nimport { type Projection, type ProjectionState } from './projection';\n\nexport type CanvasContext = ProjectionState & {\n root: HTMLDivElement;\n ready: boolean;\n width: number;\n height: number;\n styles: CSSProperties;\n projection: Projection;\n setProjection: Dispatch<SetStateAction<ProjectionState>>;\n};\n\n/**\n * @internal\n */\n// TODO(burdon): Use radix?\nexport const CanvasContext = createContext<CanvasContext | null>(null);\n\nexport const useCanvasContext = (): CanvasContext => {\n return useContext(CanvasContext) ?? raise(new Error('Missing CanvasContext'));\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { bindAll } from 'bind-event-listener';\nimport { useEffect } from 'react';\n\nimport { getRelativePoint } from '../util';\n\nimport { getZoomTransform } from './projection';\nimport { useCanvasContext } from './useCanvasContext';\n\nexport type WheelOptions = {\n zoom?: boolean;\n};\n\nconst defaultOptions: WheelOptions = {\n zoom: true,\n};\n\n/**\n * Handle wheel events to update the transform state (zoom and offset).\n */\nexport const useWheel = (options: WheelOptions = defaultOptions) => {\n const { root, setProjection } = useCanvasContext();\n useEffect(() => {\n if (!root) {\n return;\n }\n\n return bindAll(root, [\n {\n type: 'wheel',\n options: { capture: true, passive: false },\n listener: (ev: WheelEvent) => {\n const zooming = isWheelZooming(ev);\n if (!hasFocus(root) && !zooming) {\n return;\n }\n\n ev.preventDefault();\n if (zooming && !options.zoom) {\n return;\n }\n\n // Zoom or pan.\n if (ev.ctrlKey) {\n if (!root) {\n return;\n }\n\n // Keep centered while zooming.\n setProjection(({ scale, offset }) => {\n const pos = getRelativePoint(root, ev);\n const scaleSensitivity = 0.01;\n const newScale = scale * Math.exp(-ev.deltaY * scaleSensitivity);\n return getZoomTransform({ scale, offset, newScale, pos });\n });\n } else {\n setProjection(({ scale, offset: { x, y } }) => {\n return {\n scale,\n offset: {\n x: x - ev.deltaX,\n y: y - ev.deltaY,\n },\n };\n });\n }\n },\n },\n ]);\n }, [root]);\n};\n\nconst isWheelZooming = (ev: WheelEvent): boolean => {\n // Check for ctrl/cmd key + wheel action.\n if (ev.ctrlKey || ev.metaKey) {\n // Some browsers use deltaY, others deltaZ for zoom.\n return Math.abs(ev.deltaY) > 0 || Math.abs(ev.deltaZ) > 0;\n }\n\n return false;\n};\n\nconst hasFocus = (element: HTMLElement): boolean => {\n const activeElement = document.activeElement;\n if (!activeElement) {\n return false;\n }\n\n // Handle shadow DOM.\n let shadowActive = activeElement;\n while (shadowActive?.shadowRoot?.activeElement) {\n shadowActive = shadowActive.shadowRoot.activeElement;\n }\n\n // Check if element or any parent has focus.\n let current: HTMLElement | null = element;\n while (current) {\n if (current === activeElement || current === shadowActive) {\n return true;\n }\n current = current.parentElement;\n }\n\n return false;\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { type PropsWithChildren, type SVGProps } from 'react';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { type Dimension, type Point } from '../types';\n\n// Refs\n// - https://airbnb.io/visx/gallery\n// - https://github.com/tldraw/tldraw/blob/main/packages/editor/src/lib/primitives/Vec.ts\n\nexport const createPath = (points: Point[], join = false) => {\n return ['M', points.map(({ x, y }) => `${x},${y}`).join(' L '), join ? 'Z' : ''].join(' ');\n};\n\n/**\n * https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths\n * NOTE: Leave space around shape for line width.\n */\nexport const Markers = ({ id = 'dx-marker', classNames }: ThemedClassName<{ id?: string }>) => {\n return (\n <>\n <Arrow id={`${id}-arrow-start`} dir='start' classNames={classNames} />\n <Arrow id={`${id}-arrow-end`} dir='end' classNames={classNames} />\n <Arrow id={`${id}-triangle-start`} dir='start' closed classNames={classNames} />\n <Arrow id={`${id}-triangle-end`} dir='end' closed classNames={classNames} />\n <Marker id={`${id}-circle`} pos={{ x: 8, y: 8 }} size={{ width: 16, height: 16 }}>\n <circle cx={8} cy={8} r={5} stroke={'context-stroke'} className={mx(classNames)} />\n </Marker>\n </>\n );\n};\n\nexport type MarkerProps = SVGProps<SVGMarkerElement> &\n PropsWithChildren<\n ThemedClassName<{\n id: string;\n pos: Point;\n size: Dimension;\n fill?: boolean;\n }>\n >;\n\n/**\n * https://www.w3.org/TR/SVG2/painting.html#Markers\n */\nexport const Marker = ({\n id,\n className,\n children,\n pos: { x: refX, y: refY },\n size: { width: markerWidth, height: markerHeight },\n fill,\n ...rest\n}: MarkerProps) => (\n <marker\n id={id}\n className={className}\n {...{\n refX,\n refY,\n markerWidth,\n markerHeight,\n markerUnits: 'strokeWidth',\n orient: 'auto',\n ...rest,\n }}\n >\n {children}\n </marker>\n);\n\nexport const Arrow = ({\n classNames,\n id,\n size = 16,\n dir = 'end',\n closed = false,\n}: ThemedClassName<{ id: string; size?: number; dir?: 'start' | 'end'; closed?: boolean }>) => (\n <Marker\n id={id}\n size={{ width: size, height: size }}\n pos={dir === 'end' ? { x: size, y: size / 2 } : { x: 0, y: size / 2 }}\n >\n <path\n fill={closed ? undefined : 'none'}\n stroke={'context-stroke'}\n className={mx(classNames)}\n d={createPath(\n dir === 'end'\n ? [\n { x: 1, y: 1 },\n { x: size, y: size / 2 },\n { x: 1, y: size - 1 },\n ]\n : [\n { x: size - 1, y: 1 },\n { x: 0, y: size / 2 },\n { x: size - 1, y: size - 1 },\n ],\n closed,\n )}\n />\n </Marker>\n);\n\nexport const GridPattern = ({\n classNames,\n id,\n size,\n offset,\n}: ThemedClassName<{ id: string; size: number; offset: Point }>) => (\n <pattern\n id={id}\n x={(size / 2 + offset.x) % size}\n y={(size / 2 + offset.y) % size}\n width={size}\n height={size}\n patternUnits='userSpaceOnUse'\n >\n {/* TODO(burdon): vars. */}\n <g className={mx(classNames)}>\n <line x1={0} y1={size / 2} x2={size} y2={size / 2} />\n <line x1={size / 2} y1={0} x2={size / 2} y2={size} />\n </g>\n </pattern>\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nlet logged = false;\n\n/**\n * Get the relative point of the cursor.\n * NOTE: ev.offset returns the position relative to the target.\n */\nexport const getRelativePoint = (el: HTMLElement, ev: MouseEvent) => {\n const rect = el.getBoundingClientRect();\n return { x: ev.clientX - rect.x, y: ev.clientY - rect.top };\n};\n\n/**\n *\n */\n// TODO(burdon): Factor out.\nexport const testId = <ID = string>(id: ID, inspect = false) => {\n if (inspect) {\n if (!logged) {\n // eslint-disable-next-line no-console\n console.log('Open storybook in expanded window;\\nthen run INSPECT()');\n logged = true;\n }\n\n (window as any).INSPECT = () => {\n const el = document.querySelector(`[data-test-id=\"${id}\"]`);\n (window as any).inspect(el);\n // eslint-disable-next-line no-console\n console.log(el);\n };\n }\n\n return { [DATA_TEST_ID]: id };\n};\n\nexport const inspectElement = (el: Element) => {\n (window as any).INSPECT = () => {\n (window as any).inspect(el);\n (window as any).element = el;\n // eslint-disable-next-line no-console\n console.log('Open storybook in expanded window;\\nthen run INSPECT()');\n // eslint-disable-next-line no-console\n console.log(el);\n };\n};\n\nexport const DATA_TEST_ID = 'data-test-id';\n", "//\n// Copyright 2024 DXOS.org\n// Adapted from: https://github.com/smplrspace/react-fps-stats\n//\n\nimport React, { useEffect, useReducer, useRef } from 'react';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nexport type FPSProps = ThemedClassName<{\n width?: number;\n height?: number;\n bar?: string;\n}>;\n\ntype State = {\n max: number;\n len: number;\n fps: number[];\n frames: number;\n prevTime: number;\n};\n\nconst SEC = 1_000;\n\nexport const FPS = ({ classNames, width = 60, height = 30, bar = 'bg-cyan-500' }: FPSProps) => {\n const [{ fps, max, len }, dispatch] = useReducer(\n (state: State) => {\n const currentTime = Date.now();\n if (currentTime > state.prevTime + SEC) {\n const nextFPS = [\n ...new Array(Math.floor((currentTime - state.prevTime - SEC) / SEC)).fill(0),\n Math.max(1, Math.round((state.frames * SEC) / (currentTime - state.prevTime))),\n ];\n return {\n max: Math.max(state.max, ...nextFPS),\n len: Math.min(state.len + nextFPS.length, width),\n fps: [...state.fps, ...nextFPS].slice(-width),\n frames: 1,\n prevTime: currentTime,\n };\n } else {\n return { ...state, frames: state.frames + 1 };\n }\n },\n {\n max: 0,\n len: 0,\n fps: [],\n frames: 0,\n prevTime: Date.now(),\n },\n );\n\n const requestRef = useRef<number | null>(null);\n const tick = () => {\n dispatch();\n requestRef.current = requestAnimationFrame(tick);\n };\n\n useEffect(() => {\n requestRef.current = requestAnimationFrame(tick);\n return () => {\n if (requestRef.current) {\n cancelAnimationFrame(requestRef.current);\n }\n };\n }, []);\n\n return (\n <div\n style={{ width: width + 6 }}\n className={mx(\n 'relative flex flex-col p-0.5',\n 'bg-baseSurface text-xs text-subdued font-thin pointer-events-none border border-separator',\n classNames,\n )}\n >\n <div>{fps[len - 1]} FPS</div>\n <div className='w-full relative' style={{ height }}>\n {fps.map((frame, i) => (\n <div\n key={`fps-${i}`}\n className={bar}\n style={{\n position: 'absolute',\n bottom: 0,\n right: `${len - 1 - i}px`,\n height: `${(height * frame) / max}px`,\n width: 1,\n }}\n />\n ))}\n </div>\n </div>\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { forwardRef, useId, useMemo } from 'react';\n\nimport { type ThemedClassName, useForwardedRef } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { useCanvasContext } from '../../hooks';\nimport { type Point } from '../../types';\nimport { GridPattern, testId } from '../../util';\n\nconst gridRatios = [1 / 4, 1, 4, 16];\n\nconst defaultGridSize = 16;\nconst defaultOffset: Point = { x: 0, y: 0 };\n\nconst createId = (parent: string, grid: number) => `dx-canvas-grid-${parent}-${grid}`;\n\nexport type GridProps = ThemedClassName<{\n size?: number;\n scale?: number;\n offset?: Point;\n showAxes?: boolean;\n}>;\n\nexport const GridComponent = forwardRef<SVGSVGElement, GridProps>(\n (\n { size: gridSize = defaultGridSize, scale = 1, offset = defaultOffset, showAxes = true, classNames },\n forwardedRef,\n ) => {\n const svgRef = useForwardedRef(forwardedRef);\n const instanceId = useId();\n const grids = useMemo(\n () =>\n gridRatios\n .map((ratio) => ({ id: ratio, size: ratio * gridSize * scale }))\n .filter(({ size }) => size >= gridSize && size <= 256),\n [gridSize, scale],\n );\n\n const { width = 0, height = 0 } = svgRef.current?.getBoundingClientRect() ?? {};\n\n return (\n <svg\n {...testId('dx-canvas-grid')}\n ref={svgRef}\n className={mx(\n 'absolute inset-0 w-full h-full pointer-events-none touch-none select-none',\n 'stroke-neutral-500',\n classNames,\n )}\n >\n {/* NOTE: The pattern is offset so that the middle of the pattern aligns with the grid. */}\n <defs>\n {grids.map(({ id, size }) => (\n <GridPattern key={id} id={createId(instanceId, id)} offset={offset} size={size} />\n ))}\n </defs>\n {showAxes && (\n <>\n <line x1={0} y1={offset.y} x2={width} y2={offset.y} className='stroke-neutral-500 opacity-40' />\n <line x1={offset.x} y1={0} x2={offset.x} y2={height} className='stroke-neutral-500 opacity-40' />\n </>\n )}\n <g>\n {grids.map(({ id }, i) => (\n <rect\n key={id}\n opacity={0.1 + i * 0.05}\n fill={`url(#${createId(instanceId, id)})`}\n width='100%'\n height='100%'\n />\n ))}\n </g>\n </svg>\n );\n },\n);\n\n// TODO(burdon): Use id of parent canvas.\nexport const Grid = (props: GridProps) => {\n const { scale, offset } = useCanvasContext();\n return <GridComponent {...props} scale={scale} offset={offset} />;\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport * as Schema from 'effect/Schema';\n\nexport const Point = Schema.Struct({ x: Schema.Number, y: Schema.Number });\nexport const Dimension = Schema.Struct({ width: Schema.Number, height: Schema.Number });\nexport const Rect = Schema.extend(Point, Dimension);\n\nexport type Point = Schema.Schema.Type<typeof Point>;\nexport type Dimension = Schema.Schema.Type<typeof Dimension>;\nexport type Rect = Schema.Schema.Type<typeof Rect>;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React", "forwardRef", "useEffect", "useImperativeHandle", "useMemo", "useState", "useResizeDetector", "mx", "easeSinOut", "interpolate", "interpolateObject", "transition", "applyToPoints", "compose", "identity", "inverse", "scale", "scaleMatrix", "translate", "translateMatrix", "defaultOrigin", "x", "y", "ProjectionMapper", "_bounds", "width", "height", "_scale", "_offset", "_toScreen", "identity", "_toModel", "bounds", "scale", "offset", "update", "compose", "translateMatrix", "scaleMatrix", "inverse", "toScreen", "points", "applyToPoints", "toModel", "getZoomTransform", "pos", "newScale", "zoomInPlace", "setTransform", "current", "next", "delay", "is", "interpolate", "transition", "ease", "easeSinOut", "duration", "tween", "t", "noop", "zoomTo", "cb", "interpolateObject", "on", "createContext", "useContext", "raise", "CanvasContext", "createContext", "useCanvasContext", "useContext", "raise", "Error", "bindAll", "useEffect", "React", "mx", "createPath", "points", "join", "map", "x", "y", "Markers", "id", "classNames", "Arrow", "dir", "closed", "Marker", "pos", "size", "width", "height", "circle", "cx", "cy", "r", "stroke", "className", "mx", "children", "refX", "refY", "markerWidth", "markerHeight", "fill", "rest", "marker", "markerUnits", "orient", "path", "undefined", "d", "GridPattern", "offset", "pattern", "patternUnits", "g", "line", "x1", "y1", "x2", "y2", "logged", "getRelativePoint", "el", "ev", "rect", "getBoundingClientRect", "x", "clientX", "y", "clientY", "top", "testId", "id", "inspect", "console", "log", "window", "INSPECT", "document", "querySelector", "DATA_TEST_ID", "inspectElement", "element", "defaultOptions", "zoom", "useWheel", "options", "root", "setProjection", "useCanvasContext", "useEffect", "bindAll", "type", "capture", "passive", "listener", "ev", "zooming", "isWheelZooming", "hasFocus", "preventDefault", "ctrlKey", "scale", "offset", "pos", "getRelativePoint", "scaleSensitivity", "newScale", "Math", "exp", "deltaY", "getZoomTransform", "x", "y", "deltaX", "metaKey", "abs", "deltaZ", "element", "activeElement", "document", "shadowActive", "shadowRoot", "current", "parentElement", "Canvas", "forwardRef", "children", "classNames", "scale", "_scale", "offset", "_offset", "defaultOrigin", "props", "forwardedRef", "ref", "width", "height", "useResizeDetector", "ready", "setReady", "useState", "setProjection", "useEffect", "x", "y", "projection", "useMemo", "ProjectionMapper", "update", "styles", "transform", "visibility", "useImperativeHandle", "React", "CanvasContext", "Provider", "value", "root", "current", "div", "role", "className", "mx", "React", "useEffect", "useReducer", "useRef", "mx", "SEC", "FPS", "classNames", "width", "height", "bar", "fps", "max", "len", "dispatch", "useReducer", "state", "currentTime", "Date", "now", "prevTime", "nextFPS", "Array", "Math", "floor", "fill", "round", "frames", "min", "length", "slice", "requestRef", "useRef", "tick", "current", "requestAnimationFrame", "useEffect", "cancelAnimationFrame", "React", "div", "style", "className", "mx", "map", "frame", "i", "key", "position", "bottom", "right", "React", "forwardRef", "useId", "useMemo", "useForwardedRef", "mx", "gridRatios", "defaultGridSize", "defaultOffset", "x", "y", "createId", "parent", "grid", "GridComponent", "forwardRef", "size", "gridSize", "scale", "offset", "showAxes", "classNames", "forwardedRef", "svgRef", "useForwardedRef", "instanceId", "useId", "grids", "useMemo", "map", "ratio", "id", "filter", "width", "height", "current", "getBoundingClientRect", "React", "svg", "testId", "ref", "className", "mx", "defs", "GridPattern", "key", "line", "x1", "y1", "x2", "y2", "g", "i", "rect", "opacity", "fill", "Grid", "props", "useCanvasContext", "Schema", "Point", "Struct", "x", "Number", "y", "Dimension", "width", "height", "Rect", "extend"]
|
|
7
7
|
}
|