Changes
3 changed files (+141/-31)
-
-
@@ -1,17 +1,17 @@import { action } from "@storybook/addon-actions"; import { FigspecViewer } from "."; import { FigspecFrameViewer } from "."; import demoJson from "./__storybook__/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/64:1.json"; import demoImage from "./__storybook__/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/64:1.svg"; export default { title: "FigspecViewer", component: FigspecViewer, title: "FigspecFrameViewer", component: FigspecFrameViewer, }; const Template = (args) => ( <FigspecViewer <FigspecFrameViewer {...args} style={{ width: 500,
-
-
-
@@ -1,7 +1,10 @@import "@figspec/components"; // This line is treated as type-only import even without the `type` keyword. // The keyword is here to indicate the line does not triggers any side-effects. import type { FigspecViewer as FigspecViewerElement } from "@figspec/components"; import type { FigspecFrameViewer as FigspecFrameViewerElement, FigspecFileViewer as FigspecFileViewerElement, } from "@figspec/components"; import { forwardRef, useCallback,
-
@@ -10,8 +13,24 @@ useImperativeHandle,useState, } from "react"; type ElementProps = Pick< FigspecViewerElement, const bindEvent = ( element: HTMLElement, event: string, cb: (ev: CustomEvent) => void ) => { const listener = ((ev: CustomEvent) => { cb(ev); }) as EventListener; element.addEventListener(event, listener); return () => element.removeEventListener(event, listener); }; // Frame viewer type FigspecFrameViewerElementProps = Pick< FigspecFrameViewerElement, // HTML attributes | "id" | "className"
-
@@ -25,31 +44,18 @@ | "panSpeed"| "zoomMargin" >; export interface FigspecViewerProps extends ElementProps { export interface FigspecFrameViewerProps extends FigspecFrameViewerElementProps { onScaleChange?(ev: CustomEvent<{ scale: number }>): void; onPositionChange?(ev: CustomEvent<{ x: number; y: number }>): void; onNodeSelect?(ev: CustomEvent<{ selectedNode: unknown | null }>): void; } type Ref = FigspecViewerElement | null | undefined; type FigspecFrameViewerRef = FigspecFrameViewerElement | null | undefined; const bindEvent = ( element: HTMLElement, event: string, cb: (ev: CustomEvent) => void ) => { const listener = ((ev: CustomEvent) => { cb(ev); }) as EventListener; element.addEventListener(event, listener); return () => element.removeEventListener(event, listener); }; export const FigspecViewer = forwardRef< FigspecViewerElement, FigspecViewerProps export const FigspecFrameViewer = forwardRef< FigspecFrameViewerElement, FigspecFrameViewerProps >( ( {
-
@@ -66,11 +72,15 @@ ...rest}, ref ) => { const [refNode, setNode] = useState<FigspecViewerElement | null>(null); const [refNode, setNode] = useState<FigspecFrameViewerElement | null>(null); useImperativeHandle<Ref, Ref>(ref, () => refNode, [refNode]); useImperativeHandle<FigspecFrameViewerRef, FigspecFrameViewerRef>( ref, () => refNode, [refNode] ); const refCb = useCallback((node: FigspecViewerElement | null) => { const refCb = useCallback((node: FigspecFrameViewerElement | null) => { if (node) { setNode(node);
-
@@ -105,7 +115,106 @@ return bindEvent(refNode, "scalechange", onScaleChange);}, [refNode, onScaleChange]); return ( <figspec-viewer <figspec-frame-viewer ref={refCb} class={className} pan-speed={panSpeed} zoom-margin={zoomMargin} zoom-speed={zoomSpeed} {...rest} /> ); } ); // File viewer type FigspecFileViewerElementProps = Pick< FigspecFileViewerElement, // HTML attributes | "id" | "className" | "style" // Element props | "documentNode" | "renderedImages" // Element attributes (will be converted to kebab-case) | "zoomSpeed" | "panSpeed" | "zoomMargin" >; export interface FigspecFileViewerProps extends FigspecFileViewerElementProps { onScaleChange?(ev: CustomEvent<{ scale: number }>): void; onPositionChange?(ev: CustomEvent<{ x: number; y: number }>): void; onNodeSelect?(ev: CustomEvent<{ selectedNode: unknown | null }>): void; } type FigspecFileViewerRef = FigspecFileViewerElement | null | undefined; export const FigspecFileViewer = forwardRef< FigspecFileViewerElement, FigspecFileViewerProps >( ( { documentNode, renderedImages, className, panSpeed, zoomMargin, zoomSpeed, onNodeSelect, onPositionChange, onScaleChange, ...rest }, ref ) => { const [refNode, setNode] = useState<FigspecFileViewerElement | null>(null); useImperativeHandle<FigspecFileViewerRef, FigspecFileViewerRef>( ref, () => refNode, [refNode] ); const refCb = useCallback((node: FigspecFileViewerElement | null) => { if (node) { setNode(node); node.documentNode = documentNode; node.renderedImages = renderedImages; } }, []); useEffect(() => { if (!refNode) return; refNode.documentNode = documentNode; refNode.renderedImages = renderedImages; }, [refNode, documentNode, renderedImages]); useEffect(() => { if (!refNode || !onNodeSelect) return; return bindEvent(refNode, "nodeselect", onNodeSelect); }, [refNode, onNodeSelect]); useEffect(() => { if (!refNode || !onPositionChange) return; return bindEvent(refNode, "positionchange", onPositionChange); }, [refNode, onPositionChange]); useEffect(() => { if (!refNode || !onScaleChange) return; return bindEvent(refNode, "scalechange", onScaleChange); }, [refNode, onScaleChange]); return ( <figspec-file-viewer ref={refCb} class={className} pan-speed={panSpeed}
-
-
-
@@ -1,5 +1,6 @@declare namespace JSX { interface IntrinsicElements { "figspec-viewer": any; "figspec-frame-viewer": any; "figspec-file-viewer": any; } }
-