Added "designer.icons" .e.g designer.icons.line="/line.png"

muaz-khan · Sep 21, 2018 · bcf8de5 · bcf8de5
1 parent dcfa522
commit bcf8de5
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 48 deletions.
diff --git a/README.md b/README.md
@@ -287,6 +287,42 @@ designer.setTools({
 });
 ```
 
+## `icons`
+
+You can force/set your own tool-icons:
+
+```javascript
+designer.icons = {
+    line: '/icons/line.png',
+    arrow: '/icons/arrow.png',
+    pencil: '/icons/pencil.png',
+    dragSingle: '/icons/dragSingle.png',
+    dragMultiple: '/icons/dragMultiple.png',
+    eraser: '/icons/eraser.png',
+    rectangle: '/icons/rectangle.png',
+    arc: '/icons/arc.png',
+    bezier: '/icons/bezier.png',
+    quadratic: '/icons/quadratic.png',
+    text: '/icons/text.png',
+    image: '/icons/image.png',
+    pdf: '/icons/pdf.png',
+    marker: '/icons/marker.png',
+    zoom: '/icons/zoom.png',
+    lineWidth: '/icons/lineWidth.png',
+    colorsPicker: '/icons/colorsPicker.png',
+    extraOptions: '/icons/extraOptions.png',
+    code: '/icons/code.png'
+};
+```
+
+You can set like this as well:
+
+```javascript
+designer.icons.line = '/icons/line.png';
+```
+
+Default values are `NULL` to force icons from `/dev/data-dris.js`.
+
 ## `appendTo`
 
 CanvasDesigner is a widget; that widget should be appended to a DOM object. This method allows you pass `<body>` or any other HTMLDOMElement.

diff --git a/canvas-designer-widget.js b/canvas-designer-widget.js
@@ -34,6 +34,28 @@ function CanvasDesigner() {
         code: true
     };
 
+    designer.icons = {
+        line: null,
+        arrow: null,
+        pencil: null,
+        dragSingle: null,
+        dragMultiple: null,
+        eraser: null,
+        rectangle: null,
+        arc: null,
+        bezier: null,
+        quadratic: null,
+        text: null,
+        image: null,
+        pdf: null,
+        marker: null,
+        zoom: null,
+        lineWidth: null,
+        colorsPicker: null,
+        extraOptions: null,
+        code: null
+    };
+
     var selectedIcon = 'pencil';
 
     function syncData(data) {
@@ -92,7 +114,7 @@ function CanvasDesigner() {
 
     designer.appendTo = function(parentNode) {
         designer.iframe = document.createElement('iframe');
-        designer.iframe.src = designer.widgetHtmlURL + '?widgetJsURL=' + designer.widgetJsURL + '&tools=' + JSON.stringify(tools) + '&selectedIcon=' + selectedIcon;
+        designer.iframe.src = designer.widgetHtmlURL + '?widgetJsURL=' + designer.widgetJsURL + '&tools=' + JSON.stringify(tools) + '&selectedIcon=' + selectedIcon + '&icons=' + JSON.stringify(designer.icons);
         designer.iframe.style.width = '100%';
         designer.iframe.style.height = '100%';
         designer.iframe.style.border = 0;