layer-viewer.tsx - Notepad

1// current window state + layer sync

2"use client";

3

4import type { CSSProperties, PointerEvent as ReactPointerEvent } from "react";

5import { Fragment, useCallback, useEffect, useRef, useState } from "react";

6

7type CropWindowConfig = {

8 id: string;

9 title: string;

10 className: string;

11 startX: string;

12 startY: string;

13 width: string;

14 height: string;

15};

16

17type DragState = {

18 id: string;

19 win: HTMLElement;

20 copyLayers: DragCopyLayer[];

21 pointerId: number;

22 offsetX: number;

23 offsetY: number;

24 stageLeft: number;

25 stageTop: number;

26 originX: number;

27 originY: number;

28 frame: number;

29 nextX: number;

30 nextY: number;

31 minX: number;

32 minY: number;

33 maxX: number;

34 maxY: number;

35 perf: DragPerformanceStats | null;

36};

37

38type DragCopyLayer = {

39 element: HTMLElement;

40};

41

42type DragPerformanceStats = {

43 id: string;

44 pointerMoves: number;

45 rafUpdates: number;

46 maxFrameGap: number;

47 lastFrameAt: number;

48 pointerUpAt: number;

49 postUpLongFrames: number;

50 postUpMaxGap: number;

51};

52

53type WindowPosition = {

54 baseX: number;

55 baseY: number;

56 x: number;

57 y: number;

58 transformX: number;

59 transformY: number;

60};

61

62type WindowLayerSyncOptions = {

63 geometry?: "visual" | "logical";

64};

65

66type TaskWindow = {

67 id: string;

68 title: string;

69};

70

71const mainWindowId = "k0yukichang";

72const sceneAssetUrls = ["/assets/a9f3c1d8e2.png", "/assets/q7b2m6v0n4.png"];

73

74const cropWindows: CropWindowConfig[] = [

75 {

76 id: "main",

77 title: "layer-viewer.exe",

78 className: "crop-window-main",

79 startX: "21%",

80 startY: "13%",

81 width: "42vw",

82 height: "52svh"

83 },

84 {

85 id: "face",

86 title: "layer-viewer (2).exe",

87 className: "crop-window-face",

88 startX: "8.5%",

89 startY: "23%",

90 width: "18rem",

91 height: "13rem"

92 },

93 {

94 id: "background",

95 title: "layer-viewer (3).exe",

96 className: "crop-window-lower",

97 startX: "25%",

98 startY: "58%",

99 width: "17rem",

100 height: "11rem"

101 },

102 {

103 id: "mouth",

104 title: "layer-viewer (4).exe",

105 className: "crop-window-spot",

106 startX: "44%",

107 startY: "68%",

108 width: "14rem",

109 height: "9rem"

110 }

111];

112

113const taskWindows: TaskWindow[] = [

114 ...cropWindows.map((windowConfig) => ({

115 id: windowConfig.id,

116 title: windowConfig.title

117 })),

118 { id: mainWindowId, title: "k0yukichang.png" }

119];

120

121const taskWindowIds = taskWindows.map((windowConfig) => windowConfig.id);

122const taskButtonRefs = useRef<Record<string, HTMLButtonElement | null>>({});

123const restoringWindowIds = useRef<Set<string>>(new Set());

124const restoreWindowRef = useRef<((id: string) => void) | null>(null);

125const desktopStarted = useRef(false);

126

127const [minimizedWindows, setMinimizedWindows] = useState<Set<string>>(

128 () => new Set(taskWindowIds)

129);

130const [minimizingWindows, setMinimizingWindows] = useState<Set<string>>(() => new Set());

131

