@spoonconsulting/drawing

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.