import { pointInventory as Inv } from "90d0ee0bf9ccdd9b"
import {
canvasPoint,
findItemNameInGroup,
ensureGroupExistsInPaper,
addChildToGroup,
activateTool,
mainKids,
hidKids,
createMainFromHidden
} from "f7064faddbbc3e58"
canvasValues = {
let canvasValues = {
defaltSize: 40,
scale: 6,
scaleFactor: 5,
gridScale: 40 + 6 * 5
};
return canvasValues;
}
gridSize = (defaltSize, scale, scaleFactor) => {
return defaltSize + scale * scaleFactor;
}
function scalePathsInMainGroup(p) {
hidKids(p).forEach((item) => {
createMainFromHidden(p, item, canvasValues.gridScale);
});
}
/**
* Rescale the path to fit the new size of canvas. We want to rescale all points in mainPath to fit the
* new canvas size.
* @param {*} p - paper.js scope object where we can access the mainPath and penPath.
*/
function rescalePath(p) {
scalePathsInMainGroup(p);
// console.log(mainGroup);
}
/**
* Make the canvasLayer the active layer, Sets up the canvas with the grid lines and the default scale.
* @param {*} p - paper.js scope object
*/
function setUpCanvas(p) {
var canvasTool = activateTool("canvasTool", p);
if (!p.project.activeLayer.children["canvasGroup"]) {
var canvasGroup = new p.Group({
name: "canvasGroup"
});
canvasGroup.locked = true;
}
drawGridLines(p);
}
/**
* Calling this function will draw grid lines of calculated grid size on the canvas. As the scale changes,
* the grid lines details will be increased or decreased to fit the canvas.
* @param {*} p - the paper.js scope object, where we can access all canvos components.
*/
function drawGridLines(p) {
var canvasGroup = ensureGroupExistsInPaper("canvasGroup", p);
canvasGroup.removeChildren();
var gSize = gridSize(
canvasValues.defaltSize,
canvasValues.scale,
canvasValues.scaleFactor
);
var boundingRect = p.view.bounds;
var center = p.view.center;
var xPos = center.x;
var yPos = center.y;
function drawLines(newGridSize, width, color) {
var horizontalLine = new p.Path({
segments: [
[boundingRect.left, center.y],
[boundingRect.right, center.y]
],
strokeWidth: 2,
strokeColor: "Green"
});
canvasGroup.addChild(horizontalLine);
var verticalLine = new p.Path({
segments: [
[center.x, boundingRect.bottom],
[center.x, boundingRect.top]
],
strokeWidth: 2,
strokeColor: "Green"
});
canvasGroup.addChild(verticalLine);
for (var i = 0; yPos >= boundingRect.top; i++) {
yPos -= newGridSize;
var leftPoint = new p.Point(boundingRect.left, yPos);
var rightPoint = new p.Point(boundingRect.right, yPos);
var aLine = new p.Path.Line(leftPoint, rightPoint);
aLine.strokeColor = color;
aLine.strokeWidth = width;
canvasGroup.addChild(aLine);
}
yPos = center.y;
for (var i = 0; yPos <= boundingRect.bottom; i++) {
yPos += newGridSize;
var leftPoint = new p.Point(boundingRect.left, yPos);
var rightPoint = new p.Point(boundingRect.right, yPos);
var aLine = new p.Path.Line(leftPoint, rightPoint);
aLine.strokeColor = color;
aLine.strokeWidth = width;
canvasGroup.addChild(aLine);
}
yPos = center.y;
for (var i = 0; xPos >= boundingRect.left; i++) {
xPos -= newGridSize;
var topPoint = new p.Point(xPos, boundingRect.top);
var bottomPoint = new p.Point(xPos, boundingRect.bottom);
var aLine = new p.Path.Line(topPoint, bottomPoint);
aLine.strokeColor = color;
aLine.strokeWidth = width;
canvasGroup.addChild(aLine);
}
xPos = center.x;
for (var i = 0; xPos <= boundingRect.right; i++) {
xPos += newGridSize;
var topPoint = new p.Point(xPos, boundingRect.top);
var bottomPoint = new p.Point(xPos, boundingRect.bottom);
var aLine = new p.Path.Line(topPoint, bottomPoint);
aLine.strokeColor = color;
aLine.strokeWidth = width;
canvasGroup.addChild(aLine);
}
xPos = center.x;
}
if (canvasValues.scale > 4) {
var color = canvasValues.scale > 6 ? "black" : "#b3b3b3";
drawLines(gSize / 5, 0.2, color);
drawLines(gSize, 1, "black");
} else {
drawLines(gSize, 1, "black");
}
}
/**
* Calling this function will zoom in, and calls drawGridLine function that draw grid lines of calculated grid size
* on the canvas.
* @param {*} p - the paper.js scope object, where we can access all canvos components.
*/
function btnZoomInFunction(p) {
canvasValues.scale += 1;
canvasValues.gridScale = gridSize(
canvasValues.defaltSize,
canvasValues.scale,
canvasValues.scaleFactor
);
drawGridLines(p);
rescalePath(p);
Inv.recalc(p);
document.dispatchEvent(new CustomEvent("formChange"));
}
/**
* Calling this function will zoom out, and calls drawGridLine function that draw grid lines of calculated grid size
* on the canvas.
* @param {*} p - the paper.js scope object, where we can access all canvos components.
*/
function btnZoomOutFunction(p) {
if (canvasValues.scale > -4) {
canvasValues.scale -= 1;
canvasValues.gridScale = gridSize(
canvasValues.defaltSize,
canvasValues.scale,
canvasValues.scaleFactor
);
}
drawGridLines(p);
rescalePath(p);
Inv.recalc(p);
document.dispatchEvent(new CustomEvent("formChange"));
}
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.