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);
});
}
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.