scratchfoundation/scratch-paint
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-paint.git synced 2025-01-10 14:42:13 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Change the opacity code so that the crosshair stays opaque over the entirety of the selection

Browse source
This commit is contained in:
DD Liu 2020-02-11 21:44:45 -05:00
parent edfa1e2316
commit e8c33c8779
2 changed files with 39 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/helper/layer.js
View file

@ -4,6 +4,7 @@ import {ART_BOARD_WIDTH, ART_BOARD_HEIGHT, CENTER} from './view';
import {isGroupItem} from './item';
const CROSSHAIR_SIZE = 16;
const CROSSHAIR_FULL_OPACITY = 0.65;
const _getLayer = function (layerString) {
for (const layer of paper.project.layers) {
@ -234,7 +235,7 @@ const _makeCrosshair = function (opacity, parent) {
const _makeDragCrosshairLayer = function () {
const dragCrosshairLayer = new paper.Layer();
_makeCrosshair(0.65, dragCrosshairLayer);
_makeCrosshair(CROSSHAIR_FULL_OPACITY, dragCrosshairLayer);
dragCrosshairLayer.data.isDragCrosshairLayer = true;
dragCrosshairLayer.visible = false;
return dragCrosshairLayer;
@ -270,6 +271,7 @@ const setupLayers = function () {
export {
CROSSHAIR_SIZE,
CROSSHAIR_FULL_OPACITY,
createCanvas,
hideGuideLayers,
showGuideLayers,

40
src/helper/selection-tools/move-tool.js
View file

@ -6,10 +6,11 @@ import {checkPointsClose, snapDeltaToAngle} from '../math';
import {ART_BOARD_WIDTH, ART_BOARD_HEIGHT, CENTER} from '../view';
import {clearSelection, cloneSelection, getSelectedLeafItems, getSelectedRootItems, setItemSelection}
from '../selection';
import {getDragCrosshairLayer} from '../layer';
import {getDragCrosshairLayer, CROSSHAIR_FULL_OPACITY} from '../layer';
/** Snap to align selection center to rotation center within this distance */
const SNAPPING_THRESHOLD = 4;
const FADE_DISTANCE = 10;
/**
* Tool to handle dragging an item to reposition it in a selection mode.
@ -138,7 +139,11 @@ class MoveTool {
snapVector = CENTER.subtract(this.selectionCenter);
}
}
if (this.selectedItems.length === 0) {
return;
}
let bounds;
for (const item of this.selectedItems) {
// add the position of the item before the drag started
// for later use in the snap calculation
@ -153,6 +158,12 @@ class MoveTool {
} else {
item.position = item.data.origPos.add(dragVector);
}
if (bounds) {
bounds = bounds.unite(item.bounds);
} else {
bounds = item.bounds;
}
}
if (this.firstDrag) {
@ -160,9 +171,30 @@ class MoveTool {
getDragCrosshairLayer().visible = true;
this.firstDrag = false;
}
const opacity = Math.max(0,
1 - ((CENTER.getDistance(this.selectionCenter.add(dragVector)) / CENTER.x) * (4 * paper.view.zoom)));
getDragCrosshairLayer().opacity = opacity;
let opacityMultiplier = 1;
const newCenter = this.selectionCenter.add(dragVector);
if ((CENTER.y < bounds.top && CENTER.x < bounds.left) ||
(CENTER.y > bounds.bottom && CENTER.x < bounds.left) ||
(CENTER.y < bounds.top && CENTER.x > bounds.right) ||
(CENTER.y > bounds.bottom && CENTER.x > bounds.right)) {
// 4 corners
const distX = Math.max(CENTER.x - bounds.right, bounds.left - CENTER.x);
const distY = Math.max(CENTER.y - bounds.bottom, bounds.top - CENTER.y);
const dist = Math.sqrt((distX * distX) + (distY * distY));
opacityMultiplier =
Math.max(0, (1 - (dist / (FADE_DISTANCE / paper.view.zoom))));
} else if (CENTER.y < bounds.top || CENTER.y > bounds.bottom) {
// above or below
opacityMultiplier = Math.max(0,
(1 - ((Math.abs(CENTER.y - newCenter.y) - (bounds.height / 2)) / (FADE_DISTANCE / paper.view.zoom))));
} else if (CENTER.x < bounds.left || CENTER.x > bounds.right) {
// left or right
opacityMultiplier = Math.max(0,
(1 - ((Math.abs(CENTER.x - newCenter.x) - (bounds.width / 2)) / (FADE_DISTANCE / paper.view.zoom))));
} // else within selection bounds, always show drag crosshair at full opacity
getDragCrosshairLayer().opacity = CROSSHAIR_FULL_OPACITY * opacityMultiplier;
}
onMouseUp () {
this.firstDrag = false;