skyler
/
Lightningbeam
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use pointer events instead of mouse events

This commit is contained in:
Skyler Lehmkuhl 2025-01-15 00:33:37 -05:00
parent fd39350d7a
commit 9058ed4989
1 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/main.js
View File

@ -4134,7 +4134,7 @@ async function greet() {
window.addEventListener("DOMContentLoaded", () => { window.addEventListener("DOMContentLoaded", () => {
rootPane = document.querySelector("#root"); rootPane = document.querySelector("#root");
rootPane.appendChild(createPane(panes.toolbar)); rootPane.appendChild(createPane(panes.toolbar));
rootPane.addEventListener("mousemove", (e) => { rootPane.addEventListener("pointermove", (e) => {
mouseEvent = e; mouseEvent = e;
}); });
let [_toolbar, panel] = splitPane( let [_toolbar, panel] = splitPane(
@ -5318,7 +5318,7 @@ function stage() {
// stageWrapper.appendChild(stage) // stageWrapper.appendChild(stage)
// stageWrapper.appendChild(selectionRect) // stageWrapper.appendChild(selectionRect)
// scroller.appendChild(stageWrapper) // scroller.appendChild(stageWrapper)
stage.addEventListener("mousedown", (e) => { stage.addEventListener("pointerdown", (e) => {
let mouse = getMousePos(stage, e); let mouse = getMousePos(stage, e);
root.handleMouseEvent("mousedown", mouse.x, mouse.y) root.handleMouseEvent("mousedown", mouse.x, mouse.y)
mouse = context.activeObject.transformMouse(mouse); mouse = context.activeObject.transformMouse(mouse);
@ -5692,8 +5692,8 @@ function stage() {
updateMenu(); updateMenu();
updateInfopanel(); updateInfopanel();
}; };
stage.addEventListener("mouseup", stage.mouseup); stage.addEventListener("pointerup", stage.mouseup);
stage.addEventListener("mousemove", (e) => { stage.addEventListener("pointermove", (e) => {
let mouse = getMousePos(stage, e); let mouse = getMousePos(stage, e);
root.handleMouseEvent("mousemove", mouse.x, mouse.y) root.handleMouseEvent("mousemove", mouse.x, mouse.y)
mouse = context.activeObject.transformMouse(mouse); mouse = context.activeObject.transformMouse(mouse);
@ -6103,7 +6103,7 @@ function toolbar() {
colorCvs.colorSelectorWidget.draw(ctx) colorCvs.colorSelectorWidget.draw(ctx)
}; };
colorCvs.addEventListener("mousedown", (e) => { colorCvs.addEventListener("pointerdown", (e) => {
colorCvs.clickedMainGradient = false; colorCvs.clickedMainGradient = false;
colorCvs.clickedHueGradient = false; colorCvs.clickedHueGradient = false;
colorCvs.clickedAlphaGradient = false; colorCvs.clickedAlphaGradient = false;
@ -6113,7 +6113,7 @@ function toolbar() {
colorCvs.draw(); colorCvs.draw();
}); });
window.addEventListener("mouseup", (e) => { window.addEventListener("pointerup", (e) => {
let mouse = getMousePos(colorCvs, e); let mouse = getMousePos(colorCvs, e);
colorCvs.clickedMainGradient = false; colorCvs.clickedMainGradient = false;
colorCvs.clickedHueGradient = false; colorCvs.clickedHueGradient = false;
@ -6122,13 +6122,13 @@ function toolbar() {
colorCvs.colorSelectorWidget.handleMouseEvent("mouseup", mouse.x, mouse.y) colorCvs.colorSelectorWidget.handleMouseEvent("mouseup", mouse.x, mouse.y)
if (e.target != colorCvs) { if (e.target != colorCvs) {
colorCvs.style.display = "none"; colorCvs.style.display = "none";
window.removeEventListener("mousemove", evtListener); window.removeEventListener("pointermove", evtListener);
} }
}); });
} else { } else {
colorCvs.style.display = "block"; colorCvs.style.display = "block";
} }
evtListener = window.addEventListener("mousemove", (e) => { evtListener = window.addEventListener("pointermove", (e) => {
let mouse = getMousePos(colorCvs, e); let mouse = getMousePos(colorCvs, e);
colorCvs.colorSelectorWidget.handleMouseEvent("mousemove", mouse.x, mouse.y) colorCvs.colorSelectorWidget.handleMouseEvent("mousemove", mouse.x, mouse.y)
colorCvs.draw() colorCvs.draw()
@ -6259,7 +6259,7 @@ function timeline() {
updateLayers(); updateLayers();
} }
}); });
timeline_cvs.addEventListener("mousedown", (e) => { timeline_cvs.addEventListener("pointerdown", (e) => {
let mouse = getMousePos(timeline_cvs, e, true, true); let mouse = getMousePos(timeline_cvs, e, true, true);
mouse.y += timeline_cvs.offsetY; mouse.y += timeline_cvs.offsetY;
if (mouse.x > layerWidth) { if (mouse.x > layerWidth) {
@ -6391,7 +6391,7 @@ function timeline() {
} }
updateLayers(); updateLayers();
}); });
timeline_cvs.addEventListener("mouseup", (e) => { timeline_cvs.addEventListener("pointerup", (e) => {
let mouse = getMousePos(timeline_cvs, e); let mouse = getMousePos(timeline_cvs, e);
mouse.y += timeline_cvs.offsetY; mouse.y += timeline_cvs.offsetY;
if (mouse.x > layerWidth || timeline_cvs.draggingFrames) { if (mouse.x > layerWidth || timeline_cvs.draggingFrames) {
@ -6411,7 +6411,7 @@ function timeline() {
updateMenu(); updateMenu();
} }
}); });
timeline_cvs.addEventListener("mousemove", (e) => { timeline_cvs.addEventListener("pointermove", (e) => {
let mouse = getMousePos(timeline_cvs, e); let mouse = getMousePos(timeline_cvs, e);
mouse.y += timeline_cvs.offsetY; mouse.y += timeline_cvs.offsetY;
if (mouse.x > layerWidth || timeline_cvs.draggingFrames) { if (mouse.x > layerWidth || timeline_cvs.draggingFrames) {
@ -6703,7 +6703,7 @@ function splitPane(div, percent, horiz, newPane = undefined) {
div.className = "vertical-grid"; div.className = "vertical-grid";
} }
div.setAttribute("lb-percent", percent); // TODO: better attribute name div.setAttribute("lb-percent", percent); // TODO: better attribute name
div.addEventListener("mousedown", function (event) { div.addEventListener("pointerdown", function (event) {
// Check if the clicked element is the parent itself and not a child element // Check if the clicked element is the parent itself and not a child element
if (event.target === event.currentTarget) { if (event.target === event.currentTarget) {
if (event.button === 0) { if (event.button === 0) {
@ -6727,7 +6727,7 @@ function splitPane(div, percent, horiz, newPane = undefined) {
splitIndicator.style.flexDirection = splitIndicator.style.flexDirection =
direction == "vertical" ? "column" : "row"; direction == "vertical" ? "column" : "row";
document.body.appendChild(splitIndicator); document.body.appendChild(splitIndicator);
splitIndicator.addEventListener("mousemove", (e) => { splitIndicator.addEventListener("pointermove", (e) => {
const { clientX: mouseX, clientY: mouseY } = e; const { clientX: mouseX, clientY: mouseY } = e;
const rect = splitIndicator.getBoundingClientRect(); const rect = splitIndicator.getBoundingClientRect();
@ -6788,12 +6788,12 @@ function splitPane(div, percent, horiz, newPane = undefined) {
createPane(panes.timeline), createPane(panes.timeline),
); );
document.body.removeChild(splitIndicator); document.body.removeChild(splitIndicator);
document.removeEventListener("mousemove", splitListener); document.removeEventListener("pointermove", splitListener);
setTimeout(updateUI, 20); setTimeout(updateUI, 20);
} }
}); });
const splitListener = document.addEventListener("mousemove", (e) => { const splitListener = document.addEventListener("pointermove", (e) => {
const mouseX = e.clientX; const mouseX = e.clientX;
const mouseY = e.clientY; const mouseY = e.clientY;
@ -6847,7 +6847,7 @@ function splitPane(div, percent, horiz, newPane = undefined) {
console.log("Right-click on the element"); console.log("Right-click on the element");
// Your custom logic here // Your custom logic here
}); });
div.addEventListener("mousemove", function (event) { div.addEventListener("pointermove", function (event) {
// Check if the clicked element is the parent itself and not a child element // Check if the clicked element is the parent itself and not a child element
if (event.currentTarget.getAttribute("dragging") == "true") { if (event.currentTarget.getAttribute("dragging") == "true") {
const frac = getMousePositionFraction(event, event.currentTarget); const frac = getMousePositionFraction(event, event.currentTarget);
@ -6855,7 +6855,7 @@ function splitPane(div, percent, horiz, newPane = undefined) {
updateAll(); updateAll();
} }
}); });
div.addEventListener("mouseup", (event) => { div.addEventListener("pointerup", (event) => {
event.currentTarget.setAttribute("dragging", false); event.currentTarget.setAttribute("dragging", false);
// event.currentTarget.style.userSelect = 'auto'; // event.currentTarget.style.userSelect = 'auto';
}); });