Klucherev / scheme-designer

Canvas scheme designer

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Scheme designer

Constructor for interactive schemes on canvas
Demo: http://nikitchenko.ru/scheme-designer/examples/

Features

  • No dependencies
  • Render only visible objects
  • 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, add objects and render (see examples)
var canvas = document.getElementById('canvas');
var schemeDesigner = new SchemeDesigner.Scheme(canvas, {
    scroll: {
        maxHiddenPart: 0.85
    },
    zoom: {
        padding: 0.1,
        maxScale: 8,
        zoomCoefficient: 1.04
    },
    storage: {
        treeDepth: 6
    }
});

var schemeObject = new SchemeDesigner.SchemeObject({
            x: 0.5 + leftOffset,
            y: 0.5 + topOffset,
            width: width,
            height: height,
            renderFunction: renderPlace
});

schemeDesigner.addObject(schemeObject);

schemeDesigner.render();

Options

Scheme

Option Default Description
Scroll
maxHiddenPart 0.85 Max hidden part on scroll
Zoom
padding 0.1 Padding from objects to canvas border
maxScale 5 Max sale
zoomCoefficient 1.04 Zoom coefficient (Math.pow(zoomCoefficient, delta))
Storage
treeDepth 0.6 Depth of search tree

SchemeObject

Option Default Description
x: number X position
width: number Width
height: number Height
cursorStyle: string pointer Cursor style on object
renderFunction: Function(schemeObject: SchemeObject, scheme: Scheme, view: View) Function for rendering object, see examples
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

Api

Examples:

var schemeDesigner = new SchemeDesigner.Scheme(canvas);

SchemeDesigner.setCursorStyle('move');
schemeDesigner.getZoomManager().zoomToCenter(10);
schemeDesigner.getScrollManager().scroll(100, 200);
schemeDesigner.getStorageManager().showNodesParts();

                                               
Method Return Description
SchemeDesigner
getEventManager() EventManager
getScrollManager() ScrollManager
getZoomManager() ZoomManager
getStorageManager() StorageManager
getWidth() number Scheme width
getHeight() number Scheme height
clearContext() SchemeDesigner Clear canvas context
requestRenderAll() SchemeDesigner Request redraw canvas
render() Request redraw canvas, create search tree and scroll with zoom to center
addObject(object: SchemeObject) Wrapper for storageManager.addObject
removeObject(object: SchemeObject) Wrapper for storageManager.removeObject
getObjects() SchemeObject[] Wrapper for storageManager.getObjects
removeObjects(object: SchemeObject) Wrapper for storageManager.removeObjects
getCanvas() HTMLCanvasElement Canvas element
getCanvas2DContext() CanvasRenderingContext2D Canvas context
setCursorStyle(cursor: string) SchemeDesigner Set cursor style
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
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
getObjects() SchemeObject[] Get all objects
addObject(object: SchemeObject) Add object
removeObject(object: SchemeObject) Remove object
removeObjects() Remove all objects
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
showNodesParts() Draw rect of nodes for testing

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

About

Canvas scheme designer

License:MIT License


Languages

Language:TypeScript 98.8%Language:JavaScript 1.2%