@dxos/react-ui-canvas 0.8.0 → 0.8.1-main.013e445
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 +1 -1
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node/index.cjs +8 -8
- package/dist/lib/node/index.cjs.map +2 -2
- package/dist/lib/node/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +1 -1
- package/dist/lib/node-esm/index.mjs.map +3 -3
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/components/FPS.d.ts +2 -1
- package/dist/types/src/components/FPS.d.ts.map +1 -1
- package/dist/types/src/components/Grid/Grid.d.ts +1 -1
- package/dist/types/src/components/Grid/Grid.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.d.ts +5 -5
- package/dist/types/src/util/svg.d.ts.map +1 -1
- package/package.json +13 -15
- package/src/types.ts +1 -1
|
@@ -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 * as d3 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) {\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 = d3.interpolate(current, next);\n d3.transition()\n .ease(d3.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 = d3.interpolateObject({ scale: current.scale, ...current.offset }, { scale: next.scale, ...next.offset });\n d3.transition()\n .ease(d3.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 { S } from '@dxos/effect';\n\nexport const Point = S.Struct({ x: S.Number, y: S.Number });\nexport const Dimension = S.Struct({ width: S.Number, height: S.Number });\nexport const Rect = S.extend(Point, Dimension);\n\nexport type Point = S.Schema.Type<typeof Point>;\nexport type Dimension = S.Schema.Type<typeof Dimension>;\nexport type Rect = S.Schema.Type<typeof Rect>;\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["React", "forwardRef", "useEffect", "useImperativeHandle", "useMemo", "useState", "useResizeDetector", "mx", "d3", "applyToPoints", "compose", "identity", "inverse", "scale", "scaleMatrix", "translate", "translateMatrix", "defaultOrigin", "x", "y", "ProjectionMapper", "constructor", "bounds", "scale", "offset", "_bounds", "width", "height", "_scale", "_offset", "_toScreen", "identity", "_toModel", "update", "compose", "translateMatrix", "scaleMatrix", "inverse", "toScreen", "points", "applyToPoints", "toModel", "getZoomTransform", "pos", "newScale", "zoomInPlace", "setTransform", "current", "next", "delay", "is", "interpolate", "d3", "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", "useMemo", "useId", "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", "S", "Point", "S", "Struct", "x", "Number", "y", "Dimension", "width", "height", "Rect", "extend"]
|
|
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 * as d3 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) {\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 = d3.interpolate(current, next);\n d3.transition()\n .ease(d3.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 = d3.interpolateObject({ scale: current.scale, ...current.offset }, { scale: next.scale, ...next.offset });\n d3.transition()\n .ease(d3.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 as S } from 'effect';\n\nexport const Point = S.Struct({ x: S.Number, y: S.Number });\nexport const Dimension = S.Struct({ width: S.Number, height: S.Number });\nexport const Rect = S.extend(Point, Dimension);\n\nexport type Point = S.Schema.Type<typeof Point>;\nexport type Dimension = S.Schema.Type<typeof Dimension>;\nexport type Rect = S.Schema.Type<typeof Rect>;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React", "forwardRef", "useEffect", "useImperativeHandle", "useMemo", "useState", "useResizeDetector", "mx", "d3", "applyToPoints", "compose", "identity", "inverse", "scale", "scaleMatrix", "translate", "translateMatrix", "defaultOrigin", "x", "y", "ProjectionMapper", "constructor", "bounds", "scale", "offset", "_bounds", "width", "height", "_scale", "_offset", "_toScreen", "identity", "_toModel", "update", "compose", "translateMatrix", "scaleMatrix", "inverse", "toScreen", "points", "applyToPoints", "toModel", "getZoomTransform", "pos", "newScale", "zoomInPlace", "setTransform", "current", "next", "delay", "is", "interpolate", "d3", "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", "useMemo", "useId", "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", "S", "Point", "S", "Struct", "x", "Number", "y", "Dimension", "width", "height", "Rect", "extend"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-canvas/src/hooks/projection.tsx":{"bytes":11859,"imports":[{"path":"d3","kind":"import-statement","external":true},{"path":"transformation-matrix","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/hooks/useCanvasContext.tsx":{"bytes":2146,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/debug","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/util/svg.tsx":{"bytes":12581,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/util/util.ts":{"bytes":4822,"imports":[],"format":"esm"},"packages/ui/react-ui-canvas/src/util/index.ts":{"bytes":571,"imports":[{"path":"packages/ui/react-ui-canvas/src/util/svg.tsx","kind":"import-statement","original":"./svg"},{"path":"packages/ui/react-ui-canvas/src/util/util.ts","kind":"import-statement","original":"./util"}],"format":"esm"},"packages/ui/react-ui-canvas/src/hooks/useWheel.tsx":{"bytes":10298,"imports":[{"path":"bind-event-listener","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-canvas/src/hooks/projection.tsx","kind":"import-statement","original":"./projection"},{"path":"packages/ui/react-ui-canvas/src/hooks/useCanvasContext.tsx","kind":"import-statement","original":"./useCanvasContext"},{"path":"packages/ui/react-ui-canvas/src/util/index.ts","kind":"import-statement","original":"../util"}],"format":"esm"},"packages/ui/react-ui-canvas/src/hooks/index.ts":{"bytes":711,"imports":[{"path":"packages/ui/react-ui-canvas/src/hooks/projection.tsx","kind":"import-statement","original":"./projection"},{"path":"packages/ui/react-ui-canvas/src/hooks/useCanvasContext.tsx","kind":"import-statement","original":"./useCanvasContext"},{"path":"packages/ui/react-ui-canvas/src/hooks/useWheel.tsx","kind":"import-statement","original":"./useWheel"}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/Canvas/Canvas.tsx":{"bytes":9268,"imports":[{"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":"packages/ui/react-ui-canvas/src/hooks/index.ts","kind":"import-statement","original":"../../hooks"}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/Canvas/index.ts":{"bytes":511,"imports":[{"path":"packages/ui/react-ui-canvas/src/components/Canvas/Canvas.tsx","kind":"import-statement","original":"./Canvas"}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/FPS.tsx":{"bytes":9050,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/Grid/Grid.tsx":{"bytes":9443,"imports":[{"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":"packages/ui/react-ui-canvas/src/hooks/index.ts","kind":"import-statement","original":"../../hooks"},{"path":"packages/ui/react-ui-canvas/src/util/index.ts","kind":"import-statement","original":"../../util"}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/Grid/index.ts":{"bytes":507,"imports":[{"path":"packages/ui/react-ui-canvas/src/components/Grid/Grid.tsx","kind":"import-statement","original":"./Grid"}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/index.ts":{"bytes":663,"imports":[{"path":"packages/ui/react-ui-canvas/src/components/Canvas/index.ts","kind":"import-statement","original":"./Canvas"},{"path":"packages/ui/react-ui-canvas/src/components/FPS.tsx","kind":"import-statement","original":"./FPS"},{"path":"packages/ui/react-ui-canvas/src/components/Grid/index.ts","kind":"import-statement","original":"./Grid"}],"format":"esm"},"packages/ui/react-ui-canvas/src/types.ts":{"bytes":
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-canvas/src/hooks/projection.tsx":{"bytes":11859,"imports":[{"path":"d3","kind":"import-statement","external":true},{"path":"transformation-matrix","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/hooks/useCanvasContext.tsx":{"bytes":2146,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/debug","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/util/svg.tsx":{"bytes":12581,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/util/util.ts":{"bytes":4822,"imports":[],"format":"esm"},"packages/ui/react-ui-canvas/src/util/index.ts":{"bytes":571,"imports":[{"path":"packages/ui/react-ui-canvas/src/util/svg.tsx","kind":"import-statement","original":"./svg"},{"path":"packages/ui/react-ui-canvas/src/util/util.ts","kind":"import-statement","original":"./util"}],"format":"esm"},"packages/ui/react-ui-canvas/src/hooks/useWheel.tsx":{"bytes":10298,"imports":[{"path":"bind-event-listener","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-canvas/src/hooks/projection.tsx","kind":"import-statement","original":"./projection"},{"path":"packages/ui/react-ui-canvas/src/hooks/useCanvasContext.tsx","kind":"import-statement","original":"./useCanvasContext"},{"path":"packages/ui/react-ui-canvas/src/util/index.ts","kind":"import-statement","original":"../util"}],"format":"esm"},"packages/ui/react-ui-canvas/src/hooks/index.ts":{"bytes":711,"imports":[{"path":"packages/ui/react-ui-canvas/src/hooks/projection.tsx","kind":"import-statement","original":"./projection"},{"path":"packages/ui/react-ui-canvas/src/hooks/useCanvasContext.tsx","kind":"import-statement","original":"./useCanvasContext"},{"path":"packages/ui/react-ui-canvas/src/hooks/useWheel.tsx","kind":"import-statement","original":"./useWheel"}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/Canvas/Canvas.tsx":{"bytes":9268,"imports":[{"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":"packages/ui/react-ui-canvas/src/hooks/index.ts","kind":"import-statement","original":"../../hooks"}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/Canvas/index.ts":{"bytes":511,"imports":[{"path":"packages/ui/react-ui-canvas/src/components/Canvas/Canvas.tsx","kind":"import-statement","original":"./Canvas"}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/FPS.tsx":{"bytes":9050,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/Grid/Grid.tsx":{"bytes":9443,"imports":[{"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":"packages/ui/react-ui-canvas/src/hooks/index.ts","kind":"import-statement","original":"../../hooks"},{"path":"packages/ui/react-ui-canvas/src/util/index.ts","kind":"import-statement","original":"../../util"}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/Grid/index.ts":{"bytes":507,"imports":[{"path":"packages/ui/react-ui-canvas/src/components/Grid/Grid.tsx","kind":"import-statement","original":"./Grid"}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/index.ts":{"bytes":663,"imports":[{"path":"packages/ui/react-ui-canvas/src/components/Canvas/index.ts","kind":"import-statement","original":"./Canvas"},{"path":"packages/ui/react-ui-canvas/src/components/FPS.tsx","kind":"import-statement","original":"./FPS"},{"path":"packages/ui/react-ui-canvas/src/components/Grid/index.ts","kind":"import-statement","original":"./Grid"}],"format":"esm"},"packages/ui/react-ui-canvas/src/types.ts":{"bytes":1660,"imports":[{"path":"effect","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/index.ts":{"bytes":747,"imports":[{"path":"packages/ui/react-ui-canvas/src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"packages/ui/react-ui-canvas/src/hooks/index.ts","kind":"import-statement","original":"./hooks"},{"path":"packages/ui/react-ui-canvas/src/types.ts","kind":"import-statement","original":"./types"},{"path":"packages/ui/react-ui-canvas/src/util/index.ts","kind":"import-statement","original":"./util"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-canvas/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":35514},"packages/ui/react-ui-canvas/dist/lib/browser/index.mjs":{"imports":[{"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":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","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","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":"packages/ui/react-ui-canvas/src/index.ts","inputs":{"packages/ui/react-ui-canvas/src/components/Canvas/Canvas.tsx":{"bytesInOutput":1994},"packages/ui/react-ui-canvas/src/hooks/projection.tsx":{"bytesInOutput":2211},"packages/ui/react-ui-canvas/src/hooks/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/hooks/useCanvasContext.tsx":{"bytesInOutput":260},"packages/ui/react-ui-canvas/src/hooks/useWheel.tsx":{"bytesInOutput":2116},"packages/ui/react-ui-canvas/src/util/svg.tsx":{"bytesInOutput":2736},"packages/ui/react-ui-canvas/src/util/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/util/util.ts":{"bytesInOutput":800},"packages/ui/react-ui-canvas/src/components/Canvas/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/components/FPS.tsx":{"bytesInOutput":2071},"packages/ui/react-ui-canvas/src/components/Grid/Grid.tsx":{"bytesInOutput":2187},"packages/ui/react-ui-canvas/src/components/Grid/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/types.ts":{"bytesInOutput":202}},"bytes":15567}}}
|
package/dist/lib/node/index.cjs
CHANGED
|
@@ -70,7 +70,7 @@ var import_react_ui_theme3 = require("@dxos/react-ui-theme");
|
|
|
70
70
|
var import_react6 = __toESM(require("react"));
|
|
71
71
|
var import_react_ui = require("@dxos/react-ui");
|
|
72
72
|
var import_react_ui_theme4 = require("@dxos/react-ui-theme");
|
|
73
|
-
var import_effect = require("
|
|
73
|
+
var import_effect = require("effect");
|
|
74
74
|
var defaultOrigin = {
|
|
75
75
|
x: 0,
|
|
76
76
|
y: 0
|
|
@@ -602,15 +602,15 @@ var Grid = (props) => {
|
|
|
602
602
|
offset
|
|
603
603
|
});
|
|
604
604
|
};
|
|
605
|
-
var Point = import_effect.
|
|
606
|
-
x: import_effect.
|
|
607
|
-
y: import_effect.
|
|
605
|
+
var Point = import_effect.Schema.Struct({
|
|
606
|
+
x: import_effect.Schema.Number,
|
|
607
|
+
y: import_effect.Schema.Number
|
|
608
608
|
});
|
|
609
|
-
var Dimension = import_effect.
|
|
610
|
-
width: import_effect.
|
|
611
|
-
height: import_effect.
|
|
609
|
+
var Dimension = import_effect.Schema.Struct({
|
|
610
|
+
width: import_effect.Schema.Number,
|
|
611
|
+
height: import_effect.Schema.Number
|
|
612
612
|
});
|
|
613
|
-
var Rect = import_effect.
|
|
613
|
+
var Rect = import_effect.Schema.extend(Point, Dimension);
|
|
614
614
|
// Annotate the CommonJS export names for ESM import in node:
|
|
615
615
|
0 && (module.exports = {
|
|
616
616
|
Arrow,
|
|
@@ -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 * as d3 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) {\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 = d3.interpolate(current, next);\n d3.transition()\n .ease(d3.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 = d3.interpolateObject({ scale: current.scale, ...current.offset }, { scale: next.scale, ...next.offset });\n d3.transition()\n .ease(d3.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 { S } from '@dxos/effect';\n\nexport const Point = S.Struct({ x: S.Number, y: S.Number });\nexport const Dimension = S.Struct({ width: S.Number, height: S.Number });\nexport const Rect = S.extend(Point, Dimension);\n\nexport type Point = S.Schema.Type<typeof Point>;\nexport type Dimension = S.Schema.Type<typeof Dimension>;\nexport type Rect = S.Schema.Type<typeof Rect>;\n"],
|
|
5
|
-
"mappings": "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",
|
|
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 * as d3 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) {\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 = d3.interpolate(current, next);\n d3.transition()\n .ease(d3.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 = d3.interpolateObject({ scale: current.scale, ...current.offset }, { scale: next.scale, ...next.offset });\n d3.transition()\n .ease(d3.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 as S } from 'effect';\n\nexport const Point = S.Struct({ x: S.Number, y: S.Number });\nexport const Dimension = S.Struct({ width: S.Number, height: S.Number });\nexport const Rect = S.extend(Point, Dimension);\n\nexport type Point = S.Schema.Type<typeof Point>;\nexport type Dimension = S.Schema.Type<typeof Dimension>;\nexport type Rect = S.Schema.Type<typeof Rect>;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["import_react", "import_react_ui_theme", "defaultOrigin", "x", "y", "ProjectionMapper", "constructor", "bounds", "scale", "offset", "_bounds", "width", "height", "_scale", "_offset", "_toScreen", "identity", "_toModel", "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", "CanvasContext", "createContext", "useCanvasContext", "useContext", "raise", "Error", "createPath", "join", "map", "Markers", "id", "classNames", "React", "Arrow", "dir", "closed", "Marker", "size", "circle", "cx", "cy", "r", "stroke", "className", "mx", "children", "refX", "refY", "markerWidth", "markerHeight", "fill", "rest", "marker", "markerUnits", "orient", "path", "undefined", "d", "GridPattern", "pattern", "patternUnits", "g", "line", "x1", "y1", "x2", "y2", "logged", "getRelativePoint", "el", "ev", "rect", "getBoundingClientRect", "clientX", "clientY", "top", "testId", "inspect", "console", "log", "window", "INSPECT", "document", "querySelector", "DATA_TEST_ID", "inspectElement", "element", "defaultOptions", "zoom", "useWheel", "options", "root", "setProjection", "useEffect", "bindAll", "type", "capture", "passive", "listener", "zooming", "isWheelZooming", "hasFocus", "preventDefault", "ctrlKey", "scaleSensitivity", "Math", "exp", "deltaY", "deltaX", "metaKey", "abs", "deltaZ", "activeElement", "shadowActive", "shadowRoot", "parentElement", "Canvas", "forwardRef", "props", "forwardedRef", "ref", "useResizeDetector", "ready", "setReady", "useState", "projection", "useMemo", "styles", "transform", "visibility", "useImperativeHandle", "Provider", "value", "div", "role", "SEC", "FPS", "bar", "fps", "max", "len", "dispatch", "useReducer", "state", "currentTime", "Date", "now", "prevTime", "nextFPS", "Array", "floor", "round", "frames", "min", "length", "slice", "requestRef", "useRef", "tick", "requestAnimationFrame", "cancelAnimationFrame", "style", "frame", "i", "key", "position", "bottom", "right", "gridRatios", "defaultGridSize", "defaultOffset", "createId", "parent", "grid", "GridComponent", "gridSize", "showAxes", "svgRef", "useForwardedRef", "instanceId", "useId", "grids", "ratio", "filter", "svg", "defs", "opacity", "Grid", "Point", "S", "Struct", "Number", "Dimension", "Rect", "extend"]
|
|
7
7
|
}
|
package/dist/lib/node/meta.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-canvas/src/hooks/projection.tsx":{"bytes":11859,"imports":[{"path":"d3","kind":"import-statement","external":true},{"path":"transformation-matrix","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/hooks/useCanvasContext.tsx":{"bytes":2146,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/debug","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/util/svg.tsx":{"bytes":12581,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/util/util.ts":{"bytes":4822,"imports":[],"format":"esm"},"packages/ui/react-ui-canvas/src/util/index.ts":{"bytes":571,"imports":[{"path":"packages/ui/react-ui-canvas/src/util/svg.tsx","kind":"import-statement","original":"./svg"},{"path":"packages/ui/react-ui-canvas/src/util/util.ts","kind":"import-statement","original":"./util"}],"format":"esm"},"packages/ui/react-ui-canvas/src/hooks/useWheel.tsx":{"bytes":10298,"imports":[{"path":"bind-event-listener","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-canvas/src/hooks/projection.tsx","kind":"import-statement","original":"./projection"},{"path":"packages/ui/react-ui-canvas/src/hooks/useCanvasContext.tsx","kind":"import-statement","original":"./useCanvasContext"},{"path":"packages/ui/react-ui-canvas/src/util/index.ts","kind":"import-statement","original":"../util"}],"format":"esm"},"packages/ui/react-ui-canvas/src/hooks/index.ts":{"bytes":711,"imports":[{"path":"packages/ui/react-ui-canvas/src/hooks/projection.tsx","kind":"import-statement","original":"./projection"},{"path":"packages/ui/react-ui-canvas/src/hooks/useCanvasContext.tsx","kind":"import-statement","original":"./useCanvasContext"},{"path":"packages/ui/react-ui-canvas/src/hooks/useWheel.tsx","kind":"import-statement","original":"./useWheel"}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/Canvas/Canvas.tsx":{"bytes":9268,"imports":[{"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":"packages/ui/react-ui-canvas/src/hooks/index.ts","kind":"import-statement","original":"../../hooks"}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/Canvas/index.ts":{"bytes":511,"imports":[{"path":"packages/ui/react-ui-canvas/src/components/Canvas/Canvas.tsx","kind":"import-statement","original":"./Canvas"}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/FPS.tsx":{"bytes":9050,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/Grid/Grid.tsx":{"bytes":9443,"imports":[{"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":"packages/ui/react-ui-canvas/src/hooks/index.ts","kind":"import-statement","original":"../../hooks"},{"path":"packages/ui/react-ui-canvas/src/util/index.ts","kind":"import-statement","original":"../../util"}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/Grid/index.ts":{"bytes":507,"imports":[{"path":"packages/ui/react-ui-canvas/src/components/Grid/Grid.tsx","kind":"import-statement","original":"./Grid"}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/index.ts":{"bytes":663,"imports":[{"path":"packages/ui/react-ui-canvas/src/components/Canvas/index.ts","kind":"import-statement","original":"./Canvas"},{"path":"packages/ui/react-ui-canvas/src/components/FPS.tsx","kind":"import-statement","original":"./FPS"},{"path":"packages/ui/react-ui-canvas/src/components/Grid/index.ts","kind":"import-statement","original":"./Grid"}],"format":"esm"},"packages/ui/react-ui-canvas/src/types.ts":{"bytes":
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-canvas/src/hooks/projection.tsx":{"bytes":11859,"imports":[{"path":"d3","kind":"import-statement","external":true},{"path":"transformation-matrix","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/hooks/useCanvasContext.tsx":{"bytes":2146,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/debug","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/util/svg.tsx":{"bytes":12581,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/util/util.ts":{"bytes":4822,"imports":[],"format":"esm"},"packages/ui/react-ui-canvas/src/util/index.ts":{"bytes":571,"imports":[{"path":"packages/ui/react-ui-canvas/src/util/svg.tsx","kind":"import-statement","original":"./svg"},{"path":"packages/ui/react-ui-canvas/src/util/util.ts","kind":"import-statement","original":"./util"}],"format":"esm"},"packages/ui/react-ui-canvas/src/hooks/useWheel.tsx":{"bytes":10298,"imports":[{"path":"bind-event-listener","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-canvas/src/hooks/projection.tsx","kind":"import-statement","original":"./projection"},{"path":"packages/ui/react-ui-canvas/src/hooks/useCanvasContext.tsx","kind":"import-statement","original":"./useCanvasContext"},{"path":"packages/ui/react-ui-canvas/src/util/index.ts","kind":"import-statement","original":"../util"}],"format":"esm"},"packages/ui/react-ui-canvas/src/hooks/index.ts":{"bytes":711,"imports":[{"path":"packages/ui/react-ui-canvas/src/hooks/projection.tsx","kind":"import-statement","original":"./projection"},{"path":"packages/ui/react-ui-canvas/src/hooks/useCanvasContext.tsx","kind":"import-statement","original":"./useCanvasContext"},{"path":"packages/ui/react-ui-canvas/src/hooks/useWheel.tsx","kind":"import-statement","original":"./useWheel"}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/Canvas/Canvas.tsx":{"bytes":9268,"imports":[{"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":"packages/ui/react-ui-canvas/src/hooks/index.ts","kind":"import-statement","original":"../../hooks"}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/Canvas/index.ts":{"bytes":511,"imports":[{"path":"packages/ui/react-ui-canvas/src/components/Canvas/Canvas.tsx","kind":"import-statement","original":"./Canvas"}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/FPS.tsx":{"bytes":9050,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/Grid/Grid.tsx":{"bytes":9443,"imports":[{"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":"packages/ui/react-ui-canvas/src/hooks/index.ts","kind":"import-statement","original":"../../hooks"},{"path":"packages/ui/react-ui-canvas/src/util/index.ts","kind":"import-statement","original":"../../util"}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/Grid/index.ts":{"bytes":507,"imports":[{"path":"packages/ui/react-ui-canvas/src/components/Grid/Grid.tsx","kind":"import-statement","original":"./Grid"}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/index.ts":{"bytes":663,"imports":[{"path":"packages/ui/react-ui-canvas/src/components/Canvas/index.ts","kind":"import-statement","original":"./Canvas"},{"path":"packages/ui/react-ui-canvas/src/components/FPS.tsx","kind":"import-statement","original":"./FPS"},{"path":"packages/ui/react-ui-canvas/src/components/Grid/index.ts","kind":"import-statement","original":"./Grid"}],"format":"esm"},"packages/ui/react-ui-canvas/src/types.ts":{"bytes":1660,"imports":[{"path":"effect","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/index.ts":{"bytes":747,"imports":[{"path":"packages/ui/react-ui-canvas/src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"packages/ui/react-ui-canvas/src/hooks/index.ts","kind":"import-statement","original":"./hooks"},{"path":"packages/ui/react-ui-canvas/src/types.ts","kind":"import-statement","original":"./types"},{"path":"packages/ui/react-ui-canvas/src/util/index.ts","kind":"import-statement","original":"./util"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-canvas/dist/lib/node/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":35514},"packages/ui/react-ui-canvas/dist/lib/node/index.cjs":{"imports":[{"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":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","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","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":"packages/ui/react-ui-canvas/src/index.ts","inputs":{"packages/ui/react-ui-canvas/src/components/Canvas/Canvas.tsx":{"bytesInOutput":1994},"packages/ui/react-ui-canvas/src/hooks/projection.tsx":{"bytesInOutput":2211},"packages/ui/react-ui-canvas/src/hooks/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/hooks/useCanvasContext.tsx":{"bytesInOutput":260},"packages/ui/react-ui-canvas/src/hooks/useWheel.tsx":{"bytesInOutput":2116},"packages/ui/react-ui-canvas/src/util/svg.tsx":{"bytesInOutput":2736},"packages/ui/react-ui-canvas/src/util/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/util/util.ts":{"bytesInOutput":800},"packages/ui/react-ui-canvas/src/components/Canvas/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/components/FPS.tsx":{"bytesInOutput":2071},"packages/ui/react-ui-canvas/src/components/Grid/Grid.tsx":{"bytesInOutput":2187},"packages/ui/react-ui-canvas/src/components/Grid/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/types.ts":{"bytesInOutput":202}},"bytes":15567}}}
|
|
@@ -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 * as d3 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) {\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 = d3.interpolate(current, next);\n d3.transition()\n .ease(d3.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 = d3.interpolateObject({ scale: current.scale, ...current.offset }, { scale: next.scale, ...next.offset });\n d3.transition()\n .ease(d3.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 { S } from '@dxos/effect';\n\nexport const Point = S.Struct({ x: S.Number, y: S.Number });\nexport const Dimension = S.Struct({ width: S.Number, height: S.Number });\nexport const Rect = S.extend(Point, Dimension);\n\nexport type Point = S.Schema.Type<typeof Point>;\nexport type Dimension = S.Schema.Type<typeof Dimension>;\nexport type Rect = S.Schema.Type<typeof Rect>;\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["React", "forwardRef", "useEffect", "useImperativeHandle", "useMemo", "useState", "useResizeDetector", "mx", "d3", "applyToPoints", "compose", "identity", "inverse", "scale", "scaleMatrix", "translate", "translateMatrix", "defaultOrigin", "x", "y", "ProjectionMapper", "constructor", "bounds", "scale", "offset", "_bounds", "width", "height", "_scale", "_offset", "_toScreen", "identity", "_toModel", "update", "compose", "translateMatrix", "scaleMatrix", "inverse", "toScreen", "points", "applyToPoints", "toModel", "getZoomTransform", "pos", "newScale", "zoomInPlace", "setTransform", "current", "next", "delay", "is", "interpolate", "d3", "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", "useMemo", "useId", "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", "S", "Point", "S", "Struct", "x", "Number", "y", "Dimension", "width", "height", "Rect", "extend"]
|
|
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 * as d3 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) {\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 = d3.interpolate(current, next);\n d3.transition()\n .ease(d3.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 = d3.interpolateObject({ scale: current.scale, ...current.offset }, { scale: next.scale, ...next.offset });\n d3.transition()\n .ease(d3.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 as S } from 'effect';\n\nexport const Point = S.Struct({ x: S.Number, y: S.Number });\nexport const Dimension = S.Struct({ width: S.Number, height: S.Number });\nexport const Rect = S.extend(Point, Dimension);\n\nexport type Point = S.Schema.Type<typeof Point>;\nexport type Dimension = S.Schema.Type<typeof Dimension>;\nexport type Rect = S.Schema.Type<typeof Rect>;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React", "forwardRef", "useEffect", "useImperativeHandle", "useMemo", "useState", "useResizeDetector", "mx", "d3", "applyToPoints", "compose", "identity", "inverse", "scale", "scaleMatrix", "translate", "translateMatrix", "defaultOrigin", "x", "y", "ProjectionMapper", "constructor", "bounds", "scale", "offset", "_bounds", "width", "height", "_scale", "_offset", "_toScreen", "identity", "_toModel", "update", "compose", "translateMatrix", "scaleMatrix", "inverse", "toScreen", "points", "applyToPoints", "toModel", "getZoomTransform", "pos", "newScale", "zoomInPlace", "setTransform", "current", "next", "delay", "is", "interpolate", "d3", "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", "useMemo", "useId", "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", "S", "Point", "S", "Struct", "x", "Number", "y", "Dimension", "width", "height", "Rect", "extend"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-canvas/src/hooks/projection.tsx":{"bytes":11859,"imports":[{"path":"d3","kind":"import-statement","external":true},{"path":"transformation-matrix","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/hooks/useCanvasContext.tsx":{"bytes":2146,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/debug","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/util/svg.tsx":{"bytes":12581,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/util/util.ts":{"bytes":4822,"imports":[],"format":"esm"},"packages/ui/react-ui-canvas/src/util/index.ts":{"bytes":571,"imports":[{"path":"packages/ui/react-ui-canvas/src/util/svg.tsx","kind":"import-statement","original":"./svg"},{"path":"packages/ui/react-ui-canvas/src/util/util.ts","kind":"import-statement","original":"./util"}],"format":"esm"},"packages/ui/react-ui-canvas/src/hooks/useWheel.tsx":{"bytes":10298,"imports":[{"path":"bind-event-listener","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-canvas/src/hooks/projection.tsx","kind":"import-statement","original":"./projection"},{"path":"packages/ui/react-ui-canvas/src/hooks/useCanvasContext.tsx","kind":"import-statement","original":"./useCanvasContext"},{"path":"packages/ui/react-ui-canvas/src/util/index.ts","kind":"import-statement","original":"../util"}],"format":"esm"},"packages/ui/react-ui-canvas/src/hooks/index.ts":{"bytes":711,"imports":[{"path":"packages/ui/react-ui-canvas/src/hooks/projection.tsx","kind":"import-statement","original":"./projection"},{"path":"packages/ui/react-ui-canvas/src/hooks/useCanvasContext.tsx","kind":"import-statement","original":"./useCanvasContext"},{"path":"packages/ui/react-ui-canvas/src/hooks/useWheel.tsx","kind":"import-statement","original":"./useWheel"}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/Canvas/Canvas.tsx":{"bytes":9268,"imports":[{"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":"packages/ui/react-ui-canvas/src/hooks/index.ts","kind":"import-statement","original":"../../hooks"}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/Canvas/index.ts":{"bytes":511,"imports":[{"path":"packages/ui/react-ui-canvas/src/components/Canvas/Canvas.tsx","kind":"import-statement","original":"./Canvas"}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/FPS.tsx":{"bytes":9050,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/Grid/Grid.tsx":{"bytes":9443,"imports":[{"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":"packages/ui/react-ui-canvas/src/hooks/index.ts","kind":"import-statement","original":"../../hooks"},{"path":"packages/ui/react-ui-canvas/src/util/index.ts","kind":"import-statement","original":"../../util"}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/Grid/index.ts":{"bytes":507,"imports":[{"path":"packages/ui/react-ui-canvas/src/components/Grid/Grid.tsx","kind":"import-statement","original":"./Grid"}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/index.ts":{"bytes":663,"imports":[{"path":"packages/ui/react-ui-canvas/src/components/Canvas/index.ts","kind":"import-statement","original":"./Canvas"},{"path":"packages/ui/react-ui-canvas/src/components/FPS.tsx","kind":"import-statement","original":"./FPS"},{"path":"packages/ui/react-ui-canvas/src/components/Grid/index.ts","kind":"import-statement","original":"./Grid"}],"format":"esm"},"packages/ui/react-ui-canvas/src/types.ts":{"bytes":
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-canvas/src/hooks/projection.tsx":{"bytes":11859,"imports":[{"path":"d3","kind":"import-statement","external":true},{"path":"transformation-matrix","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/hooks/useCanvasContext.tsx":{"bytes":2146,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/debug","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/util/svg.tsx":{"bytes":12581,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/util/util.ts":{"bytes":4822,"imports":[],"format":"esm"},"packages/ui/react-ui-canvas/src/util/index.ts":{"bytes":571,"imports":[{"path":"packages/ui/react-ui-canvas/src/util/svg.tsx","kind":"import-statement","original":"./svg"},{"path":"packages/ui/react-ui-canvas/src/util/util.ts","kind":"import-statement","original":"./util"}],"format":"esm"},"packages/ui/react-ui-canvas/src/hooks/useWheel.tsx":{"bytes":10298,"imports":[{"path":"bind-event-listener","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-canvas/src/hooks/projection.tsx","kind":"import-statement","original":"./projection"},{"path":"packages/ui/react-ui-canvas/src/hooks/useCanvasContext.tsx","kind":"import-statement","original":"./useCanvasContext"},{"path":"packages/ui/react-ui-canvas/src/util/index.ts","kind":"import-statement","original":"../util"}],"format":"esm"},"packages/ui/react-ui-canvas/src/hooks/index.ts":{"bytes":711,"imports":[{"path":"packages/ui/react-ui-canvas/src/hooks/projection.tsx","kind":"import-statement","original":"./projection"},{"path":"packages/ui/react-ui-canvas/src/hooks/useCanvasContext.tsx","kind":"import-statement","original":"./useCanvasContext"},{"path":"packages/ui/react-ui-canvas/src/hooks/useWheel.tsx","kind":"import-statement","original":"./useWheel"}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/Canvas/Canvas.tsx":{"bytes":9268,"imports":[{"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":"packages/ui/react-ui-canvas/src/hooks/index.ts","kind":"import-statement","original":"../../hooks"}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/Canvas/index.ts":{"bytes":511,"imports":[{"path":"packages/ui/react-ui-canvas/src/components/Canvas/Canvas.tsx","kind":"import-statement","original":"./Canvas"}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/FPS.tsx":{"bytes":9050,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/Grid/Grid.tsx":{"bytes":9443,"imports":[{"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":"packages/ui/react-ui-canvas/src/hooks/index.ts","kind":"import-statement","original":"../../hooks"},{"path":"packages/ui/react-ui-canvas/src/util/index.ts","kind":"import-statement","original":"../../util"}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/Grid/index.ts":{"bytes":507,"imports":[{"path":"packages/ui/react-ui-canvas/src/components/Grid/Grid.tsx","kind":"import-statement","original":"./Grid"}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/index.ts":{"bytes":663,"imports":[{"path":"packages/ui/react-ui-canvas/src/components/Canvas/index.ts","kind":"import-statement","original":"./Canvas"},{"path":"packages/ui/react-ui-canvas/src/components/FPS.tsx","kind":"import-statement","original":"./FPS"},{"path":"packages/ui/react-ui-canvas/src/components/Grid/index.ts","kind":"import-statement","original":"./Grid"}],"format":"esm"},"packages/ui/react-ui-canvas/src/types.ts":{"bytes":1660,"imports":[{"path":"effect","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/index.ts":{"bytes":747,"imports":[{"path":"packages/ui/react-ui-canvas/src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"packages/ui/react-ui-canvas/src/hooks/index.ts","kind":"import-statement","original":"./hooks"},{"path":"packages/ui/react-ui-canvas/src/types.ts","kind":"import-statement","original":"./types"},{"path":"packages/ui/react-ui-canvas/src/util/index.ts","kind":"import-statement","original":"./util"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-canvas/dist/lib/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":35516},"packages/ui/react-ui-canvas/dist/lib/node-esm/index.mjs":{"imports":[{"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":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","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","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":"packages/ui/react-ui-canvas/src/index.ts","inputs":{"packages/ui/react-ui-canvas/src/components/Canvas/Canvas.tsx":{"bytesInOutput":1994},"packages/ui/react-ui-canvas/src/hooks/projection.tsx":{"bytesInOutput":2211},"packages/ui/react-ui-canvas/src/hooks/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/hooks/useCanvasContext.tsx":{"bytesInOutput":260},"packages/ui/react-ui-canvas/src/hooks/useWheel.tsx":{"bytesInOutput":2116},"packages/ui/react-ui-canvas/src/util/svg.tsx":{"bytesInOutput":2736},"packages/ui/react-ui-canvas/src/util/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/util/util.ts":{"bytesInOutput":800},"packages/ui/react-ui-canvas/src/components/Canvas/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/components/FPS.tsx":{"bytesInOutput":2071},"packages/ui/react-ui-canvas/src/components/Grid/Grid.tsx":{"bytesInOutput":2187},"packages/ui/react-ui-canvas/src/components/Grid/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/types.ts":{"bytesInOutput":202}},"bytes":15660}}}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import { type ThemedClassName } from '@dxos/react-ui';
|
|
2
3
|
export type FPSProps = ThemedClassName<{
|
|
3
4
|
width?: number;
|
|
4
5
|
height?: number;
|
|
5
6
|
bar?: string;
|
|
6
7
|
}>;
|
|
7
|
-
export declare const FPS: ({ classNames, width, height, bar }: FPSProps) =>
|
|
8
|
+
export declare const FPS: ({ classNames, width, height, bar }: FPSProps) => React.JSX.Element;
|
|
8
9
|
//# sourceMappingURL=FPS.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FPS.d.ts","sourceRoot":"","sources":["../../../../src/components/FPS.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"FPS.d.ts","sourceRoot":"","sources":["../../../../src/components/FPS.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,MAAM,MAAM,QAAQ,GAAG,eAAe,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC,CAAC;AAYH,eAAO,MAAM,GAAG,uCAAkE,QAAQ,sBAuEzF,CAAC"}
|
|
@@ -15,5 +15,5 @@ export declare const GridComponent: React.ForwardRefExoticComponent<Omit<{
|
|
|
15
15
|
}, "className"> & {
|
|
16
16
|
classNames?: import("@dxos/react-ui-types").ClassNameValue;
|
|
17
17
|
} & React.RefAttributes<SVGSVGElement>>;
|
|
18
|
-
export declare const Grid: (props: GridProps) =>
|
|
18
|
+
export declare const Grid: (props: GridProps) => React.JSX.Element;
|
|
19
19
|
//# sourceMappingURL=Grid.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAmB,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAIvE,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,aAAa,CAAC;AAUzC,MAAM,MAAM,SAAS,GAAG,eAAe,CAAC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC,CAAC;AAEH,eAAO,MAAM,aAAa;WANjB,MAAM;YACL,MAAM;aACL,KAAK;eACH,OAAO;;;uCAwDnB,CAAC;AAGF,eAAO,MAAM,IAAI,UAAW,SAAS,
|
|
1
|
+
{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAmB,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAIvE,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,aAAa,CAAC;AAUzC,MAAM,MAAM,SAAS,GAAG,eAAe,CAAC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC,CAAC;AAEH,eAAO,MAAM,aAAa;WANjB,MAAM;YACL,MAAM;aACL,KAAK;eACH,OAAO;;;uCAwDnB,CAAC;AAGF,eAAO,MAAM,IAAI,UAAW,SAAS,sBAGpC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,CAAC,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAC;AAErC,eAAO,MAAM,KAAK;;;EAAyC,CAAC;AAC5D,eAAO,MAAM,SAAS;;;EAAkD,CAAC;AACzE,eAAO,MAAM,IAAI;;;;;;GAA6B,CAAC;AAE/C,MAAM,MAAM,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,KAAK,CAAC,CAAC;AAChD,MAAM,MAAM,SAAS,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,SAAS,CAAC,CAAC;AACxD,MAAM,MAAM,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type PropsWithChildren, type SVGProps } from 'react';
|
|
1
|
+
import React, { type PropsWithChildren, type SVGProps } from 'react';
|
|
2
2
|
import { type ThemedClassName } from '@dxos/react-ui';
|
|
3
3
|
import { type Dimension, type Point } from '../types';
|
|
4
4
|
export declare const createPath: (points: Point[], join?: boolean) => string;
|
|
@@ -8,7 +8,7 @@ export declare const createPath: (points: Point[], join?: boolean) => string;
|
|
|
8
8
|
*/
|
|
9
9
|
export declare const Markers: ({ id, classNames }: ThemedClassName<{
|
|
10
10
|
id?: string;
|
|
11
|
-
}>) =>
|
|
11
|
+
}>) => React.JSX.Element;
|
|
12
12
|
export type MarkerProps = SVGProps<SVGMarkerElement> & PropsWithChildren<ThemedClassName<{
|
|
13
13
|
id: string;
|
|
14
14
|
pos: Point;
|
|
@@ -18,16 +18,16 @@ export type MarkerProps = SVGProps<SVGMarkerElement> & PropsWithChildren<ThemedC
|
|
|
18
18
|
/**
|
|
19
19
|
* https://www.w3.org/TR/SVG2/painting.html#Markers
|
|
20
20
|
*/
|
|
21
|
-
export declare const Marker: ({ id, className, children, pos: { x: refX, y: refY }, size: { width: markerWidth, height: markerHeight }, fill, ...rest }: MarkerProps) =>
|
|
21
|
+
export declare const Marker: ({ id, className, children, pos: { x: refX, y: refY }, size: { width: markerWidth, height: markerHeight }, fill, ...rest }: MarkerProps) => React.JSX.Element;
|
|
22
22
|
export declare const Arrow: ({ classNames, id, size, dir, closed, }: ThemedClassName<{
|
|
23
23
|
id: string;
|
|
24
24
|
size?: number;
|
|
25
25
|
dir?: "start" | "end";
|
|
26
26
|
closed?: boolean;
|
|
27
|
-
}>) =>
|
|
27
|
+
}>) => React.JSX.Element;
|
|
28
28
|
export declare const GridPattern: ({ classNames, id, size, offset, }: ThemedClassName<{
|
|
29
29
|
id: string;
|
|
30
30
|
size: number;
|
|
31
31
|
offset: Point;
|
|
32
|
-
}>) =>
|
|
32
|
+
}>) => React.JSX.Element;
|
|
33
33
|
//# sourceMappingURL=svg.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"svg.d.ts","sourceRoot":"","sources":["../../../../src/util/svg.tsx"],"names":[],"mappings":"AAIA,
|
|
1
|
+
{"version":3,"file":"svg.d.ts","sourceRoot":"","sources":["../../../../src/util/svg.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,KAAK,EAAE,MAAM,UAAU,CAAC;AAMtD,eAAO,MAAM,UAAU,WAAY,KAAK,EAAE,2BAEzC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,OAAO,uBAAsC,eAAe,CAAC;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,sBAYzF,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC,gBAAgB,CAAC,GAClD,iBAAiB,CACf,eAAe,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,KAAK,CAAC;IACX,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC,CACH,CAAC;AAEJ;;GAEG;AACH,eAAO,MAAM,MAAM,8HAQhB,WAAW,sBAgBb,CAAC;AAEF,eAAO,MAAM,KAAK,2CAMf,eAAe,CAAC;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,sBA0BzF,CAAC;AAEF,eAAO,MAAM,WAAW,sCAKrB,eAAe,CAAC;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,KAAK,CAAA;CAAE,CAAC,sBAe9D,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui-canvas",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.1-main.013e445",
|
|
4
4
|
"description": "A canvas component.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -27,34 +27,32 @@
|
|
|
27
27
|
"@radix-ui/react-context": "1.1.1",
|
|
28
28
|
"bind-event-listener": "^3.0.0",
|
|
29
29
|
"d3": "^7.9.0",
|
|
30
|
-
"effect": "^3.12.3",
|
|
31
30
|
"react-resize-detector": "^11.0.1",
|
|
32
31
|
"transformation-matrix": "^2.16.1",
|
|
33
|
-
"@dxos/
|
|
34
|
-
"@dxos/invariant": "0.8.
|
|
35
|
-
"@dxos/log": "0.8.
|
|
36
|
-
"@dxos/util": "0.8.
|
|
37
|
-
"@dxos/debug": "0.8.0"
|
|
32
|
+
"@dxos/debug": "0.8.1-main.013e445",
|
|
33
|
+
"@dxos/invariant": "0.8.1-main.013e445",
|
|
34
|
+
"@dxos/log": "0.8.1-main.013e445",
|
|
35
|
+
"@dxos/util": "0.8.1-main.013e445"
|
|
38
36
|
},
|
|
39
37
|
"devDependencies": {
|
|
40
|
-
"@effect/schema": "^0.75.5",
|
|
41
38
|
"@types/d3": "^7.4.3",
|
|
42
39
|
"@types/react": "~18.2.0",
|
|
43
40
|
"@types/react-dom": "~18.2.0",
|
|
41
|
+
"effect": "3.13.3",
|
|
44
42
|
"react": "~18.2.0",
|
|
45
43
|
"react-dom": "~18.2.0",
|
|
46
44
|
"vite": "5.4.7",
|
|
47
|
-
"@dxos/random": "0.8.
|
|
48
|
-
"@dxos/react-ui": "0.8.
|
|
49
|
-
"@dxos/
|
|
50
|
-
"@dxos/
|
|
45
|
+
"@dxos/random": "0.8.1-main.013e445",
|
|
46
|
+
"@dxos/react-ui-theme": "0.8.1-main.013e445",
|
|
47
|
+
"@dxos/storybook-utils": "0.8.1-main.013e445",
|
|
48
|
+
"@dxos/react-ui": "0.8.1-main.013e445"
|
|
51
49
|
},
|
|
52
50
|
"peerDependencies": {
|
|
53
|
-
"
|
|
51
|
+
"effect": "3.13.3",
|
|
54
52
|
"react": "~18.2.0",
|
|
55
53
|
"react-dom": "~18.2.0",
|
|
56
|
-
"@dxos/react-ui": "0.8.
|
|
57
|
-
"@dxos/react-ui-theme": "0.8.
|
|
54
|
+
"@dxos/react-ui": "0.8.1-main.013e445",
|
|
55
|
+
"@dxos/react-ui-theme": "0.8.1-main.013e445"
|
|
58
56
|
},
|
|
59
57
|
"publishConfig": {
|
|
60
58
|
"access": "public"
|
package/src/types.ts
CHANGED