Merge pull request #63 from concord-consortium/183527061-canvas-only

Add canvas-only rendering when client provides empty button list, support canvas scaling

README.md

@@ -1,6 +1,6 @@
 # HTML5 Drawing Tool
 
-Demo: http://concord-consortium.github.io/drawing-tool/examples/
+Demo: https://models-resources.concord.org/drawing-tool/branch/master/examples/index.html
 
 ## Using as a library
 
@@ -27,13 +27,6 @@ const drawingTool = new DrawingTool("#drawing-tool-container");
     * Code!!
     * Before you commit, run `webpack` to update `dist` directory and add it to git index.
 
-### Deploying to Github Pages
-
-Use `push-gh-pages.sh` script. It (re)generates `dist` dir using `webpack`, updates `gh-pages` branch
-and pushes changes to Github.
-
-Note that you may deploy uncommitted changes, as this script uses current working directory state.
-
 ### Undo / redo feature
 
 If you are planning to add new feature that will be exposed in UI or via main API, you should consider whether

app/scripts/drawing-tool.js

@@ -94,7 +94,9 @@ function DrawingTool(selector, options, settings) {
   this._initTools();
   this._initStateHistory();
 
-  new UIManager(this);
+  if (!this.canvasOnly()) {
+    new UIManager(this);
+  }
 
   this.historyPaused = this.options.startWithHistoryPaused;
 
@@ -261,6 +263,13 @@ DrawingTool.prototype.load = function (jsonOrObject, callback, noHistoryUpdate)
   }
 };
 
+DrawingTool.prototype.canvasOnly = function () {
+  const buttons = this.options.buttons;
+  // Buttons are explicitly disabled. This means that Drawing Tool can be only used for presenting an existing drawing.
+  // It'll be rendered in the most basic basic way - no space for buttons panel and no styling (like canvas border).
+  return buttons !== undefined && (buttons === null || buttons.length === 0);
+}
+
 DrawingTool.prototype.pauseHistory = function () {
   this.historyPaused = true;
 }
@@ -745,8 +754,18 @@ DrawingTool.prototype._initDOM = function () {
   var $canvasContainer = $('<div class="dt-canvas-container">')
     .attr('tabindex', 0) // makes the canvas focusable for keyboard events
     .appendTo(this.$element);
+  if (!this.canvasOnly()) {
+    $canvasContainer.addClass("with-border");
+  }
+  if (this.options.canvasScale) {
+    $canvasContainer.css({
+      "transform-origin": "top left",
+      "transform": `scale(${this.options.canvasScale})`,
+    })
+  }
   this.$canvas = $('<canvas>')
     .appendTo($canvasContainer);
+
 };
 
 DrawingTool.prototype._initFabricJS = function () {

app/styles/drawing-tool.scss

@@ -62,12 +62,14 @@ $text: Arial, sans-serif;
   .dt-canvas-container {
     vertical-align: top; // not needed but why not
     display: inline-block;
-    border: $border;
-    border-radius: 0 $borderRadius $borderRadius 0;
     outline: 0;
 
-    canvas {
+    &.with-border {
+      border: $border;
       border-radius: 0 $borderRadius $borderRadius 0;
+      canvas {
+        border-radius: 0 $borderRadius $borderRadius 0;
+      }
     }
   }
 
@@ -334,4 +336,4 @@ $text: Arial, sans-serif;
     -webkit-transform: rotate(359deg);
     transform: rotate(359deg);
   }
-}
+}