diff --git a/src/containers/select-mode.jsx b/src/containers/select-mode.jsx index 104e3e98..e9ecd631 100644 --- a/src/containers/select-mode.jsx +++ b/src/containers/select-mode.jsx @@ -9,7 +9,7 @@ import {setHoveredItem, clearHoveredItem} from '../reducers/hover'; import {getHoveredItem} from '../helper/hover'; import {rectSelect} from '../helper/guides'; -import {clearSelection, selectRootItem, processRectangularSelection} from '../helper/selection'; +import {selectRootItem, processRectangularSelection} from '../helper/selection'; import SelectModeComponent from '../components/select-mode.jsx'; import BoundingBoxTool from '../helper/bounding-box/bounding-box-tool'; @@ -66,12 +66,18 @@ class SelectMode extends React.Component { this.boundingBoxTool.setSelectionBounds(); this.tool = new paper.Tool(); + // Define these to sate linter const selectMode = this; + const hoveredItemProp = this.props.hoveredItem; + const setHoveredItemProp = this.props.setHoveredItem; + const onUpdateSvgProp = this.props.onUpdateSvg; + this.tool.onMouseDown = function (event) { - if (event.event.button > 0) return; // only first mouse button + if (event.event.button > 0) return; // only first mouse button selectMode.props.clearHoveredItem(); - if (!selectMode.boundingBoxTool.onMouseDown( + if (!selectMode.boundingBoxTool + .onMouseDown( event, event.modifiers.alt, event.modifiers.shift, @@ -82,20 +88,19 @@ class SelectMode extends React.Component { this.tool.onMouseMove = function (event) { const hoveredItem = getHoveredItem(event, selectMode.getHitOptions()); - const oldHoveredItem = selectMode.props.hoveredItem; - if ((!hoveredItem && oldHoveredItem) || // There is no longer a hovered item - (hoveredItem && !oldHoveredItem) || // There is now a hovered item - (hoveredItem && oldHoveredItem && hoveredItem.id !== oldHoveredItem.id)) { // hovered item changed - if (oldHoveredItem) { - oldHoveredItem.remove(); + if ((!hoveredItem && hoveredItemProp) || // There is no longer a hovered item + (hoveredItem && !hoveredItemProp) || // There is now a hovered item + (hoveredItem && hoveredItemProp && hoveredItem.id !== hoveredItemProp.id)) { // hovered item changed + if (hoveredItemProp) { + hoveredItemProp.remove(); } - selectMode.props.setHoveredItem(hoveredItem); + setHoveredItemProp(hoveredItem); } }; this.tool.onMouseDrag = function (event) { - if (event.event.button > 0) return; // only first mouse button + if (event.event.button > 0) return; // only first mouse button if (selectMode.selectionBoxMode) { selectMode.selectionRect = rectSelect(event); @@ -107,17 +112,17 @@ class SelectMode extends React.Component { }; this.tool.onMouseUp = function (event) { - if (event.event.button > 0) return; // only first mouse button + if (event.event.button > 0) return; // only first mouse button if (selectMode.selectionBoxMode) { if (selectMode.selectionRect) { - processRectangularSelection(event, selectMode.selectionRect); + processRectangularSelection(event, selectMode.selectionRect, Modes.SELECT); selectMode.selectionRect.remove(); } selectMode.boundingBoxTool.setSelectionBounds(); } else { selectMode.boundingBoxTool.onMouseUp(event); - selectMode.props.onUpdateSvg(); + onUpdateSvgProp(); } selectMode.selectionBoxMode = false; selectMode.selectionRect = null; diff --git a/src/helper/bounding-box/bounding-box-tool.js b/src/helper/bounding-box/bounding-box-tool.js index 46bd2501..32d96918 100644 --- a/src/helper/bounding-box/bounding-box-tool.js +++ b/src/helper/bounding-box/bounding-box-tool.js @@ -10,7 +10,12 @@ 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'; +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, diff --git a/src/helper/bounding-box/scale-tool.js b/src/helper/bounding-box/scale-tool.js index 2a20ba68..23cb96eb 100644 --- a/src/helper/bounding-box/scale-tool.js +++ b/src/helper/bounding-box/scale-tool.js @@ -19,6 +19,8 @@ class ScaleTool { /** * @param {!paper.HitResult} hitResult Data about the location of the mouse click * @param {!object} boundsPath Where the boundaries of the hit item are + * @param {!object} boundsScaleHandles Bounding box scale handles + * @param {!object} boundsRotHandles Bounding box rotation handle * @param {!Array.} selectedItems Set of selected paper.Items * @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) diff --git a/src/helper/compound-path.js b/src/helper/compound-path.js index 89e51b8e..24c808b2 100644 --- a/src/helper/compound-path.js +++ b/src/helper/compound-path.js @@ -20,59 +20,8 @@ const getItemsCompoundPath = function (item) { }; - -// const createFromSelection = function () { -// const items = getSelectedPaths(); -// if (items.length < 2) return; - -// const path = new paper.CompoundPath({fillRule: 'evenodd'}); - -// for (let i = 0; i < items.length; i++) { -// path.addChild(items[i]); -// items[i].selected = false; -// } - -// path = pg.stylebar.applyActiveToolbarStyle(path); - -// pg.selection.setItemSelection(path, true); -// pg.undo.snapshot('createCompoundPathFromSelection'); -// }; - - -// const releaseSelection = function () { -// const items = pg.selection.getSelectedItems(); - -// const cPathsToDelete = []; -// for (const i=0; i 0) { const group = new paper.Group(items); - // jQuery(document).trigger('Grouped'); + // @todo: Set selection bounds; enable/disable grouping icons // @todo add back undo // pg.undo.snapshot('groupItems'); return group; diff --git a/src/helper/guides.js b/src/helper/guides.js index ec4be677..ffd65d76 100644 --- a/src/helper/guides.js +++ b/src/helper/guides.js @@ -57,54 +57,6 @@ const rectSelect = function (event, color) { return rect; }; -const line = function (from, to, color) { - const theLine = new paper.Path.Line(from, to); - const zoom = 1 / paper.view.zoom; - setDefaultGuideStyle(theLine); - if (!color) color = GUIDE_GREY; - theLine.parent = getGuideLayer(); - theLine.strokeColor = color; - theLine.strokeColor = color; - theLine.dashArray = [5 * zoom, 5 * zoom]; - theLine.data.isHelperItem = true; - return theLine; -}; - -const crossPivot = function (center, color) { - const zoom = 1 / paper.view.zoom; - const star = new paper.Path.Star(center, 4, 4 * zoom, 0.5 * zoom); - setDefaultGuideStyle(star); - if (!color) color = GUIDE_BLUE; - star.parent = getGuideLayer(); - star.fillColor = color; - star.strokeColor = color; - star.strokeWidth = 0.5 * zoom; - star.data.isHelperItem = true; - star.rotate(45); - - return star; -}; - -const rotPivot = function (center, color) { - const zoom = 1 / paper.view.zoom; - const path = new paper.Path.Circle(center, 3 * zoom); - setDefaultGuideStyle(path); - if (!color) color = GUIDE_BLUE; - path.parent = getGuideLayer(); - path.fillColor = color; - path.data.isHelperItem = true; - - return path; -}; - -const label = function (pos, content, color) { - const text = new paper.PointText(pos); - if (!color) color = GUIDE_GREY; - text.parent = getGuideLayer(); - text.fillColor = color; - text.content = content; -}; - const getGuideColor = function (colorName) { if (colorName === 'blue') { return GUIDE_BLUE; @@ -113,60 +65,20 @@ const getGuideColor = function (colorName) { } }; -const getAllGuides = function () { - const allItems = []; - for (let i = 0; i < paper.project.layers.length; i++) { - const layer = paper.project.layers[i]; - for (let j = 0; j < layer.children.length; j++) { - const child = layer.children[j]; - // only give guides - if (!child.guide) { - continue; - } - allItems.push(child); - } - } - return allItems; -}; - -const getExportRectGuide = function () { - const guides = getAllGuides(); - for (let i = 0; i < guides.length; i++){ - if (guides[i].data && guides[i].data.isExportRect) { - return guides[i]; - } - } -}; - - const removeHelperItems = function () { removePaperItemsByDataTags(['isHelperItem']); }; - const removeAllGuides = function () { removePaperItemsByTags(['guide']); }; - -const removeExportRectGuide = function () { - removePaperItemsByDataTags(['isExportRect']); -}; - - export { hoverItem, hoverBounds, rectSelect, - line, - crossPivot, - rotPivot, - label, removeAllGuides, removeHelperItems, - removeExportRectGuide, - getAllGuides, - getExportRectGuide, getGuideColor, setDefaultGuideStyle }; diff --git a/src/helper/helper.js b/src/helper/helper.js index accadea6..7a041959 100644 --- a/src/helper/helper.js +++ b/src/helper/helper.js @@ -28,7 +28,6 @@ const getPaperItemsByTags = function (tags) { return foundItems; }; - const removePaperItemsByDataTags = function (tags) { const allItems = getAllPaperItems(true); for (const item of allItems) { @@ -40,7 +39,6 @@ const removePaperItemsByDataTags = function (tags) { } }; - const removePaperItemsByTags = function (tags) { const allItems = getAllPaperItems(true); for (const item of allItems) { @@ -52,7 +50,6 @@ const removePaperItemsByTags = function (tags) { } }; - export { getAllPaperItems, getPaperItemsByTags, diff --git a/src/helper/math.js b/src/helper/math.js index a1573087..a769aa67 100644 --- a/src/helper/math.js +++ b/src/helper/math.js @@ -27,7 +27,6 @@ const snapDeltaToAngle = function (delta, snapAngle) { return new paper.Point(dirx * d, diry * d); }; - export { checkPointsClose, getRandomInt, diff --git a/src/helper/selection.js b/src/helper/selection.js index 86b7b8af..6ecba05c 100644 --- a/src/helper/selection.js +++ b/src/helper/selection.js @@ -58,21 +58,15 @@ const setItemSelection = function (item, state) { if (parentGroup) { // do it recursive setItemSelection(parentGroup, state); - } else if (itemsCompoundPath) { setItemSelection(itemsCompoundPath, state); - } else { if (item.data && item.data.noSelect) { return; } setGroupSelection(item, state); } - // pg.statusbar.update(); - // pg.stylebar.updateFromSelection(); - // pg.stylebar.blurInputs(); - - // jQuery(document).trigger('SelectionChanged'); + // @todo: Update toolbar state on change }; @@ -94,13 +88,10 @@ const selectAllSegments = function () { const clearSelection = function () { paper.project.deselectAll(); - - // pg.statusbar.update(); - // pg.stylebar.blurInputs(); - // jQuery(document).trigger('SelectionChanged'); + // @todo: Update toolbar state on change }; -// this gets all selected non-grouped items and groups +// This gets all selected non-grouped items and groups // (alternative to paper.project.selectedItems, which includes // group children in addition to the group) // Returns in increasing Z order @@ -137,8 +128,7 @@ const deleteItemSelection = function () { items[i].remove(); } - // jQuery(document).trigger('DeleteItems'); - // jQuery(document).trigger('SelectionChanged'); + // @todo: Update toolbar state on change paper.project.view.update(); // @todo add back undo // pg.undo.snapshot('deleteItemSelection'); @@ -289,9 +279,8 @@ const deleteSegmentSelection = function () { for (let i = 0; i < items.length; i++) { deleteSegments(items[i]); } - - // jQuery(document).trigger('DeleteSegments'); - // jQuery(document).trigger('SelectionChanged'); + + // @todo: Update toolbar state on change paper.project.view.update(); // @todo add back undo // pg.undo.snapshot('deleteSegmentSelection'); @@ -308,7 +297,7 @@ const cloneSelection = function () { // pg.undo.snapshot('cloneSelection'); }; -// only returns paths, no compound paths, groups or any other stuff +// Only returns paths, no compound paths, groups or any other stuff const getSelectedPaths = function () { const allPaths = getSelectedItems(); const paths = []; @@ -359,7 +348,7 @@ const handleRectangularSelectionItems = function (item, event, rect, mode) { for (let j = 0; j < item.segments.length; j++) { const seg = item.segments[j]; if (rect.contains(seg.point)) { - if (mode === 'detail') { + if (mode === Modes.RESHAPE) { if (event.modifiers.shift && seg.selected) { seg.selected = false; } else { @@ -384,7 +373,7 @@ const handleRectangularSelectionItems = function (item, event, rect, mode) { if (intersections.length > 0 && !segmentMode) { // if in detail select mode, select the curves that intersect // with the selectionRect - if (mode === 'detail') { + if (mode === Modes.RESHAPE) { for (let k = 0; k < intersections.length; k++) { const curve = intersections[k].curve; // intersections contains every curve twice because @@ -411,7 +400,7 @@ const handleRectangularSelectionItems = function (item, event, rect, mode) { return false; } } - // pg.statusbar.update(); + // @todo: Update toolbar state on change } else if (isBoundsItem(item)) { if (checkBoundsItem(rect, item, event)) { @@ -442,7 +431,7 @@ const processRectangularSelection = function (event, rect, mode) { itemLoop: for (let i = 0; i < allItems.length; i++) { const item = allItems[i]; - if (mode === 'detail' && isPGTextItem(getRootItem(item))) { + if (mode === Modes.RESHAPE && isPGTextItem(getRootItem(item))) { continue itemLoop; } // check for item segment points inside selectionRect diff --git a/src/modes/modes.js b/src/modes/modes.js index 82394802..a12446e3 100644 --- a/src/modes/modes.js +++ b/src/modes/modes.js @@ -4,7 +4,8 @@ const Modes = keyMirror({ BRUSH: null, ERASER: null, LINE: null, - SELECT: null + SELECT: null, + RESHAPE: null }); export default Modes;