npm package: @spoonconsulting/drawing
Description: Convert position relative to a html element.
Author: Luc Boissaye
Latest version: 2.0.5-beta16

# 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: '<svg xmlns="http://www.w3.org/2000/svg">...</svg>
  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);
```

### Can also be acessed directly from DrawingExperience

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

## Using Marker Expperience

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

### Can also be acessed directly from DrawingExperience

```
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.