scratch-paint/src/helper/selection.js

494 lines
15 KiB
JavaScript
Raw Normal View History

2017-09-11 14:23:30 -04:00
import paper from 'paper';
import Modes from '../modes/modes';
import {getAllPaperItems} from './helper';
import {getItemsGroup, isGroup} from './group';
2017-09-21 18:20:44 -04:00
import {getRootItem, isCompoundPathItem, isBoundsItem, isPathItem, isPGTextItem} from './item';
2017-09-11 14:23:30 -04:00
import {getItemsCompoundPath, isCompoundPath, isCompoundPathChild} from './compound-path';
const getAllSelectableItems = function () {
const allItems = getAllPaperItems();
const selectables = [];
for (let i = 0; i < allItems.length; i++) {
if (allItems[i].data && !allItems[i].data.isHelperItem) {
selectables.push(allItems[i]);
}
}
return selectables;
};
const selectItemSegments = function (item, state) {
if (item.children) {
for (let i = 0; i < item.children.length; i++) {
const child = item.children[i];
if (child.children && child.children.length > 0) {
selectItemSegments(child, state);
} else {
child.fullySelected = state;
}
}
} else {
for (let i = 0; i < item.segments.length; i++) {
item.segments[i].selected = state;
}
}
};
2017-09-21 18:20:44 -04:00
const setGroupSelection = function (root, selected, fullySelected) {
root.fullySelected = fullySelected;
2017-09-11 14:23:30 -04:00
root.selected = selected;
// select children of compound-path or group
if (isCompoundPath(root) || isGroup(root)) {
const children = root.children;
if (children) {
2017-09-21 18:20:44 -04:00
for (const child of children) {
if (isGroup(child)) {
setGroupSelection(child, selected, fullySelected);
} else {
child.fullySelected = fullySelected;
child.selected = selected;
}
2017-09-11 14:23:30 -04:00
}
}
}
};
2017-09-21 18:20:44 -04:00
const setItemSelection = function (item, state, fullySelected) {
2017-09-11 14:23:30 -04:00
const parentGroup = getItemsGroup(item);
const itemsCompoundPath = getItemsCompoundPath(item);
2017-09-21 10:36:26 -04:00
// if selection is in a group, select group
2017-09-11 14:23:30 -04:00
if (parentGroup) {
// do it recursive
2017-09-21 18:20:44 -04:00
setItemSelection(parentGroup, state, fullySelected);
2017-09-11 14:23:30 -04:00
} else if (itemsCompoundPath) {
2017-09-21 18:20:44 -04:00
setGroupSelection(itemsCompoundPath, state, fullySelected);
2017-09-11 14:23:30 -04:00
} else {
if (item.data && item.data.noSelect) {
return;
}
2017-09-21 18:20:44 -04:00
setGroupSelection(item, state, fullySelected);
2017-09-11 14:23:30 -04:00
}
2017-09-14 14:34:45 -04:00
// @todo: Update toolbar state on change
2017-09-11 14:23:30 -04:00
};
const selectAllItems = function () {
const items = getAllSelectableItems();
for (let i = 0; i < items.length; i++) {
setItemSelection(items[i], true);
}
};
const selectAllSegments = function () {
const items = getAllSelectableItems();
for (let i = 0; i < items.length; i++) {
selectItemSegments(items[i], true);
}
};
const clearSelection = function () {
paper.project.deselectAll();
2017-09-14 14:34:45 -04:00
// @todo: Update toolbar state on change
2017-09-11 14:23:30 -04:00
};
2017-09-14 14:34:45 -04:00
// This gets all selected non-grouped items and groups
2017-09-11 14:23:30 -04:00
// (alternative to paper.project.selectedItems, which includes
// group children in addition to the group)
// Returns in increasing Z order
const getSelectedItems = function (recursive) {
const allItems = paper.project.selectedItems;
const itemsAndGroups = [];
if (recursive) {
for (let i = 0; i < allItems.length; i++) {
const item = allItems[i];
if (item.data && !item.data.isSelectionBound) {
itemsAndGroups.push(item);
}
}
} else {
for (let i = 0; i < allItems.length; i++) {
const item = allItems[i];
if ((isGroup(item) && !isGroup(item.parent)) ||
!isGroup(item.parent)) {
if (item.data && !item.data.isSelectionBound) {
itemsAndGroups.push(item);
}
}
}
}
// sort items by index (0 at bottom)
itemsAndGroups.sort((a, b) => parseFloat(a.index) - parseFloat(b.index));
return itemsAndGroups;
};
2017-09-21 10:36:26 -04:00
const deleteItemSelection = function (recursive) {
const items = getSelectedItems(recursive);
2017-09-11 14:23:30 -04:00
for (let i = 0; i < items.length; i++) {
items[i].remove();
}
2017-09-14 14:34:45 -04:00
// @todo: Update toolbar state on change
2017-09-11 14:23:30 -04:00
paper.project.view.update();
// @todo add back undo
// pg.undo.snapshot('deleteItemSelection');
};
2017-09-21 10:36:26 -04:00
const removeSelectedSegments = function (recursive) {
2017-09-11 14:23:30 -04:00
// @todo add back undo
// pg.undo.snapshot('removeSelectedSegments');
2017-09-21 10:36:26 -04:00
const items = getSelectedItems(recursive);
2017-09-11 14:23:30 -04:00
const segmentsToRemove = [];
for (let i = 0; i < items.length; i++) {
const segments = items[i].segments;
for (let j = 0; j < segments.length; j++) {
const seg = segments[j];
if (seg.selected) {
segmentsToRemove.push(seg);
}
}
}
let removedSegments = false;
for (let i = 0; i < segmentsToRemove.length; i++) {
const seg = segmentsToRemove[i];
seg.remove();
removedSegments = true;
}
return removedSegments;
};
const deleteSelection = function (mode) {
if (mode === Modes.RESHAPE) {
// If there are points selected remove them. If not delete the item selected.
2017-09-21 10:36:26 -04:00
if (!removeSelectedSegments(true /* recursive */)) {
deleteItemSelection(true /* recursive */);
2017-09-11 14:23:30 -04:00
}
} else {
deleteItemSelection();
}
};
const splitPathRetainSelection = function (path, index, deselectSplitSegments) {
const selectedPoints = [];
// collect points of selected segments, so we can reselect them
// once the path is split.
for (let i = 0; i < path.segments.length; i++) {
const seg = path.segments[i];
if (seg.selected) {
if (deselectSplitSegments && i === index) {
continue;
}
selectedPoints.push(seg.point);
}
}
const newPath = path.split(index, 0);
if (!newPath) return;
// reselect all of the newPaths segments that are in the exact same location
// as the ones that are stored in selectedPoints
for (let i = 0; i < newPath.segments.length; i++) {
const seg = newPath.segments[i];
for (let j = 0; j < selectedPoints.length; j++) {
const point = selectedPoints[j];
if (point.x === seg.point.x && point.y === seg.point.y) {
seg.selected = true;
}
}
}
// only do this if path and newPath are different
// (split at more than one point)
if (path !== newPath) {
for (let i = 0; i < path.segments.length; i++) {
const seg = path.segments[i];
for (let j = 0; j < selectedPoints.length; j++) {
const point = selectedPoints[j];
if (point.x === seg.point.x && point.y === seg.point.y) {
seg.selected = true;
}
}
}
}
};
const splitPathAtSelectedSegments = function () {
const items = getSelectedItems();
for (let i = 0; i < items.length; i++) {
const item = items[i];
const segments = item.segments;
for (let j = 0; j < segments.length; j++) {
const segment = segments[j];
if (segment.selected) {
if (item.closed ||
(segment.next &&
!segment.next.selected &&
segment.previous &&
!segment.previous.selected)) {
splitPathRetainSelection(item, j, true);
splitPathAtSelectedSegments();
return;
}
}
}
}
};
const deleteSegments = function (item) {
if (item.children) {
for (let i = 0; i < item.children.length; i++) {
const child = item.children[i];
deleteSegments(child);
}
} else {
const segments = item.segments;
for (let j = 0; j < segments.length; j++) {
const segment = segments[j];
if (segment.selected) {
if (item.closed ||
(segment.next &&
!segment.next.selected &&
segment.previous &&
!segment.previous.selected)) {
splitPathRetainSelection(item, j);
deleteSelection();
return;
} else if (!item.closed) {
segment.remove();
j--; // decrease counter if we removed one from the loop
}
}
}
}
// remove items with no segments left
if (item.segments.length <= 0) {
item.remove();
}
};
const deleteSegmentSelection = function () {
const items = getSelectedItems();
for (let i = 0; i < items.length; i++) {
deleteSegments(items[i]);
}
2017-09-14 14:34:45 -04:00
// @todo: Update toolbar state on change
2017-09-11 14:23:30 -04:00
paper.project.view.update();
// @todo add back undo
// pg.undo.snapshot('deleteSegmentSelection');
};
2017-09-21 10:36:26 -04:00
const cloneSelection = function (recursive) {
const selectedItems = getSelectedItems(recursive);
2017-09-11 14:23:30 -04:00
for (let i = 0; i < selectedItems.length; i++) {
const item = selectedItems[i];
item.clone();
item.selected = false;
}
// @todo add back undo
// pg.undo.snapshot('cloneSelection');
};
2017-09-14 14:34:45 -04:00
// Only returns paths, no compound paths, groups or any other stuff
2017-09-11 14:23:30 -04:00
const getSelectedPaths = function () {
const allPaths = getSelectedItems();
const paths = [];
for (let i = 0; i < allPaths.length; i++) {
const path = allPaths[i];
if (path.className === 'Path') {
paths.push(path);
}
}
return paths;
};
2017-09-21 18:20:44 -04:00
const checkBoundsItem = function (selectionRect, item, event) {
const itemBounds = new paper.Path([
item.localToGlobal(item.internalBounds.topLeft),
item.localToGlobal(item.internalBounds.topRight),
item.localToGlobal(item.internalBounds.bottomRight),
item.localToGlobal(item.internalBounds.bottomLeft)
]);
itemBounds.closed = true;
itemBounds.guide = true;
for (let i = 0; i < itemBounds.segments.length; i++) {
const seg = itemBounds.segments[i];
if (selectionRect.contains(seg.point) ||
(i === 0 && selectionRect.getIntersections(itemBounds).length > 0)) {
if (event.modifiers.shift && item.selected) {
setItemSelection(item, false);
} else {
setItemSelection(item, true);
}
itemBounds.remove();
return true;
2017-09-11 14:23:30 -04:00
2017-09-21 18:20:44 -04:00
}
}
2017-09-11 14:23:30 -04:00
2017-09-21 18:20:44 -04:00
itemBounds.remove();
};
2017-09-11 14:23:30 -04:00
const handleRectangularSelectionItems = function (item, event, rect, mode) {
if (isPathItem(item)) {
let segmentMode = false;
// first round checks for segments inside the selectionRect
for (let j = 0; j < item.segments.length; j++) {
const seg = item.segments[j];
if (rect.contains(seg.point)) {
2017-09-14 14:34:45 -04:00
if (mode === Modes.RESHAPE) {
2017-09-11 14:23:30 -04:00
if (event.modifiers.shift && seg.selected) {
seg.selected = false;
} else {
seg.selected = true;
}
segmentMode = true;
} else {
if (event.modifiers.shift && item.selected) {
setItemSelection(item, false);
} else {
setItemSelection(item, true);
}
return false;
}
}
}
// second round checks for path intersections
const intersections = item.getIntersections(rect);
if (intersections.length > 0 && !segmentMode) {
2017-09-21 18:20:44 -04:00
// if in reshape mode, select the curves that intersect
2017-09-11 14:23:30 -04:00
// with the selectionRect
2017-09-14 14:34:45 -04:00
if (mode === Modes.RESHAPE) {
2017-09-11 14:23:30 -04:00
for (let k = 0; k < intersections.length; k++) {
const curve = intersections[k].curve;
// intersections contains every curve twice because
// the selectionRect intersects a circle always at
// two points. so we skip every other curve
if (k % 2 === 1) {
continue;
}
if (event.modifiers.shift) {
curve.selected = !curve.selected;
} else {
curve.selected = true;
}
}
} else {
if (event.modifiers.shift && item.selected) {
setItemSelection(item, false);
} else {
setItemSelection(item, true);
}
return false;
}
}
2017-09-14 14:34:45 -04:00
// @todo: Update toolbar state on change
2017-09-11 14:23:30 -04:00
2017-09-21 18:20:44 -04:00
} else if (isBoundsItem(item)) {
if (checkBoundsItem(rect, item, event)) {
return false;
}
2017-09-11 14:23:30 -04:00
}
return true;
};
// if the rectangular selection found a group, drill into it recursively
const rectangularSelectionGroupLoop = function (group, rect, root, event, mode) {
for (let i = 0; i < group.children.length; i++) {
const child = group.children[i];
if (isGroup(child) || isCompoundPathItem(child)) {
rectangularSelectionGroupLoop(child, rect, root, event, mode);
2017-09-21 18:20:44 -04:00
} else {
handleRectangularSelectionItems(child, event, rect, mode);
2017-09-11 14:23:30 -04:00
}
}
return true;
};
const processRectangularSelection = function (event, rect, mode) {
const allItems = getAllSelectableItems();
for (let i = 0; i < allItems.length; i++) {
const item = allItems[i];
2017-09-14 14:34:45 -04:00
if (mode === Modes.RESHAPE && isPGTextItem(getRootItem(item))) {
2017-09-21 18:20:44 -04:00
continue;
2017-09-11 14:23:30 -04:00
}
// check for item segment points inside selectionRect
if (isGroup(item) || isCompoundPathItem(item)) {
2017-09-21 18:20:44 -04:00
rectangularSelectionGroupLoop(item, rect, item, event, mode);
} else {
handleRectangularSelectionItems(item, event, rect, mode);
2017-09-11 14:23:30 -04:00
}
}
};
const selectRootItem = function () {
// when switching to the select tool while having a child object of a
2017-09-21 10:36:26 -04:00
// compound path or group selected, select the whole compound path or
// group instead. (otherwise the compound path breaks because of
// scale-grouping)
const items = getSelectedItems(true /* recursive */);
2017-09-11 14:23:30 -04:00
for (const item of items) {
if (isCompoundPathChild(item)) {
const cp = getItemsCompoundPath(item);
2017-09-21 18:20:44 -04:00
setItemSelection(cp, true, true /* fullySelected */);
2017-09-11 14:23:30 -04:00
}
2017-09-21 10:36:26 -04:00
const rootItem = getRootItem(item);
if (item !== rootItem) {
2017-09-21 18:20:44 -04:00
setItemSelection(rootItem, true, true /* fullySelected */);
2017-09-21 10:36:26 -04:00
}
2017-09-11 14:23:30 -04:00
}
};
const shouldShowIfSelection = function () {
return getSelectedItems().length > 0;
};
const shouldShowIfSelectionRecursive = function () {
return getSelectedItems(true /* recursive */).length > 0;
};
const shouldShowSelectAll = function () {
return paper.project.getItems({class: paper.PathItem}).length > 0;
};
export {
selectAllItems,
selectAllSegments,
clearSelection,
deleteSelection,
deleteItemSelection,
deleteSegmentSelection,
splitPathAtSelectedSegments,
cloneSelection,
setItemSelection,
setGroupSelection,
getSelectedItems,
getSelectedPaths,
removeSelectedSegments,
processRectangularSelection,
selectRootItem,
shouldShowIfSelection,
shouldShowIfSelectionRecursive,
shouldShowSelectAll
};