feat: init commit

dist/cjs/markers/arrow/ArrowMarker.js

@@ -0,0 +1,39 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var LineMarkerBase_1 = require("../line/LineMarkerBase");
+var SvgHelper_1 = require("../../utils/SvgHelper");
+var ArrowMarker = (function (_super) {
+    __extends(ArrowMarker, _super);
+    function ArrowMarker() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.ARROW_SIZE = 6;
+        return _this;
+    }
+    ArrowMarker.prototype.setup = function () {
+        _super.prototype.setup.call(this);
+        SvgHelper_1.SvgHelper.setAttributes(this.visual, [['class', 'arrow-marker']]);
+        var tip = SvgHelper_1.SvgHelper.createPolygon("0,0 " + this.ARROW_SIZE + "," + this.ARROW_SIZE / 2 + " 0," + this.ARROW_SIZE, [['class', 'arrow-marker-tip']]);
+        this.defs.push(SvgHelper_1.SvgHelper.createMarker('arrow-marker-head', 'auto', this.ARROW_SIZE, this.ARROW_SIZE, this.ARROW_SIZE - 1, this.ARROW_SIZE / 2, tip));
+        this.markerLine.setAttribute('marker-end', 'url(#arrow-marker-head');
+    };
+    ArrowMarker.createMarker = function () {
+        var marker = new ArrowMarker();
+        marker.setup();
+        return marker;
+    };
+    return ArrowMarker;
+}(LineMarkerBase_1.LineMarkerBase));
+exports.ArrowMarker = ArrowMarker;

dist/cjs/markers/arrow/ArrowMarkerToolbarItem.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var ArrowMarker_1 = require("./ArrowMarker");
+var arrow_marker_toolbar_icon_svg_1 = require("./arrow-marker-toolbar-icon.svg");
+var ArrowMarkerToolbarItem = (function () {
+    function ArrowMarkerToolbarItem() {
+        this.name = 'arrow-marker';
+        this.tooltipText = 'Arrow';
+        this.icon = arrow_marker_toolbar_icon_svg_1.default;
+        this.markerType = ArrowMarker_1.ArrowMarker;
+    }
+    return ArrowMarkerToolbarItem;
+}());
+exports.ArrowMarkerToolbarItem = ArrowMarkerToolbarItem;

dist/cjs/markers/base/MarkerBase.js

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var SvgHelper_1 = require("../../utils/SvgHelper");
+var MarkerBase = (function () {
+    function MarkerBase() {
+        var _this = this;
+        this.defs = [];
+        this.width = 200;
+        this.height = 50;
+        this.isActive = true;
+        this.isResizing = false;
+        this.previousMouseX = 0;
+        this.previousMouseY = 0;
+        this.isDragging = false;
+        this.manipulate = function (ev) {
+            var scale = _this.visual.getScreenCTM().a;
+            var dx = (ev.screenX - _this.previousMouseX) / scale;
+            var dy = (ev.screenY - _this.previousMouseY) / scale;
+            if (_this.isDragging) {
+                _this.move(dx, dy);
+            }
+            if (_this.isResizing) {
+                _this.resize(dx, dy);
+            }
+            _this.previousMouseX = ev.screenX;
+            _this.previousMouseY = ev.screenY;
+        };
+        this.addToVisual = function (el) {
+            _this.visual.appendChild(el);
+        };
+        this.addToRenderVisual = function (el) {
+            _this.renderVisual.appendChild(el);
+        };
+        this.mouseDown = function (ev) {
+            ev.stopPropagation();
+            _this.select();
+            _this.isDragging = true;
+            _this.previousMouseX = ev.screenX;
+            _this.previousMouseY = ev.screenY;
+        };
+        this.mouseUp = function (ev) {
+            ev.stopPropagation();
+            _this.endManipulation();
+        };
+        this.mouseMove = function (ev) {
+            ev.stopPropagation();
+            _this.manipulate(ev);
+        };
+        this.move = function (dx, dy) {
+            var translate = _this.visual.transform.baseVal.getItem(0);
+            translate.setMatrix(translate.matrix.translate(dx, dy));
+            _this.visual.transform.baseVal.replaceItem(translate, 0);
+        };
+    }
+    MarkerBase.prototype.endManipulation = function () {
+        this.isDragging = false;
+        this.isResizing = false;
+    };
+    MarkerBase.prototype.select = function () {
+        this.isActive = true;
+        if (this.onSelected) {
+            this.onSelected(this);
+        }
+        return;
+    };
+    MarkerBase.prototype.deselect = function () {
+        this.isActive = false;
+        this.endManipulation();
+        return;
+    };
+    MarkerBase.prototype.setup = function () {
+        this.visual = SvgHelper_1.SvgHelper.createGroup();
+        this.visual.transform.baseVal.appendItem(SvgHelper_1.SvgHelper.createTransform());
+        this.visual.addEventListener('mousedown', this.mouseDown);
+        this.visual.addEventListener('mouseup', this.mouseUp);
+        this.visual.addEventListener('mousemove', this.mouseMove);
+        this.visual.addEventListener('touchstart', this.onTouch, { passive: false });
+        this.visual.addEventListener('touchend', this.onTouch, { passive: false });
+        this.visual.addEventListener('touchmove', this.onTouch, { passive: false });
+        this.renderVisual = SvgHelper_1.SvgHelper.createGroup([['class', 'render-visual']]);
+        this.visual.appendChild(this.renderVisual);
+    };
+    MarkerBase.prototype.resize = function (x, y) {
+        return;
+    };
+    MarkerBase.prototype.onTouch = function (ev) {
+        ev.preventDefault();
+        var newEvt = document.createEvent('MouseEvents');
+        var touch = ev.changedTouches[0];
+        var type = null;
+        switch (ev.type) {
+            case 'touchstart':
+                type = 'mousedown';
+                break;
+            case 'touchmove':
+                type = 'mousemove';
+                break;
+            case 'touchend':
+                type = 'mouseup';
+                break;
+        }
+        newEvt.initMouseEvent(type, true, true, window, 0, touch.screenX, touch.screenY, touch.clientX, touch.clientY, ev.ctrlKey, ev.altKey, ev.shiftKey, ev.metaKey, 0, null);
+        ev.target.dispatchEvent(newEvt);
+    };
+    MarkerBase.createMarker = function () {
+        var marker = new MarkerBase();
+        marker.setup();
+        return marker;
+    };
+    return MarkerBase;
+}());
+exports.MarkerBase = MarkerBase;

dist/cjs/markers/base/RectangularMarkerBase.js

@@ -0,0 +1,193 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var SvgHelper_1 = require("../../utils/SvgHelper");
+var MarkerBase_1 = require("./MarkerBase");
+var RectangularMarkerGrips_1 = require("./RectangularMarkerGrips");
+var ResizeGrip_1 = require("./ResizeGrip");
+var RectangularMarkerBase = (function (_super) {
+    __extends(RectangularMarkerBase, _super);
+    function RectangularMarkerBase() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.MIN_SIZE = 5;
+        _this.CB_DISTANCE = 10;
+        _this.addControlBox = function () {
+            _this.controlBox = SvgHelper_1.SvgHelper.createGroup([['class', 'fc-whiteboardrect-control-box']]);
+            var translate = SvgHelper_1.SvgHelper.createTransform();
+            translate.setTranslate(-_this.CB_DISTANCE / 2, -_this.CB_DISTANCE / 2);
+            _this.controlBox.transform.baseVal.appendItem(translate);
+            _this.addToVisual(_this.controlBox);
+            _this.controlRect = SvgHelper_1.SvgHelper.createRect(_this.width + _this.CB_DISTANCE, _this.height + _this.CB_DISTANCE, [['class', 'fc-whiteboardrect-control-rect']]);
+            _this.controlBox.appendChild(_this.controlRect);
+            _this.controlGrips = new RectangularMarkerGrips_1.RectangularMarkerGrips();
+            _this.addControlGrips();
+        };
+        _this.adjustControlBox = function () {
+            _this.controlRect.setAttribute('width', (_this.width + _this.CB_DISTANCE).toString());
+            _this.controlRect.setAttribute('height', (_this.height + _this.CB_DISTANCE).toString());
+            _this.positionGrips();
+        };
+        _this.addControlGrips = function () {
+            _this.controlGrips.topLeft = _this.createGrip();
+            _this.controlGrips.topCenter = _this.createGrip();
+            _this.controlGrips.topRight = _this.createGrip();
+            _this.controlGrips.centerLeft = _this.createGrip();
+            _this.controlGrips.centerRight = _this.createGrip();
+            _this.controlGrips.bottomLeft = _this.createGrip();
+            _this.controlGrips.bottomCenter = _this.createGrip();
+            _this.controlGrips.bottomRight = _this.createGrip();
+            _this.positionGrips();
+        };
+        _this.createGrip = function () {
+            var grip = new ResizeGrip_1.ResizeGrip();
+            grip.visual.transform.baseVal.appendItem(SvgHelper_1.SvgHelper.createTransform());
+            _this.controlBox.appendChild(grip.visual);
+            grip.visual.addEventListener('mousedown', _this.gripMouseDown);
+            grip.visual.addEventListener('mousemove', _this.gripMouseMove);
+            grip.visual.addEventListener('mouseup', _this.gripMouseUp);
+            grip.visual.addEventListener('touchstart', _this.onTouch, { passive: false });
+            grip.visual.addEventListener('touchend', _this.onTouch, { passive: false });
+            grip.visual.addEventListener('touchmove', _this.onTouch, { passive: false });
+            return grip;
+        };
+        _this.positionGrips = function () {
+            var gripSize = _this.controlGrips.topLeft.GRIP_SIZE;
+            var left = -gripSize / 2;
+            var top = left;
+            var cx = (_this.width + _this.CB_DISTANCE) / 2 - gripSize / 2;
+            var cy = (_this.height + _this.CB_DISTANCE) / 2 - gripSize / 2;
+            var bottom = _this.height + _this.CB_DISTANCE - gripSize / 2;
+            var right = _this.width + _this.CB_DISTANCE - gripSize / 2;
+            _this.positionGrip(_this.controlGrips.topLeft.visual, left, top);
+            _this.positionGrip(_this.controlGrips.topCenter.visual, cx, top);
+            _this.positionGrip(_this.controlGrips.topRight.visual, right, top);
+            _this.positionGrip(_this.controlGrips.centerLeft.visual, left, cy);
+            _this.positionGrip(_this.controlGrips.centerRight.visual, right, cy);
+            _this.positionGrip(_this.controlGrips.bottomLeft.visual, left, bottom);
+            _this.positionGrip(_this.controlGrips.bottomCenter.visual, cx, bottom);
+            _this.positionGrip(_this.controlGrips.bottomRight.visual, right, bottom);
+        };
+        _this.positionGrip = function (grip, x, y) {
+            var translate = grip.transform.baseVal.getItem(0);
+            translate.setTranslate(x, y);
+            grip.transform.baseVal.replaceItem(translate, 0);
+        };
+        _this.gripMouseDown = function (ev) {
+            _this.isResizing = true;
+            _this.activeGrip = _this.controlGrips.findGripByVisual(ev.target) || null;
+            _this.previousMouseX = ev.screenX;
+            _this.previousMouseY = ev.screenY;
+            ev.stopPropagation();
+        };
+        _this.gripMouseUp = function (ev) {
+            _this.isResizing = false;
+            _this.activeGrip = null;
+            ev.stopPropagation();
+        };
+        _this.gripMouseMove = function (ev) {
+            if (_this.isResizing) {
+                _this.manipulate(ev);
+            }
+        };
+        return _this;
+    }
+    RectangularMarkerBase.prototype.endManipulation = function () {
+        _super.prototype.endManipulation.call(this);
+        this.isResizing = false;
+        this.activeGrip = null;
+    };
+    RectangularMarkerBase.prototype.select = function () {
+        _super.prototype.select.call(this);
+        this.controlBox.style.display = '';
+    };
+    RectangularMarkerBase.prototype.deselect = function () {
+        _super.prototype.deselect.call(this);
+        this.controlBox.style.display = 'none';
+    };
+    RectangularMarkerBase.prototype.setup = function () {
+        _super.prototype.setup.call(this);
+        this.addControlBox();
+    };
+    RectangularMarkerBase.prototype.resize = function (x, y) {
+        var translateX = 0;
+        var translateY = 0;
+        switch (this.activeGrip) {
+            case this.controlGrips.topLeft:
+                this.width -= x;
+                this.height -= y;
+                translateX += x;
+                translateY += y;
+                break;
+            case this.controlGrips.bottomLeft:
+                this.width -= x;
+                this.height += y;
+                translateX += x;
+                break;
+            case this.controlGrips.topRight:
+                this.width += x;
+                this.height -= y;
+                translateY += y;
+                break;
+            case this.controlGrips.bottomRight:
+                this.width += x;
+                this.height += y;
+                break;
+            case this.controlGrips.centerLeft:
+                this.width -= x;
+                translateX += x;
+                break;
+            case this.controlGrips.centerRight:
+                this.width += x;
+                break;
+            case this.controlGrips.topCenter:
+                this.height -= y;
+                translateY += y;
+                break;
+            case this.controlGrips.bottomCenter:
+                this.height += y;
+                break;
+        }
+        if (this.width < this.MIN_SIZE) {
+            var offset = this.MIN_SIZE - this.width;
+            this.width = this.MIN_SIZE;
+            if (translateX !== 0) {
+                translateX -= offset;
+            }
+        }
+        if (this.height < this.MIN_SIZE) {
+            var offset = this.MIN_SIZE - this.height;
+            this.height = this.MIN_SIZE;
+            if (translateY !== 0) {
+                translateY -= offset;
+            }
+        }
+        if (translateX !== 0 || translateY !== 0) {
+            var translate = this.visual.transform.baseVal.getItem(0);
+            translate.setMatrix(translate.matrix.translate(translateX, translateY));
+            this.visual.transform.baseVal.replaceItem(translate, 0);
+        }
+        this.adjustControlBox();
+    };
+    RectangularMarkerBase.prototype.onTouch = function (ev) {
+        _super.prototype.onTouch.call(this, ev);
+    };
+    RectangularMarkerBase.createMarker = function () {
+        var marker = new RectangularMarkerBase();
+        marker.setup();
+        return marker;
+    };
+    return RectangularMarkerBase;
+}(MarkerBase_1.MarkerBase));
+exports.RectangularMarkerBase = RectangularMarkerBase;

dist/cjs/markers/base/RectangularMarkerGrips.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var RectangularMarkerGrips = (function () {
+    function RectangularMarkerGrips() {
+        var _this = this;
+        this.findGripByVisual = function (gripVisual) {
+            switch (gripVisual) {
+                case _this.topLeft.visual:
+                    return _this.topLeft;
+                case _this.topCenter.visual:
+                    return _this.topCenter;
+                case _this.topRight.visual:
+                    return _this.topRight;
+                case _this.centerLeft.visual:
+                    return _this.centerLeft;
+                case _this.centerRight.visual:
+                    return _this.centerRight;
+                case _this.bottomLeft.visual:
+                    return _this.bottomLeft;
+                case _this.bottomCenter.visual:
+                    return _this.bottomCenter;
+                case _this.bottomRight.visual:
+                    return _this.bottomRight;
+                default:
+                    return _this.topLeft;
+            }
+        };
+    }
+    return RectangularMarkerGrips;
+}());
+exports.RectangularMarkerGrips = RectangularMarkerGrips;

dist/cjs/markers/base/ResizeGrip.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var SvgHelper_1 = require("../../utils/SvgHelper");
+var ResizeGrip = (function () {
+    function ResizeGrip() {
+        this.GRIP_SIZE = 10;
+        this.visual = SvgHelper_1.SvgHelper.createCircle(this.GRIP_SIZE, [['class', 'fc-whiteboardcontrol-grip']]);
+    }
+    return ResizeGrip;
+}());
+exports.ResizeGrip = ResizeGrip;

dist/cjs/markers/cover/CoverMarker.js

@@ -0,0 +1,34 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var SvgHelper_1 = require("../../utils/SvgHelper");
+var RectMarkerBase_1 = require("../rect/RectMarkerBase");
+var CoverMarker = (function (_super) {
+    __extends(CoverMarker, _super);
+    function CoverMarker() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    CoverMarker.prototype.setup = function () {
+        _super.prototype.setup.call(this);
+        SvgHelper_1.SvgHelper.setAttributes(this.visual, [['class', 'cover-marker']]);
+    };
+    CoverMarker.createMarker = function () {
+        var marker = new CoverMarker();
+        marker.setup();
+        return marker;
+    };
+    return CoverMarker;
+}(RectMarkerBase_1.RectMarkerBase));
+exports.CoverMarker = CoverMarker;

