Building

1. Clone the repository
2. npm install
3. npm run build

This will generate drawing.min.js which is ready to be used in your web page.

Developing

Execute npm run start to launch the development server with livereload.

Usage

Creating a Drawing Experience

``
const drawingExperience = await DrawingExperience.create(background, {
inputSvg: '
contextMenu: false,
actions: [
{
id: "save",
icon: "M433.1 129.1l-83.9-83.9C342.3 38.32 327.1 32 316.1 32H64C28.65 32 0 60.65 0 96v320c0 35.35 28.65 64 64 64h320c35.35 0 64-28.65 64-64V163.9C448 152.9 441.7 137.7 433.1 129.1zM224 416c-35.34 0-64-28.66-64-64s28.66-64 64-64s64 28.66 64 64S259.3 416 224 416zM320 208C320 216.8 312.8 224 304 224h-224C71.16 224 64 216.8 64 208v-96C64 103.2 71.16 96 80 96h224C312.8 96 320 103.2 320 112V208z",
label: "Save",
action: () => {
alert("DOWNLOAD ANNOTATION !!");
},
},
{
id: "close",
icon: "m406.59 361.4c12.5 12.5 12.5 32.75 0 45.25-6.2 6.25-14.4 9.35-22.6 9.35s-16.38-3.125-22.62-9.375l-105.38-105.32-105.37 105.3c-6.25 6.3-14.44 9.4-22.63 9.4s-16.37-3.1-22.625-9.4c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4-105.4-105.35c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l105.38 105.45 105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4z",
label: "Close",
action: () => {
drawingExperience.destroy();
},
},
],
});
`

Exporting Foreground SVG

`
cosnt svg = drawingExperience.drawing.export();
console.log(svg);
`

$3

`
cosnt svg = drawingExperience.export();
console.log(svg);
`

Using Marker Expperience

`
var markerExperience = drawingExperience.markerExperience;
console.log(markerExperience.export());
console.log(markerExperience.jsonToSVG(markerExperience.export()));
`

$3

`
console.log(drawingExperience.export());
console.log(drawingExperience.jsonToSVG(drawingExperience.export()));
`

export() - Get SVG with updatedAt
svgToJSON() - Convert SVG to JSON
jsonToSVG() - Convert JSON to SVG

Options

inputSvg - Text SVG as Input. Can be used if you have a foreground svg to display on top of background (Optional)

container - Container to append Drawing (Optional)

sizeMenu - Shows size menu(True/False) (False by default) (Optional)

contextMenu - Shows context menu(True/False) (False by default) (Optional)

toolMenu - Shows tool menu(True/False) (True by default) (Optional)

colorMenu - Shows color menu(True/False) (False by default) (Optional)

undoRedo - Shows undo redo menu(True/False) (False by default) (Optional)

gridMenu - Shows grid menu(True/False) (False by default) (Optional)

commentsMenu - Show comment menu(True/False or Object(with readOnly)) (False by default) (Optional)

`
commentsMenu: false
// OR
commentsMenu: {
readOnly: true
}
`

tools - Add tools to tool menu (Optional)

`
tools: [
"path",
"line",
"circle",
"rect",
"marker",
"double-arrow"
]
`

- Add tool with options

`
tools: [
"path",
{
type: "text",
textStyleBold: true,
textStyleUnderline: true,
textStyleFontFamily: "monospace",
},
{
name: "circle",
type: "circle",
colors: "#00ff00",
lineStyle: "dashed",
gridSize: [100, 100, 100, 100],
},
{
name: "circleRed",
type: "circle",
colors: "#ff0000",
size: 10,
},
{
name: "highlighter",
type: "path",
colors: "#f1c40f60",
size: 80,
iconUrl: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAY...,
},
]
`

- Adding stickers

`
tools: [
...,
"double-arrow",
{
"name": "sticker",
"width": 426,
"height": 426,
"scale": 1,
"dataUrl": data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iM...,
},
...
]
`

edits - Add edit tools to tool menu (Optional)

`
edits: [
"marker",
"double-arrow"
]
`

colors - Add custom colors to color menu (Optional)

`
colors: [
{ name: "red", colors: "#e74c3c" },
{ name: "redFilled", colors: ["#e74c3c", "#e74c3c66"] },
{ name: "redOpaque", colors: ["#e74c3c", "#e74c3cff"] },
{ name: "redTransparent", colors: "#e74c3c20" },
{ name: "orange", colors: "#f39c12" },
{ name: "green", colors: "#2ecc71" },
{ name: "greenTransparent", colors: "#2ecc7120" },
{ name: "blue", colors: "#3498db" },
{ name: "blueTransparent", colors: "#3498db20" },
{ name: "purple", colors: "#8e44ad" },
{ name: "pink", colors: "#fc6ffc" },
{ name: "yellow", colors: "#f1c40f" },
{ name: "white", colors: "#ecf0f1" },
{ name: "black", colors: "#2c3e50" },
],
`

actions - Shows drawing actions (Optional)

`
actions: [
{
id: "save",
icon: "", // path of icon
label: "Save",
action: () => {
alert("DOWNLOAD ANNOTATION !!");
},
},
{
id: "download",
icon: "", // path of icon
label: "Close",
action: () => {
drawingExperience.destroy();
},
},
],
`

resizeElementsOnZoom - Enable resizing of elements when zooming on canvas (This is currently only done for markers) (True/False) (False by default)

promptText - Setup custom parameters and metrics for prompt text menu

`
promptText: {
metrics: ["mm", "cm", "m"]
},
`

Documentation

See static/preview.html` for an example usage.

More to come.