{
const value = {
drawArrowHead: true,
drawLengthLabel: true,
drawArc: true,
drawArcLabel: true
};
let width = 600;
let height = 300;
const canvas = DOM.canvas(width, height);
const p = new paper.PaperScope();
paper.setup(canvas);
// variable has to come before function, otherwise it doesn't work;(I don't know why)
let tool = new p.Tool();
var path, arrowHeadPath, arcPath, lengthSymbolPath, arcBasePath;
var text, lengthText;
var start;
tool.onMouseDown = function (event) {
if (path) path.clear();
path = new p.Path();
path.strokeColor = "black";
start = event.point;
//adding two start ensures both path:[start, end] are initialized,
//the drag will depends on the initialized path[1].
path.add(start);
path.add(start);
};
tool.onMouseDrag = function (event) {
[path, arrowHeadPath] = placeArrow(
start,
event.point,
p,
value,
path,
arrowHeadPath
);
[text, arcBasePath, arcPath] = placeArc(
start,
event.point,
p,
value,
text,
arcBasePath,
arcPath
);
[lengthText, lengthSymbolPath] = placeLengthSymbol(
start,
event.point,
p,
value,
lengthText,
lengthSymbolPath
);
};
return canvas;
}
/**
* placeArrow draws the line that user drags from a to b, then places a head to the tip of the line ending to show line's direction.
* caller can pass either *uninitialized or initialized @arrowHeadPath path variable.
* @param {start} the origin of the line where the user's drag starts, if a line is (a, b), start will be a.
* @param {end} the end of the line where the user's drag ends, if a line is (a, b), end will be b.
* @param {value} the global setting varible, value.drawArrowHead will be checked to draw the "<" of <-- or not --.
* @param {p} the scope paths(@arrowHeadPath) will be drawn to.
* @param {arrowHeadPath} the path variable for head of the arrow.
* @return {the updated text, arrowHeadPath variables that contains desired drawing content.}
*/
function placeArrow(start, end, p, value, path, arrowHeadPath) {
let placeArrowHead = function (headPoint, delta) {
arrowHeadPath
? (arrowHeadPath.segments = [])
: (arrowHeadPath = new p.Path());
var arrowBasePoint = headPoint.subtract(delta.normalize(10));
var arrowLeftPoint = arrowBasePoint.add(delta.normalize(-8).rotate(90));
var arrowRightPoint = arrowBasePoint.add(delta.normalize(8).rotate(90));
arrowHeadPath.strokeColor = "black";
arrowHeadPath.add(arrowLeftPoint);
arrowHeadPath.add(headPoint);
arrowHeadPath.add(arrowRightPoint);
return arrowHeadPath;
};
path.removeSegment(1);
path.add(end);
var delta = path.segments[1].point.subtract(path.segments[0].point);
if (value.drawArrowHead) arrowHeadPath = placeArrowHead(end, delta);
return [path, arrowHeadPath];
}
/**
* placeLengthSymbol function draws the text/number for the line user drags, and draws a bracket to visualize the relationship between
* the line and the number. caller can pass either *uninitialized or initialized @text, @arcBasePath or @arcPath path variable.
* @param {start} the origin of the line where the user's drag starts, if a line is (a, b), start will be a.
* @param {end} the end of the line where the user's drag ends, if a line is (a, b), end will be b.
* @param {value} the global setting varible, value.drawArcLabel will be checked to draw the @text or not.
* @param {p} the scope paths(@arcBasePath and @arcPath) will be drawn to.
* @param {text} numerical number that shows the angel of line respect to the horizontal @arcBasePath
* @param {arcBasePath} the horizontal dashed path variable for starting reference of the arc.
* @param {arcPath} the dashed arc path variable itself visualizing the @text relation with the arc.
* @return {the updated text, arcBasePath and arcPath variables that contains desired drawing content.}
*/
function placeArc(start, end, p, value, text, arcBasePath, arcPath) {
let placeArcTextLabel = function () {
// if the text is uninitialized, initialize it with a path variable
// if the text is initialized, clear all it's content on the canvas, and reinitialize.
if (text) text.content = "";
text = new p.PointText({
point: start.add(through_),
content: `${Math.trunc(delta.angle * 1000) / 1000.0}`
});
return text;
};
var delta = end.subtract(start);
var from_ = new p.Point(30, 0);
var through_ = from_.rotate(delta.angle / 2);
var to_ = from_.rotate(delta.angle);
// if the arcPath or arcBasePath is uninitialized, initialize them with a path variable
// if the arcPath or arcBasePath is initialized, clear their path on the canvas, and reinitialize.
if (arcPath) arcPath.clear();
if (arcBasePath) arcBasePath.remove();
arcBasePath = new p.Path({
segments: [start, [start.x + 50, start.y]],
strokeColor: "black",
dashArray: [1, 1]
});
arcPath = new p.Path.Arc({
from: start.add(from_),
through: start.add(through_),
to: start.add(to_),
strokeColor: "black",
dashArray: [1, 1]
});
if (value.drawArcLabel) text = placeArcTextLabel();
return [text, arcBasePath, arcPath];
}
/**
* placeLengthSymbol function draws the text/number for the line user drags, and draws a bracket to visualize the relationship between
* the line and the number. caller can pass either *uninitialized or initialized @lengthText and @lengthSymbolPath path variable.
* @param {start} the origin of the line where the user's drag starts, if a line is (a, b), start will be a.
* @param {end} the end of the line where the user's drag ends, if a line is (a, b), end will be b.
* @param {value} the global setting varible, value.drawLengthLabel will be checked to draw the @Textlabel or not.
* @param {p} the scope paths(lengthText and lengthSymbolPath) will be drawn to.
* @param {lengthText} the path variable for length text/number, e.g. 103.323 that will be labeled to the line
* @param {lengthSymbolPath} the path variable for brakect that will be draw to better visualized relationship between line and number.
* @return {the updated lengthText and lengthSymbolPath variables that contains desired drawing content.}
*/
function placeLengthSymbol(start, end, p, value, lengthText, lengthSymbolPath) {
let placeLengthTextLabel = function () {
// if the lengthText is uninitialized, initialize it with a path variable
// if the lengthText is initialized, clear all it's content on the canvas, and reinitialize.
if (lengthText) {
lengthText.content = "";
}
lengthText = new p.PointText({
point: lengthSymbolPath.segments[3].point.add(
delta.normalize(8).rotate(90).multiply(sign)
),
content: `${Math.trunc(delta.length * 1000) / 1000.0}`,
justification: "center"
});
return lengthText;
};
var delta = end.subtract(start);
var upDownSegLen = 5;
// if the lengthSymbolPath is uninitialized, initialize it with a path variable
// if the lengthSymbolPath is initialized, clear it's path on the canvas, and reinitialize.
if (lengthSymbolPath) lengthSymbolPath.clear();
lengthSymbolPath = new p.Path();
var sign = delta.y > 0 ? 1 : -1;
var upSegment = delta.normalize(upDownSegLen).rotate(45 * sign);
var downSegment = upSegment.rotate(-90 * sign);
var lengthSegment = delta
.divide(2)
.subtract(delta.normalize((2 * upDownSegLen) / Math.sqrt(2)));
var startPoint = start.add(delta.normalize(8).rotate(90).multiply(sign));
lengthSymbolPath.add(startPoint);
lengthSymbolPath.lineBy(upSegment);
lengthSymbolPath.lineBy(lengthSegment);
lengthSymbolPath.lineBy(upSegment);
lengthSymbolPath.lineBy(downSegment);
lengthSymbolPath.lineBy(lengthSegment);
lengthSymbolPath.lineBy(downSegment);
lengthSymbolPath.dashArray = [1, 1];
lengthSymbolPath.strokeColor = "black";
if (value.drawLengthLabel) lengthText = placeLengthTextLabel();
return [lengthText, lengthSymbolPath];
}
paper = require("paper")
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.