import { pointInventory as Inv } from "90d0ee0bf9ccdd9b"
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
function enableSliderfunctions(p, form, fields, item) {
let oldValue = {};
const handleItemChange = (event) => {
updateFormUponCanvasChange(p, form, oldValue);
};
document.addEventListener("itemChange", handleItemChange);
handleSliderAndValueChange(p, form, fields, item, oldValue);
}
function handleSliderAndValueChange(p, form, fields, item, oldValue) {
item.forEach((eachItem) => {
var mainName = eachItem.name.replace("hidden", "main");
fields.forEach((field) => {
// Attach input event listener
form.querySelector(`#${field}`).addEventListener("input", (event) => {
updateCanvas(field, event, form, p, mainName, oldValue);
updateInput(field, event, p, form);
Inv.recalcIntersections(p);
});
// Attach change event listener for the value element
form
.querySelector(`#${field}Value`)
.addEventListener("change", (event) => {
updateCanvas(field, event, form, p, mainName, oldValue);
updateSlider(field, event, p, form);
Inv.recalcIntersections(p);
});
});
});
}
function updateSlider(property, event, p, form) {
var newValue = parseFloat(event.target.value);
form.querySelector(`#${property}`).value = newValue;
}
function updateInput(property, event, p, form) {
var newValue = parseFloat(event.target.value);
form.querySelector(`#${property}Value`).value = newValue;
}
function updateFormUponCanvasChange(p, form, old) {
var items = getSelectedHidden(p);
items.forEach((item) => {
form.querySelector("#x").value = item.position.x;
form.querySelector("#xValue").value = item.position.x.toFixed(2);
form.querySelector("#y").value = item.position.y;
form.querySelector("#yValue").value = item.position.y.toFixed(2);
});
var newCenter = items.reduce((a, c) => a.add(c.position), new p.Point(0, 0));
if (old["scaleCenter"]) old["scaleCenter"] = newCenter.divide(items.length);
if (old["rotCenter"]) old["rotCenter"] = newCenter.divide(items.length);
}
function updateCanvas(property, event, form, p, mainName, oldValue) {
if (property === "x" || property === "y") {
updateCanvasPosition(property, event, form, p, oldValue, "input");
} else if (property === "r") {
updateCanvasRadius(event, form, p, mainName, "input");
} else if (property === "w" || property === "h") {
updateCanvasRec(property, event, form, p, mainName, "input");
} else if (property === "rotation") {
updateCanvasRotation(event, form, p, oldValue, "input");
} else if (property === "scale") {
updateCanvasScale(event, form, p, oldValue, "input");
}
}
function updateCanvasPosition(property, event, form, p, old, change) {
var newValue = parseFloat(event.target.value);
var items = getSelectedHidden(p);
if (old[property] === undefined) {
old[property] = form.querySelector(`#${property}`).value;
}
var changeInValue = newValue - old[property];
old[property] = newValue;
items.forEach((item) => {
var mainName = item.name.replace("hidden", "main");
item.position[property] += changeInValue;
if (change === "slider") {
form.querySelector(`#${property}`).value = newValue;
} else if (change === "input") {
form.querySelector(`#${property}Value`).value = newValue.toFixed(2);
}
mainKids(p)[mainName].position = canvasPoint(
item.position,
canvasValues.gridScale,
p
);
});
if (old["rotCenter"]) old["rotCenter"][property] += changeInValue;
if (old["scaleCenter"]) old["scaleCenter"][property] += changeInValue;
p.view.update();
}
function updateCanvasRotation(event, form, p, old, change) {
var items = getSelectedHidden(p);
const newRot = parseFloat(event.target.value);
if (old["rotation"] === undefined)
old["rotation"] = form.querySelector(`#${"rotation"}`).value;
var changeInValue = newRot - old["rotation"];
old["rotation"] = newRot;
var rotCenter = items
.reduce((a, cur) => a.add(cur.position), new p.Point(0, 0))
.divide(items.length);
if (old["rotCenter"] === undefined) old["rotCenter"] = rotCenter;
items.forEach((item) => {
var mainName = item.name.replace("hidden", "main");
item.rotate(changeInValue, old["rotCenter"]);
if (change === "slider") {
form.querySelector("#rotation").value = newRot;
} else if (change === "input") {
form.querySelector("#rotationValue").value = newRot.toFixed(2);
}
var canvasRotCen = canvasPoint(old["rotCenter"], canvasValues.gridScale, p);
mainKids(p)[mainName].rotate(changeInValue, canvasRotCen);
});
p.view.update();
}
function updateCanvasScale(event, form, p, old, change) {
var items = getSelectedHidden(p);
const newScale = parseFloat(event.target.value);
if (old["scale"] === undefined)
old["scale"] = form.querySelector(`#${"scale"}`).value;
var rotCenter = items
.reduce((a, cur) => a.add(cur.position), new p.Point(0, 0))
.divide(items.length);
if (old["scaleCenter"] === undefined) old["scaleCenter"] = rotCenter;
items.forEach((item) => {
var mainName = item.name.replace("hidden", "main");
item.scale(newScale / old["scale"], old["scaleCenter"]);
if (change === "slider") {
form.querySelector("#scale").value = newScale;
} else if (change === "input") {
form.querySelector("#scaleValue").value = newScale.toFixed(2);
}
var canvasRotCen = canvasPoint(
old["scaleCenter"],
canvasValues.gridScale,
p
);
mainKids(p)[mainName].scale(newScale / old["scale"], canvasRotCen);
});
old["scale"] = newScale;
p.view.update();
}
function updateCanvasRadius(event, form, p, mainName, change) {
var item = getSelectedHidden(p);
if (item.length === 1) item = item[0];
const newWidth = parseFloat(event.target.value);
const mainItem = mainKids(p)[mainName];
item.scale(newWidth / item.bounds.width);
form.querySelector("#rValue").value = newWidth.toFixed(2);
if (change === "slider") {
form.querySelector("#r").value = newWidth;
} else if (change === "input") {
form.querySelector("#rValue").value = newWidth.toFixed(2);
}
const newWidthMain = newWidth * canvasValues.gridScale;
mainItem.scale(newWidthMain / mainItem.bounds.width);
p.view.update();
}
function updateCanvasRec(property, event, form, p, mainName, change) {
var item = getSelectedHidden(p);
if (item.length === 1) item = item[0];
const newLength = parseFloat(event.target.value);
const mainItem = mainKids(p)[mainName];
var points = (i) => {
return item.segments[i].point;
};
if (property === "h") {
var heightVec = points(0).subtract(points(1));
var midPointLeft = points(0).add(points(1)).divide(2);
var midPointRight = points(2).add(points(3)).divide(2);
var halfVec = heightVec.multiply(newLength / heightVec.length).divide(2);
item.segments[0].point = midPointLeft.add(halfVec);
item.segments[1].point = midPointLeft.subtract(halfVec);
item.segments[2].point = midPointRight.subtract(halfVec);
item.segments[3].point = midPointRight.add(halfVec);
} else if (property === "w") {
var widthVec = points(0).subtract(points(3));
var midPointTop = points(1).add(points(2)).divide(2);
var midPointBot = points(0).add(points(3)).divide(2);
var halfVec = widthVec.multiply(newLength / widthVec.length).divide(2);
item.segments[0].point = midPointBot.subtract(halfVec); // Bottom left
item.segments[1].point = midPointTop.subtract(halfVec); // Top left
item.segments[2].point = midPointTop.add(halfVec); // Top right
item.segments[3].point = midPointBot.add(halfVec); // Bottom right
}
if (change === "slider") {
form.querySelector(`#${property}`).value = newLength;
} else if (change === "input") {
form.querySelector(`#${property}Value`).value = newLength.toFixed(2);
}
mainItem.segments.forEach((seg, index) => {
seg.point = canvasPoint(points(index), canvasValues.gridScale, p);
});
}
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.