132const syncWindowLayers = useCallback((id: string, options: WindowLayerSyncOptions = {}) => {

133 const stage = stageRef.current;

134 const win = windowRefs.current[id];

135 if (!stage || !win) return;

136

137 const geometry = options.geometry ?? "visual";

138 const stageRect = stage.getBoundingClientRect();

139 const position = readWindowPosition(win);

140

141 win.querySelectorAll<HTMLElement>('[data-js="glass-copy"]').forEach((copy) => {

142 const header = copy.closest<HTMLElement>(".window-header");

143 if (!header) return;

144 const headerOffset = readOffsetWithinWindow(header, win);

145 copy.style.width = `${stageRect.width}px`;

146 copy.style.height = `${stageRect.height}px`;

147 copy.style.left = `${-(position.baseX + headerOffset.left)}px`;

148 copy.style.top = `${-(position.baseY + headerOffset.top)}px`;

149 applyCopyCounterTransform(copy, position.transformX, position.transformY);

150 });

151

152 const viewport = win.querySelector<HTMLElement>(".crop-viewport");

153 const glassTargets = Array.from(win.querySelectorAll<HTMLElement>(".crop-glass-filter-target"));

154 if (!viewport || glassTargets.length === 0) return;

155

156 glassTargets.forEach((glassTarget) => {

157 const copy = glassTarget.querySelector<HTMLElement>('[data-js="stage-copy"]');

158 if (!copy) return;

159

160 const targetOffset = readOffsetWithinWindow(glassTarget, win);

161 const targetRect = geometry === "visual" ? glassTarget.getBoundingClientRect() : null;

162 const targetBaseLeft =

163 geometry === "logical"

164 ? stageRect.left + position.baseX + targetOffset.left

165 : (targetRect?.left ?? stageRect.left) - position.transformX;

166 const targetBaseTop =

167 geometry === "logical"

168 ? stageRect.top + position.baseY + targetOffset.top

169 : (targetRect?.top ?? stageRect.top) - position.transformY;

170 copy.style.width = `${stageRect.width}px`;

171 copy.style.height = `${stageRect.height}px`;

172 copy.style.left = `${stageRect.left - targetBaseLeft}px`;

173 copy.style.top = `${stageRect.top - targetBaseTop}px`;

174 applyCopyCounterTransform(copy, position.transformX, position.transformY);

175 });

176}, []);

177

178const initializeWindows = useCallback(() => {

179 const stage = stageRef.current;

180 if (!stage) return;

181

182 document.documentElement.style.setProperty("--desktop-rem", `${getDesktopRemSize()}px`);

183

184 const stageRect = stage.getBoundingClientRect();

185 cropWindows.forEach((config) => {

186 const win = windowRefs.current[config.id];

187 if (!win) return;

188

189 if (win.dataset.userPositioned === "true") {

190 const position = readWindowPosition(win);

191 setWindowTransformPositionWithinBounds(win, position.x, position.y);

192 return;

193 }

194

195 setWindowPosition(

196 win,

197 parseStart(config.startX, stageRect.width),

198 parseStart(config.startY, stageRect.height)

199 );

200 win.dataset.positioned = "true";

201 });

202

203 syncCropLayers();

204}, [setWindowPosition, setWindowTransformPositionWithinBounds, syncCropLayers]);

205

206const setMinimizeTarget = useCallback((id: string) => {

207 const stage = stageRef.current;

208 const win = windowRefs.current[id];

209 const taskButton = taskButtonRefs.current[id];

210 if (!stage || !win || !taskButton) return false;

211

212 const stageRect = stage.getBoundingClientRect();

213 const taskRect = taskButton.getBoundingClientRect();

214 const position = readWindowPosition(win);

215 const winWidth = win.offsetWidth || win.getBoundingClientRect().width;

216 const winHeight = win.offsetHeight || win.getBoundingClientRect().height;

217 const winLeft = stageRect.left + position.x;

218 const winTop = stageRect.top + position.y;

219 const x = taskRect.left + taskRect.width / 2 - (winLeft + winWidth / 2);

220 const y = taskRect.top + taskRect.height / 2 - (winTop + winHeight / 2);

221 const scaleX = clamp(taskRect.width / winWidth, .12, .42);

222 const scaleY = clamp(taskRect.height / winHeight, .12, .42);

223 const originX = clamp(taskRect.left + taskRect.width / 2 - winLeft, 0, winWidth);

224 const originY = clamp(taskRect.top + taskRect.height / 2 - winTop, -winHeight, winHeight);

225

226 win.style.setProperty("--minimize-x", `${x}px`);

227 win.style.setProperty("--minimize-y", `${y}px`);

228 win.style.setProperty("--minimize-scale-x", String(scaleX));

229 win.style.setProperty("--minimize-scale-y", String(scaleY));

230 win.style.setProperty("--minimize-origin-x", `${originX}px`);

231 win.style.setProperty("--minimize-origin-y", `${originY}px`);

232 return true;

233}, []);

