quickwin 1.0.0

package/lib/react-qw/layout.ts

@@ -0,0 +1,111 @@
+export type JustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'
+
+export interface FlexStyle {
+  flexDirection?: 'row' | 'column'
+  justifyContent?: JustifyContent
+  alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch'
+  gap?: number
+  padding?: number
+  paddingTop?: number
+  paddingRight?: number
+  paddingBottom?: number
+  paddingLeft?: number
+}
+
+interface ChildStyle {
+  width?: number | 'auto'; height?: number | 'auto'
+  flexGrow?: number
+  alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch'
+}
+
+interface ChildInfo {
+  style: ChildStyle
+}
+
+export interface LayoutResult {
+  x: number; y: number; width: number; height: number
+}
+
+const DEFAULT_W = 100
+const DEFAULT_H = 30
+
+export function calculateFlexLayout(
+  flex: FlexStyle,
+  parentW: number,
+  parentH: number,
+  children: ChildInfo[]
+): LayoutResult[] {
+  const dir = flex.flexDirection || 'column'
+  const gap = flex.gap ?? 0
+  const justify = flex.justifyContent || 'flex-start'
+  const align = flex.alignItems || 'stretch'
+  const isRow = dir === 'row'
+  const n = children.length
+
+  const mainSize: 'w' | 'h' = isRow ? 'w' : 'h'
+  const crossSize: 'w' | 'h' = isRow ? 'h' : 'w'
+  const mainPos: 'x' | 'y' = isRow ? 'x' : 'y'
+  const crossPos: 'x' | 'y' = isRow ? 'y' : 'x'
+  const mainDim: 'width' | 'height' = isRow ? 'width' : 'height'
+  const crossDim: 'width' | 'height' = isRow ? 'height' : 'width'
+  const pt = flex.paddingTop ?? flex.padding ?? 0
+  const pr = flex.paddingRight ?? flex.padding ?? 0
+  const pb = flex.paddingBottom ?? flex.padding ?? 0
+  const pl = flex.paddingLeft ?? flex.padding ?? 0
+  const mainPadding = isRow ? pl + pr : pt + pb
+  const crossPadding = isRow ? pt + pb : pl + pr
+  const parentMain = (isRow ? parentW : parentH) - mainPadding
+  const parentCross = (isRow ? parentH : parentW) - crossPadding
+
+  const sizes = children.map(c => ({
+    w: typeof c.style.width === 'number' ? c.style.width : DEFAULT_W,
+    h: typeof c.style.height === 'number' ? c.style.height : DEFAULT_H,
+  }))
+
+  const flexGrows = children.map(c => c.style.flexGrow ?? 0)
+  const totalGrow = flexGrows.reduce((s, g) => s + g, 0)
+
+  const baseMain = sizes.reduce((s, c) => s + c[mainSize], 0)
+  let freeGrow = parentMain - baseMain - Math.max(0, n - 1) * gap
+  if (totalGrow > 0 && freeGrow > 0) {
+    for (let i = 0; i < n; i++) {
+      sizes[i]![mainSize] += freeGrow * flexGrows[i]! / totalGrow
+    }
+  }
+
+  const totalMain = sizes.reduce((s, c) => s + c[mainSize], 0)
+  const free = parentMain - totalMain - Math.max(0, n - 1) * gap
+  let offset = 0, extraGap = 0
+  if (justify === 'flex-end') offset = free
+  else if (justify === 'center') offset = Math.max(0, free / 2)
+  else if (justify === 'space-between' && n > 1) extraGap = free / (n - 1)
+  else if (justify === 'space-around') { extraGap = free / n; offset = extraGap / 2 }
+  else if (justify === 'space-evenly') { extraGap = free / (n + 1); offset = extraGap }
+
+  let cursor = offset
+  return sizes.map((sz, i) => {
+    const childCrossBase = sz[crossSize]
+    const childAlign = children[i]!.style.alignSelf ?? 'auto'
+    const effectiveAlign = childAlign === 'auto' ? align : childAlign
+    let childMain = sz[mainSize]
+    let childCross = childCrossBase
+    const res: LayoutResult = { x: 0, y: 0, width: 0, height: 0 }
+    res[mainPos] = cursor
+    res[crossPos] = 0
+    res[mainDim] = childMain
+    res[crossDim] = childCross
+    if (effectiveAlign === 'stretch') {
+      const hasExplicitCross = typeof children[i]!.style[crossDim] === 'number'
+      if (!hasExplicitCross) {
+        res[crossDim] = parentCross
+        res[crossPos] = 0
+      }
+    } else if (effectiveAlign === 'flex-end') {
+      res[crossPos] = parentCross - childCross
+    } else if (effectiveAlign === 'center') {
+      res[crossPos] = Math.max(0, (parentCross - childCross) / 2)
+    }
+    cursor += childMain + gap + extraGap
+    return res
+  })
+}