dist/cjs/markers/cover/CoverMarkerToolbarItem.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var CoverMarker_1 = require("./CoverMarker");
+var cover_marker_toolbar_icon_svg_1 = require("./cover-marker-toolbar-icon.svg");
+var CoverMarkerToolbarItem = (function () {
+    function CoverMarkerToolbarItem() {
+        this.name = 'cover-marker';
+        this.tooltipText = 'Cover';
+        this.icon = cover_marker_toolbar_icon_svg_1.default;
+        this.markerType = CoverMarker_1.CoverMarker;
+    }
+    return CoverMarkerToolbarItem;
+}());
+exports.CoverMarkerToolbarItem = CoverMarkerToolbarItem;

dist/cjs/markers/highlight/HighlightMarker.js

@@ -0,0 +1,34 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var SvgHelper_1 = require("../../utils/SvgHelper");
+var RectMarkerBase_1 = require("../rect/RectMarkerBase");
+var HighlightMarker = (function (_super) {
+    __extends(HighlightMarker, _super);
+    function HighlightMarker() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    HighlightMarker.prototype.setup = function () {
+        _super.prototype.setup.call(this);
+        SvgHelper_1.SvgHelper.setAttributes(this.visual, [['class', 'highlight-marker']]);
+    };
+    HighlightMarker.createMarker = function () {
+        var marker = new HighlightMarker();
+        marker.setup();
+        return marker;
+    };
+    return HighlightMarker;
+}(RectMarkerBase_1.RectMarkerBase));
+exports.HighlightMarker = HighlightMarker;

dist/cjs/markers/highlight/HighlightMarkerToolbarItem.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var HighlightMarker_1 = require("./HighlightMarker");
+var highlight_marker_toolbar_icon_svg_1 = require("./highlight-marker-toolbar-icon.svg");
+var HighlightMarkerToolbarItem = (function () {
+    function HighlightMarkerToolbarItem() {
+        this.name = 'cover-marker';
+        this.tooltipText = 'Cover';
+        this.icon = highlight_marker_toolbar_icon_svg_1.default;
+        this.markerType = HighlightMarker_1.HighlightMarker;
+    }
+    return HighlightMarkerToolbarItem;
+}());
+exports.HighlightMarkerToolbarItem = HighlightMarkerToolbarItem;

dist/cjs/markers/line/LineMarker.js

@@ -0,0 +1,34 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var SvgHelper_1 = require("../../utils/SvgHelper");
+var LineMarkerBase_1 = require("./LineMarkerBase");
+var LineMarker = (function (_super) {
+    __extends(LineMarker, _super);
+    function LineMarker() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    LineMarker.prototype.setup = function () {
+        _super.prototype.setup.call(this);
+        SvgHelper_1.SvgHelper.setAttributes(this.visual, [['class', 'line-marker']]);
+    };
+    LineMarker.createMarker = function () {
+        var marker = new LineMarker();
+        marker.setup();
+        return marker;
+    };
+    return LineMarker;
+}(LineMarkerBase_1.LineMarkerBase));
+exports.LineMarker = LineMarker;

dist/cjs/markers/line/LineMarkerBase.js

@@ -0,0 +1,148 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var SvgHelper_1 = require("../../utils/SvgHelper");
+var MarkerBase_1 = require("../base/MarkerBase");
+var ResizeGrip_1 = require("../base/ResizeGrip");
+var LineMarkerBase = (function (_super) {
+    __extends(LineMarkerBase, _super);
+    function LineMarkerBase() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.MIN_LENGTH = 20;
+        _this.x1 = 0;
+        _this.y1 = 0;
+        _this.x2 = _this.width;
+        _this.y2 = 0;
+        _this.getLineLength = function (x1, y1, x2, y2) {
+            var dx = Math.abs(x1 - x2);
+            var dy = Math.abs(y1 - y2);
+            return Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
+        };
+        _this.addControlBox = function () {
+            _this.controlBox = SvgHelper_1.SvgHelper.createGroup([['class', 'fc-whiteboardline-control-box']]);
+            _this.addToVisual(_this.controlBox);
+            _this.addControlGrips();
+        };
+        _this.adjustControlBox = function () {
+            _this.positionGrips();
+        };
+        _this.addControlGrips = function () {
+            _this.controlGrip1 = _this.createGrip();
+            _this.controlGrip2 = _this.createGrip();
+            _this.positionGrips();
+        };
+        _this.createGrip = function () {
+            var grip = new ResizeGrip_1.ResizeGrip();
+            grip.visual.transform.baseVal.appendItem(SvgHelper_1.SvgHelper.createTransform());
+            _this.controlBox.appendChild(grip.visual);
+            grip.visual.addEventListener('mousedown', _this.gripMouseDown);
+            grip.visual.addEventListener('mousemove', _this.gripMouseMove);
+            grip.visual.addEventListener('mouseup', _this.gripMouseUp);
+            grip.visual.addEventListener('touchstart', _this.onTouch, { passive: false });
+            grip.visual.addEventListener('touchend', _this.onTouch, { passive: false });
+            grip.visual.addEventListener('touchmove', _this.onTouch, { passive: false });
+            return grip;
+        };
+        _this.positionGrips = function () {
+            var gripSize = _this.controlGrip1.GRIP_SIZE;
+            var x1 = _this.x1 - gripSize / 2;
+            var y1 = _this.y1 - gripSize / 2;
+            var x2 = _this.x2 - gripSize / 2;
+            var y2 = _this.y2 - gripSize / 2;
+            _this.positionGrip(_this.controlGrip1.visual, x1, y1);
+            _this.positionGrip(_this.controlGrip2.visual, x2, y2);
+        };
+        _this.positionGrip = function (grip, x, y) {
+            var translate = grip.transform.baseVal.getItem(0);
+            translate.setTranslate(x, y);
+            grip.transform.baseVal.replaceItem(translate, 0);
+        };
+        _this.gripMouseDown = function (ev) {
+            _this.isResizing = true;
+            _this.activeGrip =
+                ev.target === _this.controlGrip1.visual
+                    ? _this.controlGrip1
+                    : _this.controlGrip2;
+            _this.previousMouseX = ev.screenX;
+            _this.previousMouseY = ev.screenY;
+            ev.stopPropagation();
+        };
+        _this.gripMouseUp = function (ev) {
+            _this.isResizing = false;
+            _this.activeGrip = null;
+            ev.stopPropagation();
+        };
+        _this.gripMouseMove = function (ev) {
+            if (_this.isResizing) {
+                _this.resize(ev.movementX, ev.movementY);
+            }
+        };
+        return _this;
+    }
+    LineMarkerBase.prototype.endManipulation = function () {
+        _super.prototype.endManipulation.call(this);
+        this.isResizing = false;
+        this.activeGrip = null;
+    };
+    LineMarkerBase.prototype.select = function () {
+        _super.prototype.select.call(this);
+        this.controlBox.style.display = '';
+    };
+    LineMarkerBase.prototype.deselect = function () {
+        _super.prototype.deselect.call(this);
+        this.controlBox.style.display = 'none';
+    };
+    LineMarkerBase.prototype.setup = function () {
+        _super.prototype.setup.call(this);
+        this.markerBgLine = SvgHelper_1.SvgHelper.createLine(0, 0, this.x2, 0, [
+            ['stroke', 'transparent'],
+            ['stroke-width', '30']
+        ]);
+        this.addToRenderVisual(this.markerBgLine);
+        this.markerLine = SvgHelper_1.SvgHelper.createLine(0, 0, this.x2, 0);
+        this.addToRenderVisual(this.markerLine);
+        this.addControlBox();
+    };
+    LineMarkerBase.prototype.resize = function (x, y) {
+        if (this.activeGrip) {
+            if (this.activeGrip === this.controlGrip1 &&
+                this.getLineLength(this.x1 + x, this.y1 + 1, this.x2, this.y2) >= this.MIN_LENGTH) {
+                this.x1 += x;
+                this.y1 += y;
+                this.markerBgLine.setAttribute('x1', this.x1.toString());
+                this.markerBgLine.setAttribute('y1', this.y1.toString());
+                this.markerLine.setAttribute('x1', this.x1.toString());
+                this.markerLine.setAttribute('y1', this.y1.toString());
+            }
+            else if (this.activeGrip === this.controlGrip2 &&
+                this.getLineLength(this.x1, this.y1, this.x2 + x, this.y2 + y) >= this.MIN_LENGTH) {
+                this.x2 += x;
+                this.y2 += y;
+                this.markerBgLine.setAttribute('x2', this.x2.toString());
+                this.markerBgLine.setAttribute('y2', this.y2.toString());
+                this.markerLine.setAttribute('x2', this.x2.toString());
+                this.markerLine.setAttribute('y2', this.y2.toString());
+            }
+        }
+        this.adjustControlBox();
+    };
+    LineMarkerBase.createMarker = function () {
+        var marker = new LineMarkerBase();
+        marker.setup();
+        return marker;
+    };
+    return LineMarkerBase;
+}(MarkerBase_1.MarkerBase));
+exports.LineMarkerBase = LineMarkerBase;

dist/cjs/markers/line/LineMarkerToolbarItem.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var LineMarker_1 = require("./LineMarker");
+var line_marker_toolbar_icon_svg_1 = require("./line-marker-toolbar-icon.svg");
+var LineMarkerToolbarItem = (function () {
+    function LineMarkerToolbarItem() {
+        this.name = 'line-marker';
+        this.tooltipText = 'Line';
+        this.icon = line_marker_toolbar_icon_svg_1.default;
+        this.markerType = LineMarker_1.LineMarker;
+    }
+    return LineMarkerToolbarItem;
+}());
+exports.LineMarkerToolbarItem = LineMarkerToolbarItem;

dist/cjs/markers/rect/RectMarker.js

@@ -0,0 +1,34 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var SvgHelper_1 = require("../../utils/SvgHelper");
+var RectMarkerBase_1 = require("./RectMarkerBase");
+var RectMarker = (function (_super) {
+    __extends(RectMarker, _super);
+    function RectMarker() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    RectMarker.prototype.setup = function () {
+        _super.prototype.setup.call(this);
+        SvgHelper_1.SvgHelper.setAttributes(this.visual, [['class', 'rect-marker']]);
+    };
+    RectMarker.createMarker = function () {
+        var marker = new RectMarker();
+        marker.setup();
+        return marker;
+    };
+    return RectMarker;
+}(RectMarkerBase_1.RectMarkerBase));
+exports.RectMarker = RectMarker;

dist/cjs/markers/rect/RectMarkerBase.js

@@ -0,0 +1,40 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var SvgHelper_1 = require("../../utils/SvgHelper");
+var RectangularMarkerBase_1 = require("../base/RectangularMarkerBase");
+var RectMarkerBase = (function (_super) {
+    __extends(RectMarkerBase, _super);
+    function RectMarkerBase() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    RectMarkerBase.prototype.setup = function () {
+        _super.prototype.setup.call(this);
+        this.markerRect = SvgHelper_1.SvgHelper.createRect(this.width, this.height);
+        this.addToRenderVisual(this.markerRect);
+    };
+    RectMarkerBase.prototype.resize = function (x, y) {
+        _super.prototype.resize.call(this, x, y);
+        this.markerRect.setAttribute('width', this.width.toString());
+        this.markerRect.setAttribute('height', this.height.toString());
+    };
+    RectMarkerBase.createMarker = function () {
+        var marker = new RectMarkerBase();
+        marker.setup();
+        return marker;
+    };
+    return RectMarkerBase;
+}(RectangularMarkerBase_1.RectangularMarkerBase));
+exports.RectMarkerBase = RectMarkerBase;

dist/cjs/markers/rect/RectMarkerToolbarItem.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var RectMarker_1 = require("./RectMarker");
+var rect_marker_toolbar_icon_svg_1 = require("./rect-marker-toolbar-icon.svg");
+var RectMarkerToolbarItem = (function () {
+    function RectMarkerToolbarItem() {
+        this.name = "rect-marker";
+        this.tooltipText = "Rectangle";
+        this.icon = rect_marker_toolbar_icon_svg_1.default;
+        this.markerType = RectMarker_1.RectMarker;
+    }
+    return RectMarkerToolbarItem;
+}());
+exports.RectMarkerToolbarItem = RectMarkerToolbarItem;

dist/cjs/markers/text/TextMarker.js

@@ -0,0 +1,140 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var SvgHelper_1 = require("../../utils/SvgHelper");
+var RectangularMarkerBase_1 = require("../base/RectangularMarkerBase");
+var check_svg_1 = require("./check.svg");
+var times_svg_1 = require("./times.svg");
+var TextMarker = (function (_super) {
+    __extends(TextMarker, _super);
+    function TextMarker() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.MIN_SIZE = 50;
+        _this.DEFAULT_TEXT = 'Double-click to edit text';
+        _this.text = _this.DEFAULT_TEXT;
+        _this.inDoubleTap = false;
+        _this.renderText = function () {
+            var LINE_SIZE = '1.2em';
+            while (_this.textElement.lastChild) {
+                _this.textElement.removeChild(_this.textElement.lastChild);
+            }
+            var lines = _this.text.split(/\r\n|[\n\v\f\r\x85\u2028\u2029]/);
+            for (var _i = 0, lines_1 = lines; _i < lines_1.length; _i++) {
+                var line = lines_1[_i];
+                if (line.trim() === '') {
+                    line = ' ';
+                }
+                _this.textElement.appendChild(SvgHelper_1.SvgHelper.createTSpan(line, [['x', '0'], ['dy', LINE_SIZE]]));
+            }
+            setTimeout(_this.sizeText, 10);
+        };
+        _this.sizeText = function () {
+            var textSize = _this.textElement.getBBox();
+            var x = 0;
+            var y = 0;
+            var scale = 1.0;
+            if (textSize.width > 0 && textSize.height > 0) {
+                var xScale = (_this.width * 1.0) / textSize.width;
+                var yScale = (_this.height * 1.0) / textSize.height;
+                scale = Math.min(xScale, yScale);
+                x = (_this.width - textSize.width * scale) / 2;
+                y = (_this.height - textSize.height * scale) / 2;
+            }
+            _this.textElement.transform.baseVal.getItem(0).setTranslate(x, y);
+            _this.textElement.transform.baseVal.getItem(1).setScale(scale, scale);
+        };
+        _this.onDblClick = function (ev) {
+            _this.showEditor();
+        };
+        _this.onTap = function (ev) {
+            if (_this.inDoubleTap) {
+                _this.inDoubleTap = false;
+                _this.showEditor();
+            }
+            else {
+                _this.inDoubleTap = true;
+                setTimeout(function () {
+                    _this.inDoubleTap = false;
+                }, 300);
+            }
+        };
+        _this.showEditor = function () {
+            _this.editor = document.createElement('div');
+            _this.editor.className = 'fc-whiteboardtext-editor';
+            _this.editorTextArea = document.createElement('textarea');
+            if (_this.text !== _this.DEFAULT_TEXT) {
+                _this.editorTextArea.value = _this.text;
+            }
+            _this.editorTextArea.addEventListener('keydown', _this.onEditorKeyDown);
+            _this.editor.appendChild(_this.editorTextArea);
+            document.body.appendChild(_this.editor);
+            var buttons = document.createElement('div');
+            buttons.className = 'fc-whiteboardtext-editor-button-bar';
+            _this.editor.appendChild(buttons);
+            var okButton = document.createElement('div');
+            okButton.className = 'fc-whiteboardtext-editor-button';
+            okButton.innerHTML = check_svg_1.default;
+            okButton.addEventListener('click', _this.onEditorOkClick);
+            buttons.appendChild(okButton);
+            var cancelButton = document.createElement('div');
+            cancelButton.className = 'fc-whiteboardtext-editor-button';
+            cancelButton.innerHTML = times_svg_1.default;
+            cancelButton.addEventListener('click', _this.closeEditor);
+            buttons.appendChild(cancelButton);
+        };
+        _this.onEditorOkClick = function (ev) {
+            if (_this.editorTextArea.value.trim()) {
+                _this.text = _this.editorTextArea.value;
+            }
+            else {
+                _this.text = _this.DEFAULT_TEXT;
+            }
+            _this.renderText();
+            _this.closeEditor();
+        };
+        _this.closeEditor = function () {
+            document.body.removeChild(_this.editor);
+        };
+        _this.onEditorKeyDown = function (ev) {
+            if (ev.key === 'Enter' && ev.ctrlKey) {
+                ev.preventDefault();
+                _this.onEditorOkClick(null);
+            }
+        };
+        return _this;
+    }
+    TextMarker.prototype.setup = function () {
+        _super.prototype.setup.call(this);
+        this.textElement = SvgHelper_1.SvgHelper.createText();
+        this.addToRenderVisual(this.textElement);
+        SvgHelper_1.SvgHelper.setAttributes(this.visual, [['class', 'text-marker']]);
+        this.textElement.transform.baseVal.appendItem(SvgHelper_1.SvgHelper.createTransform());
+        this.textElement.transform.baseVal.appendItem(SvgHelper_1.SvgHelper.createTransform());
+        this.renderText();
+        this.visual.addEventListener('dblclick', this.onDblClick);
+        this.visual.addEventListener('touchstart', this.onTap);
+    };
+    TextMarker.prototype.resize = function (x, y) {
+        _super.prototype.resize.call(this, x, y);
+        this.sizeText();
+    };
+    TextMarker.createMarker = function () {
+        var marker = new TextMarker();
+        marker.setup();
+        return marker;
+    };
+    return TextMarker;
+}(RectangularMarkerBase_1.RectangularMarkerBase));
+exports.TextMarker = TextMarker;

