Scheme designer
Constructor for interactive schemes on canvas
Demo: http://nikitchenko.ru/scheme-designer/examples/
Features
- No dependencies
- Render only visible objects
- Layers support
- Responsible
- Objects stored in search tree
- Touch support
- Many api methods and events
Usage Instructions
1. Link file:<script src="dist/scheme-designer.min.js"></script>
- Add Markup
<canvas id="canvas" width="800" height="500"></canvas>
for adaptive add wrapper (relative):
<div style="width: 100%; height: 500px; position:relative;">
<canvas id="canvas"></canvas>
</div>
- Init, create layers, add objects to layers and render (see examples)
var defaultLayer = new SchemeDesigner.Layer('default', {zIndex: 1});
var schemeObject = new SchemeDesigner.SchemeObject({
x: 0.5 + leftOffset,
y: 0.5 + topOffset,
width: width,
height: height,
renderFunction: renderPlace
});
defaultLayer.addObject(schemeObject);
var canvas = document.getElementById('canvas');
var mapCanvas = document.getElementById('canvas_map');
var schemeDesigner = new SchemeDesigner.Scheme(canvas, {
options: {
cacheSchemeRatio: 2
},
scroll: {
maxHiddenPart: 0.85
},
zoom: {
padding: 0.1,
maxScale: 8,
zoomCoefficient: 1.04
},
storage: {
treeDepth: 6
},
map: {
mapCanvas: mapCanvas
}
});
schemeDesigner.addLayer(defaultLayer);
schemeDesigner.render();
Options
Scheme
| Option | Default | Description |
|---|---|---|
| Options | ||
| cacheSchemeRatio | 2 | Ratio for scheme cache. Set false to disable cache. |
| background | null | Background of scheme. If define - disable alpha of context (increases performance and turn on subpixel text render). Else - transparent. |
| Scroll | ||
| maxHiddenPart | 0.85 | Max hidden part on scroll |
| Zoom | ||
| padding | 0.1 | Padding from objects to canvas border |
| maxScale | 5 | Max scale |
| zoomCoefficient | 1.04 | Zoom coefficient (Math.pow(zoomCoefficient, delta)) |
| clickZoomDelta | 14 | Zoom delta on double click |
| Storage | ||
| treeDepth | 0.6 | Depth of search tree |
Layer
| Option | Default | Description |
|---|---|---|
| zIndex: number | 0 | Z index |
| visible: boolean | true | Layer is visible |
| active: boolean | true | Layer is active: objects can process events |
SchemeObject
| Option | Default | Description |
|---|---|---|
| x: number | X position | |
| width: number | Width | |
| height: number | Height | |
| rotation: number | 0 | Rotation |
| active: boolean | true | Active object can hanlde events. |
| cursorStyle: string | pointer | Cursor style on object |
| renderFunction: Function(schemeObject: SchemeObject, scheme: Scheme, view: View) | Function for rendering object, see examples | |
| pointInObjectFunction: Function(schemeObject: SchemeObject, point: Coordinates, scheme: Scheme, view: View) | Defined hit region detection for object: if return true - hit. Point is normalized by object rect coordinates of cursor. See examples/index.html. If not defined check hit in object rect. | |
| clickFunction: Function(schemeObject: SchemeObject, scheme: Scheme, view: View, e: Event) | Function for handle click on object | |
| mouseOverFunction: Function(schemeObject: SchemeObject, scheme: Scheme, view: View, e: Event) | Function for handle mouseover on object | |
| mouseLeaveFunction: Function(schemeObject: SchemeObject, scheme: Scheme, view: View, e: Event) | Function for handle mouseleave on object | |
| clearFunction: Function(schemeObject: SchemeObject, scheme: Scheme, view: View) | Function for clear object on scheme cache |
Api
Examples:
var schemeDesigner = new SchemeDesigner.Scheme(canvas);
SchemeDesigner.setCursorStyle('move');
schemeDesigner.getZoomManager().zoomToCenter(10);
schemeDesigner.getScrollManager().scroll(100, 200);
schemeDesigner.getStorageManager().showNodesParts();
schemeDesigner.getStorageManager().setLayerVisibility('background', true);
| Method | Return | Description |
|---|---|---|
| SchemeDesigner | ||
| getEventManager() | EventManager | |
| getScrollManager() | ScrollManager | |
| getZoomManager() | ZoomManager | |
| getStorageManager() | StorageManager | |
| getMapManager() | MapManager | |
| getWidth() | number | Scheme width |
| getHeight() | number | Scheme height |
| clearContext() | SchemeDesigner | Clear canvas context |
| requestRenderAll() | SchemeDesigner | Request redraw canvas |
| requestDrawFromCache() | SchemeDesigner | Request draw scheme from cache |
| render() | Request redraw canvas, create search tree and scroll with zoom to center | |
| getCanvas() | HTMLCanvasElement | Canvas element |
| getCanvas2DContext() | CanvasRenderingContext2D | Canvas context |
| setCursorStyle(cursor: string) | SchemeDesigner | Set cursor style |
| updateCache(onlyChanged: boolean) | Redraw scheme cache | |
| getView() | View | Main view |
| addChangedObject(schemeObject: SchemeObject) | Add object to changed list for redraw cache | |
| Layer | ||
| getObjects() | SchemeObject[] | Get all objects |
| addObject(object: SchemeObject) | Add object | |
| removeObject(object: SchemeObject) | Remove object | |
| removeObjects() | Remove all objects | |
| setZIndex(value: number) | Set z-index | |
| setActive(value: boolean) | Set active flag | |
| setVisible(value: boolean) | Set visible flag | |
| Scroll manager | ||
| getScrollLeft() | number | Left offset |
| getScrollTop() | number | Top offset |
| scroll(left: number, top: number) | Set scroll | |
| toCenter() | Scroll to objects center | |
| setMaxHiddenPart(value: number) | Set maxHiddenPart | |
| Zoom manager | ||
| zoom(delta: number) | boolean | Zoom scheme if posible |
| setScale(scale: number) | boolean | Set scale if posible |
| getScaleWithAllObjects() | number | Get scale when all objects are visible |
| canZoomByFactor(factor: number) | boolean | Can by factor |
| zoomByFactor(factor: number) | boolean | Zoom by factor if posible |
| getScale() | number | Current scale |
| zoomToCenter(delta: number) | Zoom to center | |
| zoomToPoint(point: Coordinates, delta: number) | Zoom to point | |
| setPadding(value: number) | Set padding | |
| setMaxScale(value: number) | Set maxScale | |
| setZoomCoefficient(value: number) | Set zoomCoefficient | |
| Storage manager | ||
| addLayer(layer: Layer) | Add layer | |
| removeLayers() | Remove all layers | |
| removeLayer(layerId: string) | Remove layer by id | |
| setLayerVisibility(layerId: string, visible: boolean) | Set layer visibility and rerender scheme | |
| setLayerActivity(layerId: string, activity: boolean) | Set layer activity | |
| findObjectsByCoordinates(coordinates: Coordinates) | SchemeObject[] | Find objects by coordinates |
| getObjectsBoundingRect() | BoundingRect | Bounding rect of all objects |
| reCalcObjectsBoundingRect() | Request fo recalculate bounding rect of all objects | |
| setTreeDepth(value: number) | Set treeDepth | |
| requestBuildTree() | Request rebuild search tree | |
| getTree() | TreeNode | Get root tree node |
| applyStructureChange() | Recalculate all cructure dependencies | |
| showNodesParts() | Draw rect of nodes for testing | |
| Map manager | ||
| drawMap() | Draw map | |
| setMapCanvas(value: HTMLCanvasElement) | Set canvas for drawing map | |
| resize() | Recalculate canvas dimensions | |
Events
| Event | Description |
|---|---|
| schemeDesigner.beforeRenderAll | Before render all |
| schemeDesigner.afterRenderAll | After render all |
| schemeDesigner.clickOnObject | Click on object |
| schemeDesigner.mouseOverObject | Mouse over on object |
| schemeDesigner.mouseLeaveObject | Mouse leave from object |
| schemeDesigner.scroll | On scroll |
| schemeDesigner.zoom | On zoom |
Donation
PayPal: nikitchenko.sergey@yandex.ru
Yandex.Money: 410011704835851