package/lib/react-qw/props.js

@@ -0,0 +1,27 @@
+import * as gui from 'gui';
+export function applyProps(instance, newProps, _oldProps) {
+    const hwnd = instance.hwnd;
+    instance.props = newProps;
+    const textVal = 'text' in newProps ? newProps.text : (typeof newProps.children === 'string' ? newProps.children :
+        typeof newProps.children === 'number' ? String(newProps.children) : undefined);
+    if (textVal !== undefined) {
+        let cursor = -1;
+        if (instance.type === 'EDIT') {
+            const sel = gui.SendMessage(hwnd, 176 /* gui.EditMsg.GETSEL */, 0, 0);
+            cursor = sel >>> 16;
+        }
+        gui.SetWindowText(hwnd, textVal);
+        if (instance.type === 'EDIT' && cursor >= 0) {
+            gui.SendMessage(hwnd, 177 /* gui.EditMsg.SETSEL */, cursor, cursor);
+        }
+    }
+    if ('disabled' in newProps) {
+        gui.EnableWindow(hwnd, !newProps.disabled);
+    }
+    if ('hidden' in newProps) {
+        gui.ShowWindow(hwnd, newProps.hidden ? 0 /* gui.ShowWindowCmd.HIDE */ : 5 /* gui.ShowWindowCmd.SHOW */);
+    }
+    if ('visible' in newProps) {
+        gui.ShowWindow(hwnd, newProps.visible ? 5 /* gui.ShowWindowCmd.SHOW */ : 0 /* gui.ShowWindowCmd.HIDE */);
+    }
+}

package/lib/react-qw/props.ts

@@ -0,0 +1,36 @@
+import * as gui from 'gui'
+import type { Instance, Props } from './reconciler.js'
+
+export function applyProps(
+  instance: Instance,
+  newProps: Props,
+  _oldProps: Props,
+) {
+  const hwnd = instance.hwnd!
+  instance.props = newProps
+
+  const textVal = 'text' in newProps ? newProps.text : (
+    typeof newProps.children === 'string' ? newProps.children :
+    typeof newProps.children === 'number' ? String(newProps.children) : undefined
+  )
+  if (textVal !== undefined) {
+    let cursor = -1
+    if (instance.type === 'EDIT') {
+      const sel = gui.SendMessage(hwnd, gui.EditMsg.GETSEL, 0, 0)
+      cursor = sel >>> 16
+    }
+    gui.SetWindowText(hwnd, textVal)
+    if (instance.type === 'EDIT' && cursor >= 0) {
+      gui.SendMessage(hwnd, gui.EditMsg.SETSEL, cursor, cursor)
+    }
+  }
+  if ('disabled' in newProps) {
+    gui.EnableWindow(hwnd, !newProps.disabled)
+  }
+  if ('hidden' in newProps) {
+    gui.ShowWindow(hwnd, newProps.hidden ? gui.ShowWindowCmd.HIDE : gui.ShowWindowCmd.SHOW)
+  }
+  if ('visible' in newProps) {
+    gui.ShowWindow(hwnd, newProps.visible ? gui.ShowWindowCmd.SHOW : gui.ShowWindowCmd.HIDE)
+  }
+}

package/lib/react-qw/reconciler.js

