Simple draw

Simple draw is library based on pixi.js for drawing warehouses topology.

Full documentation of methods is available on http://localhost:4000/

Table of contents

• Installation
• Playground
• Start documentation locally
• How to start
• Reactivity system
• Zoom
• Pan
• Drag&drop
• Plugin

Playground

To run example of usage

npm ci
npm run playground

Start documentation locally

Run

npm run docs

It will start local server at http://localhost:4000 with documentation.

Installation

npm i @ozon/simple-draw

How to start

First you need to create wrapper for canvas.

<div id="wrapper"></div>

Then in your js/ts file pass this wrapper and additional parameters (like font family) to SimpleDraw constructor and call init method.

import { SimpleDraw } from "@ozon/simple-draw";

const app = new SimpleDraw(document.getElementById("wrapper"));

await app.init();

app.setBackgroundColor("#FFFFFF");

To add some items on map call addItems

const shelve: IMapItem = {
  x: 100,
  y: 42,
  width: 30,
  height: 30,
  color: "#ebac0c",
};
app.addItems([shelve]);

This will draw orange rectangle with left top corner on (100, 42)

Reactivity system

Simple draw can reactively re-draw objects. Reactivity achieves by returned array of Proxy objects from addItems method. On every change of object's property, Simple draw will re-draw this object.

const [reactiveShelve] = app.addItems([shelve]);
setInterval(() => (reactiveShelve.x = reactiveShelve.x + 1), 10);

Zoom

Adding zoom for mouse wheel and touch bar is available by addZoom method

app.addZoom();

Also to prevent zoom in or zoom out pass optional parameters to addZoom method:

const shouldStopZoomIn = () => app.getZoomScale() > 2;
const shouldStopZoomOut = () => app.isAllObjectsCanFit();
app.addZoom(shouldStopZoomOut, shouldStopZoomIn);

To manipulate zoom scale programmatically use methods zoomInOnce and zoomOutOnce.

Pan

Adding pan for mouse/touch bar is available by addPan method.

app.addPan();

Drag and drop

To allow drag&drop for item, add draggable property to IMapItem.

const shelve: IMapItem = {
  x: 100,
  y: 42,
  width: 30,
  height: 30,
  draggable: true,
  whenMove: ({x, y}) => console.log({x, y})
  color: '#ebac0c',
}
app.addItems([shelve])

When item stop dragged and released, whenMove fires with new coordinates of item.

Plugin

You can extend Simple draw functionality by using plugins. To do this, you need to create a plugin function that takes two arguments: visibleItem and item. The function should modify the visibleItem object according to your needs.

app.usePlugin((visibleItem, item) => {
  visibleItem.onclick = () => console.log(item);
});