excalidraw_embed.json

{
  "alias": "excalidraw_embed",
  "name": "Excalidraw Embed",
  "image": null,
  "description": null,
  "descriptor": {
    "type": "static",
    "sizeX": 7.5,
    "sizeY": 3,
    "resources": [
      {
        "url": "https://unpkg.com/react@16.14.0/umd/react.development.js"
      },
      {
        "url": "https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"
      },
      {
        "url": "https://unpkg.com/@excalidraw/excalidraw/dist/excalidraw.development.js"
      }
    ],
    "templateHtml": "<div id=\"excalidraw\"></div>\r\n",
    "templateCss": "#excalidraw {\r\n  font-family: sans-serif;\r\n  text-align: center;\r\n  height: 100%;\r\n}\r\n\r\n.excalidraw .App-menu_top .buttonList {\r\n  display: flex;\r\n}\r\n\r\n.excalidraw-wrapper {\r\n  height: 100%;\r\n  margin: 0px;\r\n  position: relative;\r\n}\r\n\r\n",
    "controllerScript": "\n\nself.onInit = function() {\n    var $injector = self.ctx.$scope.$injector;\n    \n    var initialData = {\n          appState: { viewBackgroundColor: \"white\", currentItemFontFamily: 1 }\n        };\n    \n    console.log('excalidraw', $('#excalidraw'));\n    \n    const App = () => {\n        const excalidrawRef = React.useRef(null);\n        \n        const [viewModeEnabled, setViewModeEnabled] = React.useState(false);\n        const [zenModeEnabled, setZenModeEnabled] = React.useState(false);\n        const [gridModeEnabled, setGridModeEnabled] = React.useState(false);\n        \n        const updateScene = () => {\n            const sceneData = {\n                elements: [\n                {\n                  type: \"rectangle\",\n                  version: 141,\n                  versionNonce: 361174001,\n                  isDeleted: false,\n                  id: \"oDVXy8D6rom3H1-LLH2-f\",\n                  fillStyle: \"hachure\",\n                  strokeWidth: 1,\n                  strokeStyle: \"solid\",\n                  roughness: 1,\n                  opacity: 100,\n                  angle: 0,\n                  x: 100.50390625,\n                  y: 93.67578125,\n                  strokeColor: \"#c92a2a\",\n                  backgroundColor: \"transparent\",\n                  width: 186.47265625,\n                  height: 141.9765625,\n                  seed: 1968410350,\n                  groupIds: [],\n                },\n              ],\n              appState: {\n                viewBackgroundColor: \"#edf2ff\",\n              },\n            };\n            excalidrawRef.current.updateScene(sceneData);\n        };\n            \n        return React.createElement(\n            React.Fragment,\n            null,\n            React.createElement(\n              \"div\",\n              {\n                className: \"excalidraw-wrapper\",\n                //ref: excalidrawWrapperRef,\n              },\n              React.createElement(ExcalidrawLib.Excalidraw, {\n                initialData: initialData,\n                ref: excalidrawRef,\n                // onChange: (elements, state) =>\n                //   console.log(\"Elements :\", elements, \"State : \", state),\n                onPointerUpdate: (payload) => console.log(payload),\n                onCollabButtonClick: () => window.alert(\"You clicked on collab button\"),\n                viewModeEnabled: viewModeEnabled,\n                zenModeEnabled: zenModeEnabled,\n                gridModeEnabled: gridModeEnabled,\n              })\n            )\n        );\n    };\n    \n    const excalidrawWrapper = document.getElementById(\"excalidraw\");\n    ReactDOM.render(React.createElement(App), excalidrawWrapper);\n}\n\n\nself.onDestroy = function() {\n}\n",
    "settingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"Settings\",\n        \"required\": [\"cardHtml\"],\n        \"properties\": {\n            \"cardCss\": {\n                \"title\": \"CSS\",\n                \"type\": \"string\",\n                \"default\": \".card {\\n font-weight: bold; \\n}\"\n            },\n            \"cardHtml\": {\n                \"title\": \"HTML\",\n                \"type\": \"string\",\n                \"default\": \"<div class='card'>HTML code here</div>\"\n            }\n        }\n    },\n    \"form\": [\n        {\n            \"key\": \"cardCss\",\n            \"type\": \"css\"\n        },           \n        {\n            \"key\": \"cardHtml\",\n            \"type\": \"html\"\n        }    \n    ]\n}",
    "dataKeySettingsSchema": "{}\n",
    "defaultConfig": "{\"datasources\":[{\"type\":\"static\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"cardHtml\":\"<div class='card'>HTML code here</div>\",\"cardCss\":\".card {\\n    font-weight: bold;\\n    font-size: 32px;\\n    color: #999;\\n    width: 100%;\\n    height: 100%;\\n    display: flex;\\n    align-items: center;\\n    justify-content: center;\\n}\"},\"title\":\"Excalidraw Embed\",\"dropShadow\":true}"
  }
}