234

235const minimizeWindow = useCallback((id: string) => {

236 const win = windowRefs.current[id];

237 if (!win) return;

238 if (minimizingWindows.has(id) || minimizedWindows.has(id)) return;

239

240 restoringWindowIds.current.delete(id);

241 win.dataset.restoring = "false";

242 if (!setMinimizeTarget(id)) return;

243

244 setMinimizingWindows((current) => {

245 if (current.has(id)) return current;

246 const next = new Set(current);

247 next.add(id);

248 return next;

249 });

250

251 let completed = false;

252 const completeMinimize = () => {

253 if (completed) return;

254 completed = true;

255 win.removeEventListener("animationend", handleAnimationEnd);

256 win.removeEventListener("transitionend", handleTransitionEnd);

257 setMinimizedWindows((current) => new Set(current).add(id));

258 setMinimizingWindows((current) => {

259 const next = new Set(current);

260 next.delete(id);

261 return next;

262 });

263 };

264

265 const handleTransitionEnd = (event: TransitionEvent) => {

266 if (event.target !== win || event.propertyName !== "transform") return;

267 completeMinimize();

268 };

269

270 const handleAnimationEnd = (event: AnimationEvent) => {

271 const animationName = id === mainWindowId ? "main-minimize-to-task" : "crop-minimize-to-task";

272 if (event.target !== win || event.animationName !== animationName) return;

273 completeMinimize();

274 };

275

276 win.addEventListener("animationend", handleAnimationEnd);

277 win.addEventListener("transitionend", handleTransitionEnd);

278 window.setTimeout(completeMinimize, id === mainWindowId ? mainMinimizeFallbackMs : cropMinimizeFallbackMs);

279}, [minimizingWindows, minimizedWindows, setMinimizeTarget]);

280

281const restoreWindow = useCallback((id: string) => {

282 const win = windowRefs.current[id];

283 if (restoringWindowIds.current.has(id)) return;

284 if (minimizingWindows.has(id)) return;

285

286 if (!minimizedWindows.has(id)) {

287 requestCropSync();

288 return;

289 }

290

291 syncWindowLayers(id, { geometry: "logical" });

292 restoringWindowIds.current.add(id);

293 if (win) win.dataset.restoring = "true";

294

295 setMinimizedWindows((current) => {

296 const next = new Set(current);

297 next.delete(id);

298 return next;

299 });

300

301 const syncAfterRestore = () => {

302 restoringWindowIds.current.delete(id);

303 if (win) win.dataset.restoring = "false";

304 requestCropSync();

305 requestAnimationFrame(() => {

306 syncWindowLayers(id);

307 requestAnimationFrame(requestCropSync);

308 });

309 };

310}, [minimizingWindows, minimizedWindows, requestCropSync, syncWindowLayers]);

311

312useEffect(() => {

313 sceneAssetUrls.forEach((src) => {

314 const image = new Image();

315 image.decoding = "sync";

316 image.loading = "eager";

317 image.src = src;

318 void image.decode?.().catch(() => undefined);

319 });

320}, []);

321

