declare module jsPlumb { interface PaintStyle { stroke?: string; fill?: string; strokeWidth?: number; } module jsPlumb { function extend(target: Object, source: Object): any; function addClass(el: NodeListOf, clazz: string): void; function removeClass(el: NodeListOf, clazz: string): void; function on(el: any, event: string, delegateSelector: string, handler: Function): void; function on(el: any, event: string, handler: Function): void; function off(el: any, event: string, handler: Function): void; function revalidate(el: Element): void; function getInstance(_defaults?: Defaults): jsPlumbInstance; } module jsPlumbUtil { function isArray(obj:any):boolean; function isNumber(obj:any):boolean; function isString(obj:any):boolean; function isBoolean(obj:any):boolean; function isNull(obj:any):boolean; function isObject(obj:any):boolean; function isDate(obj:any):boolean; function isFunction(obj:any):boolean; function isNamedFunction(obj:any):boolean; function isEmpty(obj:any):boolean; function extend(target: Object, source: Object): any; function uuid():UUID; function findWithFunction(list:Array, fn:(obj:any)=>boolean):number; function addWithFunction(list:Array, item:any, fn:(obj:any)=>boolean):void; function removeWithFunction(list:Array, fn:(obj:any)=>boolean):number; function suggest(list:Array, item:any, insertAtHead?:boolean):boolean; function fastTrim(s:string):string; } type Selector = string; type UUID = string; type ElementId = string; type ElementRef = ElementId | Element; type ElementGroupRef = ElementId | Element | Array | Array; type ConnectionId = string; class jsPlumbInstance { addEndpoint(el: ElementGroupRef, params?: EndpointOptions, referenceParams?: EndpointOptions): Endpoint | Array addEndpoints(target: ElementGroupRef, endpoints: Array, referenceParams?: EndpointOptions): Array addGroup(params: GroupOptions): Group addToGroup(group: Group|string, el: ElementRef, doNotFireEvent?: boolean): void animate(el: ElementRef, properties?: Object, options?: Object): void batch(fn: Function, doNotRepaintAfterwards?: boolean/* =false */): void bind(event: "connection", callback: (info: ConnectionMadeEventInfo, originalEvent: Event) => void, insertAtStart?: boolean/* =false */): void bind(event: "click", callback: (info: Connection, originalEvent: Event) => void, insertAtStart?: boolean/* =false */): void bind(event: string, callback: (info: OnConnectionBindInfo, originalEvent: Event) => void, insertAtStart?: boolean/* =false */): void cleanupListeners(): void collapseGroup(group: Group|string): void connect(params: ConnectParams, referenceParams?: Object): Connection deleteEndpoint(object: UUID | Endpoint, doNotRepaintAfterwards?: boolean/* =false */): jsPlumbInstance deleteEveryConnection(): void deleteEveryEndpoint(): jsPlumbInstance deleteConnection(conn: Connection): void doWhileSuspended(): jsPlumbInstance draggable(el: Object, options?: DragOptions): jsPlumbInstance empty(el: string | Element | Selector): void expandGroup(group: Group|string, doNotFireEvent?: boolean): void fire(event: string, value: Object, originalEvent: Event): void getAllConnections(): Array getConnections(scope: string, options: Object, scope2?: string | string, source?: string | string | Selector, target?: string | string | Selector, flat?: boolean/* =false */): Array | Record getContainer(): Element getDefaultScope(): string getEndpoint(uuid: string): Endpoint getEndpoints(element:string|Element):Array getGroup(groupId: Group|string): Group getGroups(): Array /** * Gets the current rotation, if any, for the element with the given id. If no specific rotation has been applied this method will return 0, never null or undefined. * @param elementId ID of the element to retrieve rotation for. * @returns The element's current rotation, 0 if no rotation applied. */ getRotation(elementId:string):number getScope(Element: Element | string): string getSelector(context?: Element | Selector, spec?: string): void getSourceScope(element: Element | string): string getTargetScope(element: Element | string): string getType(id: string, typeDescriptor: string): Object getZoom(): number hide(el: string | Element | Selector, changeEndpoints?: boolean/* =false */): jsPlumbInstance importDefaults(defaults: Object): jsPlumbInstance isHoverSuspended(): boolean isSource(el: string | Element | Selector): boolean isSourceEnabled(el: string | Element | Selector, connectionType?: string): boolean isSuspendDrawing(): boolean isSuspendEvents(): boolean isTarget(el: string | Element | Selector): boolean isTargetEnabled(el: string | Element | Selector): boolean makeSource(el: string | Element | Selector, params: Object, endpoint?: string | Array, parent?: string | Element, scope?: string, dragOptions?: Object, deleteEndpointsOnEmpty?: boolean/* =false */, filter?: Function): void makeTarget(el: string | Element | Selector, params: Object, endpoint?: string | Array, scope?: string, dropOptions?: Object, deleteEndpointsOnEmpty?: boolean/* =true */, maxConnections?: number/* =-1 */, onMaxConnections?: Function): void off(el: Element | Element | string, event: string, fn: Function): jsPlumbInstance on(el: Element | Element | string, children?: string, event?: string, fn?: Function): jsPlumbInstance ready(fn: Function): void; recalculateOffsets(el: string | Element | Selector): void; refreshAllGroups(): void registerConnectionType(typeId: string, type: Object): void registerConnectionTypes(types: Object): void registerEndpointType(typeId: string, type: Object): void registerEndpointTypes(types: Object): void remove(el: string | Element | Selector): void removeAllEndpoints(el: string | Element | Selector, recurse?: boolean/* =false */): jsPlumbInstance removeAllGroups(deleteMembers: string, manipulateDOM?: boolean, doNotFireEvent?: boolean):void removeGroup(group: Group|string, deleteMembers: string, manipulateDOM?: boolean, doNotFireEvent?: boolean):OrphanedPositions|void removeFromGroup(group: Group|string, el: ElementRef, doNotFireEvent?: boolean): void repaint(el: string | Element | Selector): jsPlumbInstance repaintEverything(clearEdits?: boolean/* =false */): jsPlumbInstance repaintGroup(group: Group|string): void reset(doNotUnbindInstanceEventListeners?: boolean): void restoreDefaults(): jsPlumbInstance revalidate(el: string | Element): RedrawResult /** * Rotates the element with the given id by the given amount in degrees. This method sets two properties on the element's style: `transform:rotate(deg)` and `transform-origin:center center`. * Transform origins other than `center center` are not supported. To reset the rotation for some element, call `rotate(elId, 0)`. * @param elId * @param amountInDegrees * @param doNotRedraw * @returns a RedrawResult, which is empty if no redraw was requested (or an element with the given id is not being managed) */ rotate(elId:string, amountInDegrees:number, doNotRedraw?:boolean):RedrawResult select(params?: Object, scope?: string | string, source?: string | string, target?: string | string, connections?: Array): { each(fn: (conn: Connection) => void): void } getHoverPaintStyle(params?: Object, scope?: string | string/* =jsPlumb.DefaultScope */, source?: string | Element | Selector | Array, target?: string | Element | Selector | Array, element?: string | Element | Selector | Array): Selection setContainer(el: string | Element | Selector): void setHover(container: string | Element | Selector): void setDefaultScope(scope: string): jsPlumbInstance setDraggable(el: string | Object | Array, draggable: boolean): void setHoverSuspended(hover: boolean): void setIdChanged(oldId: string, newId: string): void setParent(el: Selector | Element, newParent: Selector | Element | string): void setScope(el: Element | string, scope: string): void setSource(connection: Connection, source: string | Element | Endpoint, doNotRepaint?: boolean/* =false */): jsPlumbInstance setSourceEnabled(el: string | Element | Selector, state: boolean): jsPlumbInstance setSourceScope(el: Element | string, scope: string, connectionType?: string): void setSuspendDrawing(val: boolean, repaintAfterwards?: boolean/* =false */): boolean setSuspendEvents(val: boolean): void setTarget(connection: Connection, target: string | Element | Endpoint, doNotRepaint?: boolean/* =false */): jsPlumbInstance setTargetEnabled(el: string | Element | Selector, state: boolean): jsPlumbInstance setTargetScope(el: Element | string, scope: string, connectionType?: string): void setZoom(val: number, repaintEverything?: boolean/* =false */): boolean show(el: string | Element | Selector, changeEndpoints?: boolean/* =false */): jsPlumbInstance toggleDraggable(el: string | Element | Selector): boolean toggleSourceEnabled(el: string | Element | Selector): boolean toggleTargetEnabled(el: string | Element | Selector): boolean toggleVisible(el: string | Element | Selector, changeEndpoints?: boolean/* =false */): void unbind(eventOrListener?: string | Function, listener?: Function): void unmakeEverySource(): jsPlumbInstance unmakeEveryTarget(): jsPlumbInstance unmakeSource(el: string | Element | Selector): jsPlumbInstance unmakeTarget(el: string | Element | Selector): jsPlumbInstance } interface ConnectionMadeEventInfo { connection: Connection source: HTMLDivElement sourceEndpoint: Endpoint sourceId: string target: HTMLDivElement targetEndpoint: Endpoint targetId: string } interface OnConnectionBindInfo { connection: Connection// the new Connection.you can register listeners on this etc. sourceId: string// - id of the source element in the Connection originalSourceId: string newSourceId: string targetId: string// - id of the target element in the Connection originalTargetId: string newTargetId: string source: Element// - the source element in the Connection target: Element//- the target element in the Connection sourceEndpoint: Endpoint//- the source Endpoint in the Connection newSourceEndpoint: Endpoint targetEndpoint: Endpoint//- the targetEndpoint in the Connection newTargetEndpoint: Endpoint } interface Defaults { Endpoint?: EndpointSpec Endpoints?: [ EndpointSpec, EndpointSpec ] Anchor?: AnchorSpec Anchors?: [ AnchorSpec, AnchorSpec ] PaintStyle?: PaintStyle HoverPaintStyle?: PaintStyle EndpointStyle?: PaintStyle EndpointHoverStyle?: PaintStyle ConnectionsDetachable?: boolean ReattachConnections?: boolean ConnectionOverlays?: Array Container?: any // string(selector or id) or element DragOptions?: DragOptions Connector?:ConnectorSpec } interface Connections { detach(): void length: number each(e: (c: Connection) => void): void } interface ConnectParams { uuids?: [UUID, UUID] source?: ElementRef | Endpoint target?: ElementRef | Endpoint detachable?: boolean deleteEndpointsOnDetach?: boolean endpoint?: EndpointSpec anchor?: AnchorSpec anchors?: [AnchorSpec, AnchorSpec] label?: string connector?: ConnectorSpec overlays?:Array cssClass?: string parameters?: Record } interface DragEventCallbackOptions { drag: object // The associated Drag instance e: MouseEvent el: HTMLElement // element being dragged pos: [number, number] // x,y location of the element. drag event only. } interface DragOptions { containment?: string start?: (params:DragEventCallbackOptions) => void drag?: (params:DragEventCallbackOptions) => void stop?: (params:DragEventCallbackOptions) => void cursor?: string zIndex?: number } interface DropOptions { hoverClass: string } interface UIComponent { getParameter:(name:string) => any setParameter:(name: string, value: any) => void getParameters:() => Record setParameters:(parameters:Record) => void } interface Connection extends UIComponent { readonly id: ConnectionId setDetachable(detachable: boolean): void readonly endpoints: [Endpoint, Endpoint] getLabelOverlay(): Overlay getOverlays(): Object getOverlay(id: string): Overlay showOverlay(id: string): void hideOverlay(id: string): void removeOverlay(id: string): void addOverlay(spec: OverlaySpec): Overlay setLabel(s: string): void getElement(): Connection repaint():void readonly source: Element readonly target: Element readonly sourceId: string readonly targetId: string } /* -------------------------------------------- CONNECTORS ---------------------------------------------------- */ interface ConnectorOptions { } type UserDefinedConnectorId = string type ConnectorId = "Bezier" | "StateMachine" | "Flowchart" | "Straight" | UserDefinedConnectorId type ConnectorSpec = ConnectorId | [ConnectorId, ConnectorOptions] /* -------------------------------------------- Group ---------------------------------------------------- */ interface Group { id: string connections: GroupConnections collapsed: boolean add(el: ElementRef, doNotFireEvent?: boolean): void getEl(): ElementRef getDragArea(): ElementRef getAnchor(): AnchorSpec getEndpoint(): EndpointSpec overrideDrop(el?: ElementRef, targetGroup?: Group): boolean remove(el: ElementRef, manipulateDOM?: boolean, doNotFireEvent?: boolean, doNotUpdateConnections?: boolean, targetGroup?: Group): void removeAll(manipulateDOM?: boolean, doNotFireEvent?: boolean): void orphanAll(): OrphanedPositions getMembers(): Array } interface GroupOptions { el: ElementRef id?: string anchor?: AnchorSpec constrain?: boolean collapsed?: boolean draggable?: boolean dragOptions?: DragOptions droppable?: boolean dropOverride?: boolean endpoint?: EndpointSpec ghost?: boolean orphan?: boolean prune?: boolean proxied?: boolean revert?: boolean } type Position = {left: number, top: number} type OrphanedPositions = Record type GroupConnections = {source: Array, target: Array, internal: Array} /* -------------------------------------------- ENDPOINTS ------------------------------------------------------ */ type EndpointSpec = EndpointId | [ EndpointRectangle, EndpointRectangleOptions ] | [ EndpointDot, EndpointDotOptions ] | [ EndpointBlank, EndpointBlankOptions ] type EndpointId = EndpointRectangle | EndpointDot | EndpointBlank type EndpointRectangle = "Rectangle" type EndpointDot = "Dot" type EndpointBlank = "Blank" type EndpointDotOptions = { radius?: number, cssClass?: string, hoverClass?: string } type EndpointRectangleOptions = { width?: number, height?: number, cssClass?: string, hoverClass?: string} type EndpointImageOptions = { src: string, cssClass?: string, hoverClass?: string } type EndpointBlankOptions = {} interface EndpointOptions { anchor?: AnchorSpec endpoint?: EndpointSpec enabled?: boolean//= true paintStyle?: PaintStyle hoverPaintStyle?: PaintStyle cssClass?: string hoverClass?: string maxConnections: number//= 1? dragOptions?: DragOptions dropOptions?: DropOptions connectorStyle?: PaintStyle connectorHoverStyle?: PaintStyle connector?: ConnectorSpec connectorOverlays?: Array connectorClass?: string connectorHoverClass?: string connectionsDetachable?: boolean//= true isSource?: boolean//= false isTarget?: boolean//= false reattach?: boolean//= false parameters?: Record "connector-pointer-events"?: string connectionType?: string dragProxy?: string | Array id?: string scope?: string reattachConnections?: boolean type?: string // "Dot", etc. overlays?:Array uuid?:string } interface Endpoint extends UIComponent { anchor: Anchor connections?: Array maxConnections: number//= 1? id: string scope: string type: EndpointId setEndpoint(spec: EndpointSpec): void connectorSelector(): Connection isEnabled(): boolean setEnabled(enabled: boolean): void setHover(hover: boolean): void getElement(): Element setElement(el: Element): void } /** * The actual component that does the rendering. */ interface EndpointRenderer { } /* -------------------------------------------- ANCHORS -------------------------------------------------------- */ type AnchorOrientationHint = -1 | 0 | 1 interface Anchor { type: AnchorId cssClass: string elementId: string id: string locked: boolean offsets: [number, number] orientation: [AnchorOrientationHint, AnchorOrientationHint] x: number y: number } type AnchorDynamicSpec = Array< AnchorStaticSpec | AnchorDynamicId | AnchorPerimeterSpec | AnchorContinuousSpec > type AnchorDynamicId = "AutoDefault" type AnchorId = AnchorStaticId | AnchorDynamicId | AnchorPerimeterId | AnchorContinuousId type AnchorStaticSpec = AnchorStaticId | AnchorArraySpec type AnchorStaticId = "Assign" | "Bottom" | "BottomCenter" | "BottomLeft" | "BottomRight" | "Center" | "Left" | "LeftMiddle" | "Right" | "RightMiddle" | "Top" | "TopCenter" | "TopLeft" | "TopRight" type AnchorArraySpec = [ number, number, number, number, number?, number?, string? ] type AnchorPerimeterSpec = AnchorPerimeterId | [ AnchorPerimeterId, { shape?: PerimeterShape, anchorCount?: number, rotation?: number } ] type AnchorPerimeterId = "Perimeter" type PerimeterShape = "Circle" | "Ellipse" | "Triangle" | "Diamond" | "Rectangle" | "Square" type AnchorContinuousSpec = AnchorContinuousId | [ AnchorContinuousId, { faces?: [ ContinuousAnchorFace ] } ] type AnchorContinuousId = "Continuous" | "ContinuousBottom" | "ContinuousLeft" | "ContinuousRight" | "ContinuousTop" type ContinuousAnchorFace = "top" | "left" | "right" | "bottom" type AnchorSpec = AnchorStaticSpec | AnchorDynamicSpec | AnchorPerimeterSpec | AnchorContinuousSpec interface RedrawResult { c:Array e:Array } /* --------------------------------------- OVERLAYS ------------------------------------------------------------- */ interface OverlayOptions { } interface ArrowOverlayOptions extends OverlayOptions { width?: number // 20 length?: number // 20 location?: number // 0.5 direction?: number // 1 foldback?: number // 0.623 paintStyle?: PaintStyle } interface LabelOverlayOptions extends OverlayOptions { label: string cssClass?: string location?: number // 0.5 labelStyle?: { font?: string color?: string fill?: string borderStyle?: string borderWidth?: number// integer padding?: number //integer } } type OverlayId = "Label" | "Arrow" | "PlainArrow" | "Custom" type OverlaySpec = OverlayId | [OverlayId, OverlayOptions] interface Overlay { } } export = jsPlumb