{
  "modes": [
    {
      "name": "draw",
      "selector": "drawing-mode",
      "requiresDrawing": true,
      "requiresSelection": false,
      "isToggle": true,
      "toggle": "isDrawingMode",
      "hasToggleElement": false,
      "toggleElement": "",
      "disabled": false,
      "tooltip": "Draw with a pencil",
      "icon": "fa-pencil-alt"
    },
    {
      "name": "highlight",
      "selector": "highlight-mode",
      "requiresDrawing": true,
      "requiresSelection": false,
      "isToggle": true,
      "toggle": "isHighlightMode",
      "hasToggleElement": false,
      "toggleElement": "",
      "disabled": false,
      "tooltip": "Highlighter",
      "icon": "fa-paint-brush"
    },
    {
      "name": "emoji",
      "selector": "add-emoji",
      "requiresDrawing": false,
      "requiresSelection": true,
      "isToggle": true,
      "toggle": "emojiMode",
      "hasToggleElement": true,
      "toggleElement": "emojiContainer",
      "disabled": false,
      "tooltip": "Emojis",
      "icon": "fa-laugh-squint"
    },
    {
      "name": "rectangle",
      "selector": "add-rect",
      "requiresDrawing": false,
      "requiresSelection": false,
      "isToggle": true,
      "toggle": "drawRectangleMode",
      "hasToggleElement": false,
      "toggleElement": "",
      "disabled": false,
      "tooltip": "Draw a rectangle to highlight areas",
      "icon": "fa-square"
    },
    {
      "name": "write",
      "selector": "add-text",
      "requiresDrawing": false,
      "requiresSelection": false,
      "isToggle": false,
      "toggle": "",
      "hasToggleElement": false,
      "toggleElement": "",
      "disabled": false,
      "tooltip": "Adds a customizable text to canvas",
      "icon": "fa-i-cursor"
    },
    {
      "name": "move",
      "selector": "move-mode",
      "requiresDrawing": false,
      "requiresSelection": false,
      "isToggle": true,
      "toggle": "moveMode",
      "hasToggleElement": false,
      "toggleElement": "",
      "disabled": false,
      "tooltip": "Move the viewport, useful if zoomed",
      "icon": "fa-arrows-alt"
    },
    {
      "name": "delete",
      "selector": "clear-canvas",
      "requiresDrawing": false,
      "requiresSelection": false,
      "isToggle": false,
      "toggle": "",
      "hasToggleElement": false,
      "toggleElement": "",
      "disabled": false,
      "tooltip": "Delete selected object",
      "icon": "fa-eraser"
    },
    {
      "name": "zoom",
      "selector": "zoom-canvas",
      "requiresDrawing": false,
      "requiresSelection": false,
      "isToggle": true,
      "toggle": "isZoomMode",
      "hasToggleElement": false,
      "toggleElement": "",
      "disabled": false,
      "tooltip": "Zoom viewport",
      "icon": "fa-search-plus"
    },
    {
      "name": "freeMouse",
      "selector": "mouse-mode",
      "requiresDrawing": false,
      "requiresSelection": true,
      "isToggle": true,
      "toggle": "isMouseMode",
      "hasToggleElement": false,
      "toggleElement": "",
      "disabled": false,
      "tooltip": "Normal mouse to select objects in canvas",
      "icon": "fa-mouse-pointer"
    },
    {
      "name": "undo",
      "selector": "undo",
      "requiresDrawing": false,
      "requiresSelection": false,
      "isToggle": false,
      "toggle": "",
      "hasToggleElement": false,
      "toggleElement": "",
      "disabled": true,
      "tooltip": "Undo",
      "icon": "fa-undo"
    },
    {
      "name": "redo",
      "selector": "redo",
      "requiresDrawing": false,
      "requiresSelection": false,
      "isToggle": false,
      "toggle": "",
      "hasToggleElement": false,
      "toggleElement": "",
      "disabled": true,
      "tooltip": "Redo",
      "icon": "fa-redo"
    }
  ],
  "currentMode": "draw",
  "colors": [
    {
      "name": "blue",
      "selector": "draw-blue",
      "red": 0,
      "green": 68,
      "blue": 255
    },
    {
      "name": "light-blue",
      "selector": "draw-light-blue",
      "red": 0,
      "green": 204,
      "blue": 255
    },
    {
      "name": "red",
      "selector": "draw-red",
      "red": 255,
      "green": 0,
      "blue": 0
    },
    {
      "name": "pink",
      "selector": "draw-pink",
      "red": 255,
      "green": 53,
      "blue": 177
    },
    {
      "name": "green",
      "selector": "draw-green",
      "red": 133,
      "green": 169,
      "blue": 75
    },
    {
      "name": "yellow",
      "selector": "draw-yellow",
      "red": 255,
      "green": 204,
      "blue": 0
    }
  ]
}