@dxos/react-ui-canvas 0.8.3 → 0.8.4-main.05e74ebcff
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/LICENSE +102 -5
- package/dist/lib/browser/index.mjs +1137 -381
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +1137 -381
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/components/Canvas/Canvas.d.ts +2 -2
- package/dist/types/src/components/Canvas/Canvas.d.ts.map +1 -1
- package/dist/types/src/components/Canvas/Canvas.stories.d.ts +12 -4
- package/dist/types/src/components/Canvas/Canvas.stories.d.ts.map +1 -1
- package/dist/types/src/components/CellGrid/CellGrid.d.ts +21 -0
- package/dist/types/src/components/CellGrid/CellGrid.d.ts.map +1 -0
- package/dist/types/src/components/CellGrid/CellGrid.stories.d.ts +21 -0
- package/dist/types/src/components/CellGrid/CellGrid.stories.d.ts.map +1 -0
- package/dist/types/src/components/CellGrid/headers/Ruler.d.ts +15 -0
- package/dist/types/src/components/CellGrid/headers/Ruler.d.ts.map +1 -0
- package/dist/types/src/components/CellGrid/headers/TrackHeader.d.ts +19 -0
- package/dist/types/src/components/CellGrid/headers/TrackHeader.d.ts.map +1 -0
- package/dist/types/src/components/CellGrid/headers/index.d.ts +3 -0
- package/dist/types/src/components/CellGrid/headers/index.d.ts.map +1 -0
- package/dist/types/src/components/CellGrid/index.d.ts +6 -0
- package/dist/types/src/components/CellGrid/index.d.ts.map +1 -0
- package/dist/types/src/components/CellGrid/input/index.d.ts +3 -0
- package/dist/types/src/components/CellGrid/input/index.d.ts.map +1 -0
- package/dist/types/src/components/CellGrid/input/pointer.d.ts +29 -0
- package/dist/types/src/components/CellGrid/input/pointer.d.ts.map +1 -0
- package/dist/types/src/components/CellGrid/input/wheel.d.ts +14 -0
- package/dist/types/src/components/CellGrid/input/wheel.d.ts.map +1 -0
- package/dist/types/src/components/CellGrid/render/index.d.ts +3 -0
- package/dist/types/src/components/CellGrid/render/index.d.ts.map +1 -0
- package/dist/types/src/components/CellGrid/render/overlay-layer.d.ts +21 -0
- package/dist/types/src/components/CellGrid/render/overlay-layer.d.ts.map +1 -0
- package/dist/types/src/components/CellGrid/render/static-layer.d.ts +36 -0
- package/dist/types/src/components/CellGrid/render/static-layer.d.ts.map +1 -0
- package/dist/types/src/components/CellGrid/state/atoms.d.ts +23 -0
- package/dist/types/src/components/CellGrid/state/atoms.d.ts.map +1 -0
- package/dist/types/src/components/CellGrid/state/index.d.ts +4 -0
- package/dist/types/src/components/CellGrid/state/index.d.ts.map +1 -0
- package/dist/types/src/components/CellGrid/state/types.d.ts +39 -0
- package/dist/types/src/components/CellGrid/state/types.d.ts.map +1 -0
- package/dist/types/src/components/CellGrid/state/viewport.d.ts +52 -0
- package/dist/types/src/components/CellGrid/state/viewport.d.ts.map +1 -0
- package/dist/types/src/components/CellGrid/state/viewport.test.d.ts +2 -0
- package/dist/types/src/components/CellGrid/state/viewport.test.d.ts.map +1 -0
- package/dist/types/src/components/FPS.d.ts.map +1 -1
- package/dist/types/src/components/Grid/Grid.d.ts +2 -2
- package/dist/types/src/components/Grid/Grid.d.ts.map +1 -1
- package/dist/types/src/components/Grid/Grid.stories.d.ts +19 -4
- package/dist/types/src/components/Grid/Grid.stories.d.ts.map +1 -1
- package/dist/types/src/components/index.d.ts +1 -0
- package/dist/types/src/components/index.d.ts.map +1 -1
- package/dist/types/src/hooks/index.d.ts +1 -0
- package/dist/types/src/hooks/index.d.ts.map +1 -1
- package/dist/types/src/hooks/projection.d.ts +1 -1
- package/dist/types/src/hooks/projection.d.ts.map +1 -1
- package/dist/types/src/hooks/useDrag.d.ts +6 -0
- package/dist/types/src/hooks/useDrag.d.ts.map +1 -0
- package/dist/types/src/hooks/useWheel.d.ts.map +1 -1
- package/dist/types/src/types.d.ts +1 -1
- package/dist/types/src/types.d.ts.map +1 -1
- package/dist/types/src/util/svg.d.ts +1 -1
- package/dist/types/src/util/svg.d.ts.map +1 -1
- package/dist/types/src/util/svg.stories.d.ts +12 -4
- package/dist/types/src/util/svg.stories.d.ts.map +1 -1
- package/dist/types/src/util/util.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +27 -26
- package/src/components/Canvas/Canvas.stories.tsx +14 -12
- package/src/components/Canvas/Canvas.tsx +12 -16
- package/src/components/CellGrid/CellGrid.stories.tsx +238 -0
- package/src/components/CellGrid/CellGrid.tsx +266 -0
- package/src/components/CellGrid/headers/Ruler.tsx +71 -0
- package/src/components/CellGrid/headers/TrackHeader.tsx +58 -0
- package/src/components/CellGrid/headers/index.ts +6 -0
- package/src/components/CellGrid/index.ts +9 -0
- package/src/components/CellGrid/input/index.ts +6 -0
- package/src/components/CellGrid/input/pointer.ts +208 -0
- package/src/components/CellGrid/input/wheel.ts +68 -0
- package/src/components/CellGrid/render/index.ts +6 -0
- package/src/components/CellGrid/render/overlay-layer.ts +66 -0
- package/src/components/CellGrid/render/static-layer.ts +112 -0
- package/src/components/CellGrid/state/atoms.ts +43 -0
- package/src/components/CellGrid/state/index.ts +7 -0
- package/src/components/CellGrid/state/types.ts +40 -0
- package/src/components/CellGrid/state/viewport.test.ts +50 -0
- package/src/components/CellGrid/state/viewport.ts +94 -0
- package/src/components/FPS.tsx +3 -3
- package/src/components/Grid/Grid.stories.tsx +10 -9
- package/src/components/Grid/Grid.tsx +15 -17
- package/src/components/index.ts +1 -0
- package/src/hooks/index.ts +1 -0
- package/src/hooks/projection.tsx +2 -2
- package/src/hooks/useDrag.tsx +96 -0
- package/src/hooks/useWheel.tsx +1 -28
- package/src/types.ts +1 -1
- package/src/util/svg.stories.tsx +9 -9
- package/src/util/svg.tsx +1 -1
- package/dist/lib/node/index.cjs +0 -691
- package/dist/lib/node/index.cjs.map +0 -7
- package/dist/lib/node/meta.json +0 -1
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/components/Canvas/Canvas.tsx", "../../../src/hooks/projection.tsx", "../../../src/hooks/useCanvasContext.tsx", "../../../src/hooks/useWheel.tsx", "../../../src/util/svg.tsx", "../../../src/util/util.ts", "../../../src/components/FPS.tsx", "../../../src/components/Grid/Grid.tsx", "../../../src/types.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport React, {\n type CSSProperties,\n type HTMLAttributes,\n type PropsWithChildren,\n forwardRef,\n useEffect,\n useImperativeHandle,\n useMemo,\n useState,\n} from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { defaultOrigin, CanvasContext, ProjectionMapper, type ProjectionState } from '../../hooks';\n\nexport interface CanvasController {\n setProjection(projection: ProjectionState): Promise<void>;\n}\n\nexport type CanvasProps = ThemedClassName<PropsWithChildren<Partial<ProjectionState> & HTMLAttributes<HTMLDivElement>>>;\n\n/**\n * Root canvas component.\n * Manages CSS projection.\n */\nexport const Canvas = forwardRef<CanvasController, CanvasProps>(\n ({ children, classNames, scale: _scale = 1, offset: _offset = defaultOrigin, ...props }, forwardedRef) => {\n // Size.\n const { ref, width = 0, height = 0 } = useResizeDetector();\n\n // Ready when initially resized.\n const [ready, setReady] = useState(false);\n\n // Projection.\n const [{ scale, offset }, setProjection] = useState<ProjectionState>({ scale: _scale, offset: _offset });\n useEffect(() => {\n if (width && height && offset === defaultOrigin) {\n setProjection({ scale, offset: { x: width / 2, y: height / 2 } });\n }\n }, [width, height, scale, offset]);\n\n // Projection mapper.\n const projection = useMemo(() => new ProjectionMapper(), []);\n useEffect(() => {\n projection.update({ width, height }, scale, offset);\n if (offset !== defaultOrigin) {\n setReady(true);\n }\n }, [projection, scale, offset, width, height]);\n\n // CSS transforms.\n const styles = useMemo<CSSProperties>(() => {\n return {\n // NOTE: Order is important.\n transform: `translate(${offset.x}px, ${offset.y}px) scale(${scale})`,\n visibility: width && height ? 'visible' : 'hidden',\n };\n }, [scale, offset]);\n\n // Controller.\n useImperativeHandle(\n forwardedRef,\n () => {\n return {\n setProjection: async (projection: ProjectionState) => {\n setProjection(projection);\n },\n };\n },\n [ref],\n );\n\n return (\n <CanvasContext.Provider\n value={{ root: ref.current, ready, width, height, scale, offset, styles, projection, setProjection }}\n >\n <div role='none' {...props} className={mx('absolute inset-0 overflow-hidden', classNames)} ref={ref}>\n {ready ? children : null}\n </div>\n </CanvasContext.Provider>\n );\n },\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { interpolate, interpolateObject, transition, easeSinOut } from 'd3';\nimport {\n type Matrix,\n applyToPoints,\n compose,\n identity,\n inverse,\n scale as scaleMatrix,\n translate as translateMatrix,\n} from 'transformation-matrix';\n\nimport { type Point, type Dimension } from '../types';\n\nexport const defaultOrigin: Point = { x: 0, y: 0 };\n\n// TODO(burdon): Rotation also?\nexport type ProjectionState = {\n scale: number;\n offset: Point;\n};\n\n/**\n * Maps between screen and model coordinates.\n */\nexport interface Projection {\n get bounds(): Dimension;\n get scale(): number;\n get offset(): Point;\n\n /**\n * Maps the model space to the screen offset (from the top-left of the element).\n */\n toScreen(points: Point[]): Point[];\n\n /**\n * Maps the pointer coordinate (from the top-left of the element) to the model space.\n */\n toModel(points: Point[]): Point[];\n}\n\nexport class ProjectionMapper implements Projection {\n private _bounds: Dimension = { width: 0, height: 0 };\n private _scale: number = 1;\n private _offset: Point = defaultOrigin;\n private _toScreen: Matrix = identity();\n private _toModel: Matrix = identity();\n\n constructor(bounds?: Dimension, scale?: number, offset?: Point) {\n if (bounds && scale && offset) {\n this.update(bounds, scale, offset);\n }\n }\n\n update(bounds: Dimension, scale: number, offset: Point): this {\n this._bounds = bounds;\n this._scale = scale;\n this._offset = offset;\n this._toScreen = compose(\n // NOTE: Order is important.\n translateMatrix(this._offset.x, this._offset.y),\n scaleMatrix(this._scale),\n // TODO(burdon): Flip.\n // flipX(),\n );\n this._toModel = inverse(this._toScreen);\n return this;\n }\n\n get bounds() {\n return this._bounds;\n }\n\n get scale() {\n return this._scale;\n }\n\n get offset() {\n return this._offset;\n }\n\n toScreen(points: Point[]): Point[] {\n return applyToPoints(this._toScreen, points);\n }\n\n toModel(points: Point[]): Point[] {\n return applyToPoints(this._toModel, points);\n }\n}\n\n/**\n * Maintain position while zooming.\n */\nexport const getZoomTransform = ({\n scale,\n offset,\n pos,\n newScale,\n}: ProjectionState & { pos: Point; newScale: number }): ProjectionState => {\n return {\n scale: newScale,\n offset: {\n x: pos.x - (pos.x - offset.x) * (newScale / scale),\n y: pos.y - (pos.y - offset.y) * (newScale / scale),\n },\n };\n};\n\n/**\n * Zoom while keeping the specified position in place.\n */\n// TODO(burdon): Convert to object.\nexport const zoomInPlace = (\n setTransform: (state: ProjectionState) => void,\n pos: Point,\n offset: Point,\n current: number,\n next: number,\n delay = 200,\n) => {\n const is = interpolate(current, next);\n transition()\n .ease(easeSinOut)\n .duration(delay)\n .tween('zoom', () => (t) => {\n const newScale = is(t);\n setTransform(getZoomTransform({ scale: current, newScale, offset, pos }));\n });\n};\n\nconst noop = () => {};\n\n/**\n * Zoom to new scale and position.\n */\n// TODO(burdon): Convert to object.\nexport const zoomTo = (\n setTransform: (state: ProjectionState) => void,\n current: ProjectionState,\n next: ProjectionState,\n delay = 200,\n cb = noop,\n) => {\n const is = interpolateObject({ scale: current.scale, ...current.offset }, { scale: next.scale, ...next.offset });\n transition()\n .ease(easeSinOut)\n .duration(delay)\n .tween('zoom', () => (t) => {\n const { scale, x, y } = is(t);\n setTransform({ scale, offset: { x, y } });\n })\n .on('end', cb);\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { type CSSProperties, type Dispatch, type SetStateAction, createContext, useContext } from 'react';\n\nimport { raise } from '@dxos/debug';\n\nimport { type Projection, type ProjectionState } from './projection';\n\nexport type CanvasContext = ProjectionState & {\n root: HTMLDivElement;\n ready: boolean;\n width: number;\n height: number;\n styles: CSSProperties;\n projection: Projection;\n setProjection: Dispatch<SetStateAction<ProjectionState>>;\n};\n\n/**\n * @internal\n */\n// TODO(burdon): Use radix?\nexport const CanvasContext = createContext<CanvasContext | null>(null);\n\nexport const useCanvasContext = (): CanvasContext => {\n return useContext(CanvasContext) ?? raise(new Error('Missing CanvasContext'));\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { bindAll } from 'bind-event-listener';\nimport { useEffect } from 'react';\n\nimport { getZoomTransform } from './projection';\nimport { useCanvasContext } from './useCanvasContext';\nimport { getRelativePoint } from '../util';\n\nexport type WheelOptions = {\n zoom?: boolean;\n};\n\nconst defaultOptions: WheelOptions = {\n zoom: true,\n};\n\n/**\n * Handle wheel events to update the transform state (zoom and offset).\n */\nexport const useWheel = (options: WheelOptions = defaultOptions) => {\n const { root, setProjection } = useCanvasContext();\n useEffect(() => {\n if (!root) {\n return;\n }\n\n return bindAll(root, [\n {\n type: 'wheel',\n options: { capture: true, passive: false },\n listener: (ev: WheelEvent) => {\n const zooming = isWheelZooming(ev);\n if (!hasFocus(root) && !zooming) {\n return;\n }\n\n ev.preventDefault();\n if (zooming && !options.zoom) {\n return;\n }\n\n // Zoom or pan.\n if (ev.ctrlKey) {\n if (!root) {\n return;\n }\n\n // Keep centered while zooming.\n setProjection(({ scale, offset }) => {\n const pos = getRelativePoint(root, ev);\n const scaleSensitivity = 0.01;\n const newScale = scale * Math.exp(-ev.deltaY * scaleSensitivity);\n return getZoomTransform({ scale, offset, newScale, pos });\n });\n } else {\n setProjection(({ scale, offset: { x, y } }) => {\n return {\n scale,\n offset: {\n x: x - ev.deltaX,\n y: y - ev.deltaY,\n },\n };\n });\n }\n },\n },\n ]);\n }, [root]);\n};\n\nconst isWheelZooming = (ev: WheelEvent): boolean => {\n // Check for ctrl/cmd key + wheel action.\n if (ev.ctrlKey || ev.metaKey) {\n // Some browsers use deltaY, others deltaZ for zoom.\n return Math.abs(ev.deltaY) > 0 || Math.abs(ev.deltaZ) > 0;\n }\n\n return false;\n};\n\nconst hasFocus = (element: HTMLElement): boolean => {\n const activeElement = document.activeElement;\n if (!activeElement) {\n return false;\n }\n\n // Handle shadow DOM.\n let shadowActive = activeElement;\n while (shadowActive?.shadowRoot?.activeElement) {\n shadowActive = shadowActive.shadowRoot.activeElement;\n }\n\n // Check if element or any parent has focus.\n let current: HTMLElement | null = element;\n while (current) {\n if (current === activeElement || current === shadowActive) {\n return true;\n }\n current = current.parentElement;\n }\n\n return false;\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { type PropsWithChildren, type SVGProps } from 'react';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { type Dimension, type Point } from '../types';\n\n// Refs\n// - https://airbnb.io/visx/gallery\n// - https://github.com/tldraw/tldraw/blob/main/packages/editor/src/lib/primitives/Vec.ts\n\nexport const createPath = (points: Point[], join = false) => {\n return ['M', points.map(({ x, y }) => `${x},${y}`).join(' L '), join ? 'Z' : ''].join(' ');\n};\n\n/**\n * https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths\n * NOTE: Leave space around shape for line width.\n */\nexport const Markers = ({ id = 'dx-marker', classNames }: ThemedClassName<{ id?: string }>) => {\n return (\n <>\n <Arrow id={`${id}-arrow-start`} dir='start' classNames={classNames} />\n <Arrow id={`${id}-arrow-end`} dir='end' classNames={classNames} />\n <Arrow id={`${id}-triangle-start`} dir='start' closed classNames={classNames} />\n <Arrow id={`${id}-triangle-end`} dir='end' closed classNames={classNames} />\n <Marker id={`${id}-circle`} pos={{ x: 8, y: 8 }} size={{ width: 16, height: 16 }}>\n <circle cx={8} cy={8} r={5} stroke={'context-stroke'} className={mx(classNames)} />\n </Marker>\n </>\n );\n};\n\nexport type MarkerProps = SVGProps<SVGMarkerElement> &\n PropsWithChildren<\n ThemedClassName<{\n id: string;\n pos: Point;\n size: Dimension;\n fill?: boolean;\n }>\n >;\n\n/**\n * https://www.w3.org/TR/SVG2/painting.html#Markers\n */\nexport const Marker = ({\n id,\n className,\n children,\n pos: { x: refX, y: refY },\n size: { width: markerWidth, height: markerHeight },\n fill,\n ...rest\n}: MarkerProps) => (\n <marker\n id={id}\n className={className}\n {...{\n refX,\n refY,\n markerWidth,\n markerHeight,\n markerUnits: 'strokeWidth',\n orient: 'auto',\n ...rest,\n }}\n >\n {children}\n </marker>\n);\n\nexport const Arrow = ({\n classNames,\n id,\n size = 16,\n dir = 'end',\n closed = false,\n}: ThemedClassName<{ id: string; size?: number; dir?: 'start' | 'end'; closed?: boolean }>) => (\n <Marker\n id={id}\n size={{ width: size, height: size }}\n pos={dir === 'end' ? { x: size, y: size / 2 } : { x: 0, y: size / 2 }}\n >\n <path\n fill={closed ? undefined : 'none'}\n stroke={'context-stroke'}\n className={mx(classNames)}\n d={createPath(\n dir === 'end'\n ? [\n { x: 1, y: 1 },\n { x: size, y: size / 2 },\n { x: 1, y: size - 1 },\n ]\n : [\n { x: size - 1, y: 1 },\n { x: 0, y: size / 2 },\n { x: size - 1, y: size - 1 },\n ],\n closed,\n )}\n />\n </Marker>\n);\n\nexport const GridPattern = ({\n classNames,\n id,\n size,\n offset,\n}: ThemedClassName<{ id: string; size: number; offset: Point }>) => (\n <pattern\n id={id}\n x={(size / 2 + offset.x) % size}\n y={(size / 2 + offset.y) % size}\n width={size}\n height={size}\n patternUnits='userSpaceOnUse'\n >\n {/* TODO(burdon): vars. */}\n <g className={mx(classNames)}>\n <line x1={0} y1={size / 2} x2={size} y2={size / 2} />\n <line x1={size / 2} y1={0} x2={size / 2} y2={size} />\n </g>\n </pattern>\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nlet logged = false;\n\n/**\n * Get the relative point of the cursor.\n * NOTE: ev.offset returns the position relative to the target.\n */\nexport const getRelativePoint = (el: HTMLElement, ev: MouseEvent) => {\n const rect = el.getBoundingClientRect();\n return { x: ev.clientX - rect.x, y: ev.clientY - rect.top };\n};\n\n/**\n *\n */\n// TODO(burdon): Factor out.\nexport const testId = <ID = string>(id: ID, inspect = false) => {\n if (inspect) {\n if (!logged) {\n // eslint-disable-next-line no-console\n console.log('Open storybook in expanded window;\\nthen run INSPECT()');\n logged = true;\n }\n\n (window as any).INSPECT = () => {\n const el = document.querySelector(`[data-test-id=\"${id}\"]`);\n (window as any).inspect(el);\n // eslint-disable-next-line no-console\n console.log(el);\n };\n }\n\n return { [DATA_TEST_ID]: id };\n};\n\nexport const inspectElement = (el: Element) => {\n (window as any).INSPECT = () => {\n (window as any).inspect(el);\n (window as any).element = el;\n // eslint-disable-next-line no-console\n console.log('Open storybook in expanded window;\\nthen run INSPECT()');\n // eslint-disable-next-line no-console\n console.log(el);\n };\n};\n\nexport const DATA_TEST_ID = 'data-test-id';\n", "//\n// Copyright 2024 DXOS.org\n// Adapted from: https://github.com/smplrspace/react-fps-stats\n//\n\nimport React, { useEffect, useReducer, useRef } from 'react';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nexport type FPSProps = ThemedClassName<{\n width?: number;\n height?: number;\n bar?: string;\n}>;\n\ntype State = {\n max: number;\n len: number;\n fps: number[];\n frames: number;\n prevTime: number;\n};\n\nconst SEC = 1_000;\n\nexport const FPS = ({ classNames, width = 60, height = 30, bar = 'bg-cyan-500' }: FPSProps) => {\n const [{ fps, max, len }, dispatch] = useReducer(\n (state: State) => {\n const currentTime = Date.now();\n if (currentTime > state.prevTime + SEC) {\n const nextFPS = [\n ...new Array(Math.floor((currentTime - state.prevTime - SEC) / SEC)).fill(0),\n Math.max(1, Math.round((state.frames * SEC) / (currentTime - state.prevTime))),\n ];\n return {\n max: Math.max(state.max, ...nextFPS),\n len: Math.min(state.len + nextFPS.length, width),\n fps: [...state.fps, ...nextFPS].slice(-width),\n frames: 1,\n prevTime: currentTime,\n };\n } else {\n return { ...state, frames: state.frames + 1 };\n }\n },\n {\n max: 0,\n len: 0,\n fps: [],\n frames: 0,\n prevTime: Date.now(),\n },\n );\n\n const requestRef = useRef<number>();\n const tick = () => {\n dispatch();\n requestRef.current = requestAnimationFrame(tick);\n };\n\n useEffect(() => {\n requestRef.current = requestAnimationFrame(tick);\n return () => {\n if (requestRef.current) {\n cancelAnimationFrame(requestRef.current);\n }\n };\n }, []);\n\n return (\n <div\n style={{ width: width + 6 }}\n className={mx(\n 'relative flex flex-col p-0.5',\n 'bg-baseSurface text-xs text-subdued font-thin pointer-events-none border border-separator',\n classNames,\n )}\n >\n <div>{fps[len - 1]} FPS</div>\n <div className='w-full relative' style={{ height }}>\n {fps.map((frame, i) => (\n <div\n key={`fps-${i}`}\n className={bar}\n style={{\n position: 'absolute',\n bottom: 0,\n right: `${len - 1 - i}px`,\n height: `${(height * frame) / max}px`,\n width: 1,\n }}\n />\n ))}\n </div>\n </div>\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { forwardRef, useMemo, useId } from 'react';\n\nimport { useForwardedRef, type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { useCanvasContext } from '../../hooks';\nimport { type Point } from '../../types';\nimport { GridPattern, testId } from '../../util';\n\nconst gridRatios = [1 / 4, 1, 4, 16];\n\nconst defaultGridSize = 16;\nconst defaultOffset: Point = { x: 0, y: 0 };\n\nconst createId = (parent: string, grid: number) => `dx-canvas-grid-${parent}-${grid}`;\n\nexport type GridProps = ThemedClassName<{\n size?: number;\n scale?: number;\n offset?: Point;\n showAxes?: boolean;\n}>;\n\nexport const GridComponent = forwardRef<SVGSVGElement, GridProps>(\n (\n { size: gridSize = defaultGridSize, scale = 1, offset = defaultOffset, showAxes = true, classNames },\n forwardedRef,\n ) => {\n const svgRef = useForwardedRef(forwardedRef);\n const instanceId = useId();\n const grids = useMemo(\n () =>\n gridRatios\n .map((ratio) => ({ id: ratio, size: ratio * gridSize * scale }))\n .filter(({ size }) => size >= gridSize && size <= 256),\n [gridSize, scale],\n );\n\n const { width = 0, height = 0 } = svgRef.current?.getBoundingClientRect() ?? {};\n\n return (\n <svg\n {...testId('dx-canvas-grid')}\n ref={svgRef}\n className={mx(\n 'absolute inset-0 w-full h-full pointer-events-none touch-none select-none',\n 'stroke-neutral-500',\n classNames,\n )}\n >\n {/* NOTE: The pattern is offset so that the middle of the pattern aligns with the grid. */}\n <defs>\n {grids.map(({ id, size }) => (\n <GridPattern key={id} id={createId(instanceId, id)} offset={offset} size={size} />\n ))}\n </defs>\n {showAxes && (\n <>\n <line x1={0} y1={offset.y} x2={width} y2={offset.y} className='stroke-neutral-500 opacity-40' />\n <line x1={offset.x} y1={0} x2={offset.x} y2={height} className='stroke-neutral-500 opacity-40' />\n </>\n )}\n <g>\n {grids.map(({ id }, i) => (\n <rect\n key={id}\n opacity={0.1 + i * 0.05}\n fill={`url(#${createId(instanceId, id)})`}\n width='100%'\n height='100%'\n />\n ))}\n </g>\n </svg>\n );\n },\n);\n\n// TODO(burdon): Use id of parent canvas.\nexport const Grid = (props: GridProps) => {\n const { scale, offset } = useCanvasContext();\n return <GridComponent {...props} scale={scale} offset={offset} />;\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { Schema } from 'effect';\n\nexport const Point = Schema.Struct({ x: Schema.Number, y: Schema.Number });\nexport const Dimension = Schema.Struct({ width: Schema.Number, height: Schema.Number });\nexport const Rect = Schema.extend(Point, Dimension);\n\nexport type Point = Schema.Schema.Type<typeof Point>;\nexport type Dimension = Schema.Schema.Type<typeof Dimension>;\nexport type Rect = Schema.Schema.Type<typeof Rect>;\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["import_react", "import_react_ui_theme", "defaultOrigin", "x", "y", "ProjectionMapper", "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", "Schema", "Struct", "Number", "Dimension", "Rect", "extend"]
|
|
7
|
-
}
|
package/dist/lib/node/meta.json
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-canvas/src/hooks/projection.tsx":{"bytes":11720,"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":2106,"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":13306,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/util/util.ts":{"bytes":4738,"imports":[],"format":"esm"},"packages/ui/react-ui-canvas/src/util/index.ts":{"bytes":539,"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":10142,"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":675,"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":9642,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-resize-detector","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"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":483,"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":9356,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/Grid/Grid.tsx":{"bytes":9774,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"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":475,"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":631,"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":1694,"imports":[{"path":"effect","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/index.ts":{"bytes":715,"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":35710},"packages/ui/react-ui-canvas/dist/lib/node/index.cjs":{"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-resize-detector","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"d3","kind":"import-statement","external":true},{"path":"transformation-matrix","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/debug","kind":"import-statement","external":true},{"path":"bind-event-listener","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"effect","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":2301},"packages/ui/react-ui-canvas/src/hooks/projection.tsx":{"bytesInOutput":2244},"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":3523},"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":2356},"packages/ui/react-ui-canvas/src/components/Grid/Grid.tsx":{"bytesInOutput":2507},"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":232}},"bytes":17329}}}
|