https://github.com/nikitchenkosergey/scheme-designer

Canvas scheme designer
https://github.com/nikitchenkosergey/scheme-designer

canvas constructor interactive scheme-designer

Last synced: 5 days ago
JSON representation

Canvas scheme designer

Host: GitHub
URL: https://github.com/nikitchenkosergey/scheme-designer
Owner: NikitchenkoSergey
License: mit
Created: 2018-02-20T19:04:17.000Z (over 8 years ago)
Default Branch: master
Last Pushed: 2021-07-13T12:45:59.000Z (almost 5 years ago)
Last Synced: 2026-06-16T09:29:46.345Z (6 days ago)
Topics: canvas, constructor, interactive, scheme-designer
Language: TypeScript
Size: 376 KB
Stars: 59
Watchers: 5
Forks: 15
Open Issues: 4
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

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:

```

2. Add Markup
```

```
for adaptive add wrapper (relative):
```

```

3. 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);

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

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome