README

@auvious/sketch / Exports

Sketch

A sketch tool to draw on a canvas using paper-js.

Scripts

1. npm install
2. npm run build
3. npm run build:test
4. npm test

Demo

1. cd demo
2. npm install
3. npm start

Documentation

Caution: all values used, like scale, scrol, etc.. are in absolute units.

import { Sketch } from "@auvious/sketch";

// let these be
const canvas: HTMLCanvasElement;
const auviousClient: AuviousClient;
let sketchId: string;
const userId: string;
const userEndpointId: string;
const div: HTMLDivElement; // some content below canvas
const log = (event) => console.log(event);

// create a new sketch only using this static method
const sketch = Sketch.create(canvas, auviousClient);

// once created you can immediately draw offline
// even without actually using the auvious client

// to connect, could be called later if at all
sketchId = await sketch.connect({
  sketchId, // when given it joins, if not, it creates one; get it at sketch.sketchId
  userId,
  userEndpointId,
});

// when online, you might need to listen to errors
// no other events currently available
sketch.events.on("error", log);

// remove previous callback
sketch.events.off("error", log);

// or remove all
sketch.events.off("error");

// at the end, remove handlers
sketch.events.clear();

// internally there are tools which you enable
// these handle user's actions on canvas differently
sketch.marker.enable();
sketch.arrow.enable();
sketch.eraser.enable();

// each one has a disable, call it when you want no tool to be active
sketch.marker.disable();

// all tools above support cancellation when user presses ESC

// clear canvas
sketch.clear();

// scroll canvas, best used when it overlays scrollable content
sketch.scrollTo(div.scrollTop, div.scrollLeft);

// resize area
sketch.resize(300, 150);

// scaling
sketch.scale(0.5);

// when sharing is enabled, clients will likely have different sizes for their canvases
// when needed, like in the case of overlaying content of common dimensions
// the scale can be synced to a virtual width of default 1280 size, a value that must be the same for all
// this will only enable syncing, the actual autoscaling happens in .resize
sketch.setSync(true);

// horizontal mirroring
sketch.mirror();

// when the canvas has focus however, the user cannot scroll the div
// when no tool is selected, it would be best for the canvas to not accept events
canvas.style.pointerEvents = "none";

// use "auto" to make it focusable when user picks a tool

// customize marker and arrow tools
sketch.marker.options.strokeColor = "#123f";