From 87dfb20b1f5879ce45c957355b1e38c5d1a6a903 Mon Sep 17 00:00:00 2001 From: Huy Nguyen Date: Sun, 19 Mar 2017 21:09:52 -0400 Subject: [PATCH] Add type definitions for react-svg-pan-zoom --- react-svg-pan-zoom/index.d.ts | 198 ++++++++++++++++++ .../react-svg-pan-zoom-tests.tsx | 57 +++++ react-svg-pan-zoom/tsconfig.json | 24 +++ react-svg-pan-zoom/tslint.json | 1 + 4 files changed, 280 insertions(+) create mode 100644 react-svg-pan-zoom/index.d.ts create mode 100644 react-svg-pan-zoom/react-svg-pan-zoom-tests.tsx create mode 100644 react-svg-pan-zoom/tsconfig.json create mode 100644 react-svg-pan-zoom/tslint.json diff --git a/react-svg-pan-zoom/index.d.ts b/react-svg-pan-zoom/index.d.ts new file mode 100644 index 0000000000..837890a507 --- /dev/null +++ b/react-svg-pan-zoom/index.d.ts @@ -0,0 +1,198 @@ +// Type definitions for react-svg-pan-zoom 2.5 +// Project: https://github.com/chrvadala/react-svg-pan-zoom#readme +// Definitions by: Huy Nguyen +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.2 +import * as React from 'react'; + +declare module 'react-svg-pan-zoom' { + + // String constants: + const MODE_IDLE = 'idle'; + const MODE_PANNING = 'panning'; + const MODE_ZOOMING = 'zooming'; + + export const TOOL_AUTO = 'auto'; + export const TOOL_NONE = 'none'; + export const TOOL_PAN = 'pan'; + export const TOOL_ZOOM_IN = 'zoom-in'; + export const TOOL_ZOOM_OUT = 'zoom-out'; + + export const POSITION_NONE = 'none'; + export const POSITION_TOP = 'top'; + export const POSITION_RIGHT = 'right'; + export const POSITION_BOTTOM = 'bottom'; + export const POSITION_LEFT = 'left'; + + export type Mode = typeof MODE_IDLE | typeof MODE_PANNING | typeof MODE_ZOOMING; + + export interface Value { + version: 2, + mode: Mode, + focus: boolean, + a: number, + b: number, + c: number, + d: number, + e: number, + f: number, + viewerWidth: number, + viewerHeight: number, + SVGWidth: number, + SVGHeight: number, + startX?: number | null, + startY?: number | null, + endX?: number | null, + endY?: number | null, + + } + + export type Tool = typeof TOOL_AUTO | typeof TOOL_NONE | typeof TOOL_PAN | + typeof TOOL_ZOOM_IN | typeof TOOL_ZOOM_OUT + export type ToolbarPosition = typeof POSITION_NONE | typeof POSITION_TOP | typeof POSITION_RIGHT | + typeof POSITION_BOTTOM | typeof POSITION_LEFT + + + export interface OptionalProps { + //background of the viewer + background: React.CSSProperties, + + //background of the svg + SVGBackground: string, + + //value of the viewer (current point of view) + value: Value | null, + + //CSS style of the Viewer + style: object, + + //className of the Viewer + className: string, + + //detect zoom operation performed trough pinch gesture or mouse scroll + detectWheel: boolean, + + //perform PAN if the mouse is on viewer border + detectAutoPan: boolean, + + //toolbar position + toolbarPosition: ToolbarPosition, + + //handler something changed + onChangeValue: (value: Value) => void, + + //handler tool changed + onChangeTool: (tool: Tool) => void, + + // Note: The `T` type parameter is the type of the `target` of the event: + //handler click + onClick: (event: ViewerMouseEvent) => void, + + //handler double click + onDoubleClick: (event: ViewerMouseEvent) => void, + + //handler mouseup + onMouseUp: (event: ViewerMouseEvent) => void, + + //handler mousemove + onMouseMove: (event: ViewerMouseEvent) => void, + + //handler mousedown + onMouseDown: (event: ViewerMouseEvent) => void, + + //if disabled the user can move the image outside the viewer + preventPanOutside: boolean, + + //how much scale in or out + scaleFactor: number, + + //current active tool (TOOL_NONE, TOOL_PAN, TOOL_ZOOM_IN, TOOL_ZOOM_OUT) + tool: Tool, + + //modifier keys //https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState + modifierKeys: string[], + + //override default toolbar component + // TODO: specify function type more clearly + customToolbar: React.Component | React.StatelessComponent, + + // How about touch events? They are in README but not in `propTypes`. + } + + export interface RequiredProps { + //width of the viewer displayed on screen + width: number, + //height of the viewer displayed on screen + height: number, + + //accept only one node SVG + // TODO: Figure out how to constrain `children` or maybe just leave it commented out + // because `children` is already implicit props + // children: () => any + } + + export type Props = RequiredProps & Partial + + class ReactSVGPanZoom extends React.Component { + pan(SVGDeltaX: number, SVGDeltaY: number): void + zoom(SVGPointX: number, SVGPointY: number, scaleFactor: number): void + fitSelection(selectionSVGPointX: number, selectionSVGPointY: number, selectionWidth: number, selectionHeight: number): void + fitToViewer(): void + setPointOnViewerCenter(SVGPointX: number, SVGPointY: number, zoomLevel: number): void + reset(): void + zoomOnViewerCenter(scaleFactor: number): void + getValue(): Value + setValue(value: Value): void + getTool(): Tool + setTool(tool: Tool): void + } + + + export interface Point { + x: number, + y: number, + } + + export interface ViewerMouseEvent{ + originalEvent: React.MouseEvent, + SVGViewer: SVGSVGElement, + point: Point, + x: number, + y: number, + scaleFactor: number, + translationX: number, + translationY: number, + preventDefault(): void + stopPropagation(): void + } + + export interface ViewerTouchEvent { + originalEvent: React.TouchEvent, + SVGViewer: SVGSVGElement, + points: Point[], + changedPoints: Point[], + scaleFactor: number, + translationX: number, + translationY: number, + preventDefault(): void + stopPropagation(): void + } + + // Utility functions exposed: + export function pan(value: Value, SVGDeltaX: number, SVGDeltaY: number, panLimit?: number): Value + + export function zoom(value: Value, SVGPointX: number, SVGPointY: number, scaleFactor: number): Value + + export function fitSelection( + value: Value, selectionSVGPointX: number, selectionSVGPointY: number, selectionWidth: number, selectionHeight: number): Value + + export function fitToViewer(value: Value): Value + + export function zoomOnViewerCenter(value: Value, scaleFactor: number): Value + + export function setPointOnViewerCenter(value: Value, SVGPointX: number, SVGPointY: number, zoomLevel: number): Value + + export function reset(value: Value): Value +} + + diff --git a/react-svg-pan-zoom/react-svg-pan-zoom-tests.tsx b/react-svg-pan-zoom/react-svg-pan-zoom-tests.tsx new file mode 100644 index 0000000000..dbe8f0d55e --- /dev/null +++ b/react-svg-pan-zoom/react-svg-pan-zoom-tests.tsx @@ -0,0 +1,57 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import { + ReactSVGPanZoom, + Props, + fitToViewer, + ViewerMouseEvent +} from 'react-svg-pan-zoom'; + + +class Example1 extends React.Component<{}, {}> { + Viewer: ReactSVGPanZoom + constructor(props: Props) { + super(props); + } + + componentDidMount() { + this.Viewer.fitToViewer(); + } + + render() { + return ( +
+ + + + +
+ + this.Viewer = Viewer} + onClick={(event: ViewerMouseEvent) => console.log('click', event.x, event.y, event.originalEvent)} + onMouseUp={(event: ViewerMouseEvent) => console.log('up', event.x, event.y)} + onMouseMove={(event: ViewerMouseEvent) => console.log('move', event.x, event.y)} + onMouseDown={(event: ViewerMouseEvent) => console.log('down', event.x, event.y)}> + + + + + + + + + + + + +
+ ); + } +} + +ReactDOM.render( + , + document.getElementById('app') +); diff --git a/react-svg-pan-zoom/tsconfig.json b/react-svg-pan-zoom/tsconfig.json new file mode 100644 index 0000000000..c1b72dd378 --- /dev/null +++ b/react-svg-pan-zoom/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "module": "commonjs", + "jsx": "react", + "lib": [ + "es6", + "dom" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "react-svg-pan-zoom-tests.tsx" + ] +} diff --git a/react-svg-pan-zoom/tslint.json b/react-svg-pan-zoom/tslint.json new file mode 100644 index 0000000000..377cc837d4 --- /dev/null +++ b/react-svg-pan-zoom/tslint.json @@ -0,0 +1 @@ +{ "extends": "../tslint.json" }