fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-26 08:18:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

Modernize and fix website build tooling deps and utilize JS type checking (#3348)

Browse Source 
* Modernize and fix website build tooling deps and utilize JS type checking

* Upgrade to the latest Node.js
This commit is contained in:
Keavon Chambers
2025-11-06 16:30:35 -08:00
committed by GitHub
parent 96d73a8570
commit 6b315c3b68
18 changed files with 2036 additions and 981 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/static/js/image-comparison.js
+10 -8
View File
@@ -5,7 +5,9 @@ window.addEventListener("DOMContentLoaded", initializeImageComparison);
function initializeImageComparison() {
Array.from(document.querySelectorAll("[data-image-comparison]")).forEach((element) => {
const moveHandler = (event) => {
if (!(element instanceof HTMLElement)) return;
const moveHandler = (/** @type {PointerEvent} **/ event) => {
const factor = (event.clientX - element.getBoundingClientRect().left) / element.getBoundingClientRect().width;
const capped = Math.max(0, Math.min(1, factor));
@@ -14,7 +16,7 @@ function initializeImageComparison() {
element.dataset.lastInteraction = "";
};
const leaveHandler = (event) => {
const leaveHandler = (/** @type {PointerEvent} **/ event) => {
moveHandler(event);
const randomCode = Math.random().toString().substring(2);
@@ -22,8 +24,8 @@ function initializeImageComparison() {
setTimeout(() => {
if (element.dataset.lastInteraction === randomCode) {
element.dataset.recenterStartTime = Date.now();
element.dataset.recenterStartValue = parseFloat(element.style.getPropertyValue("--comparison-percent"));
element.dataset.recenterStartTime = `${Date.now()}`;
element.dataset.recenterStartValue = `${parseFloat(element.style.getPropertyValue("--comparison-percent"))}`;
recenterAnimationStep();
}
@@ -33,21 +35,21 @@ function initializeImageComparison() {
const recenterAnimationStep = () => {
if (element.dataset.lastInteraction === "") return;
const completionFactor = (Date.now() - element.dataset.recenterStartTime) / (RECENTER_ANIMATION_DURATION * 1000);
const completionFactor = (Date.now() - Number(element.dataset.recenterStartTime)) / (RECENTER_ANIMATION_DURATION * 1000);
if (completionFactor > 1) {
element.dataset.lastInteraction = "";
return;
}
const factor = smootherstep(completionFactor);
const newLocation = lerp(element.dataset.recenterStartValue, 50, factor);
const newLocation = lerp(Number(element.dataset.recenterStartValue), 50, factor);
element.style.setProperty("--comparison-percent", `${newLocation}%`);
requestAnimationFrame(recenterAnimationStep);
};
const lerp = (a, b, t) => (1 - t) * a + t * b;
const smootherstep = (x) => x * x * x * (x * (x * 6 - 15) + 10);
const lerp = (/** @type {number} **/ a, /** @type {number} **/ b, /** @type {number} **/ t) => (1 - t) * a + t * b;
const smootherstep = (/** @type {number} **/ x) => x * x * x * (x * (x * 6 - 15) + 10);
element.addEventListener("pointermove", moveHandler);
element.addEventListener("pointerenter", moveHandler);