AskaEth
9c7081b21d
一个用于演练/演示的桌面时钟工具：两个窗口 —— 控制窗口（普通）与时钟窗口（无边框、 可拖动、可拖边缘改大小，由控制窗口开与关）。 功能 - 两个窗口各自的「始终置顶」开关 - 显示样式：纯数字 / 圆形表盘，切换立即生效 - 实时设定时间（含「填入当前显示时间」） - 倍率：支持正数、负数（倒转）、0（暂停）、小数 - 暂停 / 继续（继续时回到暂停前的倍率，按钮文案会显示是几倍） - 快进五档：+5 秒 / +1 分钟 / +5 分钟 / +10 分钟 / +30 分钟 实现要点 - 走时是「基准时间 + 基准时刻 + 倍率」的锚点式模型（不累加、零漂移）； 倍率、暂停、倒转、快进因此是同一套机制的四个用法，互不打架 - 跳转动画做在「呈现时间」这一层：数字滚动与表盘指针扫动共用同一个中间值， 所以永远同步，也不会跨 12 点倒着转一圈 - 无边框窗口的拖动（CSS app-region + 控件 no-drag）与拖边缘改大小 （自己算几何 + IPC setBounds，因为 frame:false 下系统边缘命中不可靠） 测试 152 例：走时模型 / 改大小几何 / 呈现时间 / 两个渲染进程（DOM 桩）
43 lines
1.2 KiB
JavaScript
43 lines
1.2 KiB
JavaScript
'use strict';
|
|
|
|
// 拖边缘改大小的纯计算部分单独放一个文件：
|
|
// 这段几何运算是最容易出错、但在无边框窗口里只能靠真鼠标才能触发的地方，
|
|
// 拆出来之后可以在 node 里直接跑用例，不必等到 Windows 上肉眼试。
|
|
|
|
const MIN_SIZE = { width: 260, height: 150 };
|
|
|
|
function computeBounds(start, dir, dx, dy, min) {
|
|
const limit = min || MIN_SIZE;
|
|
let x = start.x;
|
|
let y = start.y;
|
|
let width = start.width;
|
|
let height = start.height;
|
|
|
|
if (dir.includes('e')) width += dx;
|
|
if (dir.includes('s')) height += dy;
|
|
if (dir.includes('w')) {
|
|
width -= dx;
|
|
x += dx;
|
|
}
|
|
if (dir.includes('n')) {
|
|
height -= dy;
|
|
y += dy;
|
|
}
|
|
|
|
// 顶到最小尺寸后继续拖，被拖的那条边要停住，而不是把整个窗口推走
|
|
if (width < limit.width) {
|
|
if (dir.includes('w')) x = start.x + start.width - limit.width;
|
|
width = limit.width;
|
|
}
|
|
if (height < limit.height) {
|
|
if (dir.includes('n')) y = start.y + start.height - limit.height;
|
|
height = limit.height;
|
|
}
|
|
|
|
return { x: Math.round(x), y: Math.round(y), width: Math.round(width), height: Math.round(height) };
|
|
}
|
|
|
|
if (typeof module !== 'undefined' && module.exports) {
|
|
module.exports = { computeBounds, MIN_SIZE };
|
|
}
|