import paper from 'paper'; import keyMirror from 'keymirror'; import {clearSelection, getSelectedItems} from '../selection'; import {getGuideColor, removeHelperItems} from '../guides'; import {getGuideLayer} from '../layer'; import ScaleTool from './scale-tool'; import RotateTool from './rotate-tool'; import MoveTool from './move-tool'; /** SVG for the rotation icon on the bounding box */ const ARROW_PATH = 'M19.28,1.09C19.28.28,19,0,18.2,0c-1.67,0-3.34,0-5,0-.34,0-.88.24-1,.47a1.4,1.4,0,0,0,.36,1.08,15.27,15.27,0,0,0,1.46,1.36A6.4,6.4,0,0,1,6.52,4,5.85,5.85,0,0,1,5.24,3,15.27,15.27,0,0,0,6.7,1.61,1.4,1.4,0,0,0,7.06.54C7,.3,6.44.07,6.1.06c-1.67,0-3.34,0-5,0C.28,0,0,.31,0,1.12c0,1.67,0,3.34,0,5a1.23,1.23,0,0,0,.49,1,1.22,1.22,0,0,0,1-.31A14.38,14.38,0,0,0,2.84,5.26l.73.62a9.45,9.45,0,0,0,7.34,2,9.45,9.45,0,0,0,4.82-2.05l.73-.62a14.38,14.38,0,0,0,1.29,1.51,1.22,1.22,0,0,0,1,.31,1.23,1.23,0,0,0,.49-1C19.31,4.43,19.29,2.76,19.28,1.09Z'; /** Modes of the bounding box tool, which can do many things depending on how it's used. */ const Modes = keyMirror({ SCALE: null, ROTATE: null, MOVE: null }); /** * A paper.Tool that handles transforming the selection and drawing a bounding box with handles. * On mouse down, the type of function (move, scale, rotate) is determined based on what is clicked * (scale handle, rotate handle, the object itself). This determines the mode of the tool, which then * delegates actions to the MoveTool, RotateTool or ScaleTool accordingly. */ class BoundingBoxTool { constructor () { this.mode = null; this.boundsPath = null; this.boundsScaleHandles = []; this.boundsRotHandles = []; this._modeMap = {}; this._modeMap[Modes.SCALE] = new ScaleTool(); this._modeMap[Modes.ROTATE] = new RotateTool(); this._modeMap[Modes.MOVE] = new MoveTool(); } /** * @param {!MouseEvent} event The mouse event * @param {boolean} clone Whether to clone on mouse down (e.g. alt key held) * @param {boolean} multiselect Whether to multiselect on mouse down (e.g. shift key held) * @param {paper.hitOptions} hitOptions The options with which to detect whether mouse down has hit * anything editable * @return {boolean} True if there was a hit, false otherwise */ onMouseDown (event, clone, multiselect, hitOptions) { const hitResults = paper.project.hitTestAll(event.point, hitOptions); if (!hitResults || hitResults.length === 0) { if (!multiselect) { this.removeBoundsPath(); clearSelection(); } return false; } // Prefer scale to trigger over rotate, and scale and rotate to trigger over other hits let hitResult = hitResults[0]; for (let i = 0; i < hitResults.length; i++) { if (hitResults[i].item.data && hitResults[i].item.data.isScaleHandle) { hitResult = hitResults[i]; this.mode = Modes.SCALE; break; } else if (hitResults[i].item.data && hitResults[i].item.data.isRotHandle) { hitResult = hitResults[i]; this.mode = Modes.ROTATE; } } if (!this.mode) { this.mode = Modes.MOVE; } if (this.mode === Modes.MOVE) { this._modeMap[this.mode].onMouseDown(hitResult, clone, multiselect); } else if (this.mode === Modes.SCALE) { this._modeMap[this.mode].onMouseDown( hitResult, this.boundsPath, this.boundsScaleHandles, this.boundsRotHandles, getSelectedItems()); } else if (this.mode === Modes.ROTATE) { this._modeMap[this.mode].onMouseDown(hitResult, this.boundsPath, getSelectedItems()); } // while transforming object, never show the bounds stuff this.removeBoundsPath(); return true; } onMouseDrag (event) { if (event.event.button > 0) return; // only first mouse button this._modeMap[this.mode].onMouseDrag(event); } onMouseUp (event) { if (event.event.button > 0) return; // only first mouse button this._modeMap[this.mode].onMouseUp(event); this.mode = null; this.setSelectionBounds(); } setSelectionBounds () { this.removeBoundsPath(); const items = getSelectedItems(); if (items.length <= 0) return; let rect = null; for (const item of items) { if (rect) { rect = rect.unite(item.bounds); } else { rect = item.bounds; } } if (!this.boundsPath) { this.boundsPath = new paper.Path.Rectangle(rect); this.boundsPath.curves[0].divideAtTime(0.5); this.boundsPath.curves[2].divideAtTime(0.5); this.boundsPath.curves[4].divideAtTime(0.5); this.boundsPath.curves[6].divideAtTime(0.5); } this.boundsPath.guide = true; this.boundsPath.data.isSelectionBound = true; this.boundsPath.data.isHelperItem = true; this.boundsPath.fillColor = null; this.boundsPath.strokeScaling = false; this.boundsPath.fullySelected = true; this.boundsPath.parent = getGuideLayer(); for (let index = 0; index < this.boundsPath.segments.length; index++) { const segment = this.boundsPath.segments[index]; let size = 4; if (index % 2 === 0) { size = 6; } if (index === 7) { const offset = new paper.Point(0, 20); const arrows = new paper.Path(ARROW_PATH); arrows.translate(segment.point.add(offset).add(-10.5, -5)); const line = new paper.Path.Rectangle( segment.point.add(offset).subtract(1, 0), segment.point); const rotHandle = arrows.unite(line); line.remove(); arrows.remove(); rotHandle.scale(1 / paper.view.zoom, segment.point); rotHandle.data = { offset: offset, isRotHandle: true, isHelperItem: true, noSelect: true, noHover: true }; rotHandle.fillColor = getGuideColor('blue'); rotHandle.parent = getGuideLayer(); this.boundsRotHandles[index] = rotHandle; } this.boundsScaleHandles[index] = new paper.Path.Rectangle({ center: segment.point, data: { index: index, isScaleHandle: true, isHelperItem: true, noSelect: true, noHover: true }, size: [size / paper.view.zoom, size / paper.view.zoom], fillColor: getGuideColor('blue'), parent: getGuideLayer() }); } } removeBoundsPath () { removeHelperItems(); this.boundsPath = null; this.boundsScaleHandles.length = 0; this.boundsRotHandles.length = 0; } } export default BoundingBoxTool;