dist/cjs/markers/text/TextMarkerToolbarItem.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var TextMarker_1 = require("./TextMarker");
+var text_marker_toolbar_icon_svg_1 = require("./text-marker-toolbar-icon.svg");
+var TextMarkerToolbarItem = (function () {
+    function TextMarkerToolbarItem() {
+        this.name = "text-marker";
+        this.tooltipText = "Text";
+        this.icon = text_marker_toolbar_icon_svg_1.default;
+        this.markerType = TextMarker_1.TextMarker;
+    }
+    return TextMarkerToolbarItem;
+}());
+exports.TextMarkerToolbarItem = TextMarkerToolbarItem;

dist/cjs/render/Activator.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var Activator = (function () {
+    function Activator() {
+    }
+    Object.defineProperty(Activator, "isLicensed", {
+        get: function () {
+            if (Activator.key) {
+                return true;
+            }
+            else {
+                return false;
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    return Activator;
+}());
+exports.Activator = Activator;

dist/cjs/render/MarkerArea.js

@@ -0,0 +1,305 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var Activator_1 = require("./Activator");
+var SvgHelper_1 = require("../utils/SvgHelper");
+var Renderer_1 = require("./Renderer");
+var Toolbar_1 = require("../toolbar/Toolbar");
+var ArrowMarkerToolbarItem_1 = require("../markers/arrow/ArrowMarkerToolbarItem");
+var CoverMarkerToolbarItem_1 = require("../markers/cover/CoverMarkerToolbarItem");
+var HighlightMarkerToolbarItem_1 = require("../markers/highlight/HighlightMarkerToolbarItem");
+var LineMarkerToolbarItem_1 = require("../markers/line/LineMarkerToolbarItem");
+var RectMarkerToolbarItem_1 = require("../markers/rect/RectMarkerToolbarItem");
+var TextMarkerToolbarItem_1 = require("../markers/text/TextMarkerToolbarItem");
+var check_svg_1 = require("./assets/core-toolbar-icons/check.svg");
+var eraser_svg_1 = require("./assets/core-toolbar-icons/eraser.svg");
+var mouse_pointer_svg_1 = require("./assets/core-toolbar-icons/mouse-pointer.svg");
+var times_svg_1 = require("./assets/core-toolbar-icons/times.svg");
+var markerjs_logo_m_svg_1 = require("./assets/fc-whiteboardlogo-m.svg");
+var MarkerArea = (function () {
+    function MarkerArea(target) {
+        var _this = this;
+        this.toolbars = [
+            {
+                icon: mouse_pointer_svg_1.default,
+                name: 'pointer',
+                tooltipText: 'Pointer'
+            },
+            {
+                icon: eraser_svg_1.default,
+                name: 'delete',
+                tooltipText: 'Delete'
+            },
+            {
+                name: 'separator',
+                tooltipText: ''
+            },
+            new RectMarkerToolbarItem_1.RectMarkerToolbarItem(),
+            new CoverMarkerToolbarItem_1.CoverMarkerToolbarItem(),
+            new HighlightMarkerToolbarItem_1.HighlightMarkerToolbarItem(),
+            new LineMarkerToolbarItem_1.LineMarkerToolbarItem(),
+            new ArrowMarkerToolbarItem_1.ArrowMarkerToolbarItem(),
+            new TextMarkerToolbarItem_1.TextMarkerToolbarItem(),
+            {
+                name: 'separator',
+                tooltipText: ''
+            },
+            {
+                icon: check_svg_1.default,
+                name: 'ok',
+                tooltipText: 'OK'
+            },
+            {
+                icon: times_svg_1.default,
+                name: 'close',
+                tooltipText: 'Close'
+            }
+        ];
+        this.scale = 1.0;
+        this.show = function (completeCallback, cancelCallback) {
+            _this.completeCallback = completeCallback;
+            if (cancelCallback) {
+                _this.cancelCallback = cancelCallback;
+            }
+            _this.open();
+            _this.showUI();
+        };
+        this.open = function () {
+            _this.setTargetRect();
+            _this.initMarkerCanvas();
+            _this.attachEvents();
+            _this.setStyles();
+            if (!Activator_1.Activator.isLicensed) {
+                _this.adLogo();
+            }
+            window.addEventListener('resize', _this.adjustUI);
+        };
+        this.render = function (completeCallback, cancelCallback) {
+            _this.completeCallback = completeCallback;
+            if (cancelCallback) {
+                _this.cancelCallback = cancelCallback;
+            }
+            _this.selectMarker(null);
+            _this.startRender(_this.renderFinished);
+        };
+        this.close = function () {
+            if (_this.toolbarUI) {
+                document.body.removeChild(_this.toolbarUI);
+            }
+            if (_this.markerImage) {
+                document.body.removeChild(_this.markerImageHolder);
+            }
+            if (_this.logoUI) {
+                document.body.removeChild(_this.logoUI);
+            }
+        };
+        this.addMarker = function (markerType) {
+            var marker = markerType.createMarker();
+            marker.onSelected = _this.selectMarker;
+            if (marker.defs && marker.defs.length > 0) {
+                for (var _i = 0, _a = marker.defs; _i < _a.length; _i++) {
+                    var d = _a[_i];
+                    if (d.id && !_this.markerImage.getElementById(d.id)) {
+                        _this.defs.appendChild(d);
+                    }
+                }
+            }
+            _this.markers.push(marker);
+            _this.selectMarker(marker);
+            _this.markerImage.appendChild(marker.visual);
+            var bbox = marker.visual.getBBox();
+            var x = _this.width / 2 / _this.scale - bbox.width / 2;
+            var y = _this.height / 2 / _this.scale - bbox.height / 2;
+            var translate = marker.visual.transform.baseVal.getItem(0);
+            translate.setMatrix(translate.matrix.translate(x, y));
+            marker.visual.transform.baseVal.replaceItem(translate, 0);
+        };
+        this.deleteActiveMarker = function () {
+            if (_this.activeMarker) {
+                _this.deleteMarker(_this.activeMarker);
+            }
+        };
+        this.setTargetRect = function () {
+            var targetRect = _this.target.getBoundingClientRect();
+            var bodyRect = document.body.parentElement.getBoundingClientRect();
+            _this.targetRect = {
+                left: targetRect.left - bodyRect.left,
+                top: targetRect.top - bodyRect.top
+            };
+        };
+        this.startRender = function (done) {
+            var renderer = new Renderer_1.Renderer();
+            renderer.rasterize(_this.target, _this.markerImage, done);
+        };
+        this.attachEvents = function () {
+            _this.markerImage.addEventListener('mousedown', _this.mouseDown);
+            _this.markerImage.addEventListener('mousemove', _this.mouseMove);
+            _this.markerImage.addEventListener('mouseup', _this.mouseUp);
+        };
+        this.mouseDown = function (ev) {
+            if (_this.activeMarker && (ev.buttons & 1) > 0) {
+                _this.activeMarker.deselect();
+                _this.activeMarker = null;
+            }
+        };
+        this.mouseMove = function (ev) {
+            if (_this.activeMarker && (ev.buttons & 1) > 0) {
+                _this.activeMarker.manipulate(ev);
+            }
+        };
+        this.mouseUp = function (ev) {
+            if (_this.activeMarker) {
+                _this.activeMarker.endManipulation();
+            }
+        };
+        this.initMarkerCanvas = function () {
+            _this.markerImageHolder = document.createElement('div');
+            _this.markerImageHolder.style.setProperty('touch-action', 'none');
+            _this.markerImageHolder.style.setProperty('-ms-touch-action', 'none');
+            _this.markerImage = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+            _this.markerImage.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+            _this.markerImage.setAttribute('width', _this.width.toString());
+            _this.markerImage.setAttribute('height', _this.height.toString());
+            _this.markerImage.setAttribute('viewBox', '0 0 ' + _this.width.toString() + ' ' + _this.height.toString());
+            _this.markerImageHolder.style.position = 'absolute';
+            _this.markerImageHolder.style.width = _this.width + "px";
+            _this.markerImageHolder.style.height = _this.height + "px";
+            _this.markerImageHolder.style.transformOrigin = 'top left';
+            _this.positionMarkerImage();
+            _this.defs = SvgHelper_1.SvgHelper.createDefs();
+            _this.markerImage.appendChild(_this.defs);
+            _this.markerImageHolder.appendChild(_this.markerImage);
+            document.body.appendChild(_this.markerImageHolder);
+        };
+        this.adjustUI = function (ev) {
+            _this.adjustSize();
+            _this.positionUI();
+        };
+        this.adjustSize = function () {
+            _this.width = _this.target.clientWidth;
+            _this.height = _this.target.clientHeight;
+            var scale = _this.target.clientWidth / _this.markerImageHolder.clientWidth;
+            if (scale !== 1.0) {
+                _this.scale *= scale;
+                _this.markerImageHolder.style.width = _this.width + "px";
+                _this.markerImageHolder.style.height = _this.height + "px";
+                _this.markerImageHolder.style.transform = "scale(" + _this.scale + ")";
+            }
+        };
+        this.positionUI = function () {
+            _this.setTargetRect();
+            _this.positionMarkerImage();
+            _this.positionToolbar();
+            if (_this.logoUI) {
+                _this.positionLogo();
+            }
+        };
+        this.positionMarkerImage = function () {
+            _this.markerImageHolder.style.top = _this.targetRect.top + 'px';
+            _this.markerImageHolder.style.left = _this.targetRect.left + 'px';
+        };
+        this.positionToolbar = function () {
+            _this.toolbarUI.style.left = _this.targetRect.left +
+                _this.target.offsetWidth -
+                _this.toolbarUI.clientWidth + "px";
+            _this.toolbarUI.style.top = _this.targetRect.top - _this.toolbarUI.clientHeight + "px";
+        };
+        this.showUI = function () {
+            _this.toolbar = new Toolbar_1.Toolbar(_this.toolbars, _this.toolbarClick);
+            _this.toolbarUI = _this.toolbar.getUI();
+            document.body.appendChild(_this.toolbarUI);
+            _this.toolbarUI.style.position = 'absolute';
+            _this.positionToolbar();
+        };
+        this.setStyles = function () {
+            var editorStyleSheet = document.createElementNS('http://www.w3.org/2000/svg', 'style');
+            editorStyleSheet.innerHTML = "\n            .rect-marker .render-visual {\n                stroke: #ff0000;\n                stroke-width: 3;\n                fill: transparent;\n            }\n            .cover-marker .render-visual {\n                stroke-width: 0;\n                fill: #000000;\n            }\n            .highlight-marker .render-visual {\n                stroke: transparent;\n                stroke-width: 0;\n                fill: #ffff00;\n                fill-opacity: 0.4;\n            }\n            .line-marker .render-visual {\n                stroke: #ff0000;\n                stroke-width: 3;\n                fill: transparent;\n            }\n            .arrow-marker .render-visual {\n                stroke: #ff0000;\n                stroke-width: 3;\n                fill: transparent;\n            }\n            .arrow-marker-tip {\n                stroke-width: 0;\n                fill: #ff0000;\n            }\n            .text-marker text {\n                fill: #ff0000;\n                font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n                    Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\",\n                    \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n            }\n            .fc-whiteboardrect-control-box .fc-whiteboardrect-control-rect {\n                stroke: black;\n                stroke-width: 1;\n                stroke-opacity: 0.5;\n                stroke-dasharray: 3, 2;\n                fill: transparent;\n            }\n            .fc-whiteboardcontrol-grip {\n                fill: #cccccc;\n                stroke: #333333;\n                stroke-width: 2;\n            }\n        ";
+            _this.markerImage.appendChild(editorStyleSheet);
+        };
+        this.toolbarClick = function (ev, toolbarItem) {
+            if (toolbarItem.markerType) {
+                _this.addMarker(toolbarItem.markerType);
+            }
+            else {
+                switch (toolbarItem.name) {
+                    case 'delete': {
+                        _this.deleteActiveMarker();
+                        break;
+                    }
+                    case 'pointer': {
+                        if (_this.activeMarker) {
+                            _this.selectMarker(null);
+                        }
+                        break;
+                    }
+                    case 'close': {
+                        _this.cancel();
+                        break;
+                    }
+                    case 'ok': {
+                        _this.complete();
+                        break;
+                    }
+                }
+            }
+        };
+        this.selectMarker = function (marker) {
+            if (_this.activeMarker && _this.activeMarker !== marker) {
+                _this.activeMarker.deselect();
+            }
+            _this.activeMarker = marker;
+        };
+        this.deleteMarker = function (marker) {
+            _this.markerImage.removeChild(marker.visual);
+            if (_this.activeMarker === marker) {
+                _this.activeMarker = null;
+            }
+            _this.markers.splice(_this.markers.indexOf(marker), 1);
+        };
+        this.complete = function () {
+            _this.selectMarker(null);
+            _this.startRender(_this.renderFinishedClose);
+        };
+        this.cancel = function () {
+            _this.close();
+            if (_this.cancelCallback) {
+                _this.cancelCallback();
+            }
+        };
+        this.renderFinished = function (dataUrl) {
+            _this.completeCallback(dataUrl);
+        };
+        this.renderFinishedClose = function (dataUrl) {
+            _this.close();
+            _this.completeCallback(dataUrl);
+        };
+        this.positionLogo = function () {
+            if (_this.logoUI) {
+                _this.logoUI.style.left = _this.targetRect.left + 10 + "px";
+                _this.logoUI.style.top = _this.targetRect.top +
+                    _this.target.offsetHeight -
+                    _this.logoUI.clientHeight -
+                    10 + "px";
+            }
+        };
+        this.adLogo = function () {
+            _this.logoUI = document.createElement('div');
+            _this.logoUI.className = 'fc-whiteboardlogo';
+            var link = document.createElement('a');
+            link.href = 'https://markerjs.com/';
+            link.target = '_blank';
+            link.innerHTML = markerjs_logo_m_svg_1.default;
+            link.title = 'Powered by marker.js';
+            _this.logoUI.appendChild(link);
+            document.body.appendChild(_this.logoUI);
+            _this.logoUI.style.position = 'absolute';
+            _this.positionLogo();
+        };
+        this.target = target;
+        this.width = target.clientWidth;
+        this.height = target.clientHeight;
+        this.markers = [];
+        this.activeMarker = null;
+    }
+    return MarkerArea;
+}());
+exports.MarkerArea = MarkerArea;

dist/cjs/render/Renderer.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var Renderer = (function () {
+    function Renderer() {
+    }
+    Renderer.prototype.rasterize = function (target, markerImage, done) {
+        var canvas = document.createElement('canvas');
+        canvas.width = markerImage.width.baseVal.value;
+        canvas.height = markerImage.height.baseVal.value;
+        var data = markerImage.outerHTML;
+        var ctx = canvas.getContext('2d');
+        if (!ctx) {
+            throw new Error('Invalid ctx');
+        }
+        ctx.drawImage(target, 0, 0, canvas.width, canvas.height);
+        var DOMURL = window.URL;
+        var img = new Image(canvas.width, canvas.height);
+        img.setAttribute('crossOrigin', 'anonymous');
+        var blob = new Blob([data], { type: 'image/svg+xml' });
+        var url = DOMURL.createObjectURL(blob);
+        img.onload = function () {
+            ctx.drawImage(img, 0, 0);
+            DOMURL.revokeObjectURL(url);
+            done(canvas.toDataURL('image/png'));
+        };
+        img.src = url;
+    };
+    return Renderer;
+}());
+exports.Renderer = Renderer;

dist/cjs/toolbar/Toolbar.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var ToolbarButton_1 = require("./ToolbarButton");
+var Toolbar = (function () {
+    function Toolbar(toolbarItems, clickHandler) {
+        var _this = this;
+        this.getUI = function () {
+            _this.toolbarUI = document.createElement('div');
+            _this.toolbarUI.className = 'fc-whiteboardtoolbar';
+            for (var _i = 0, _a = _this.toolbarItems; _i < _a.length; _i++) {
+                var toolbarItem = _a[_i];
+                var toolbarButton = new ToolbarButton_1.ToolbarButton(toolbarItem, _this.clickHandler);
+                _this.toolbarUI.appendChild(toolbarButton.getElement());
+            }
+            return _this.toolbarUI;
+        };
+        this.toolbarItems = toolbarItems;
+        this.clickHandler = clickHandler;
+    }
+    return Toolbar;
+}());
+exports.Toolbar = Toolbar;

dist/cjs/toolbar/ToolbarButton.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var ToolbarButton = (function () {
+    function ToolbarButton(toolbarItem, clickHandler) {
+        var _this = this;
+        this.getElement = function () {
+            var div = document.createElement('div');
+            if (_this.toolbarItem.name !== 'separator') {
+                div.className = 'fc-whiteboardtoolbar-button';
+                if (_this.clickHandler) {
+                    div.addEventListener('click', function (ev) {
+                        if (_this.clickHandler) {
+                            _this.clickHandler(ev, _this.toolbarItem);
+                        }
+                    });
+                }
+                if (_this.toolbarItem.icon) {
+                    div.title = _this.toolbarItem.tooltipText;
+                    div.innerHTML = _this.toolbarItem.icon;
+                }
+                else {
+                    div.innerText = _this.toolbarItem.tooltipText;
+                }
+            }
+            else {
+                div.className = 'fc-whiteboardtoolbar-separator';
+            }
+            return div;
+        };
+        this.toolbarItem = toolbarItem;
+        if (clickHandler) {
+            this.clickHandler = clickHandler;
+        }
+    }
+    return ToolbarButton;
+}());
+exports.ToolbarButton = ToolbarButton;

dist/cjs/toolbar/ToolbarItem.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

dist/cjs/utils/SvgHelper/index.js

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var SvgHelper = (function () {
+    function SvgHelper() {
+    }
+    SvgHelper.createRect = function (width, height, attributes) {
+        var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+        rect.setAttribute('width', width.toString());
+        rect.setAttribute('height', height.toString());
+        if (attributes) {
+            SvgHelper.setAttributes(rect, attributes);
+        }
+        return rect;
+    };
+    SvgHelper.createLine = function (x1, y1, x2, y2, attributes) {
+        var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+        line.setAttribute('x1', x1.toString());
+        line.setAttribute('y1', y1.toString());
+        line.setAttribute('x2', x2.toString());
+        line.setAttribute('y2', y2.toString());
+        if (attributes) {
+            SvgHelper.setAttributes(line, attributes);
+        }
+        return line;
+    };
+    SvgHelper.createPolygon = function (points, attributes) {
+        var polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
+        polygon.setAttribute('points', points);
+        if (attributes) {
+            SvgHelper.setAttributes(polygon, attributes);
+        }
+        return polygon;
+    };
+    SvgHelper.createCircle = function (radius, attributes) {
+        var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+        circle.setAttribute('cx', (radius / 2).toString());
+        circle.setAttribute('cy', (radius / 2).toString());
+        circle.setAttribute('r', radius.toString());
+        if (attributes) {
+            SvgHelper.setAttributes(circle, attributes);
+        }
+        return circle;
+    };
+    SvgHelper.createGroup = function (attributes) {
+        var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+        if (attributes) {
+            SvgHelper.setAttributes(g, attributes);
+        }
+        return g;
+    };
+    SvgHelper.setAttributes = function (el, attributes) {
+        for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {
+            var _a = attributes_1[_i], attr = _a[0], value = _a[1];
+            el.setAttribute(attr, value);
+        }
+    };
+    SvgHelper.createTransform = function () {
+        var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        return svg.createSVGTransform();
+    };
+    SvgHelper.createDefs = function () {
+        var defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
+        return defs;
+    };
+    SvgHelper.createMarker = function (id, orient, markerWidth, markerHeight, refX, refY, markerElement) {
+        var marker = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
+        SvgHelper.setAttributes(marker, [
+            ['id', id],
+            ['orient', orient],
+            ['markerWidth', markerWidth.toString()],
+            ['markerHeight', markerHeight.toString()],
+            ['refX', refX.toString()],
+            ['refY', refY.toString()]
+        ]);
+        marker.appendChild(markerElement);
+        return marker;
+    };
+    SvgHelper.createText = function (attributes) {
+        var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+        text.setAttribute('x', '0');
+        text.setAttribute('y', '0');
+        if (attributes) {
+            SvgHelper.setAttributes(text, attributes);
+        }
+        return text;
+    };
+    SvgHelper.createTSpan = function (text, attributes) {
+        var tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
+        tspan.textContent = text;
+        if (attributes) {
+            SvgHelper.setAttributes(tspan, attributes);
+        }
+        return tspan;
+    };
+    return SvgHelper;
+}());
+exports.SvgHelper = SvgHelper;

dist/index.js

@@ -0,0 +1 @@
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var n=t();for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(window,function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t){}])});

