Some refactoring and documentation

2017-06-01 08:27:27 +02:00
parent ce5535e9a5
commit 103a17decf
31 changed files with 114 additions and 88 deletions
@@ -0,0 +1,105 @@
+'use strict';
+
+var util = require('./util');
+var TextButton = require('./TextButton');
+var config = require('./config');
+
+function RulerHandler(viewport) {
+    var _enabled = false;
+    var _lines = { h: null, v: null };
+    var _rect = { h: null, v: null };
+
+    var Event = {
+        /**
+         * Triggers when handlebar is moved
+         */
+        onMove: function () {
+            var axis = this.axis;
+            var bounds = viewport.getBounds();
+            var pos = util.assertBetween(this[axis], bounds.min[axis], bounds.max[axis]);
+            this.marker[axis] = this[axis] = pos;
+            var dim = (this[axis] - bounds[axis]) / (viewport.getData().ppmm * 10);
+
+            if (axis === 'top') {
+                dim = viewport.getData().dim.height - dim;
+            }
+
+            this.setText(Math.round(dim * 100) / 100 + ' cm');
+        }
+    };
+
+    /**
+     * @return {fabric.Line}
+     */
+    function getLine(axis) {
+        var bounds = viewport.getBounds();
+        return new fabric.Line([
+                0, 0,
+                axis === 'h' ? bounds.width : 0,
+                axis === 'v' ? bounds.height : 0
+            ], {
+            evented: false,
+            strokeDashArray: [5, 5],
+            stroke: '#000',
+            strokeWidth: 1,
+            top: axis === 'h' ? bounds.top + bounds.height / 2 : bounds.top,
+            left: axis === 'v' ? bounds.left + bounds.width / 2 : bounds.left
+        });
+    }
+
+    /**
+     * @return {RulerHandler}
+     */
+    this.clear = function () {
+        [].concat(_rect.h, _rect.v, _lines.h, _lines.v).forEach(function (o) {
+            viewport.canvas.remove(o);
+        });
+        return this;
+    };
+
+    /**
+     * @param  {Boolean} enabled
+     * @return {RulerHandler}
+     */
+    this.enable = function (enabled) {
+        _enabled = enabled;
+        this.clear();
+
+        if (!_enabled) {
+            viewport.canvas.renderAll();
+            return;
+        }
+
+        var bounds = viewport.getBounds();
+
+        _lines = { h: getLine('h'), v: getLine('v') };
+
+        viewport.canvas.add(_lines.h);
+        viewport.canvas.add(_lines.v);
+
+        _rect.h = new TextButton('horizontalRuler', 'H', config.rulerHandle)
+            .set(config.rulerHandle.h(_lines, bounds))
+            .addTo(viewport.canvas)
+            .on('moving', Event.onMove)
+            .trigger('moving');
+
+        _rect.v = new TextButton('verticalRuler', 'V', config.rulerHandle)
+            .set(config.rulerHandle.v(_lines, bounds))
+            .addTo(viewport.canvas)
+            .on('moving', Event.onMove)
+            .trigger('moving');
+
+        viewport.canvas.renderAll();
+
+        return this;
+    };
+
+    /**
+     * @return {RulerHandler}
+     */
+    this.reset = function () {
+        return this.enable(_enabled);
+    };
+}
+
+module.exports = RulerHandler;