var selector = (function() { let _objects = []; let _selectorPosStart; let _selectorPosNow; let _mode = ""; let _selectorRect = new Konva.Rect({ x: 0, y: 0, width: 0, height: 0, stroke: "#33BCFF", dash: [2, 2] }); function _bootstrap() { _configureSelectorEvents(); _addToLayer(); } function _addToLayer() { let layer = app.currentLayer(); _selectorRect.listening(false); layer.add(_selectorRect); } function _getSelectedObjects() { return _objects; } function _configureSelectorEvents() { app.stage.on("mousedown", function(e) { _mode = "drawing"; _startDragSelector({ x: e.evt.layerX, y: e.evt.layerY }); }); app.stage.on("mousemove", function(e) { if (_mode === "drawing") { _updateDragSelector({ x: e.evt.layerX, y: e.evt.layerY }); } }); app.stage.on("mouseup", function(e) { _mode = ""; _selectorRect.visible(false); app.stage.draw(); }); } function _startDragSelector(posIn) { _selectorPosStart = { x: posIn.x, y: posIn.y }; _selectorPosNow = { x: posIn.x, y: posIn.y }; } function _updateDragSelector(posIn) { if (app.getState() != APP_STATE.NONE) return; let objects = app.getObjects(); let posRect = _reverse(_selectorPosStart, _selectorPosNow); _selectorPosNow = { x: posIn.x, y: posIn.y }; _selectorRect.x(posRect.x1); _selectorRect.y(posRect.y1); _selectorRect.width(posRect.x2 - posRect.x1); _selectorRect.height(posRect.y2 - posRect.y1); _selectorRect.visible(true); for (i = 0; i < objects.length; i = i + 1) { let object = objects[i]; if (object.children != undefined && object.children.length > 0) { for (j = 0; j < object.children.length; j++) { _style(object.children[j], _selectorRect); } } else { _style(object, _selectorRect); } } app.stage.draw(); } function _style(object, selectorRect) { if (object.attrs.selectable != undefined) { if (object.attrs.selectable == false) { return; } } if (_hitCheck(object, selectorRect)) { object.stroke("#33BCFF"); object.fill("#33BCFF"); } else { if (object.attrs.style != undefined) { object.stroke(object.attrs.style.stroke); object.fill(object.attrs.style.fill); } else { object.stroke("black"); } } } function _hitCheck(shape1, shape2) { let s1 = shape1.getClientRect(); let s2 = shape2.getClientRect(); let X = s1.x; let Y = s1.y; let A = s1.x + s1.width; let B = s1.y + s1.height; let X1 = s2.x; let A1 = s2.x + s2.width; let Y1 = s2.y; let B1 = s2.y + s2.height; if (A < X1 || A1 < X || B < Y1 || B1 < Y) { return false; } else { return true; } } function _reverse(r1, r2) { let r1x = r1.x, r1y = r1.y, r2x = r2.x, r2y = r2.y, d; if (r1x > r2x) { d = Math.abs(r1x - r2x); r1x = r2x; r2x = r1x + d; } if (r1y > r2y) { d = Math.abs(r1y - r2y); r1y = r2y; r2y = r1y + d; } return { x1: r1x, y1: r1y, x2: r2x, y2: r2y }; } return { selctedObjects: _getSelectedObjects(), bootstrap: _bootstrap }; })();