Public
Edited
May 2, 2023
Importers
1 star
Insert cell
Insert cell
Insert cell
import { mutable selectedShape } from "66dd68183543e7f8"
Insert cell
import { pointInventory as Inv } from "90d0ee0bf9ccdd9b"
Insert cell
import { canvasValues, scalePathsInMainGroup } from "eb11a24ab32ae888"
Insert cell
hitOptions = {
let hitOptions = {
segments: true,
stroke: true,
fill: true,
tolerance: 5
};
return hitOptions;
}
Insert cell
function selectToolAction(p) {
var tool = activateTool("selectTool", p);
var start, startPosition;
let moveDelta;
let hitResult;

tool.onMouseMove = (ev) => {
__clearColor(p);
tmpGrp(p).removeChildren();

hitResult = p.project.hitTest(ev.point, hitOptions);
if (hitResult) {
displayHitResult(p, hitResult);
}
};

tool.onMouseDown = (toolEvent) => {
tmpGrp(p).removeChildren();
var previouslySelectedLen = selection.content.length;
start = toolEvent.point;
hitResult = p.project.hitTest(toolEvent.point, hitOptions);

selectHitResult(p, toolEvent, hitResult);

if (previouslySelectedLen !== selection.content.length)
document.dispatchEvent(new CustomEvent("formChange"));
};
tool.onMouseDrag = (ev) => {
if (hitResult && hitResult.item) {
dragSelected(p, ev, hitResult, tool);
}
};
tool.onMouseUp = (ev) => {
tool.dragDirection = null;
};
}
Insert cell
function dragSelected(p, ev, hitResult, tool) {
if (hitResult.type === "fill") {
// Determine how the shape moves along with the mouse, with shift?
let mainMove;
if (ev.modifiers.shift) {
if (tool.dragDirection === "x") {
mainMove = new p.Point(ev.delta.x, 0);
} else if (tool.dragDirection === "y") {
mainMove = new p.Point(0, ev.delta.y);
} else {
if (Math.abs(ev.delta.x) > Math.abs(ev.delta.y)) {
tool.dragDirection = "x";
mainMove = new p.Point(ev.delta.x, 0);
} else {
tool.dragDirection = "y";
mainMove = new p.Point(0, ev.delta.y);
}
}
} else {
mainMove = ev.delta;
}

selection.content.forEach((c) => {
c.position = c.position.add(mainMove);
var h_name = c.name.replace("main", "hidden");
const hiddenItem = hidKids(p)[h_name];
const hiddenMove = mainMove.divide(canvasValues.gridScale); // Scale the mainMove according to gridScale
hiddenItem.position = hiddenItem.position.add(hiddenMove); // Add hiddenMove to hiddenItem's position
});
tmpGrp(p).removeChildren();
Inv.recalcIntersections(p);
highlightPointList(Inv.intersections, p);
document.dispatchEvent(new CustomEvent("itemChange")); // Move the event dispatch outside the loop
}
}
Insert cell
function selectHitResult(p, toolEvent, hitResult) {
function clearSelectionIfNotShift() {
if (!toolEvent.event.shiftKey) selection.clear(p);
}
if (hitResult) {
switch (hitResult.type) {
case "fill":
clearSelectionIfNotShift();
if (hitResult.item.parent instanceof p.CompoundPath) {
hitResult.item.parent.selected = true;
selection.push(hitResult.item.parent);
} else {
hitResult.item.selected = true;
selection.push(hitResult.item);
}
break;
case "stroke":
clearSelectionIfNotShift();
break;
case "segment":
clearSelectionIfNotShift();
break;
}
} else {
clearSelectionIfNotShift();
}
}
Insert cell
function displayHitResult(p, hitResult) {
switch (hitResult.type) {
case "fill":
if (hitResult.item.parent instanceof p.CompoundPath) {
hitResult.item.parent.strokeColor = "green";
} else {
hitResult.item.strokeColor = "green";
}
break;
case "stroke":
var curveRef = hitResult.location.curve;
let tempPath = new p.Path();
tempPath.moveTo(curveRef.point1);
tempPath.cubicCurveTo(
curveRef.point1.add(curveRef.handle1),
curveRef.point2.add(curveRef.handle2),
curveRef.point2
);
tempPath.strokeColor = "green";
tempPath.strokeWidth = 1;
tmpGrp(p).addChild(tempPath);
break;
case "segment":
var segRef = hitResult.segment;
let tempPoint = new p.Path.Circle(segRef.point, 2);
tempPoint.fillColor = "white";
tempPoint.strokeColor = "green";
tmpGrp(p).addChild(tempPoint);
break;
}
}
Insert cell
/**
* Clears the selection state of all items on the avtive layer of the project
* @param {*} ps - paper.js scope object
*/
function __clearColor(p) {
mainKids(p).forEach((c) => (c.strokeColor = "black"));
}
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more