Semtonotes-utils NPM

SemToNotes Utils

Installation

Browser

webpack -p

Then include the built library in ./dist and semtonotes as window.xrx, either with the official release or a suitable version of semtonotes-client:

Versions compatibility table

s…-utils	s…-client
0.2.1 to current	`^0.2.3`
0.0.1 — 0.2.0	see peerDependencies

Node.JS / CommonJS

npm install semtonotes-utils

Load in Browser

<!-- semtonotes must be loaded before, e.g.
<script src="https://unpkg.com/semtonotes-client@0.2.0"></script>
-->
<script src="path/to/xrx-utils.js"></script>

Or via unpkg's cdn:

<script src="https://unpkg.com/semtonotes-client@0.2.0"></script>
<script src="https://unpkg.com/semtonotes-utils@0.1.7"></script>

Debugging

Set window.XRX_DEBUG = true before loading the library to see debug messages.

API

XrxUtils

`applyStyle(shapes, styleDef)`

Apply a set of styles to one or more stylable elements.

@param {Array|Shape-Like} shapes Stylable SemToNotes elements (shapes, groups...)
@param {object} styleDef is an object of key-value pairs which map to xrx.shape.Style methods

Example

xrxUtils.applyStyle(rect1, {fillColor: '#aa9900'})

`createDrawing(elem, width, height)`

Create a drawing in DOMElement elem. Overrides goog.style.getSize with width/height for non-visible elements.

`createShape(shapeType, drawing, options)`

Options:

@param string shapeType Shape Type, one of
- Rectangle
- Polygon
- Circle
- Ellipse
- Line
- Polyline
@param xrx.drawing.Drawing drawing the SemToNotes canvas to create the shape in
@param Object options Options that are interpreted as setter calls, c.f. applyStyle

`drawFromSvg(svgString, drawing, options)`

Translate svgString, a string containing SVG, to shapes and draw them in drawing.

@param string svgString SVG as a string
@param xrx.drawing.Drawing drawing the drawing to create the group in
@param Object options All options from shapesFromSvg.

`svgFromShapes(shapes, options)`

Generate SVG from a list of shapes or a shapeGroup.

@param {Shape|Array<Shape>|ShapeGroup} shapes
@param Object options
- @param Object options.absolute Assume SVG coordinates to be equal to image dimensions. Default: false
- @param Boolean options.scaleX Fixed scale factor to scale x-coordinates by. Calculated unless provided. Falls back to 1 if not possible (i.e. absolute coords)
- @param Boolean options.scaleY Fixed scale factor to scale y-coordinates by. Falls back to scaleX.
- @param Boolean options.svgWidth Provide the width of the SVG context to scale coordinates by.
- @param Boolean options.svgWidth ditto height
- @param Boolean options.imgWidth Override the width determined by the background image of the canvas.
- @param Boolean options.imgWidth ditto height
- @param Boolean options.skipHeight Whether height should not be stored in SVG

`shapesFromSvg(svg, drawing, options)`

Create a ShapeGroup from the rect/polygon of an SVG.

@param string svgString SVG as a string
@param xrx.drawing.Drawing drawing the drawing to create the group in
@param Object options
- @param Boolean options.grouped Create a new ShapeGroup with the shapes. Default true
- @param Boolean options.absolute Force absolute coordinates. Default: false
- @param Boolean options.scaleX Fixed scale factor to scale x-coordinates by. Calculated unless provided. Falls back to 1 if not possible (i.e. absolute coords)
- @param Boolean options.scaleY Fixed scale factor to scale y-coordinates by. Falls back to scaleX.
- @param Boolean options.svgWidth Provide the width of the SVG context to scale coordinates by.
- @param Boolean options.svgWidth ditto height
- @param Boolean options.imgWidth Override the width determined by the background image of the canvas.
- @param Boolean options.imgWidth ditto height
- @returns xrx.shape.ShapeGroup