dist/types/markers/arrow/ArrowMarker.d.ts

@@ -0,0 +1,6 @@
+import { LineMarkerBase } from '../line/LineMarkerBase';
+export declare class ArrowMarker extends LineMarkerBase {
+  static createMarker: () => LineMarkerBase;
+  private readonly ARROW_SIZE;
+  protected setup(): void;
+}

dist/types/markers/arrow/ArrowMarkerToolbarItem.d.ts

@@ -0,0 +1,8 @@
+import { ToolbarItem } from '../../toolbar/ToolbarItem';
+import { ArrowMarker } from './ArrowMarker';
+export declare class ArrowMarkerToolbarItem implements ToolbarItem {
+    name: string;
+    tooltipText: string;
+    icon: string;
+    markerType: typeof ArrowMarker;
+}

dist/types/markers/base/MarkerBase.d.ts

@@ -0,0 +1,27 @@
+export declare class MarkerBase {
+  static createMarker: () => MarkerBase;
+  visual: SVGGElement;
+  renderVisual: SVGGElement;
+  onSelected: (marker: MarkerBase) => void;
+  defs: SVGElement[];
+  protected width: number;
+  protected height: number;
+  protected isActive: boolean;
+  protected isResizing: boolean;
+  protected previousMouseX: number;
+  protected previousMouseY: number;
+  private isDragging;
+  manipulate: (ev: MouseEvent) => void;
+  endManipulation(): void;
+  select(): void;
+  deselect(): void;
+  protected setup(): void;
+  protected addToVisual: (el: SVGElement) => void;
+  protected addToRenderVisual: (el: SVGElement) => void;
+  protected resize(x: number, y: number): void;
+  protected onTouch(ev: TouchEvent): void;
+  private mouseDown;
+  private mouseUp;
+  private mouseMove;
+  private move;
+}

dist/types/markers/base/RectangularMarkerBase.d.ts

@@ -0,0 +1,25 @@
+import { MarkerBase } from './MarkerBase';
+export declare class RectangularMarkerBase extends MarkerBase {
+  static createMarker: () => RectangularMarkerBase;
+  protected MIN_SIZE: number;
+  private controlBox;
+  private readonly CB_DISTANCE;
+  private controlRect;
+  private controlGrips;
+  private activeGrip;
+  endManipulation(): void;
+  select(): void;
+  deselect(): void;
+  protected setup(): void;
+  protected resize(x: number, y: number): void;
+  protected onTouch(ev: TouchEvent): void;
+  private addControlBox;
+  private adjustControlBox;
+  private addControlGrips;
+  private createGrip;
+  private positionGrips;
+  private positionGrip;
+  private gripMouseDown;
+  private gripMouseUp;
+  private gripMouseMove;
+}

dist/types/markers/base/RectangularMarkerGrips.d.ts

@@ -0,0 +1,12 @@
+import { ResizeGrip } from './ResizeGrip';
+export declare class RectangularMarkerGrips {
+    topLeft: ResizeGrip;
+    topCenter: ResizeGrip;
+    topRight: ResizeGrip;
+    centerLeft: ResizeGrip;
+    centerRight: ResizeGrip;
+    bottomLeft: ResizeGrip;
+    bottomCenter: ResizeGrip;
+    bottomRight: ResizeGrip;
+    findGripByVisual: (gripVisual: SVGGraphicsElement) => ResizeGrip;
+}

dist/types/markers/base/ResizeGrip.d.ts

@@ -0,0 +1,5 @@
+export declare class ResizeGrip {
+    visual: SVGGraphicsElement;
+    readonly GRIP_SIZE = 10;
+    constructor();
+}

dist/types/markers/cover/CoverMarker.d.ts

@@ -0,0 +1,5 @@
+import { RectMarkerBase } from '../rect/RectMarkerBase';
+export declare class CoverMarker extends RectMarkerBase {
+  static createMarker: () => RectMarkerBase;
+  protected setup(): void;
+}

dist/types/markers/cover/CoverMarkerToolbarItem.d.ts

@@ -0,0 +1,8 @@
+import { ToolbarItem } from '../../toolbar/ToolbarItem';
+import { CoverMarker } from './CoverMarker';
+export declare class CoverMarkerToolbarItem implements ToolbarItem {
+    name: string;
+    tooltipText: string;
+    icon: string;
+    markerType: typeof CoverMarker;
+}

dist/types/markers/highlight/HighlightMarker.d.ts

@@ -0,0 +1,5 @@
+import { RectMarkerBase } from '../rect/RectMarkerBase';
+export declare class HighlightMarker extends RectMarkerBase {
+  static createMarker: () => RectMarkerBase;
+  protected setup(): void;
+}

dist/types/markers/highlight/HighlightMarkerToolbarItem.d.ts

@@ -0,0 +1,8 @@
+import { ToolbarItem } from '../../toolbar/ToolbarItem';
+import { HighlightMarker } from './HighlightMarker';
+export declare class HighlightMarkerToolbarItem implements ToolbarItem {
+    name: string;
+    tooltipText: string;
+    icon: string;
+    markerType: typeof HighlightMarker;
+}

dist/types/markers/line/LineMarker.d.ts

@@ -0,0 +1,5 @@
+import { LineMarkerBase } from './LineMarkerBase';
+export declare class LineMarker extends LineMarkerBase {
+  static createMarker: () => LineMarkerBase;
+  protected setup(): void;
+}

dist/types/markers/line/LineMarkerBase.d.ts

@@ -0,0 +1,30 @@
+import { MarkerBase } from '../base/MarkerBase';
+export declare class LineMarkerBase extends MarkerBase {
+  static createMarker: () => LineMarkerBase;
+  protected markerLine: SVGLineElement;
+  private readonly MIN_LENGTH;
+  private markerBgLine;
+  private controlBox;
+  private controlGrip1;
+  private controlGrip2;
+  private activeGrip;
+  private x1;
+  private y1;
+  private x2;
+  private y2;
+  endManipulation(): void;
+  select(): void;
+  deselect(): void;
+  protected setup(): void;
+  protected resize(x: number, y: number): void;
+  private getLineLength;
+  private addControlBox;
+  private adjustControlBox;
+  private addControlGrips;
+  private createGrip;
+  private positionGrips;
+  private positionGrip;
+  private gripMouseDown;
+  private gripMouseUp;
+  private gripMouseMove;
+}

dist/types/markers/line/LineMarkerToolbarItem.d.ts

@@ -0,0 +1,8 @@
+import { ToolbarItem } from '../../toolbar/ToolbarItem';
+import { LineMarker } from './LineMarker';
+export declare class LineMarkerToolbarItem implements ToolbarItem {
+    name: string;
+    tooltipText: string;
+    icon: string;
+    markerType: typeof LineMarker;
+}

dist/types/markers/rect/RectMarker.d.ts

@@ -0,0 +1,5 @@
+import { RectMarkerBase } from './RectMarkerBase';
+export declare class RectMarker extends RectMarkerBase {
+  static createMarker: () => RectMarkerBase;
+  protected setup(): void;
+}

dist/types/markers/rect/RectMarkerBase.d.ts

@@ -0,0 +1,7 @@
+import { RectangularMarkerBase } from '../base/RectangularMarkerBase';
+export declare class RectMarkerBase extends RectangularMarkerBase {
+  static createMarker: () => RectMarkerBase;
+  private markerRect;
+  protected setup(): void;
+  protected resize(x: number, y: number): void;
+}

dist/types/markers/rect/RectMarkerToolbarItem.d.ts

@@ -0,0 +1,8 @@
+import { ToolbarItem } from "../../toolbar/ToolbarItem";
+import { RectMarker } from "./RectMarker";
+export declare class RectMarkerToolbarItem implements ToolbarItem {
+    name: string;
+    tooltipText: string;
+    icon: string;
+    markerType: typeof RectMarker;
+}

dist/types/markers/text/TextMarker.d.ts

@@ -0,0 +1,21 @@
+import { RectangularMarkerBase } from '../base/RectangularMarkerBase';
+export declare class TextMarker extends RectangularMarkerBase {
+  static createMarker: () => TextMarker;
+  protected readonly MIN_SIZE = 50;
+  private readonly DEFAULT_TEXT;
+  private text;
+  private textElement;
+  private inDoubleTap;
+  private editor;
+  private editorTextArea;
+  protected setup(): void;
+  protected resize(x: number, y: number): void;
+  private renderText;
+  private sizeText;
+  private onDblClick;
+  private onTap;
+  private showEditor;
+  private onEditorOkClick;
+  private closeEditor;
+  private onEditorKeyDown;
+}

dist/types/markers/text/TextMarkerToolbarItem.d.ts

@@ -0,0 +1,8 @@
+import { ToolbarItem } from "../../toolbar/ToolbarItem";
+import { TextMarker } from "./TextMarker";
+export declare class TextMarkerToolbarItem implements ToolbarItem {
+    name: string;
+    tooltipText: string;
+    icon: string;
+    markerType: typeof TextMarker;
+}

dist/types/render/Activator.d.ts

@@ -0,0 +1,4 @@
+export declare class Activator {
+    static key: string;
+    static readonly isLicensed: boolean;
+}

dist/types/render/MarkerArea.d.ts

@@ -0,0 +1,55 @@
+import { MarkerBase } from '../markers/base/MarkerBase';
+export declare class MarkerArea {
+  private target;
+  private markerImage;
+  private markerImageHolder;
+  private defs;
+  private targetRect;
+  private width;
+  private height;
+  private markers;
+  private activeMarker;
+  private toolbar;
+  private toolbarUI;
+  private logoUI;
+  private completeCallback;
+  private cancelCallback;
+  private toolbars;
+  private scale;
+  constructor(target: HTMLImageElement);
+  show: (
+    completeCallback: (dataUrl: string) => void,
+    cancelCallback?: (() => void) | undefined
+  ) => void;
+  open: () => void;
+  render: (
+    completeCallback: (dataUrl: string) => void,
+    cancelCallback?: (() => void) | undefined
+  ) => void;
+  close: () => void;
+  addMarker: (markerType: typeof MarkerBase) => void;
+  deleteActiveMarker: () => void;
+  private setTargetRect;
+  private startRender;
+  private attachEvents;
+  private mouseDown;
+  private mouseMove;
+  private mouseUp;
+  private initMarkerCanvas;
+  private adjustUI;
+  private adjustSize;
+  private positionUI;
+  private positionMarkerImage;
+  private positionToolbar;
+  private showUI;
+  private setStyles;
+  private toolbarClick;
+  private selectMarker;
+  private deleteMarker;
+  private complete;
+  private cancel;
+  private renderFinished;
+  private renderFinishedClose;
+  private positionLogo;
+  private adLogo;
+}

dist/types/render/Renderer.d.ts

@@ -0,0 +1,3 @@
+export declare class Renderer {
+    rasterize(target: HTMLImageElement, markerImage: SVGSVGElement, done: (dataUrl: string) => void): void;
+}

dist/types/toolbar/Toolbar.d.ts

@@ -0,0 +1,8 @@
+import { ToolbarItem } from './ToolbarItem';
+export declare class Toolbar {
+    private toolbarItems;
+    private toolbarUI;
+    private clickHandler;
+    constructor(toolbarItems: ToolbarItem[], clickHandler: (ev: MouseEvent, toolbarItem: ToolbarItem) => void);
+    getUI: () => HTMLElement;
+}

dist/types/toolbar/ToolbarButton.d.ts

@@ -0,0 +1,7 @@
+import { ToolbarItem } from './ToolbarItem';
+export declare class ToolbarButton {
+    private toolbarItem;
+    private clickHandler;
+    constructor(toolbarItem: ToolbarItem, clickHandler?: (ev: MouseEvent, toolbarItem: ToolbarItem) => void);
+    getElement: () => HTMLElement;
+}

dist/types/toolbar/ToolbarItem.d.ts

@@ -0,0 +1,7 @@
+import { MarkerBase } from '../markers/base/MarkerBase';
+export interface ToolbarItem {
+  name: string;
+  tooltipText: string;
+  icon?: string;
+  markerType?: typeof MarkerBase;
+}

dist/types/utils/SvgHelper/index.d.ts

