function mainGrp(p) {
return p.project.activeLayer.children["mainGroup"];
}
config = {
return {
fillColor: "#44DAB9",
fillAlpha: 0.3
};
}
function activateTool(toolName, p) {
var tool = p.tools.find((tool) => tool.name === toolName);
if (!tool) {
var tool = new p.Tool({ name: `${toolName}` });
}
tool.activate();
return tool;
}
gridPoint = function (canvasPoint, gridScale, p) {
return new p.Point(
(canvasPoint.x - p.view.center.x) / gridScale,
(canvasPoint.y - p.view.center.y) / gridScale
);
}
canvasPoint = function (gridPoint, gridScale, p) {
return new p.Point(
gridPoint.x * gridScale + p.view.center.x,
gridPoint.y * gridScale + p.view.center.y
);
}
function findItemNameInGroup(name, group) {
return group.children[name] ? group.children[name] : null;
}
function ensureGroupExistsInPaper(name, p) {
var children = p.project.activeLayer.children;
if (children[name]) return children[name];
else var group = new p.Group({ name: name });
return children[name];
}
/*
addChildInGroup("mainPath", Paper.Path, p, myGroup);
addChildInGroup("mainCircle", paper.Shape.Circle, p, myGroup);
*/
function addChildToGroup(childName, child, p, group) {
var children = group.children;
if (children[childName]) {
children[childName].remove();
}
child.name = childName;
group.addChild(child);
return children[childName];
}
function removeChildInGroup(childName, group) {
return group.children[childName].remove();
}
function hidGrp(p) {
return p.project.activeLayer.children["hiddenGroup"];
}
function hidKids(p) {
return p.project.activeLayer.children["hiddenGroup"].children;
}
function mainKids(p) {
return p.project.activeLayer.children["mainGroup"].children;
}
function tmpGrp(p) {
return p.project.activeLayer.children["tempGroup"];
}
function tmpKids(p) {
return p.project.activeLayer.children["tempGroup"].children;
}
function highlightPointList(list, p) {
list.forEach((point) => {
let tempPoint = new p.Path.Circle(point, 2);
tempPoint.fillColor = "white";
tempPoint.strokeColor = "green";
tempPoint.locked = true;
tmpGrp(p).addChild(tempPoint);
});
}
function highlightPoint(point, p) {
let tempPoint = new p.Path.Circle(point, 2);
tempPoint.fillColor = "white";
tempPoint.strokeColor = "green";
tempPoint.locked = true;
tmpGrp(p).addChild(tempPoint);
}
function getSelectedHidden(p) {
var selectedItems = __getSelected(p).map(
(item) => hidKids(p)[item.name.replace("main", "hidden")]
);
return selectedItems;
}
function createMainFromHidden(p, hiddenItem, gridScale) {
var newPosition = canvasPoint(hiddenItem.position, gridScale, p);
var newItem = hiddenItem.clone();
newItem.position = newPosition;
newItem.scale(gridScale, gridScale, newPosition);
newItem.name = hiddenItem.name.replace("hidden", "main");
newItem.strokeColor = "black";
newItem.fillColor = config.fillColor;
newItem.fillColor.alpha = config.fillAlpha;
newItem.strokeWidth = 2;
if (mainKids(p)[newItem.name]) {
mainKids(p)[newItem.name].remove();
}
mainGrp(p).addChild(newItem);
return newItem;
}
function pointOfPath(path, i) {
return path.segments[i].point;
}
/**
* Returns an array of selected items on the active layer of the project
* @param {*} ps - paper.js scope object
*/
function __getSelected(ps) {
// Get any main groups that contain a selected child; the group is considered selected.
let selectedGroups = ps.project.activeLayer.children.filter(
(c) => c.selected
);
// If nothing, return an empty array early.
if (selectedGroups.length === 0) {
return [];
}
// Gather all the children in the selected main groups in a single array.
let withinGroupSelectedItems = selectedGroups
.map((group) => group.children)
.flat();
// Return only the children in these groups which are actually selected.
return withinGroupSelectedItems.filter((item) => item.selected);
}
/**
* Clears the selection state of all items on the avtive layer of the project
* @param {*} ps - paper.js scope object
*/
function __clearSelects(ps) {
ps.project.activeLayer.children.forEach((c) => (c.selected = false));
}
selection = {
return {
content: [],
hid: function (p) {
return this.content.map(
(item) => hidKids(p)[item.name.replace("main", "hidden")]
);
},
clear: function (p) {
__clearSelects(p);
this.content = [];
},
push: function (item) {
if (!this.find(item)) this.content.push(item);
item.selected = true;
},
find: function (item) {
var a = this.content.filter((it) => it.name === item.name);
return a.length > 0 ? a[0] : null;
}
};
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.