322useEffect(() => {

323 if (bootVisible || desktopStarted.current) return;

324

325 const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

326 const startDelay = reduceMotion ? 40 : 180;

327 const staggerDelay = reduceMotion ? 35 : 135;

328 desktopStarted.current = true;

329

330 requestAnimationFrame(() => {

331 initializeWindows();

332 taskWindowIds.forEach(syncWindowLayers);

333 taskWindowIds.forEach(setMinimizeTarget);

334 taskWindowIds.forEach((id, index) => {

335 window.setTimeout(() => restoreWindowRef.current?.(id), startDelay + index * staggerDelay);

336 });

337 });

338}, [bootVisible, initializeWindows, setMinimizeTarget, syncWindowLayers]);

339

340const startDrag = useCallback((event: ReactPointerEvent<HTMLElement>, id: string) => {

341 const stage = stageRef.current;

342 const win = windowRefs.current[id];

343 if (!stage || !win || minimizingWindows.has(id) || minimizedWindows.has(id)) return;

344 if (!event.isPrimary || event.button !== 0) return;

345

346 event.preventDefault();

347 syncWindowLayers(id);

348

349 const stageRect = stage.getBoundingClientRect();

350 const bounds = getWindowBounds(win);

351 if (!bounds) return;

352

353 const position = readWindowPosition(win);

354 const originX = clamp(position.x, bounds.minX, bounds.maxX);

355 const originY = clamp(position.y, bounds.minY, bounds.maxY);

356 if (originX !== position.x || originY !== position.y) {

357 setWindowTransformPosition(win, originX, originY);

358 }

359

360 win.dataset.active = "true";

361 win.dataset.dragging = "true";

362 win.dataset.pressed = "true";

363 win.setPointerCapture?.(event.pointerId);

364

365 activeDrag.current = {

366 id,

367 win,

368 copyLayers: getDragCopyLayers(win),

369 pointerId: event.pointerId,

370 offsetX: event.clientX - (stageRect.left + originX),

371 offsetY: event.clientY - (stageRect.top + originY),

372 stageLeft: stageRect.left,

373 stageTop: stageRect.top,

374 originX,

375 originY,

376 frame: 0,

377 nextX: originX,

378 nextY: originY,

379 minX: bounds.minX,

380 minY: bounds.minY,

381 maxX: bounds.maxX,

382 maxY: bounds.maxY,

383 perf: dragPerformanceOverlayRef.current ? createDragPerformanceStats(id) : null

384 };

385}, [getWindowBounds, minimizingWindows, minimizedWindows, syncWindowLayers]);

386

387window.addEventListener("pointermove", (event) => {

388 const drag = activeDrag.current;

389 if (!drag) return;

390 event.preventDefault();

391 drag.nextX = event.clientX - drag.stageLeft - drag.offsetX;

392 drag.nextY = event.clientY - drag.stageTop - drag.offsetY;

393 if (drag.perf) drag.perf.pointerMoves += 1;

394

395 if (drag.frame) return;

396 drag.frame = requestAnimationFrame(() => {

397 drag.frame = 0;

398 const nextX = clamp(drag.nextX, drag.minX, drag.maxX);

399 const nextY = clamp(drag.nextY, drag.minY, drag.maxY);

400

401 recordDragFrame(drag.perf);

402 applyDragTransform(drag, nextX, nextY);

403 });

404});

405

406function HeaderGlassBackdrop({ mainIllustrationHidden, windowId }: HeaderGlassBackdropProps) {

407 return <div className="window-header-glass-copy" data-main-hidden={mainIllustrationHidden ? "true" : "false"} data-js="glass-copy" data-window-id={windowId} />;

408}

409