@@ -0,0 +1,13 @@
+export declare class SvgHelper {
+    static createRect: (width: string | number, height: string | number, attributes?: [string, string][] | undefined) => SVGRectElement;
+    static createLine: (x1: string | number, y1: string | number, x2: string | number, y2: string | number, attributes?: [string, string][] | undefined) => SVGLineElement;
+    static createPolygon: (points: string, attributes?: [string, string][] | undefined) => SVGPolygonElement;
+    static createCircle: (radius: number, attributes?: [string, string][] | undefined) => SVGCircleElement;
+    static createGroup: (attributes?: [string, string][] | undefined) => SVGGElement;
+    static setAttributes: (el: SVGElement, attributes: [string, string][]) => void;
+    static createTransform: () => SVGTransform;
+    static createDefs: () => SVGDefsElement;
+    static createMarker: (id: string, orient: string, markerWidth: string | number, markerHeight: string | number, refX: string | number, refY: string | number, markerElement: SVGGraphicsElement) => SVGMarkerElement;
+    static createText: (attributes?: [string, string][] | undefined) => SVGTextElement;
+    static createTSpan: (text: string, attributes?: [string, string][] | undefined) => SVGTSpanElement;
+}

example/index.ts

@@ -0,0 +1,19 @@
+import { eventHub } from './../src/event/EventHub';
+import { WhitePage } from './../src/board/WhitePage/index';
+
+const page1 = new WhitePage(document.getElementById('image1') as HTMLImageElement, { eventHub });
+
+page1.drawboard.show((dataUrl: string) => {
+  const res = document.getElementById('resultImage') as HTMLImageElement;
+  res.src = dataUrl;
+});
+
+const page2 = new WhitePage(document.getElementById('image2') as HTMLImageElement, {
+  mode: 'mirror',
+  eventHub
+});
+
+page2.drawboard.show((dataUrl: string) => {
+  const res = document.getElementById('resultImage') as HTMLImageElement;
+  res.src = dataUrl;
+});

example/types.d.ts

@@ -0,0 +1,9 @@
+declare module '*.less' {
+  const styles: Record<string, string>;
+  export = styles;
+}
+
+declare module '*.css' {
+  const content: any;
+  export default content;
+}

package.json

@@ -0,0 +1,89 @@
+{
+  "keywords": [
+    "webpack",
+    "react"
+  ],
+  "name": "whiteboard",
+  "version": "0.0.1",
+  "private": true,
+  "main": "dist/index.js",
+  "types": "dist/types/index.d.ts",
+  "prettier": {
+    "printWidth": 100,
+    "singleQuote": true
+  },
+  "lint-staged": {
+    "*.{ts,tsx,scss,less,md}": [
+      "prettier --write",
+      "git add"
+    ]
+  },
+  "scripts": {
+    "clean": "rimraf dist",
+    "build": "npm run clean && npm run build:cjs && npm run copy && npm run build:umd",
+    "build:cjs": "tsc --project ./tsconfig.cjs.json",
+    "build:umd": "NODE_ENV=production webpack --config ./scripts/webpack/webpack.config.umd.js",
+    "copy": "copyfiles -u 1 './src/**/*.(less|svg)' dist/cjs/",
+    "dev": "webpack-dev-server --config ./scripts/webpack/webpack.config.dev.js --hot",
+    "start": "npm run dev"
+  },
+  "dependencies": {
+    "eventemitter3": "^3.1.0",
+    "prop-types": "^15.6.2",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
+    "uuid": "^3.3.2"
+  },
+  "devDependencies": {
+    "@types/classnames": "^2.2.7",
+    "@types/eventemitter3": "^2.0.2",
+    "@types/jest": "23.3.12",
+    "@types/react-dom": "^16.0.11",
+    "@types/react-router-dom": "^4.3.1",
+    "@types/uuid": "^3.4.4",
+    "autoprefixer": "9.4.4",
+    "awesome-typescript-loader": "^5.2.1",
+    "classnames": "^2.2.6",
+    "copy-webpack-plugin": "^4.6.0",
+    "copyfiles": "^2.1.0",
+    "css-loader": "2.1.0",
+    "enzyme": "^3.8.0",
+    "file-loader": "3.0.1",
+    "fork-ts-checker-webpack-plugin": "^0.5.2",
+    "html-webpack-plugin": "^3.2.0",
+    "html-webpack-template": "^6.2.0",
+    "jest": "23.6.0",
+    "jest-cli": "23.6.0",
+    "json-server": "0.14.2",
+    "lerna": "^3.8.5",
+    "less": "^3.9.0",
+    "less-loader": "^4.1.0",
+    "mini-css-extract-plugin": "^0.5.0",
+    "optimize-css-assets-webpack-plugin": "5.0.1",
+    "parallelshell": "^3.0.2",
+    "postcss-loader": "3.0.0",
+    "react-hot-loader": "^4.6.3",
+    "react-router-dom": "^4.3.1",
+    "resolve-url-loader": "3.0.0",
+    "rimraf": "^2.6.3",
+    "style-loader": "0.23.1",
+    "svg-inline-loader": "^0.8.0",
+    "ts-jest": "^23.10.5",
+    "ts-loader": "5.3.3",
+    "tslint": "^5.12.0",
+    "tslint-config-prettier": "^1.17.0",
+    "tslint-react": "^3.6.0",
+    "typescript": "3.2.2",
+    "uglifyjs-webpack-plugin": "2.1.1",
+    "url-loader": "^1.1.2",
+    "wasm-loader": "^1.3.0",
+    "webpack": "^4.28.3",
+    "webpack-cli": "3.2.1",
+    "webpack-dashboard": "2.0.0",
+    "webpack-dev-server": "^3.1.14",
+    "webpack-merge": "^4.2.1"
+  },
+  "files": [
+    "dist/"
+  ]
+}

postcss.config.js

@@ -0,0 +1,5 @@
+const autoprefixer = require('autoprefixer');
+
+module.exports = {
+  plugins: [autoprefixer({ browsers: ['last 4 versions'], flexbox: 'no-2009' })]
+};

public/index.html

@@ -0,0 +1,39 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>fc-whiteboard</title>
+    <style>
+      .image {
+        width: 500px;
+        height: 500px;
+        top: 100px;
+        position: absolute;
+      }
+    </style>
+  </head>
+  <body>
+    <body>
+      <noscript>You need to enable JavaScript to run this app.</noscript>
+      <div id="root">
+        <img
+          id="image1"
+          class="image"
+          style="left:100px"
+          src="https://i.postimg.cc/SNDkCfXD/image.png"
+        />
+        <img
+          id="image2"
+          class="image"
+          style="left:800px"
+          src="https://i.postimg.cc/SNDkCfXD/image.png"
+        />
+      </div>
+      <script>
+        window.__DEV_APP__ = {};
+      </script>
+      <script src="./index.js"></script>
+    </body>
+  </body>
+</html>

public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "RTW",
+  "name": "Micro Frontend Boilerplate",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

scripts/webpack/webpack.config.dev.js

@@ -0,0 +1,19 @@
+const path = require('path');
+const merge = require('webpack-merge');
+
+const devConfig = require('../../../../scripts/webpack/webpack.config.dev');
+
+module.exports = merge(devConfig, {
+  entry: {
+    index: path.resolve(__dirname, '../../example')
+  },
+  devServer: {
+    contentBase: path.resolve(__dirname, '../../public')
+  },
+  resolve: {
+    alias: {
+      react: path.resolve('./node_modules/react'),
+      'react-dom': path.resolve('./node_modules/react-dom')
+    }
+  }
+});

scripts/webpack/webpack.config.umd.js

@@ -0,0 +1,10 @@
+const merge = require('webpack-merge');
+const path = require('path');
+
+const umdConfig = require('../../../../scripts/webpack/webpack.config.umd');
+
+module.exports = merge(umdConfig, {
+  entry: {
+    index: path.resolve(__dirname, '../../src/index.ts')
+  }
+});

src/assets/arrow.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M313.941 216H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h301.941v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971V216z"/></svg>
+<!--
+Font Awesome Free 5.5.0 by @fontawesome - https://fontawesome.com
+License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+-->

src/assets/check.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"/></svg>
+<!--
+Font Awesome Free 5.5.0 by @fontawesome - https://fontawesome.com
+License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+-->

src/assets/cover.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48z"/></svg>
+<!--
+Font Awesome Free 5.5.0 by @fontawesome - https://fontawesome.com
+License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+-->

src/assets/eraser.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M497.941 273.941c18.745-18.745 18.745-49.137 0-67.882l-160-160c-18.745-18.745-49.136-18.746-67.883 0l-256 256c-18.745 18.745-18.745 49.137 0 67.882l96 96A48.004 48.004 0 0 0 144 480h356c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12H355.883l142.058-142.059zm-302.627-62.627l137.373 137.373L265.373 416H150.628l-80-80 124.686-124.686z"/></svg>
+<!--
+Font Awesome Free 5.5.0 by @fontawesome - https://fontawesome.com
+License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+-->

src/assets/highlight.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 544 512"><path d="M0 479.98L99.92 512l35.45-35.45-67.04-67.04L0 479.98zm124.61-240.01a36.592 36.592 0 0 0-10.79 38.1l13.05 42.83-50.93 50.94 96.23 96.23 50.86-50.86 42.74 13.08c13.73 4.2 28.65-.01 38.15-10.78l35.55-41.64-173.34-173.34-41.52 35.44zm403.31-160.7l-63.2-63.2c-20.49-20.49-53.38-21.52-75.12-2.35L190.55 183.68l169.77 169.78L530.27 154.4c19.18-21.74 18.15-54.63-2.35-75.13z"/></svg>
+<!--
+Font Awesome Free 5.5.0 by @fontawesome - https://fontawesome.com
+License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+-->

src/assets/line.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M594.53 508.63L6.18 53.9c-6.97-5.42-8.23-15.47-2.81-22.45L23.01 6.18C28.43-.8 38.49-2.06 45.47 3.37L633.82 458.1c6.97 5.42 8.23 15.47 2.81 22.45l-19.64 25.27c-5.42 6.98-15.48 8.23-22.46 2.81z"/></svg>
+<!--
+Font Awesome Free 5.5.0 by @fontawesome - https://fontawesome.com
+License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+-->

src/assets/mouse-pointer.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M302.189 329.126H196.105l55.831 135.993c3.889 9.428-.555 19.999-9.444 23.999l-49.165 21.427c-9.165 4-19.443-.571-23.332-9.714l-53.053-129.136-86.664 89.138C18.729 472.71 0 463.554 0 447.977V18.299C0 1.899 19.921-6.096 30.277 5.443l284.412 292.542c11.472 11.179 3.007 31.141-12.5 31.141z"/></svg>
+<!--
+Font Awesome Free 5.5.0 by @fontawesome - https://fontawesome.com
+License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+-->

src/assets/rect.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-6 400H54c-3.3 0-6-2.7-6-6V86c0-3.3 2.7-6 6-6h340c3.3 0 6 2.7 6 6v340c0 3.3-2.7 6-6 6z"/></svg>
+<!--
+Font Awesome Free 5.5.0 by @fontawesome - https://fontawesome.com
+License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+-->

src/assets/text.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M152 416h-24.013l26.586-80.782H292.8L319.386 416H296c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h136c8.837 0 16-7.163 16-16v-32c0-8.837-7.163-16-16-16h-26.739L275.495 42.746A16 16 0 0 0 260.382 32h-72.766a16 16 0 0 0-15.113 10.746L42.739 416H16c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h136c8.837 0 16-7.163 16-16v-32c0-8.837-7.163-16-16-16zm64.353-271.778c4.348-15.216 6.61-28.156 7.586-34.644.839 6.521 2.939 19.476 7.727 34.706l41.335 124.006h-98.619l41.971-124.068z"/></svg>
+<!--
+Font Awesome Free 5.5.0 by @fontawesome - https://fontawesome.com
+License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+-->

src/assets/times.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"/></svg>
+<!--
+Font Awesome Free 5.5.0 by @fontawesome - https://fontawesome.com
+License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+-->

src/board/Drawboard/index.less

