alt anims + increase timeout to 700

This commit is contained in:
dwelle
2025-09-18 20:25:32 +02:00
parent 97fa922060
commit 83fa9099f6
2 changed files with 20 additions and 7 deletions

View File

@@ -540,4 +540,4 @@ export const LINE_POLYGON_POINT_MERGE_DISTANCE = 20;
export const DOUBLE_TAP_POSITION_THRESHOLD = 35; export const DOUBLE_TAP_POSITION_THRESHOLD = 35;
export const BIND_MODE_TIMEOUT = 600; // ms export const BIND_MODE_TIMEOUT = 700; // ms

View File

@@ -263,8 +263,8 @@ const renderBindingHighlightForBindableElement = (
Math.max(0.25, appState.zoom.value); Math.max(0.25, appState.zoom.value);
context.strokeStyle = context.strokeStyle =
appState.theme === THEME.DARK appState.theme === THEME.DARK
? `rgba(3, 93, 161, ${0.5 + opacity / 2})` ? `rgba(3, 93, 161, ${opacity / 2})`
: `rgba(106, 189, 252, ${0.5 + opacity / 2})`; : `rgba(106, 189, 252, ${opacity / 2})`;
switch (element.type) { switch (element.type) {
case "ellipse": case "ellipse":
@@ -377,18 +377,17 @@ const renderBindingHighlightForBindableElement = (
return; return;
} }
const radius = 0.5 * (Math.min(element.width, element.height) / 2);
// Draw center snap area // Draw center snap area
context.save(); context.save();
context.translate(element.x + appState.scrollX, element.y + appState.scrollY); context.translate(element.x + appState.scrollX, element.y + appState.scrollY);
context.strokeStyle = "rgba(0, 0, 0, 0.2)"; context.strokeStyle = "rgba(0, 0, 0, 0.2)";
context.lineWidth = 1 / appState.zoom.value; context.lineWidth = 1 / appState.zoom.value;
context.setLineDash([4 / appState.zoom.value, 4 / appState.zoom.value]); context.setLineDash([4 / appState.zoom.value, 4 / appState.zoom.value]);
context.lineDashOffset = 0; context.lineDashOffset = 0;
const radius = 0.5 * (Math.min(element.width, element.height) / 2) * opacity;
context.fillStyle = "rgba(0, 0, 0, 0.04)";
context.beginPath(); context.beginPath();
context.ellipse( context.ellipse(
element.width / 2, element.width / 2,
@@ -400,6 +399,20 @@ const renderBindingHighlightForBindableElement = (
2 * Math.PI, 2 * Math.PI,
); );
context.stroke(); context.stroke();
// context.strokeStyle = "transparent";
context.fillStyle = "rgba(0, 0, 0, 0.04)";
context.beginPath();
context.ellipse(
element.width / 2,
element.height / 2,
radius * (1 - opacity),
radius * (1 - opacity),
0,
0,
2 * Math.PI,
);
context.fill(); context.fill();
// Draw countdown // Draw countdown