Skip to content

NikitchenkoSergey/scheme-designer

Repository files navigation

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>
  1. 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>
  1. 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() BoundingRectBounding rect of all objects
reCalcObjectsBoundingRect() Request fo recalculate bounding rect of all objects
setTreeDepth(value: number) Set treeDepth
requestBuildTree() Request rebuild search tree
getTree() TreeNodeGet 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.beforeRenderAllBefore render all
schemeDesigner.afterRenderAllAfter render all
schemeDesigner.clickOnObjectClick on object
schemeDesigner.mouseOverObjectMouse over on object
schemeDesigner.mouseLeaveObjectMouse leave from object
schemeDesigner.scrollOn scroll
schemeDesigner.zoomOn zoom

Donation

PayPal: nikitchenko.sergey@yandex.ru

Yandex.Money: 410011704835851