@@ -0,0 +1,333 @@
+import ReactReconciler from 'react-reconciler';
+import { createContext } from 'react';
+import { DefaultEventPriority, NoEventPriority } from 'react-reconciler/constants';
+import * as gui from 'gui';
+import * as os from 'os';
+import { applyProps } from './props.js';
+import { calculateFlexLayout } from './layout.js';
+import { getButtonIdealSize, measureTextForHwnd } from '../text-measure.js';
+const dpiFont = gui.CreateSystemDpiFont();
+export const scaleFactor = gui.GetScaleFactor();
+const DELAYED_CONTROLS = new Set(['SysListView32', 'SysTreeView32', 'LISTBOX', 'COMBOBOX', 'msctls_trackbar32', 'SysDateTimePick32', 'SysLink']);
+function isDelayedControl(winClass) {
+    return DELAYED_CONTROLS.has(winClass);
+}
+function setupWindowProc(instance, hwnd) {
+    instance.hwnd = hwnd;
+    const oldProc = gui.GetWindowLongPtr(hwnd, -4 /* gui.Gwlp.WNDPROC */);
+    instancesByHwnd.set(hwnd, instance);
+    gui.SetWindowProc(hwnd, (hwnd, msg, wParam, lParam) => {
+        const ev = instance.props.onEvent;
+        if (!ev)
+            return gui.CallWindowProc(oldProc, hwnd, msg, wParam, lParam);
+        if (typeof ev === 'object') {
+            return ev.fn({ hwnd, msg, wParam, lParam, callOldWndProc: () => gui.CallWindowProc(oldProc, hwnd, msg, wParam, lParam) });
+        }
+        const result = gui.CallWindowProc(oldProc, hwnd, msg, wParam, lParam);
+        const override = ev({ hwnd, msg, wParam, lParam });
+        return typeof override === 'number' && Number.isInteger(override) ? override : result;
+    });
+}
+function ensureChildWindow(child, parentHwnd) {
+    if (child.hwnd !== null)
+        return child.hwnd;
+    const sty = child.props.style || {};
+    const ws = ((child.props.ws ?? 0) | 1073741824 /* gui.WindowStyle.CHILD */) & ~268435456 /* gui.WindowStyle.VISIBLE */;
+    const hwnd = gui.CreateWindow(child.type, child.props.text || '', ws, 0, 0, (typeof sty.width === 'number' ? sty.width : 100) * scaleFactor, (typeof sty.height === 'number' ? sty.height : 30) * scaleFactor, parentHwnd, null);
+    if (dpiFont)
+        gui.SendMessage(hwnd, 48 /* gui.WmMsg.SETFONT */, dpiFont, 1);
+    setupWindowProc(child, hwnd);
+    return hwnd;
+}
+export const instancesByHwnd = new Map();
+function runFlexLayout(inst) {
+    const children = inst.children;
+    if (children.length === 0)
+        return;
+    const s = inst.props.style;
+    const flex = s || {};
+    const visible = children.filter(c => !c.props.hidden);
+    if (visible.length === 0)
+        return;
+    const rect = gui.GetClientRect(inst.hwnd);
+    if (!rect) {
+        console.log('flex: no rect for', inst.hwnd, inst.type);
+        return;
+    }
+    const pw = (rect.right - rect.left) / scaleFactor;
+    const ph = (rect.bottom - rect.top) / scaleFactor;
+    if (pw <= 0 || ph <= 0) {
+        console.log('flex: zero size for', inst.hwnd, inst.type, pw, ph);
+        return;
+    }
+    const autoSizes = new Map();
+    for (const child of visible) {
+        const sty = child.props.style || {};
+        if (!child.hwnd)
+            continue;
+        if (child.type === 'BUTTON' && (sty.width === 'auto' || sty.height === 'auto')) {
+            const ideal = getButtonIdealSize(child.hwnd);
+            autoSizes.set(child, { w: ideal.width / scaleFactor, h: ideal.height / scaleFactor });
+        }
+        else if (child.type === 'STATIC' && (sty.width === 'auto' || sty.height === 'auto') && child.props.text) {
+            const measured = measureTextForHwnd(child.hwnd, child.props.text);
+            autoSizes.set(child, { w: measured.width / scaleFactor, h: measured.height / scaleFactor });
+        }
+    }
+    const results = calculateFlexLayout(flex, pw, ph, visible.map(c => {
+        const sty = c.props.style || {};
+        const auto = autoSizes.get(c);
+        return {
+            style: {
+                ...sty,
+                width: auto ? (sty.width === 'auto' ? auto.w : sty.width) : sty.width,
+                height: auto ? (sty.height === 'auto' ? auto.h : sty.height) : sty.height,
+            }
+        };
+    }));
+    const pl = flex.paddingLeft ?? flex.padding ?? 0;
+    const pt = flex.paddingTop ?? flex.padding ?? 0;
+    for (let i = 0; i < results.length; i++) {
+        const r = results[i];
+        const child = visible[i];
+        const lr = child.lastRect;
+        if (lr && lr.x === r.x && lr.y === r.y && lr.w === r.width && lr.h === r.height)
+            continue;
+        console.log('flex: set', child.type, child.hwnd, 'to', r.x, r.y, r.width, r.height);
+        gui.SetWindowPos(child.hwnd, 0 /* gui.SetWindowPosHwnd.TOP */, (r.x + pl) * scaleFactor, (r.y + pt) * scaleFactor, r.width * scaleFactor, r.height * scaleFactor, 64 /* gui.SetWindowPosFlag.SWP_SHOWWINDOW */);
+        gui.InvalidateRect(child.hwnd, null, true);
+        child.lastRect = { x: r.x, y: r.y, w: r.width, h: r.height };
+    }
+    for (const c of children)
+        runFlexLayout(c);
+}
+export function forceFlexLayout(hwnd) {
+    const inst = instancesByHwnd.get(hwnd);
+    if (inst)
+        runFlexLayout(inst);
+}
+let currentUpdatePriority = NoEventPriority;
+const hostConfig = {
+    // Core methods
+    createInstance(type, props, rootContainer) {
+        if (DEBUG)
+            console.log('[reconciler] createInstance called:', type, 'class=' + props.type);
+        const winClass = props.type;
+        if (isDelayedControl(winClass)) {
+            if (DEBUG)
+                console.log('[reconciler] delayed control, skipping CreateWindow:', winClass);
+            return { hwnd: null, type: winClass, props, children: [] };
+        }
+        if (winClass === 'STATIC' && props.text !== undefined && props.children !== undefined && props.children !== null) {
+            throw new Error('[STATIC] text and children are mutually exclusive');
+        }
+        const sty = props.style || {};
+        // reconciler 创建的都是子窗口，确保 WS_CHILD 避免定位异常；创建时不带 WS_VISIBLE 防止 (0,0) 闪烁
+        const ws = ((props.ws ?? 0) | 1073741824 /* gui.WindowStyle.CHILD */) & ~268435456 /* gui.WindowStyle.VISIBLE */;
+        if (DEBUG)
+            console.log('[reconciler] CreateWindow args:', winClass, props.text ?? '', ws, 0, 0, sty.width ?? 100, sty.height ?? 30, rootContainer);
+        const hwnd = gui.CreateWindow(winClass, props.text ?? '', ws, 0, 0, (typeof sty.width === 'number' ? sty.width : 100) * scaleFactor, (typeof sty.height === 'number' ? sty.height : 30) * scaleFactor, rootContainer, null);
+        if (dpiFont)
+            gui.SendMessage(hwnd, 48 /* gui.WmMsg.SETFONT */, dpiFont, 1);
+        if (DEBUG)
+            console.log('[reconciler] createInstance hwnd result:', hwnd, 'null?', hwnd === null);
+        const instance = { hwnd, type: winClass, props, children: [] };
+        setupWindowProc(instance, hwnd);
+        return instance;
+    },
+    createTextInstance(_text, _rootContainer) {
+        throw new Error('should never be called (shouldSetTextContent=true)');
+    },
+    appendInitialChild(parent, child) {
+        if (child.hwnd === null) {
+            ensureChildWindow(child, parent.hwnd);
+        }
+        else {
+            gui.SetParent(child.hwnd, parent.hwnd);
+        }
+        if (DEBUG)
+            console.log('[reconciler] appendInitialChild parent:', parent.hwnd, 'child:', child.hwnd);
+        parent.children.push(child);
+    },
+    appendChild(parent, child) {
+        if (child.hwnd === null) {
+            ensureChildWindow(child, parent.hwnd);
+        }
+        else {
+            gui.SetParent(child.hwnd, parent.hwnd);
+        }
+        if (DEBUG)
+            console.log('[reconciler] appendChild parent:', parent.hwnd, 'child:', child.hwnd);
+        parent.children.push(child);
+    },
+    appendChildToContainer(container, child) {
+        if (child.hwnd === null) {
+            ensureChildWindow(child, container);
+        }
+        else {
+            gui.SetParent(child.hwnd, container);
+        }
+        const rootInst = instancesByHwnd.get(container);
+        if (rootInst)
+            rootInst.children.push(child);
+        if (DEBUG)
+            console.log('[reconciler] appendChildToContainer container:', container, 'child hwnd:', child.hwnd);
+    },
+    insertBefore(parent, child, beforeChild) {
+        if (child.hwnd === null) {
+            ensureChildWindow(child, parent.hwnd);
+        }
+        else {
+            gui.SetParent(child.hwnd, parent.hwnd);
+        }
+        if (DEBUG)
+            console.log('[reconciler] insertBefore parent:', parent.hwnd, 'child:', child.hwnd, 'before:', beforeChild.hwnd);
+        const idx = parent.children.indexOf(beforeChild);
+        if (idx >= 0)
+            parent.children.splice(idx, 0, child);
+    },
+    insertInContainerBefore(container, child, _before) {
+        if (child.hwnd === null) {
+            ensureChildWindow(child, container);
+        }
+        else {
+            gui.SetParent(child.hwnd, container);
+        }
+        const rootInst = instancesByHwnd.get(container);
+        if (!rootInst)
+            throw new Error('insertInContainerBefore: no root instance for container');
+        const idx = rootInst.children.indexOf(_before);
+        if (idx >= 0)
+            rootInst.children.splice(idx, 0, child);
+        else
+            rootInst.children.push(child);
+        if (DEBUG)
+            console.log('[reconciler] insertInContainerBefore container:', container, 'child hwnd:', child.hwnd);
+    },
+    removeChild(parent, child) {
+        if (DEBUG)
+            console.log('[reconciler] removeChild parent:', parent.hwnd, 'child:', child.hwnd, 'type:', child.type);
+        if (child.hwnd !== null)
+            gui.DestroyWindow(child.hwnd);
+        const idx = parent.children.indexOf(child);
+        if (idx >= 0)
+            parent.children.splice(idx, 1);
+    },
+    removeChildFromContainer(container, child) {
+        if (child.hwnd === null)
+            return;
+        if (DEBUG)
+            console.log('[reconciler] removeChildFromContainer container:', container, 'child hwnd:', child.hwnd);
+        gui.DestroyWindow(child.hwnd);
+        const rootInst = instancesByHwnd.get(container);
+        if (rootInst) {
+            const idx = rootInst.children.indexOf(child);
+            if (idx >= 0)
+                rootInst.children.splice(idx, 1);
+        }
+    },
+    commitUpdate(instance, _type, oldProps, newProps, _internalHandle) {
+        applyProps(instance, newProps, oldProps);
+    },
+    commitMount(_instance, _type, _props, _internal) { },
+    finalizeInitialChildren(instance, type, props) {
+        if (DEBUG)
+            console.log('[reconciler] finalizeInitialChildren instance:', instance.hwnd, 'props:', JSON.stringify(props));
+        applyProps(instance, props, { type });
+        return false;
+    },
+    resetAfterCommit(containerInfo) {
+        if (DEBUG)
+            console.log('[reconciler] resetAfterCommit');
+        const rootInst = instancesByHwnd.get(containerInfo);
+        if (!rootInst)
+            throw new Error('resetAfterCommit: no root instance for container');
+        runFlexLayout(rootInst);
+    },
+    resetTextContent(_instance) { },
+    commitTextUpdate(instance, _oldText, newText) {
+        gui.SetWindowText(instance.hwnd, newText);
+    },
+    hideInstance(instance) {
+        if (instance.hwnd !== null)
+            gui.ShowWindow(instance.hwnd, 0 /* gui.ShowWindowCmd.HIDE */);
+    },
+    hideTextInstance(instance) {
+        if (instance.hwnd !== null)
+            gui.ShowWindow(instance.hwnd, 0 /* gui.ShowWindowCmd.HIDE */);
+    },
+    unhideInstance(instance, _props) {
+        if (instance.hwnd !== null)
+            gui.ShowWindow(instance.hwnd, 5 /* gui.ShowWindowCmd.SHOW */);
+    },
+    unhideTextInstance(instance, _text) {
+        if (instance.hwnd !== null)
+            gui.ShowWindow(instance.hwnd, 5 /* gui.ShowWindowCmd.SHOW */);
+    },
+    shouldSetTextContent(_type, props) {
+        return typeof props.children === 'string' || typeof props.children === 'number';
+    },
+    getPublicInstance(instance) {
+        return instance.hwnd;
+    },
+    getRootHostContext(_rootContainer) {
+        return {};
+    },
+    getChildHostContext(_parentContext, _type) {
+        return {};
+    },
+    prepareForCommit(_containerInfo) {
+        return null;
+    },
+    preparePortalMount(_containerInfo) { },
+    clearContainer(_container) {
+        // 不需要清理，React reconciler 会通过 removeChildFromContainer 来移除子节点
+    },
+    scheduleTimeout(fn, delay) {
+        return os.setTimeout(fn, delay);
+    },
+    cancelTimeout(id) {
+        os.clearTimeout?.(id);
+    },
+    noTimeout: -1,
+    supportsMutation: true,
+    supportsPersistence: false,
+    supportsHydration: false,
+    isPrimaryRenderer: true,
+    supportsMicrotasks: false,
+    setCurrentUpdatePriority(p) { currentUpdatePriority = p; },
+    getCurrentUpdatePriority() { return currentUpdatePriority; },
+    resolveUpdatePriority() { return DefaultEventPriority; },
+    resolveEventType() { return null; },
+    resolveEventTimeStamp() { return Date.now(); },
+    trackSchedulerEvent() { },
+    shouldAttemptEagerTransition() { return false; },
+    detachDeletedInstance(instance) {
+        if (DEBUG)
+            console.log('[reconciler] detachDeletedInstance hwnd:', instance.hwnd, 'type:', instance.type);
+        if (instance.hwnd !== null)
+            instancesByHwnd.delete(instance.hwnd);
+    },
+    // 添加必需方法
+    getInstanceFromNode(_node) { return null; },
+    beforeActiveInstanceBlur() { },
+    afterActiveInstanceBlur() { },
+    prepareScopeUpdate(_scopeInstance, _instance) { },
+    getInstanceFromScope(_scopeInstance) { return null; },
+    // Suspense/Concurrent Mode 支持
+    maySuspendCommit() { return false; },
+    requestPostPaintCallback() { },
+    preloadInstance() { return true; },
+    startSuspendingCommit() { },
+    suspendInstance() { },
+    waitForCommitToBeReady() { return null; },
+    rendererVersion: '0.1.0',
+    rendererPackageName: 'react-qw',
+    NotPendingTransition: null,
+    // @types/react.Context<T> 与 @types/react-reconciler.ReactContext<T> 是同一运行时对象
+    // 的两个不兼容类型定义（ReactContext 多 _currentValue 等字段），此 cast 不可避免
+    HostTransitionContext: createContext(null),
+    resetFormInstance(_form) { },
+};
+const reconciler = ReactReconciler(hostConfig);
+export default reconciler;