@@ -0,0 +1,116 @@
+.fc-whiteboard-logo {
+  display: inline-block;
+  margin: 0px;
+  padding: 0px;
+
+  fill: #333333;
+}
+
+.fc-whiteboard-logo a {
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  padding: 3px;
+  width: 20px;
+  height: 20px;
+}
+
+.fc-whiteboard-logo a:hover {
+  fill: #ff8080;
+}
+
+.fc-whiteboard-toolbar {
+  background-color: #cccccc;
+  padding: 0px 5px;
+  margin: 0px;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+
+  display: grid;
+  grid-template-columns: repeat(20, auto);
+}
+
+.fc-whiteboard-toolbar-button,
+.fc-whiteboard-toolbar-logo a {
+  display: inline-block;
+  margin: 2px;
+  padding: 3px;
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  border-radius: 2px;
+  border-bottom: transparent solid 1px;
+  border-right: transparent solid 1px;
+
+  fill: #333333;
+
+  display: grid;
+  align-items: center;
+  justify-items: center;
+}
+
+.fc-whiteboard-toolbar-separator {
+  margin: 5px 5px;
+  border: 1px solid #dddddd;
+}
+
+.fc-whiteboard-toolbar-button:hover,
+.fc-whiteboard-toolbar-logo a:hover {
+  background-color: #eeeeee;
+  background: radial-gradient(#eeeeee, #cccccc);
+
+  fill: #ff8080;
+}
+
+.fc-whiteboard-toolbar-button svg {
+  height: 16px;
+}
+
+.fc-whiteboard-text-editor {
+  position: fixed;
+  z-index: 20000;
+  left: 0px;
+  top: 0px;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.9);
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.fc-whiteboard-text-editor textarea {
+  width: 50%;
+  min-width: 50px;
+  max-width: 500px;
+  height: 50%;
+  min-height: 50px;
+  max-height: 500px;
+}
+
+.fc-whiteboard-text-editor .fc-whiteboard-text-editor-button-bar {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  width: 50%;
+  min-width: 50px;
+  max-width: 500px;
+  padding-top: 10px;
+}
+.fc-whiteboard-text-editor .fc-whiteboard-text-editor-button {
+  display: grid;
+  align-items: center;
+  padding: 0px;
+  margin-left: 15px;
+  width: 20px;
+  height: 20px;
+
+  cursor: pointer;
+
+  fill: #888888;
+}
+.fc-whiteboard-text-editor .fc-whiteboard-text-editor-button:hover {
+  fill: #ff8080;
+}

src/board/Drawboard/index.ts

@@ -0,0 +1,440 @@
+import { BaseMarker } from './../../markers/BaseMarker/index';
+import { lineMarkerToolbarItem } from './../../toolbar/toolbar-items';
+import { WhitePage } from './../WhitePage/index';
+import { onChangeFunc } from './../../event/Event';
+import { uuid } from './../../utils/uuid';
+import { SvgHelper } from '../../renderer/SvgHelper';
+import { Synthetizer } from '../../renderer/Synthetizer';
+import { Toolbar } from '../../toolbar/Toolbar';
+import { ToolbarItem } from '../../toolbar/ToolbarItem';
+
+import './index.less';
+import {
+  arrowMarkerToolbarItem,
+  highlightMarkerToolbarItem,
+  textMarkerToolbarItem,
+  coverMarkerToolbarItem,
+  rectMarkerToolbarItem
+} from '../../toolbar/toolbar-items';
+
+const OkIcon = require('../../assets/check.svg');
+const DeleteIcon = require('../../assets/eraser.svg');
+const PointerIcon = require('../../assets/mouse-pointer.svg');
+const CloseIcon = require('../../assets/times.svg');
+
+export class Drawboard {
+  id: string = uuid();
+
+  /** 句柄 */
+  page: WhitePage;
+
+  private target: HTMLImageElement;
+  private markerImage: SVGSVGElement;
+  private markerImageHolder: HTMLDivElement;
+  private defs: SVGDefsElement;
+
+  private targetRect: ClientRect;
+  private width: number;
+  private height: number;
+
+  private markers: BaseMarker[];
+  get markerMap(): { [key: string]: BaseMarker } {
+    const map = {};
+    this.markers.forEach(marker => {
+      map[marker.id] = marker;
+    });
+    return map;
+  }
+  private activeMarker: BaseMarker | null;
+
+  private toolbar: Toolbar;
+  private toolbarUI: HTMLElement;
+
+  private completeCallback: (dataUrl: string) => void;
+  private cancelCallback: () => void;
+  private onChange: onChangeFunc = () => {};
+
+  private toolbars: ToolbarItem[] = [
+    {
+      icon: PointerIcon,
+      name: 'pointer',
+      tooltipText: 'Pointer'
+    },
+    {
+      icon: DeleteIcon,
+      name: 'delete',
+      tooltipText: 'Delete'
+    },
+    {
+      name: 'separator',
+      tooltipText: ''
+    },
+    rectMarkerToolbarItem,
+    coverMarkerToolbarItem,
+    highlightMarkerToolbarItem,
+    lineMarkerToolbarItem,
+    arrowMarkerToolbarItem,
+    textMarkerToolbarItem,
+    {
+      name: 'separator',
+      tooltipText: ''
+    },
+    {
+      icon: OkIcon,
+      name: 'ok',
+      tooltipText: 'OK'
+    },
+    {
+      icon: CloseIcon,
+      name: 'close',
+      tooltipText: 'Close'
+    }
+  ];
+
+  private scale = 1.0;
+
+  constructor(
+    page: WhitePage,
+    target: HTMLImageElement,
+    { onChange }: { onChange?: onChangeFunc } = {}
+  ) {
+    this.page = page;
+    this.target = target;
+    this.width = target.clientWidth;
+    this.height = target.clientHeight;
+
+    this.markers = [];
+    this.activeMarker = null;
+
+    if (onChange) {
+      this.onChange = onChange;
+    }
+  }
+
+  public show = (completeCallback: (dataUrl: string) => void, cancelCallback?: () => void) => {
+    this.completeCallback = completeCallback;
+
+    if (cancelCallback) {
+      this.cancelCallback = cancelCallback;
+    }
+
+    this.open();
+
+    if (this.page.mode !== 'mirror') {
+      this.showUI();
+    }
+  };
+
+  public open = () => {
+    this.setTargetRect();
+
+    this.initMarkerCanvas();
+    this.attachEvents();
+    this.setStyles();
+
+    window.addEventListener('resize', this.adjustUI);
+  };
+
+  public render = (completeCallback: (dataUrl: string) => void, cancelCallback?: () => void) => {
+    this.completeCallback = completeCallback;
+
+    if (cancelCallback) {
+      this.cancelCallback = cancelCallback;
+    }
+
+    this.selectMarker(null);
+    this.startRender(this.renderFinished);
+  };
+
+  public close = () => {
+    if (this.toolbarUI) {
+      document.body.removeChild(this.toolbarUI);
+    }
+    if (this.markerImage) {
+      document.body.removeChild(this.markerImageHolder);
+    }
+  };
+
+  public addMarker = (markerType: typeof BaseMarker, { id }: { id?: string } = {}) => {
+    const marker = markerType.createMarker();
+
+    if (id) {
+      marker.id = id;
+    }
+
+    marker.onSelected = this.selectMarker;
+    marker.onChange = this.onChange;
+
+    if (marker.defs && marker.defs.length > 0) {
+      for (const d of marker.defs) {
+        if (d.id && !this.markerImage.getElementById(d.id)) {
+          this.defs.appendChild(d);
+        }
+      }
+    }
+
+    // 触发事件流
+    this.onChange({
+      target: 'drawboard',
+      id: this.id,
+      event: 'add',
+      data: { type: marker.type, id: marker.id }
+    });
+
+    this.markers.push(marker);
+
+    this.selectMarker(marker);
+
+    this.markerImage.appendChild(marker.visual);
+
+    const bbox = marker.visual.getBBox();
+    const x = this.width / 2 / this.scale - bbox.width / 2;
+    const y = this.height / 2 / this.scale - bbox.height / 2;
+
+    const translate = marker.visual.transform.baseVal.getItem(0);
+    translate.setMatrix(translate.matrix.translate(x, y));
+    marker.visual.transform.baseVal.replaceItem(translate, 0);
+  };
+
+  public deleteActiveMarker = () => {
+    if (this.activeMarker) {
+      this.deleteMarker(this.activeMarker);
+    }
+  };
+
+  private setTargetRect = () => {
+    const targetRect = this.target.getBoundingClientRect() as DOMRect;
+    const bodyRect = document.body.parentElement!.getBoundingClientRect();
+    this.targetRect = {
+      left: targetRect.left - bodyRect.left,
+      top: targetRect.top - bodyRect.top
+    } as ClientRect;
+  };
+
+  private startRender = (done: (dataUrl: string) => void) => {
+    const renderer = new Synthetizer();
+    renderer.rasterize(this.target, this.markerImage, done);
+  };
+
+  private attachEvents = () => {
+    this.markerImage.addEventListener('mousedown', this.mouseDown);
+    this.markerImage.addEventListener('mousemove', this.mouseMove);
+    this.markerImage.addEventListener('mouseup', this.mouseUp);
+  };
+
+  private mouseDown = (ev: MouseEvent) => {
+    /* tslint:disable:no-bitwise */
+    if (this.activeMarker && (ev.buttons & 1) > 0) {
+      this.activeMarker.deselect();
+      this.activeMarker = null;
+    }
+  };
+
+  private mouseMove = (ev: MouseEvent) => {
+    /* tslint:disable:no-bitwise */
+    if (this.activeMarker && (ev.buttons & 1) > 0) {
+      this.activeMarker.manipulate(ev);
+    }
+  };
+
+  private mouseUp = (ev: MouseEvent) => {
+    if (this.activeMarker) {
+      this.activeMarker.endManipulation();
+    }
+  };
+
+  private initMarkerCanvas = () => {
+    this.markerImageHolder = document.createElement('div');
+    // fix for Edge's touch behavior
+    this.markerImageHolder.style.setProperty('touch-action', 'none');
+    this.markerImageHolder.style.setProperty('-ms-touch-action', 'none');
+
+    this.markerImage = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    this.markerImage.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+    this.markerImage.setAttribute('width', this.width.toString());
+    this.markerImage.setAttribute('height', this.height.toString());
+    this.markerImage.setAttribute(
+      'viewBox',
+      '0 0 ' + this.width.toString() + ' ' + this.height.toString()
+    );
+
+    this.markerImageHolder.style.position = 'absolute';
+    this.markerImageHolder.style.width = `${this.width}px`;
+    this.markerImageHolder.style.height = `${this.height}px`;
+    this.markerImageHolder.style.transformOrigin = 'top left';
+    this.positionMarkerImage();
+
+    this.defs = SvgHelper.createDefs();
+    this.markerImage.appendChild(this.defs);
+
+    this.markerImageHolder.appendChild(this.markerImage);
+
+    document.body.appendChild(this.markerImageHolder);
+  };
+
+  private adjustUI = (ev: UIEvent) => {
+    this.adjustSize();
+    this.positionUI();
+  };
+
+  private adjustSize = () => {
+    this.width = this.target.clientWidth;
+    this.height = this.target.clientHeight;
+
+    const scale = this.target.clientWidth / this.markerImageHolder.clientWidth;
+    if (scale !== 1.0) {
+      this.scale *= scale;
+      this.markerImageHolder.style.width = `${this.width}px`;
+      this.markerImageHolder.style.height = `${this.height}px`;
+
+      this.markerImageHolder.style.transform = `scale(${this.scale})`;
+    }
+  };
+
+  private positionUI = () => {
+    this.setTargetRect();
+    this.positionMarkerImage();
+    this.positionToolbar();
+  };
+
+  private positionMarkerImage = () => {
+    this.markerImageHolder.style.top = this.targetRect.top + 'px';
+    this.markerImageHolder.style.left = this.targetRect.left + 'px';
+  };
+
+  private positionToolbar = () => {
+    this.toolbarUI.style.left = `${this.targetRect.left +
+      this.target.offsetWidth -
+      this.toolbarUI.clientWidth}px`;
+    this.toolbarUI.style.top = `${this.targetRect.top - this.toolbarUI.clientHeight}px`;
+  };
+
+  private showUI = () => {
+    this.toolbar = new Toolbar(this.toolbars, this.toolbarClick);
+    this.toolbarUI = this.toolbar.getUI();
+    document.body.appendChild(this.toolbarUI);
+    this.toolbarUI.style.position = 'absolute';
+    this.positionToolbar();
+  };
+
+  private setStyles = () => {
+    const editorStyleSheet = document.createElementNS('http://www.w3.org/2000/svg', 'style');
+    editorStyleSheet.innerHTML = `
+            .rect-marker .render-visual {
+                stroke: #ff0000;
+                stroke-width: 3;
+                fill: transparent;
+            }
+            .cover-marker .render-visual {
+                stroke-width: 0;
+                fill: #000000;
+            }
+            .highlight-marker .render-visual {
+                stroke: transparent;
+                stroke-width: 0;
+                fill: #ffff00;
+                fill-opacity: 0.4;
+            }
+            .line-marker .render-visual {
+                stroke: #ff0000;
+                stroke-width: 3;
+                fill: transparent;
+            }
+            .arrow-marker .render-visual {
+                stroke: #ff0000;
+                stroke-width: 3;
+                fill: transparent;
+            }
+            .arrow-marker-tip {
+                stroke-width: 0;
+                fill: #ff0000;
+            }
+            .text-marker text {
+                fill: #ff0000;
+                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
+                    Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
+                    "Segoe UI Emoji", "Segoe UI Symbol";
+            }
+            .fc-whiteboard-rect-control-box .fc-whiteboard-rect-control-rect {
+                stroke: black;
+                stroke-width: 1;
+                stroke-opacity: 0.5;
+                stroke-dasharray: 3, 2;
+                fill: transparent;
+            }
+            .fc-whiteboard-control-grip {
+                fill: #cccccc;
+                stroke: #333333;
+                stroke-width: 2;
+            }
+        `;
+
+    this.markerImage.appendChild(editorStyleSheet);
+  };
+
+  private toolbarClick = (ev: MouseEvent, toolbarItem: ToolbarItem) => {
+    if (toolbarItem.markerType) {
+      this.addMarker(toolbarItem.markerType);
+    } else {
+      // command button
+      switch (toolbarItem.name) {
+        case 'delete': {
+          this.deleteActiveMarker();
+          break;
+        }
+        case 'pointer': {
+          if (this.activeMarker) {
+            this.selectMarker(null);
+          }
+          break;
+        }
+        case 'close': {
+          this.cancel();
+          break;
+        }
+        case 'ok': {
+          this.complete();
+          break;
+        }
+        default:
+          break;
+      }
+    }
+  };
+
+  private selectMarker = (marker: BaseMarker | null) => {
+    if (this.activeMarker && this.activeMarker !== marker) {
+      this.activeMarker.deselect();
+    }
+    this.activeMarker = marker;
+  };
+
+  private deleteMarker = (marker: BaseMarker) => {
+    this.markerImage.removeChild(marker.visual);
+    if (this.activeMarker === marker) {
+      this.activeMarker = null;
+    }
+    this.markers.splice(this.markers.indexOf(marker), 1);
+  };
+
+  private complete = () => {
+    this.selectMarker(null);
+    this.startRender(this.renderFinishedClose);
+  };
+
+  private cancel = () => {
+    this.close();
+    if (this.cancelCallback) {
+      this.cancelCallback();
+    }
+  };
+
+  private renderFinished = (dataUrl: string) => {
+    this.completeCallback(dataUrl);
+  };
+
+  private renderFinishedClose = (dataUrl: string) => {
+    this.close();
+    this.completeCallback(dataUrl);
+  };
+}

src/board/WhitePage/index.ts

@@ -0,0 +1,57 @@
+import { MarkerType } from './../../markers/types';
+import { ChangeEvent } from './../../event/Event';
+import { EventHub } from '../../event/EventHub';
+import { WhiteboardMode } from './../types';
+import { Drawboard } from './../Drawboard/index';
+import { uuid } from './../../utils/uuid';
+import { getMarkerByType } from '../../markers/types';
+
+/** 白板中的每一页 */
+export class WhitePage {
+  id: string = uuid();
+
+  drawboard: Drawboard;
+  mode: WhiteboardMode = 'master';
+
+  constructor(
+    target: HTMLImageElement,
+    { mode, eventHub }: { mode?: WhiteboardMode; eventHub?: EventHub } = {}
+  ) {
+    if (mode) {
+      this.mode = mode;
+    }
+
+    if (this.mode === 'master') {
+      if (eventHub) {
+        this.drawboard = new Drawboard(this, target, {
+          onChange: ev => eventHub.emit('change', ev)
+        });
+      } else {
+        this.drawboard = new Drawboard(this, target);
+      }
+    }
+
+    if (this.mode === 'mirror') {
+      if (!eventHub) {
+        throw new Error('Invalid eventHub');
+      }
+
+      this.drawboard = new Drawboard(this, target);
+
+      eventHub.on('change', (ev: ChangeEvent) => {
+        if (ev.event === 'add') {
+          const data: { id: string; type: MarkerType } = ev.data as {
+            id: string;
+            type: MarkerType;
+          };
+          this.drawboard.addMarker(getMarkerByType(data.type), { id: data.id });
+        }
+
+        if (ev.event === 'move' || ev.event === 'resize') {
+          const marker = this.drawboard.markerMap[ev.id];
+          marker.reactToManipulation(ev.event, ev.data as any);
+        }
+      });
+    }
+  }
+}

src/board/Whiteboard/index.ts

@@ -0,0 +1,15 @@
+import { WhiteboardMode, WhitePageSource } from '../types';
+
+export class Whiteboard {
+  mode: WhiteboardMode = 'master';
+  sources: WhitePageSource[] = [];
+
+  /** @region UI Options */
+  // 是否为全屏模式
+  isFullscreen: boolean = false;
+
+  constructor() {}
+
+  /** 初始化操作 */
+  init() {}
+}

src/board/types.ts

@@ -0,0 +1,6 @@
+// 是主动绘制模式，还是镜像模式
+export type WhiteboardMode = 'master' | 'mirror';
+
+export type RenderCallback = (container: HTMLElement) => void;
+
+export type WhitePageSource = string | RenderCallback;

src/event/Event.ts

@@ -0,0 +1,20 @@
+export type TargetType = 'page' | 'drawboard' | 'marker';
+export type EventType = 'add' | 'resize' | 'move' | 'remove';
+export type PositionType =
+  | 'topLeft'
+  | 'bottomLeft'
+  | 'topRight'
+  | 'bottomRight'
+  | 'centerLeft'
+  | 'centerRight'
+  | 'topCenter'
+  | 'bottomCenter';
+
+export interface ChangeEvent {
+  target: TargetType;
+  id: string;
+  event: EventType;
+  data?: object | string;
+}
+
+export type onChangeFunc = (ev: ChangeEvent) => void;

src/event/EventHub.ts

@@ -0,0 +1,10 @@
+import { ChangeEvent } from './Event';
+import * as EventEmitter from 'eventemitter3';
+
+export class EventHub extends EventEmitter<'change'> {}
+
+export const eventHub = new EventHub();
+
+eventHub.on('change', (changeEv: ChangeEvent) => {
+  console.log(changeEv);
+});

src/index.ts

@@ -0,0 +1 @@
+export { Drawboard } from './board/Drawboard';

src/markers/ArrowMarker/index.ts

@@ -0,0 +1,38 @@
+import { MarkerType } from './../types';
+import { LinearMarker } from '../LinearMarker';
+import { SvgHelper } from 'fc-whiteboard/src/renderer/SvgHelper';
+
+export class ArrowMarker extends LinearMarker {
+  type: MarkerType = 'arrow';
+
+  public static createMarker = (): LinearMarker => {
+    const marker = new ArrowMarker();
+    marker.setup();
+    return marker;
+  };
+
+  private readonly ARROW_SIZE = 6;
+
+  protected setup() {
+    super.setup();
+    SvgHelper.setAttributes(this.visual, [['class', 'arrow-marker']]);
+
+    const tip = SvgHelper.createPolygon(
+      `0,0 ${this.ARROW_SIZE},${this.ARROW_SIZE / 2} 0,${this.ARROW_SIZE}`,
+      [['class', 'arrow-marker-tip']]
+    );
+    this.defs.push(
+      SvgHelper.createMarker(
+        'arrow-marker-head',
+        'auto',
+        this.ARROW_SIZE,
+        this.ARROW_SIZE,
+        this.ARROW_SIZE - 1,
+        this.ARROW_SIZE / 2,
+        tip
+      )
+    );
+
+    this.markerLine.setAttribute('marker-end', 'url(#arrow-marker-head');
+  }
+}

src/markers/BaseMarker/ResizeGrip.ts

@@ -0,0 +1,11 @@
+import { SvgHelper } from '../../renderer/SvgHelper';
+
+export class ResizeGrip {
+  public visual: SVGGraphicsElement;
+
+  public readonly GRIP_SIZE = 10;
+
+  constructor() {
+    this.visual = SvgHelper.createCircle(this.GRIP_SIZE, [['class', 'fc-whiteboard-control-grip']]);
+  }
+}

src/markers/BaseMarker/index.ts

@@ -0,0 +1,185 @@
+import { PositionType } from 'fc-whiteboard/src/event/Event';
+import { onChangeFunc, EventType } from '../../event/Event';
+import { MarkerType } from '../types';
+import * as uuid from 'uuid/v1';
+import { SvgHelper } from '../../renderer/SvgHelper';
+
+export class BaseMarker {
+  id: string = uuid();
+  type: MarkerType = 'base';
+  onChange: onChangeFunc = () => {};
+
+  public static createMarker = (): BaseMarker => {
+    const marker = new BaseMarker();
+    marker.setup();
+    return marker;
+  };
+
+  public visual: SVGGElement;
+  public renderVisual: SVGGElement;
+
+  public onSelected: (marker: BaseMarker) => void;
+
+  public defs: SVGElement[] = [];
+
+  protected width: number = 200;
+  protected height: number = 50;
+
+  protected isActive: boolean = true;
+  protected isResizing: boolean = false;
+
+  protected previousMouseX: number = 0;
+  protected previousMouseY: number = 0;
+
+  private isDragging: boolean = false;
+
+  public reactToManipulation(
+    type: EventType,
+    { dx, dy, pos }: { dx: number; dy: number; pos: PositionType }
+  ) {
+    if (type === 'move') {
+      this.move(dx, dy);
+    }
+
+    if (type === 'resize') {
+      this.resizeByEvent(dx, dy, pos);
+    }
+  }
+
+  public manipulate = (ev: MouseEvent) => {
+    const scale = this.visual.getScreenCTM()!.a;
+    const dx = (ev.screenX - this.previousMouseX) / scale;
+    const dy = (ev.screenY - this.previousMouseY) / scale;
+
+    if (this.isDragging) {
+      this.onChange({ target: 'marker', id: this.id, event: 'move', data: { dx, dy } });
+      this.move(dx, dy);
+    }
+
+    if (this.isResizing) {
+      this.resize(dx, dy, (pos: PositionType) => {
+        this.onChange({ target: 'marker', id: this.id, event: 'resize', data: { dx, dy, pos } });
+      });
+    }
+
+    this.previousMouseX = ev.screenX;
+    this.previousMouseY = ev.screenY;
+  };
+
+  public endManipulation() {
+    this.isDragging = false;
+    this.isResizing = false;
+  }
+
+  public select() {
+    this.isActive = true;
+    if (this.onSelected) {
+      this.onSelected(this);
+    }
+    return;
+  }
+
+  public deselect() {
+    this.isActive = false;
+    this.endManipulation();
+    return;
+  }
+
+  protected setup() {
+    this.visual = SvgHelper.createGroup();
+    // translate
+    this.visual.transform.baseVal.appendItem(SvgHelper.createTransform());
+
+    this.visual.addEventListener('mousedown', this.mouseDown);
+    this.visual.addEventListener('mouseup', this.mouseUp);
+    this.visual.addEventListener('mousemove', this.mouseMove);
+
+    this.visual.addEventListener('touchstart', this.onTouch, { passive: false });
+    this.visual.addEventListener('touchend', this.onTouch, { passive: false });
+    this.visual.addEventListener('touchmove', this.onTouch, { passive: false });
+
+    this.renderVisual = SvgHelper.createGroup([['class', 'render-visual']]);
+    this.visual.appendChild(this.renderVisual);
+  }
+
+  protected addToVisual = (el: SVGElement) => {
+    this.visual.appendChild(el);
+  };
+
+  protected addToRenderVisual = (el: SVGElement) => {
+    this.renderVisual.appendChild(el);
+  };
+
+  protected resize(x: number, y: number, cb?: Function) {
+    return;
+  }
+  protected resizeByEvent(x: number, y: number, pos?: PositionType) {
+    return;
+  }
+
+  /** 截获 Touch 事件，并且转发为 Mouse 事件 */
+  protected onTouch(ev: TouchEvent) {
+    ev.preventDefault();
+    const newEvt = document.createEvent('MouseEvents');
+    const touch = ev.changedTouches[0];
+    let type = null;
+
+    switch (ev.type) {
+      case 'touchstart':
+        type = 'mousedown';
+        break;
+      case 'touchmove':
+        type = 'mousemove';
+        break;
+      case 'touchend':
+        type = 'mouseup';
+        break;
+      default:
+        break;
+    }
+
+    newEvt.initMouseEvent(
+      type!,
+      true,
+      true,
+      window,
+      0,
+      touch.screenX,
+      touch.screenY,
+      touch.clientX,
+      touch.clientY,
+      ev.ctrlKey,
+      ev.altKey,
+      ev.shiftKey,
+      ev.metaKey,
+      0,
+      null
+    );
+
+    ev.target!.dispatchEvent(newEvt);
+  }
+
+  private mouseDown = (ev: MouseEvent) => {
+    ev.stopPropagation();
+    this.select();
+    this.isDragging = true;
+    this.previousMouseX = ev.screenX;
+    this.previousMouseY = ev.screenY;
+  };
+
+  private mouseUp = (ev: MouseEvent) => {
+    ev.stopPropagation();
+    this.endManipulation();
+  };
+
+  private mouseMove = (ev: MouseEvent) => {
+    ev.stopPropagation();
+    this.manipulate(ev);
+  };
+
+  private move = (dx: number, dy: number) => {
+    const translate = this.visual.transform.baseVal.getItem(0);
+    translate.setMatrix(translate.matrix.translate(dx, dy));
+    this.visual.transform.baseVal.replaceItem(translate, 0);
+  };
+}

src/markers/CoverMarker/index.ts

@@ -0,0 +1,18 @@
+import { MarkerType } from './../types';
+import { SvgHelper } from '../../renderer/SvgHelper';
+import { RectBaseMarker } from '../RectMarker/RectBaseMarker';
+
+export class CoverMarker extends RectBaseMarker {
+  type: MarkerType = 'cover';
+
+  public static createMarker = (): RectBaseMarker => {
+    const marker = new CoverMarker();
+    marker.setup();
+    return marker;
+  };
+
+  protected setup() {
+    super.setup();
+    SvgHelper.setAttributes(this.visual, [['class', 'cover-marker']]);
+  }
+}

src/markers/HighlightMarker/index.ts

@@ -0,0 +1,18 @@
+import { MarkerType } from './../types';
+import { SvgHelper } from '../../renderer/SvgHelper';
+import { RectBaseMarker } from '../RectMarker/RectBaseMarker';
+
+export class HighlightMarker extends RectBaseMarker {
+  type: MarkerType = 'highlight';
+
+  public static createMarker = (): RectBaseMarker => {
+    const marker = new HighlightMarker();
+    marker.setup();
+    return marker;
+  };
+
+  protected setup() {
+    super.setup();
+    SvgHelper.setAttributes(this.visual, [['class', 'highlight-marker']]);
+  }
+}

src/markers/LineMarker/index.ts

@@ -0,0 +1,18 @@
+import { MarkerType } from './../types';
+import { LinearMarker } from '../LinearMarker';
+import { SvgHelper } from './../../renderer/SvgHelper/index';
+
+export class LineMarker extends LinearMarker {
+  type: MarkerType = 'line';
+
+  public static createMarker = (): LinearMarker => {
+    const marker = new LineMarker();
+    marker.setup();
+    return marker;
+  };
+
+  protected setup() {
+    super.setup();
+    SvgHelper.setAttributes(this.visual, [['class', 'line-marker']]);
+  }
+}

src/markers/LinearMarker/index.ts

@@ -0,0 +1,168 @@
+import { BaseMarker } from '../BaseMarker';
+import { ResizeGrip } from '../BaseMarker/ResizeGrip';
+import { SvgHelper } from '../../renderer/SvgHelper';
+
+export class LinearMarker extends BaseMarker {
+  public static createMarker = (): LinearMarker => {
+    const marker = new LinearMarker();
+    marker.setup();
+    return marker;
+  };
+
+  protected markerLine: SVGLineElement;
+
+  private readonly MIN_LENGTH = 20;
+
+  private markerBgLine: SVGLineElement; // touch target
+
+  private controlBox: SVGGElement;
+
+  private controlGrip1: ResizeGrip;
+  private controlGrip2: ResizeGrip;
+  private activeGrip: ResizeGrip | null;
+
+  private x1: number = 0;
+  private y1: number = 0;
+  private x2: number = this.width;
+  private y2: number = 0;
+
+  public endManipulation() {
+    super.endManipulation();
+    this.isResizing = false;
+    this.activeGrip = null;
+  }
+
+  public select() {
+    super.select();
+    this.controlBox.style.display = '';
+  }
+
+  public deselect() {
+    super.deselect();
+    this.controlBox.style.display = 'none';
+  }
+
+  protected setup() {
+    super.setup();
+
+    this.markerBgLine = SvgHelper.createLine(0, 0, this.x2, 0, [
+      ['stroke', 'transparent'],
+      ['stroke-width', '30']
+    ]);
+    this.addToRenderVisual(this.markerBgLine);
+    this.markerLine = SvgHelper.createLine(0, 0, this.x2, 0);
+    this.addToRenderVisual(this.markerLine);
+
+    this.addControlBox();
+  }
+
+  protected resize(x: number, y: number) {
+    if (this.activeGrip) {
+      if (
+        this.activeGrip === this.controlGrip1 &&
+        this.getLineLength(this.x1 + x, this.y1 + 1, this.x2, this.y2) >= this.MIN_LENGTH
+      ) {
+        this.x1 += x;
+        this.y1 += y;
+        this.markerBgLine.setAttribute('x1', this.x1.toString());
+        this.markerBgLine.setAttribute('y1', this.y1.toString());
+        this.markerLine.setAttribute('x1', this.x1.toString());
+        this.markerLine.setAttribute('y1', this.y1.toString());
+      } else if (
+        this.activeGrip === this.controlGrip2 &&
+        this.getLineLength(this.x1, this.y1, this.x2 + x, this.y2 + y) >= this.MIN_LENGTH
+      ) {
+        this.x2 += x;
+        this.y2 += y;
+        this.markerBgLine.setAttribute('x2', this.x2.toString());
+        this.markerBgLine.setAttribute('y2', this.y2.toString());
+        this.markerLine.setAttribute('x2', this.x2.toString());
+        this.markerLine.setAttribute('y2', this.y2.toString());
+      }
+    }
+
+    this.adjustControlBox();
+  }
+
+  private getLineLength = (x1: number, y1: number, x2: number, y2: number): number => {
+    const dx = Math.abs(x1 - x2);
+    const dy = Math.abs(y1 - y2);
+
+    return Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
+  };
+
+  private addControlBox = () => {
+    this.controlBox = SvgHelper.createGroup([['class', 'fc-whiteboard-line-control-box']]);
+    this.addToVisual(this.controlBox);
+
+    this.addControlGrips();
+  };
+
+  private adjustControlBox = () => {
+    this.positionGrips();
+  };
+
+  private addControlGrips = () => {
+    this.controlGrip1 = this.createGrip();
+    this.controlGrip2 = this.createGrip();
+
+    this.positionGrips();
+  };
+
+  private createGrip = (): ResizeGrip => {
+    const grip = new ResizeGrip();
+    grip.visual.transform.baseVal.appendItem(SvgHelper.createTransform());
+    this.controlBox.appendChild(grip.visual);
+
+    grip.visual.addEventListener('mousedown', this.gripMouseDown);
+    grip.visual.addEventListener('mousemove', this.gripMouseMove);
+    grip.visual.addEventListener('mouseup', this.gripMouseUp);
+
+    grip.visual.addEventListener('touchstart', this.onTouch, { passive: false });
+    grip.visual.addEventListener('touchend', this.onTouch, { passive: false });
+    grip.visual.addEventListener('touchmove', this.onTouch, { passive: false });
+
+    return grip;
+  };
+
+  private positionGrips = () => {
+    const gripSize = this.controlGrip1.GRIP_SIZE;
+
+    const x1 = this.x1 - gripSize / 2;
+    const y1 = this.y1 - gripSize / 2;
+    const x2 = this.x2 - gripSize / 2;
+    const y2 = this.y2 - gripSize / 2;
+
+    this.positionGrip(this.controlGrip1.visual, x1, y1);
+    this.positionGrip(this.controlGrip2.visual, x2, y2);
+  };
+
+  private positionGrip = (grip: SVGGraphicsElement, x: number, y: number) => {
+    const translate = grip.transform.baseVal.getItem(0);
+    translate.setTranslate(x, y);
+    grip.transform.baseVal.replaceItem(translate, 0);
+  };
+
+  private gripMouseDown = (ev: MouseEvent) => {
+    this.isResizing = true;
+    this.activeGrip =
+      (ev.target as SVGGraphicsElement) === this.controlGrip1.visual
+        ? this.controlGrip1
+        : this.controlGrip2;
+    this.previousMouseX = ev.screenX;
+    this.previousMouseY = ev.screenY;
+    ev.stopPropagation();
+  };
+
+  private gripMouseUp = (ev: MouseEvent) => {
+    this.isResizing = false;
+    this.activeGrip = null;
+    ev.stopPropagation();
+  };
+
+  private gripMouseMove = (ev: MouseEvent) => {
+    if (this.isResizing) {
+      this.resize(ev.movementX, ev.movementY);
+    }
+  };
+}

src/markers/RectMarker/RectBaseMarker.ts

@@ -0,0 +1,26 @@
+import { PositionType } from '../../event/Event';
+import { SvgHelper } from '../../renderer/SvgHelper';
+import { RectangularMarker } from '../RectangularMarker';
+
+export class RectBaseMarker extends RectangularMarker {
+  public static createMarker = (): RectBaseMarker => {
+    const marker = new RectBaseMarker();
+    marker.setup();
+    return marker;
+  };
+
+  private markerRect: SVGRectElement;
+
+  protected setup() {
+    super.setup();
+
+    this.markerRect = SvgHelper.createRect(this.width, this.height);
+    this.addToRenderVisual(this.markerRect);
+  }
+
+  protected resize(x: number, y: number, onPosition?: (pos: PositionType) => void) {
+    super.resize(x, y, onPosition);
+    this.markerRect.setAttribute('width', this.width.toString());
+    this.markerRect.setAttribute('height', this.height.toString());
+  }
+}

src/markers/RectMarker/index.ts

@@ -0,0 +1,18 @@
+import { MarkerType } from './../types';
+import { RectBaseMarker } from './RectBaseMarker';
+import { SvgHelper } from 'fc-whiteboard/src/renderer/SvgHelper';
+
+export class RectMarker extends RectBaseMarker {
+  type: MarkerType = 'rect';
+
+  public static createMarker = (): RectBaseMarker => {
+    const marker = new RectMarker();
+    marker.setup();
+    return marker;
+  };
+
+  protected setup() {
+    super.setup();
+    SvgHelper.setAttributes(this.visual, [['class', 'rect-marker']]);
+  }
+}

src/markers/RectangularMarker/RectangularMarkerGrips.ts

@@ -0,0 +1,35 @@
+import { ResizeGrip } from '../BaseMarker/ResizeGrip';
+
+export class RectangularMarkerGrips {
+  public topLeft: ResizeGrip;
+  public topCenter: ResizeGrip;
+  public topRight: ResizeGrip;
+  public centerLeft: ResizeGrip;
+  public centerRight: ResizeGrip;
+  public bottomLeft: ResizeGrip;
+  public bottomCenter: ResizeGrip;
+  public bottomRight: ResizeGrip;
+
+  public findGripByVisual = (gripVisual: SVGGraphicsElement) => {
+    switch (gripVisual) {
+      case this.topLeft.visual:
+        return this.topLeft;
+      case this.topCenter.visual:
+        return this.topCenter;
+      case this.topRight.visual:
+        return this.topRight;
+      case this.centerLeft.visual:
+        return this.centerLeft;
+      case this.centerRight.visual:
+        return this.centerRight;
+      case this.bottomLeft.visual:
+        return this.bottomLeft;
+      case this.bottomCenter.visual:
+        return this.bottomCenter;
+      case this.bottomRight.visual:
+        return this.bottomRight;
+      default:
+        return this.topLeft;
+    }
+  };
+}

src/markers/RectangularMarker/index.ts

@@ -0,0 +1,246 @@
+import { SvgHelper } from '../../renderer/SvgHelper';
+import { BaseMarker } from '../BaseMarker';
+import { RectangularMarkerGrips } from './RectangularMarkerGrips';
+import { ResizeGrip } from '../BaseMarker/ResizeGrip';
+import { PositionType } from 'fc-whiteboard/src/event/Event';
+
+export class RectangularMarker extends BaseMarker {
+  public static createMarker = (): RectangularMarker => {
+    const marker = new RectangularMarker();
+    marker.setup();
+    return marker;
+  };
+
+  protected MIN_SIZE = 5;
+
+  private controlBox: SVGGElement;
+  private readonly CB_DISTANCE: number = 10;
+  private controlRect: SVGRectElement;
+
+  private controlGrips: RectangularMarkerGrips;
+  private activeGrip: ResizeGrip | null;
+
+  public endManipulation() {
+    super.endManipulation();
+    this.isResizing = false;
+    this.activeGrip = null;
+  }
+
+  public select() {
+    super.select();
+    this.controlBox.style.display = '';
+  }
+
+  public deselect() {
+    super.deselect();
+    this.controlBox.style.display = 'none';
+  }
+
+  protected setup() {
+    super.setup();
+
+    this.addControlBox();
+  }
+
+  protected resizeByEvent(x: number, y: number, pos: PositionType) {
+    this.activeGrip = this.controlGrips[pos];
+    this.resize(x, y);
+  }
+
+  protected resize(x: number, y: number, onPosition?: (pos: PositionType) => void) {
+    let translateX = 0;
+    let translateY = 0;
+
+    switch (this.activeGrip) {
+      case this.controlGrips.topLeft:
+        this.width -= x;
+        this.height -= y;
+        translateX += x;
+        translateY += y;
+        if (onPosition) {
+          onPosition('topLeft');
+        }
+        break;
+      case this.controlGrips.bottomLeft:
+        this.width -= x;
+        this.height += y;
+        translateX += x;
+        if (onPosition) {
+          onPosition('bottomLeft');
+        }
+        break;
+      case this.controlGrips.topRight:
+        this.width += x;
+        this.height -= y;
+        translateY += y;
+        if (onPosition) {
+          onPosition('topRight');
+        }
+        break;
+      case this.controlGrips.bottomRight:
+        this.width += x;
+        this.height += y;
+        if (onPosition) {
+          onPosition('bottomRight');
+        }
+        break;
+      case this.controlGrips.centerLeft:
+        this.width -= x;
+        translateX += x;
+        if (onPosition) {
+          onPosition('centerLeft');
+        }
+        break;
+      case this.controlGrips.centerRight:
+        this.width += x;
+        if (onPosition) {
+          onPosition('centerRight');
+        }
+        break;
+      case this.controlGrips.topCenter:
+        this.height -= y;
+        translateY += y;
+        if (onPosition) {
+          onPosition('topCenter');
+        }
+        break;
+      case this.controlGrips.bottomCenter:
+        this.height += y;
+        if (onPosition) {
+          onPosition('bottomCenter');
+        }
+        break;
+      default:
+        break;
+    }
+
+    if (this.width < this.MIN_SIZE) {
+      const offset = this.MIN_SIZE - this.width;
+      this.width = this.MIN_SIZE;
+      if (translateX !== 0) {
+        translateX -= offset;
+      }
+    }
+    if (this.height < this.MIN_SIZE) {
+      const offset = this.MIN_SIZE - this.height;
+      this.height = this.MIN_SIZE;
+      if (translateY !== 0) {
+        translateY -= offset;
+      }
+    }
+
+    if (translateX !== 0 || translateY !== 0) {
+      const translate = this.visual.transform.baseVal.getItem(0);
+      translate.setMatrix(translate.matrix.translate(translateX, translateY));
+      this.visual.transform.baseVal.replaceItem(translate, 0);
+    }
+
+    this.adjustControlBox();
+  }
+
+  protected onTouch(ev: TouchEvent) {
+    super.onTouch(ev);
+  }
+
+  private addControlBox = () => {
+    this.controlBox = SvgHelper.createGroup([['class', 'fc-whiteboard-rect-control-box']]);
+    const translate = SvgHelper.createTransform();
+    translate.setTranslate(-this.CB_DISTANCE / 2, -this.CB_DISTANCE / 2);
+    this.controlBox.transform.baseVal.appendItem(translate);
+
+    this.addToVisual(this.controlBox);
+
+    this.controlRect = SvgHelper.createRect(
+      this.width + this.CB_DISTANCE,
+      this.height + this.CB_DISTANCE,
+      [['class', 'fc-whiteboard-rect-control-rect']]
+    );
+
+    this.controlBox.appendChild(this.controlRect);
+
+    this.controlGrips = new RectangularMarkerGrips();
+    this.addControlGrips();
+  };
+
+  private adjustControlBox = () => {
+    this.controlRect.setAttribute('width', (this.width + this.CB_DISTANCE).toString());
+    this.controlRect.setAttribute('height', (this.height + this.CB_DISTANCE).toString());
+
+    this.positionGrips();
+  };
+
+  private addControlGrips = () => {
+    this.controlGrips.topLeft = this.createGrip();
+    this.controlGrips.topCenter = this.createGrip();
+    this.controlGrips.topRight = this.createGrip();
+    this.controlGrips.centerLeft = this.createGrip();
+    this.controlGrips.centerRight = this.createGrip();
+    this.controlGrips.bottomLeft = this.createGrip();
+    this.controlGrips.bottomCenter = this.createGrip();
+    this.controlGrips.bottomRight = this.createGrip();
+
+    this.positionGrips();
+  };
+
+  private createGrip = (): ResizeGrip => {
+    const grip = new ResizeGrip();
+    grip.visual.transform.baseVal.appendItem(SvgHelper.createTransform());
+    this.controlBox.appendChild(grip.visual);
+
+    grip.visual.addEventListener('mousedown', this.gripMouseDown);
+    grip.visual.addEventListener('mousemove', this.gripMouseMove);
+    grip.visual.addEventListener('mouseup', this.gripMouseUp);
+
+    grip.visual.addEventListener('touchstart', this.onTouch, { passive: false });
+    grip.visual.addEventListener('touchend', this.onTouch, { passive: false });
+    grip.visual.addEventListener('touchmove', this.onTouch, { passive: false });
+
+    return grip;
+  };
+
+  private positionGrips = () => {
+    const gripSize = this.controlGrips.topLeft.GRIP_SIZE;
+
+    const left = -gripSize / 2;
+    const top = left;
+    const cx = (this.width + this.CB_DISTANCE) / 2 - gripSize / 2;
+    const cy = (this.height + this.CB_DISTANCE) / 2 - gripSize / 2;
+    const bottom = this.height + this.CB_DISTANCE - gripSize / 2;
+    const right = this.width + this.CB_DISTANCE - gripSize / 2;
+
+    this.positionGrip(this.controlGrips.topLeft.visual, left, top);
+    this.positionGrip(this.controlGrips.topCenter.visual, cx, top);
+    this.positionGrip(this.controlGrips.topRight.visual, right, top);
+    this.positionGrip(this.controlGrips.centerLeft.visual, left, cy);
+    this.positionGrip(this.controlGrips.centerRight.visual, right, cy);
+    this.positionGrip(this.controlGrips.bottomLeft.visual, left, bottom);
+    this.positionGrip(this.controlGrips.bottomCenter.visual, cx, bottom);
+    this.positionGrip(this.controlGrips.bottomRight.visual, right, bottom);
+  };
+
+  private positionGrip = (grip: SVGGraphicsElement, x: number, y: number) => {
+    const translate = grip.transform.baseVal.getItem(0);
+    translate.setTranslate(x, y);
+    grip.transform.baseVal.replaceItem(translate, 0);
+  };
+
+  private gripMouseDown = (ev: MouseEvent) => {
+    this.isResizing = true;
+    this.activeGrip = this.controlGrips.findGripByVisual(ev.target as SVGGraphicsElement) || null;
+    this.previousMouseX = ev.screenX;
+    this.previousMouseY = ev.screenY;
+    ev.stopPropagation();
+  };
+
+  private gripMouseUp = (ev: MouseEvent) => {
+    this.isResizing = false;
+    this.activeGrip = null;
+    ev.stopPropagation();
+  };
+
+  private gripMouseMove = (ev: MouseEvent) => {
+    if (this.isResizing) {
+      this.manipulate(ev);
+    }
+  };
+}

src/markers/TextMarker/index.ts

@@ -0,0 +1,151 @@
+import { MarkerType } from '../types';
+import { RectangularMarker } from '../RectangularMarker';
+import { SvgHelper } from '../../renderer/SvgHelper';
+
+const OkIcon = require('../../assets/check.svg');
+const CancelIcon = require('../../assets/times.svg');
+
+export class TextMarker extends RectangularMarker {
+  type: MarkerType = 'text';
+
+  public static createMarker = (): TextMarker => {
+    const marker = new TextMarker();
+    marker.setup();
+    return marker;
+  };
+
+  protected readonly MIN_SIZE = 50;
+
+  private readonly DEFAULT_TEXT = 'Double-click to edit text';
+  private text: string = this.DEFAULT_TEXT;
+  private textElement: SVGTextElement;
+
+  private inDoubleTap = false;
+
+  private editor: HTMLDivElement;
+
+  private editorTextArea: HTMLTextAreaElement;
+
+  protected setup() {
+    super.setup();
+    this.textElement = SvgHelper.createText();
+    this.addToRenderVisual(this.textElement);
+    SvgHelper.setAttributes(this.visual, [['class', 'text-marker']]);
+
+    this.textElement.transform.baseVal.appendItem(SvgHelper.createTransform()); // translate transorm
+    this.textElement.transform.baseVal.appendItem(SvgHelper.createTransform()); // scale transorm
+
+    this.renderText();
+
+    this.visual.addEventListener('dblclick', this.onDblClick);
+    this.visual.addEventListener('touchstart', this.onTap);
+  }
+
+  protected resize(x: number, y: number) {
+    super.resize(x, y);
+    this.sizeText();
+  }
+
+  private renderText = () => {
+    const LINE_SIZE = '1.2em';
+
+    while (this.textElement.lastChild) {
+      this.textElement.removeChild(this.textElement.lastChild);
+    }
+
+    const lines = this.text.split(/\r\n|[\n\v\f\r\x85\u2028\u2029]/);
+    for (let line of lines) {
+      if (line.trim() === '') {
+        line = ' '; // workaround for swallowed empty lines
+      }
+      this.textElement.appendChild(SvgHelper.createTSpan(line, [['x', '0'], ['dy', LINE_SIZE]]));
+    }
+
+    setTimeout(this.sizeText, 10);
+  };
+
+  private sizeText = () => {
+    const textSize = this.textElement.getBBox();
+    let x = 0;
+    let y = 0;
+    let scale = 1.0;
+    if (textSize.width > 0 && textSize.height > 0) {
+      const xScale = (this.width * 1.0) / textSize.width;
+      const yScale = (this.height * 1.0) / textSize.height;
+      scale = Math.min(xScale, yScale);
+
+      x = (this.width - textSize.width * scale) / 2;
+      y = (this.height - textSize.height * scale) / 2;
+    }
+
+    this.textElement.transform.baseVal.getItem(0).setTranslate(x, y);
+    this.textElement.transform.baseVal.getItem(1).setScale(scale, scale);
+  };
+
+  private onDblClick = (ev: MouseEvent) => {
+    this.showEditor();
+  };
+
+  private onTap = (ev: TouchEvent) => {
+    if (this.inDoubleTap) {
+      this.inDoubleTap = false;
+      this.showEditor();
+    } else {
+      this.inDoubleTap = true;
+      setTimeout(() => {
+        this.inDoubleTap = false;
+      }, 300);
+    }
+  };
+
+  private showEditor = () => {
+    this.editor = document.createElement('div');
+    this.editor.className = 'fc-whiteboard-text-editor';
+
+    this.editorTextArea = document.createElement('textarea');
+    if (this.text !== this.DEFAULT_TEXT) {
+      this.editorTextArea.value = this.text;
+    }
+    this.editorTextArea.addEventListener('keydown', this.onEditorKeyDown);
+    this.editor.appendChild(this.editorTextArea);
+
+    document.body.appendChild(this.editor);
+
+    const buttons = document.createElement('div');
+    buttons.className = 'fc-whiteboard-text-editor-button-bar';
+    this.editor.appendChild(buttons);
+
+    const okButton = document.createElement('div');
+    okButton.className = 'fc-whiteboard-text-editor-button';
+    okButton.innerHTML = OkIcon;
+    okButton.addEventListener('click', this.onEditorOkClick);
+    buttons.appendChild(okButton);
+
+    const cancelButton = document.createElement('div');
+    cancelButton.className = 'fc-whiteboard-text-editor-button';
+    cancelButton.innerHTML = CancelIcon;
+    cancelButton.addEventListener('click', this.closeEditor);
+    buttons.appendChild(cancelButton);
+  };
+
+  private onEditorOkClick = (ev: MouseEvent | null) => {
+    if (this.editorTextArea.value.trim()) {
+      this.text = this.editorTextArea.value;
+    } else {
+      this.text = this.DEFAULT_TEXT;
+    }
+    this.renderText();
+    this.closeEditor();
+  };
+
+  private closeEditor = () => {
+    document.body.removeChild(this.editor);
+  };
+
+  private onEditorKeyDown = (ev: KeyboardEvent) => {
+    if (ev.key === 'Enter' && ev.ctrlKey) {
+      ev.preventDefault();
+      this.onEditorOkClick(null);
+    }
+  };
+}

src/markers/types.ts

@@ -0,0 +1,27 @@
+import { TextMarker } from './TextMarker/index';
+import { ArrowMarker } from './ArrowMarker/index';
+import { BaseMarker } from './BaseMarker/index';
+import { CoverMarker } from './CoverMarker';
+import { LineMarker } from './LineMarker';
+import { RectMarker } from './RectMarker';
+
+export type MarkerType = 'base' | 'arrow' | 'cover' | 'line' | 'rect' | 'text' | 'highlight';
+
+export function getMarkerByType(type: MarkerType): typeof BaseMarker {
+  switch (type) {
+    case 'base':
+      return BaseMarker;
+    case 'arrow':
+      return ArrowMarker;
+    case 'cover':
+      return CoverMarker;
+    case 'line':
+      return LineMarker;
+    case 'rect':
+      return RectMarker;
+    case 'text':
+      return TextMarker;
+    default:
+      return BaseMarker;
+  }
+}

src/renderer/SvgHelper/index.ts

@@ -0,0 +1,143 @@
+export class SvgHelper {
+  public static createRect = (
+    width: number | string,
+    height: number | string,
+    attributes?: Array<[string, string]>
+  ): SVGRectElement => {
+    const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+
+    rect.setAttribute('width', width.toString());
+    rect.setAttribute('height', height.toString());
+    if (attributes) {
+      SvgHelper.setAttributes(rect, attributes);
+    }
+
+    return rect;
+  };
+
+  public static createLine = (
+    x1: number | string,
+    y1: number | string,
+    x2: number | string,
+    y2: number | string,
+    attributes?: Array<[string, string]>
+  ): SVGLineElement => {
+    const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+
+    line.setAttribute('x1', x1.toString());
+    line.setAttribute('y1', y1.toString());
+    line.setAttribute('x2', x2.toString());
+    line.setAttribute('y2', y2.toString());
+    if (attributes) {
+      SvgHelper.setAttributes(line, attributes);
+    }
+
+    return line;
+  };
+
+  public static createPolygon = (
+    points: string,
+    attributes?: Array<[string, string]>
+  ): SVGPolygonElement => {
+    const polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
+
+    polygon.setAttribute('points', points);
+    if (attributes) {
+      SvgHelper.setAttributes(polygon, attributes);
+    }
+
+    return polygon;
+  };
+
+  public static createCircle = (
+    radius: number,
+    attributes?: Array<[string, string]>
+  ): SVGCircleElement => {
+    const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+
+    circle.setAttribute('cx', (radius / 2).toString());
+    circle.setAttribute('cy', (radius / 2).toString());
+    circle.setAttribute('r', radius.toString());
+    if (attributes) {
+      SvgHelper.setAttributes(circle, attributes);
+    }
+
+    return circle;
+  };
+
+  public static createGroup = (attributes?: Array<[string, string]>): SVGGElement => {
+    const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    if (attributes) {
+      SvgHelper.setAttributes(g, attributes);
+    }
+    return g;
+  };
+
+  public static setAttributes = (el: SVGElement, attributes: Array<[string, string]>) => {
+    for (const [attr, value] of attributes) {
+      el.setAttribute(attr, value);
+    }
+  };
+
+  public static createTransform = (): SVGTransform => {
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+
+    return svg.createSVGTransform();
+  };
+
+  public static createDefs = (): SVGDefsElement => {
+    const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
+
+    return defs;
+  };
+
+  public static createMarker = (
+    id: string,
+    orient: string,
+    markerWidth: number | string,
+    markerHeight: number | string,
+    refX: number | string,
+    refY: number | string,
+    markerElement: SVGGraphicsElement
+  ): SVGMarkerElement => {
+    const marker = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
+    SvgHelper.setAttributes(marker, [
+      ['id', id],
+      ['orient', orient],
+      ['markerWidth', markerWidth.toString()],
+      ['markerHeight', markerHeight.toString()],
+      ['refX', refX.toString()],
+      ['refY', refY.toString()]
+    ]);
+
+    marker.appendChild(markerElement);
+
+    return marker;
+  };
+
+  public static createText = (attributes?: Array<[string, string]>): SVGTextElement => {
+    const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+    text.setAttribute('x', '0');
+    text.setAttribute('y', '0');
+
+    if (attributes) {
+      SvgHelper.setAttributes(text, attributes);
+    }
+
+    return text;
+  };
+
+  public static createTSpan = (
+    text: string,
+    attributes?: Array<[string, string]>
+  ): SVGTSpanElement => {
+    const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
+    tspan.textContent = text;
+
+    if (attributes) {
+      SvgHelper.setAttributes(tspan, attributes);
+    }
+
+    return tspan;
+  };
+}