varkor/quiver
1
1
Fork 0
mirror of https://github.com/varkor/quiver.git synced 2024-08-15 16:50:29 +03:00
Code Issues Projects Releases Wiki Activity

Remove experimentation file

Browse Source
This commit is contained in:
varkor 2020-09-18 19:28:22 +01:00
parent d7e7448926
commit be476d518a
1 changed files with 0 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
src/arrow.html
View File

@ -1,147 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>quiver</title>
<link rel="icon" href="icon.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
}
.box {
position: absolute;
background: darkslategrey;
border-radius: 16px;
}
svg {
overflow: visible;
position: absolute;
pointer-events: none;
/* background: hsla(0, 0%, 0%, 0.3); */
}
.invalid {
display: none;
}
</style>
<script type="text/javascript" src="ds.js"></script>
<script type="text/javascript" src="dom.js"></script>
<script type="text/javascript" src="bezier.js"></script>
<script type="text/javascript" src="arrow.js"></script>
<script>
let drag = null;
class Box extends Shape.RoundedRect {
constructor(x, y) {
super(new Point(x, y), new Dimensions(64, 64), 16);
this.svg = document.createElement("div");
this.svg.classList.add("box");
this.redraw();
this.svg.addEventListener("mousedown", (event) => {
if (drag === null) {
const rect = this.svg.getBoundingClientRect();
drag = [
this, event.clientX - rect.left - this.size.width / 2,
event.clientY - rect.top - this.size.height / 2,
];
}
});
document.body.appendChild(this.svg);
}
redraw() {
this.svg.style.left = `${this.origin.x - this.size.width / 2}px`;
this.svg.style.top = `${this.origin.y - this.size.height / 2}px`;
this.svg.style.width = `${this.size.width}px`;
this.svg.style.height = `${this.size.height}px`;
}
}
window.addEventListener("mouseup", () => {
drag = null;
});
document.addEventListener("DOMContentLoaded", () => {
const source = new Box(64, 240);
const target = new Box(640, 240);
target.size.width = 512;
target.redraw();
// const arrow2 = new Arrow2(source, target);
const arrow = new Arrow(source, target, new ArrowStyle(), new Label());
// arrow.style.heads = ["hook-top"];
arrow.style.tails = ["hook-bottom"];
// arrow.style.heads = CONSTANTS.ARROW_HEAD_STYLE.CORNER;
// arrow.style.tails = CONSTANTS.ARROW_HEAD_STYLE.MAPS_TO;
// arrow.style.heads = CONSTANTS.ARROW_HEAD_STYLE.HARPOON_TOP;
arrow.style.level = 3;
// arrow.style.shorten = 400;
// arrow.style.dash_style = CONSTANTS.ARROW_DASH_STYLE.DOTTED;
arrow.style.body_style = CONSTANTS.ARROW_BODY_STYLE.SQUIGGLY;
arrow.label.alignment = CONSTANTS.LABEL_ALIGNMENT.CENTRE;
arrow.label.size = new Dimensions(100, 10);
arrow.redraw();
document.body.appendChild(arrow.element.element);
window.addEventListener("mousemove", (event) => {
if (drag !== null) {
const [shape, x, y] = drag;
shape.origin.x = event.clientX - x;
shape.origin.y = event.clientY - y;
shape.redraw();
arrow.redraw();
}
});
window.addEventListener("wheel", (event) => {
event.preventDefault();
arrow.style.curve += event.deltaY;
arrow.redraw();
}, { passive: false });
window.addEventListener("keydown", (event) => {
let redraw = false;
if (event.key === "ArrowLeft") {
--arrow.style.level;
redraw = true;
}
if (event.key === "ArrowRight") {
++arrow.style.level;
redraw = true;
}
arrow.style.level = Math.max(1, arrow.style.level);
if (redraw) {
arrow.redraw();
}
})
});
function visualise_rounded_rect(svg, x, y, w, h, border_radius) {
const points = new RoundedRectangle(
x, y, w, h, border_radius,
).points();
let rr_path = "";
let first = true;
for (const p of points) {
if (first) {
rr_path += `M ${p.x} ${p.y} `;
first = false;
} else {
rr_path += `L ${p.x} ${p.y} `;
}
}
new DOM.SVGElement("path", {
d: rr_path,
fill: "red",
stroke: "none",
}).add_to(svg);
}
</script>
</head>
<body>
</body>
</html>