1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
import { clampFontSize } from "./terminal.js";
// xterm.js's WebGL renderer clears the framebuffer when it reassigns
// canvas.width/height on a font-size change, and during a touch gesture the
// repaint is rAF-throttled, so the cleared canvas can flash blank before the
// repaint lands. This overlay pins a 2d-canvas snapshot over the live canvas.
export function createPinchController(term) {
let pinchOverlay = null;
let pinchOverlayAwaitingRender = false;
let pinchOverlaySafetyTimer = null;
const destroy = () => {
if (pinchOverlay) {
pinchOverlay.remove();
pinchOverlay = null;
}
pinchOverlayAwaitingRender = false;
if (pinchOverlaySafetyTimer !== null) {
clearTimeout(pinchOverlaySafetyTimer);
pinchOverlaySafetyTimer = null;
}
};
const snapshot = () => {
destroy();
if (!term.element) return;
const sourceCanvases = term.element.querySelectorAll("canvas");
if (sourceCanvases.length === 0) return;
const ref = sourceCanvases[0];
const rect = ref.getBoundingClientRect();
if (rect.width <= 0 || rect.height <= 0) return;
const overlay = document.createElement("canvas");
overlay.width = ref.width;
overlay.height = ref.height;
const outer = document.getElementById("terminal");
const bg = outer
? window.getComputedStyle(outer).backgroundColor
: "transparent";
Object.assign(overlay.style, {
position: "fixed",
left: rect.left + "px",
top: rect.top + "px",
width: rect.width + "px",
height: rect.height + "px",
zIndex: "9999",
pointerEvents: "none",
background: bg,
});
const ctx = overlay.getContext("2d");
if (ctx) {
for (const c of sourceCanvases) {
try {
ctx.drawImage(c, 0, 0);
} catch (e) {
}
}
}
document.body.appendChild(overlay);
pinchOverlay = overlay;
};
const refresh = () => {
if (!pinchOverlay) return;
if (!term.element) return;
const sourceCanvases = term.element.querySelectorAll("canvas");
if (sourceCanvases.length === 0) return;
const ref = sourceCanvases[0];
const rect = ref.getBoundingClientRect();
if (rect.width <= 0 || rect.height <= 0) return;
if (pinchOverlay.width !== ref.width) {
pinchOverlay.width = ref.width;
}
if (pinchOverlay.height !== ref.height) {
pinchOverlay.height = ref.height;
}
pinchOverlay.style.left = rect.left + "px";
pinchOverlay.style.top = rect.top + "px";
pinchOverlay.style.width = rect.width + "px";
pinchOverlay.style.height = rect.height + "px";
const ctx = pinchOverlay.getContext("2d");
if (ctx) {
ctx.clearRect(0, 0, pinchOverlay.width, pinchOverlay.height);
for (const c of sourceCanvases) {
try {
ctx.drawImage(c, 0, 0);
} catch (e) {
}
}
}
};
const armRemoval = () => {
if (!pinchOverlay) return;
pinchOverlayAwaitingRender = true;
if (pinchOverlaySafetyTimer !== null) {
clearTimeout(pinchOverlaySafetyTimer);
}
pinchOverlaySafetyTimer = setTimeout(() => {
pinchOverlaySafetyTimer = null;
destroy();
}, 600);
};
// Must not call fitAddon.fit() here: that would pre-sync term.rows/cols to the
// new dims, making the resize handler short-circuit and never notify the server.
const applyFontSize = (px) => {
const clamped = clampFontSize(px);
if (term.options.fontSize === clamped) {
return;
}
term.options.fontSize = clamped;
window.dispatchEvent(new CustomEvent("zellij:rendering-resize"));
};
if (term && typeof term.onRender === "function") {
term.onRender(() => {
if (!pinchOverlay) return;
refresh();
if (pinchOverlayAwaitingRender) {
pinchOverlayAwaitingRender = false;
requestAnimationFrame(() => {
destroy();
});
}
});
}
return { snapshot, refresh, applyFontSize, armRemoval, destroy };
}
|
