{
    "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
    }
  ]
}