410function MainImageWindow({ minimized, minimizing, restoring, onMinimize }: MainImageWindowProps) {

411 return (

412 <article className="main-window main-scene" data-minimized={minimized ? "true" : "false"}>

413 <div className="window-header main-window-header glass-window-header">

414 <HeaderGlassBackdrop mainIllustrationHidden={minimized || minimizing} windowId={mainWindowId} />

415 <span className="window-title">k0yukichang.png</span>

416 <WindowControls canMinimize onMinimize={onMinimize} />

417 </div>

418 <div className="main-window-viewport">

419 <img className="main-composite" src="/assets/a9f3c1d8e2.png" alt="" loading="eager" decoding="sync" />

420 </div>

421 </article>

422 );

423}

424

425{cropWindows.map((config) => (

426 <article className={`crop-window ${config.className}`} data-js="crop-window">

427 <div className="window-header glass-window-header" onPointerDown={(event) => startDrag(event, config.id)}>

428 <HeaderGlassBackdrop mainIllustrationHidden={mainIllustrationHidden} windowId={config.id} />

429 <span className="window-title">{config.title}</span>

430 <WindowControls canMinimize onMinimize={() => minimizeWindow(config.id)} />

431 </div>

432 <div className="crop-viewport">

433 <div className="crop-glass-filter-target crop-glass-base">

434 <div className="stage-copy" data-js="stage-copy" aria-hidden="true">

435 <LayerScene />

436 </div>

437 </div>

438 </div>

439 </article>

440))}

441

442[data-image-guard="true"] img {

443 -webkit-touch-callout: none;

444 -webkit-user-drag: none;

445 user-select: none;

446}

447

448.window-header-glass-copy {

449 filter: url("#xp-liquid-glass-refraction") saturate(1.42);

450 opacity: .4;

451}

452

453:root { --desktop-rem: 16px; }

454@media (min-width: 901px), (hover: hover) and (pointer: fine) { :root { font-size: var(--desktop-rem); } }

455.desktop-canvas { width: 100%; height: 100%; }

456.xp-taskbar { position: absolute; top: 0; }

457.main-window { width: min(64svh, 47vw, 44rem); }

458.copy-scene { width: min(116vw, 78rem); }

459@media (min-width: 901px), (hover: hover) and (pointer: fine) { .glass-window-header { backdrop-filter: blur(7px) saturate(1.35); } }

460.crop-window[data-minimizing="true"] .window-header-glass-copy { opacity: .52; }

461.window-header-glass-copy[data-main-hidden="true"] .glass-stage-main { display: none; }

462@media (min-width: 901px), (hover: hover) and (pointer: fine) { .crop-window[data-minimizing="true"] { animation: crop-minimize-to-task .72s linear forwards; } }

463@media (max-width: 900px) and (pointer: coarse) { .window-header-glass-copy { filter: saturate(1.16); } }

464.crop-window[data-dragging="true"] { transition: none; }

465.crop-window[data-dragging="true"] .stage-copy,

466.crop-window[data-dragging="true"] .window-header-glass-copy { will-change: transform; }

467.xp-social-button { background: linear-gradient(180deg, #79e870, #0b6515); }

468.workbench-window { border: 1px solid #0a3fa3; }

469.editor-body { font-family: "Lucida Console", "Consolas", monospace; }

470.editor-scroll-track { animation: editor-scroll 104s linear infinite; }

471.editor-body[data-glitching="true"] .editor-line code { color: rgba(101, 255, 190, .88); }

assets

BackSearchFoldersC:\project\assets

Name	Type	Size
a9f3c1d8e2.png	PNG File	1,157 KB
q7b2m6v0n4.png	PNG File	2,832 KB
n8c2v5k1.svg	SVG File	1 KB
t6p9a3d7.svg	SVG File	1 KB
k9d4x2m7.svg	SVG File	3 KB

cmd.exe

>> loaded layer-viewer.exe>> loaded k0yukichang.png>> crop sync complete>> window state restored>> taskbar item added>> render complete> _

k0yukichang.png

layer-viewer.exe

layer-viewer (2).exe

layer-viewer (3).exe

layer-viewer (4).exe

Illust:そらのらの

loading personal entrance