quickwin 3.0.1 → 3.0.3

package/examples/test_gallery.tsx

@@ -1,291 +0,0 @@
-import '../lib/polyfill.js'
-import * as gui from 'gui'
-import { useState } from 'react'
-import {
-  render, Button, Input, CheckBox, ProgressBar, ComboBox, Tab,
-  ListView, type Column, ListBox, ScrollView, RadioButton, Slider,
-  TreeView, type TreeNode, DateTimePicker, Link, Tooltip, PathPicker,
-} from '../lib/react-qw/index.js'
-import { ShowWindowCmd, WindowStyle, WmMsg } from '../constants'
-import { GetClientRect, PostQuitMessage, ShowWindow } from '../lib/windows/user32.js'
-import { getScaleFactor } from '../lib/dpi.js'
-import { RECT } from '../lib/windows/structs.js'
-
-
-gui.RegisterClass('Gallery', (hwnd, msg, wParam, lParam) => {
-  if (!hwnd) return gui.DefWindowProc(hwnd, msg, wParam, lParam)
-  if (msg === WmMsg.DESTROY) {
-    PostQuitMessage(0)
-    return 0
-  }
-  return gui.DefWindowProc(hwnd, msg, wParam, lParam)
-})
-
-const VISIBLE = WindowStyle.VISIBLE
-const CLIPCHILDREN = WindowStyle.CLIPCHILDREN
-
-interface Fruit {
-  name: string
-  color: string
-  origin: string
-}
-
-const treeData: TreeNode[] = [
-  {
-    key: 'fruits', label: 'Fruits',
-    children: [
-      { key: 'apple', label: 'Apple' },
-      { key: 'banana', label: 'Banana' },
-      { key: 'cherry', label: 'Cherry' },
-    ],
-  },
-  {
-    key: 'veggies', label: 'Vegetables',
-    children: [
-      { key: 'carrot', label: 'Carrot' },
-      { key: 'broccoli', label: 'Broccoli' },
-    ],
-  },
-  {
-    key: 'meats', label: 'Meats',
-    children: [
-      { key: 'chicken', label: 'Chicken' },
-      { key: 'beef', label: 'Beef' },
-      { key: 'pork', label: 'Pork' },
-    ],
-  },
-]
-
-function App({ svW, svH }: { svW: number; svH: number }) {
-  const [count, setCount] = useState(0)
-  const [disabled, setDisabled] = useState(true)
-  const [inputText, setInputText] = useState('')
-  const [checkA, setCheckA] = useState(true)
-  const [checkB, setCheckB] = useState(false)
-  const [progress, setProgress] = useState(30)
-  const [lbSel, setLbSel] = useState(0)
-  const [cbSel, setCbSel] = useState(-1)
-  const [radio, setRadio] = useState('a')
-  const [sliderVal, setSliderVal] = useState(50)
-  const [treeSel, setTreeSel] = useState<TreeNode | null>(null)
-  const [dtDate, setDtDate] = useState<Date | null>(new Date())
-  const [pickerPath, setPickerPath] = useState('')
-  const [listData, setListData] = useState<Fruit[]>([
-    { name: 'Apple', color: 'Red', origin: 'China' },
-    { name: 'Banana', color: 'Yellow', origin: 'Philippines' },
-    { name: 'Cherry', color: 'Dark Red', origin: 'USA' },
-    { name: 'Date', color: 'Brown', origin: 'Middle East' },
-    { name: 'Elderberry', color: 'Purple', origin: 'Europe' },
-    { name: 'Fig', color: 'Purple', origin: 'Turkey' },
-    { name: 'Grape', color: 'Green', origin: 'Italy' },
-  ])
-  const [listCols, setListCols] = useState<Column<Fruit>[]>([
-    { name: 'Name', dataIndex: 'name' },
-    { name: 'Color', dataIndex: 'color' },
-    { name: 'Origin', dataIndex: 'origin' },
-  ])
-  const lbItems = listData.map(f => f.name)
-  const cbItems = ['Red', 'Green', 'Blue', 'Yellow', 'Purple', 'Orange']
-
-  return (
-      <ScrollView style={{width:svW, height:svH}} contentHeight={1600}>
-      <w type="STATIC" ws={VISIBLE | CLIPCHILDREN | WindowStyle.BORDER} style={{flexDirection:'column', gap:8, alignSelf:'stretch', flexGrow:1, padding:8}}>
-      {/* ===== 三列上半区 ===== */}
-      <w type="STATIC" ws={VISIBLE} style={{flexDirection:'row', gap:10, height:345}}>
-
-        {/* --- 左列: Buttons + CheckBoxes --- */}
-        <w type="STATIC" ws={VISIBLE | CLIPCHILDREN} style={{flexDirection:'column', gap:6, flexGrow:1}}>
-          <w type="STATIC" ws={VISIBLE} text="Buttons" style={{height:24}} />
-          <w type="STATIC" ws={VISIBLE} style={{flexDirection:'row', gap:6, alignItems:'stretch', height:30}}>
-            <Tooltip text="Click to increment counter" balloon>
-              <Button onClick={() => setCount(c => c + 1)} style={{flexGrow:1}}>
-                {`Clicked ${count} times`}
-              </Button>
-            </Tooltip>
-            <Button onClick={() => setCount(0)} style={{width:70}}>
-              Reset
-            </Button>
-          </w>
-          <w type="STATIC" ws={VISIBLE} style={{flexDirection:'row', gap:6, alignItems:'stretch', height:30}}>
-            <Button onClick={() => setDisabled(d => !d)} style={{flexGrow:1}}>
-              {`Toggle disabled (${String(disabled)})`}
-            </Button>
-            <Button disabled={disabled} style={{width:80}}>
-              Disabled
-            </Button>
-          </w>
-          <w type="STATIC" ws={VISIBLE} text="CheckBoxes" style={{height:24}} />
-          <CheckBox checked={checkA} onChange={setCheckA} label={`Option A (${String(checkA)})`} style={{height:26}} />
-          <CheckBox checked={checkB} onChange={setCheckB} label={`Option B (${String(checkB)})`} style={{height:26}} />
-          <CheckBox label="Disabled checkbox" disabled style={{height:26}} />
-          <w type="STATIC" ws={VISIBLE} text={`RadioButtons (${radio})`} style={{height:24}} />
-          <RadioButton checked={radio === 'a'} onChange={() => setRadio('a')} label="Option A" style={{height:24}} />
-          <RadioButton checked={radio === 'b'} onChange={() => setRadio('b')} label="Option B" style={{height:24}} />
-          <RadioButton checked={radio === 'c'} onChange={() => setRadio('c')} label="Option C" style={{height:24}} />
-        </w>
-
-        {/* --- 中列: Input + ProgressBar --- */}
-        <w type="STATIC" ws={VISIBLE | CLIPCHILDREN} style={{flexDirection:'column', gap:6, flexGrow:1}}>
-          <w type="STATIC" ws={VISIBLE} text="Input" style={{height:24}} />
-          <Input value={inputText} onChange={setInputText} placeholder="Type here..." style={{height:28}} />
-          <Input placeholder="Password" password style={{height:28}} />
-          <Input value="Read only" readonly style={{height:28}} />
-          <w type="STATIC" ws={VISIBLE} text="ProgressBar" style={{height:24}} />
-          <w type="STATIC" ws={VISIBLE} style={{flexDirection:'row', gap:6, alignItems:'stretch', height:24}}>
-            <ProgressBar value={progress} max={100} smooth style={{flexGrow:1}} />
-            <w type="STATIC" ws={VISIBLE} text={`${progress}%`} style={{width:40}} />
-          </w>
-          <w type="STATIC" ws={VISIBLE} style={{flexDirection:'row', gap:6, alignItems:'stretch', height:30}}>
-            <Button onClick={() => setProgress(p => Math.min(100, p + 10))} style={{flexGrow:1}}>
-              +10
-            </Button>
-            <Button onClick={() => setProgress(p => Math.max(0, p - 10))} style={{flexGrow:1}}>
-              -10
-            </Button>
-            <Button onClick={() => setProgress(0)} style={{width:50}}>
-              0
-            </Button>
-          </w>
-          <w type="STATIC" ws={VISIBLE} text={`Slider (${sliderVal})`} style={{height:24}} />
-          <Slider value={sliderVal} onChange={setSliderVal} min={0} max={100} style={{height:30}} />
-        </w>
-
-        {/* --- 右列: ListBox + ComboBox --- */}
-        <w type="STATIC" ws={VISIBLE | CLIPCHILDREN} style={{flexDirection:'column', gap:6, flexGrow:1}}>
-          <w type="STATIC" ws={VISIBLE} text={`ListBox (sel=${lbSel >= 0 ? lbItems[lbSel] : 'none'})`} style={{height:24}} />
-          <ListBox items={lbItems} selectedIndex={lbSel} onChange={(i) => setLbSel(i)} style={{flexGrow:1}} />
-          <w type="STATIC" ws={VISIBLE} text="ComboBox" style={{height:24}} />
-          <ComboBox items={cbItems} selectedIndex={cbSel} onChange={(i) => setCbSel(i)} style={{height:26}} />
-          <w type="STATIC" ws={VISIBLE}
-            text={cbSel >= 0 ? `Selected: ${cbItems[cbSel]}` : '(none selected)'}
-            style={{height:24}} />
-        </w>
-      </w>
-
-      {/* ===== Auto-Size ===== */}
-      <w type="STATIC" ws={VISIBLE} text="Auto-Size" style={{height:24}} />
-      <w type="STATIC" ws={VISIBLE | CLIPCHILDREN | WindowStyle.BORDER} style={{flexDirection:'column', gap:6, alignSelf:'stretch', flexGrow:1}}>
-        <w type="STATIC" ws={VISIBLE} text="Buttons (auto width)" style={{height:24}} />
-        <w type="STATIC" ws={VISIBLE} style={{flexDirection:'row', gap:8, alignItems:'stretch', height:30}}>
-          <Button style={{width:'auto', height:30}}>OK</Button>
-          <Button style={{width:'auto', height:30}}>Cancel</Button>
-          <Button style={{width:'auto', height:30}}>A very long button text</Button>
-        </w>
-        <w type="STATIC" ws={VISIBLE} text="Statics (auto width)" style={{height:24}} />
-        <w type="STATIC" ws={VISIBLE} style={{flexDirection:'row', gap:8, alignItems:'stretch', height:24}}>
-          <w type="STATIC" ws={VISIBLE | WindowStyle.BORDER} text="Short" style={{width:'auto', height:24}} />
-          <w type="STATIC" ws={VISIBLE | WindowStyle.BORDER} text="A much longer label" style={{width:'auto', height:24}} />
-        </w>
-        <w type="STATIC" ws={VISIBLE} text="Mixed auto + fixed" style={{height:24}} />
-        <w type="STATIC" ws={VISIBLE} style={{flexDirection:'row', gap:8, alignItems:'stretch', height:30}}>
-          <Button style={{width:150, height:30}}>Fixed 150</Button>
-          <Button style={{width:'auto', height:30}}>Auto</Button>
-        </w>
-      </w>
-
-      {/* ===== Tab Demo ===== */}
-      <w type="STATIC" ws={VISIBLE} text="Tab" style={{height:24}} />
-      <Tab
-        tabs={[
-          { title: 'Counter', content: (
-            <w type="STATIC" ws={VISIBLE | CLIPCHILDREN} style={{flexDirection:'column', gap:6}}>
-              <w type="STATIC" ws={VISIBLE} text={`Count: ${count}`} style={{height:24}} />
-              <Button onClick={() => setCount(c => c + 1)} style={{width:80}}>+1</Button>
-            </w>
-          )},
-          { title: 'Typing', content: (
-            <w type="STATIC" ws={VISIBLE | CLIPCHILDREN} style={{flexDirection:'column', gap:6}}>
-              <Input value={inputText} onChange={setInputText} placeholder="Type here..." style={{height:28}} />
-              <w type="STATIC" ws={VISIBLE} text={inputText ? `You typed: ${inputText}` : '(empty)'} style={{height:24}} />
-            </w>
-          )},
-        ]}
-        style={{height:120}}
-      />
-
-      {/* ===== DateTimePicker ===== */}
-      <w type="STATIC" ws={VISIBLE} text={`DateTimePicker (${dtDate ? `${dtDate.getFullYear()}-${String(dtDate.getMonth()+1).padStart(2,'0')}-${String(dtDate.getDate()).padStart(2,'0')}` : 'none'})`} style={{height:24}} />
-      <w type="STATIC" ws={VISIBLE} style={{flexDirection:'row', gap:8, alignItems:'stretch', height:28}}>
-        <DateTimePicker value={dtDate} onChange={setDtDate} style={{flexGrow:1}} />
-        <DateTimePicker value={dtDate} onChange={setDtDate} format="long" style={{flexGrow:1}} />
-        <DateTimePicker value={dtDate} onChange={setDtDate} format="time" style={{flexGrow:1}} />
-      </w>
-
-      {/* ===== SysLink ===== */}
-      <w type="STATIC" ws={VISIBLE} text="SysLink" style={{height:24}} />
-      <w type="STATIC" ws={VISIBLE} style={{flexDirection:'row', gap:8, alignItems:'stretch', height:28}}>
-        <Link href="https://example.com" onClick={(url) => console.log('Link clicked:', url)} style={{flexGrow:1}}>
-          Example Link
-        </Link>
-        <Link href="https://github.com" onClick={(url) => console.log('Link clicked:', url)} style={{flexGrow:1}} />
-      </w>
-
-      {/* ===== PathPicker ===== */}
-      <w type="STATIC" ws={VISIBLE} text="PathPicker" style={{height:24}} />
-      <w type="STATIC" ws={VISIBLE} style={{flexDirection:'column', gap:6, height:130}}>
-        <PathPicker type="file" title="Select a file" style={{height:28}} />
-        <PathPicker type="folder" title="Select a folder" style={{height:28}} />
-        <PathPicker type="file" value={pickerPath} onChange={setPickerPath} title="Controlled" style={{height:28}} />
-        <w type="STATIC" ws={VISIBLE} text={pickerPath ? `Selected: ${pickerPath}` : '(none)'} style={{height:20}} />
-      </w>
-
-      {/* ===== 下半区: ListView + ScrollView + TreeView ===== */}
-      <w type="STATIC" ws={VISIBLE} style={{flexDirection:'row', gap:6, alignItems:'stretch', height:400}}>
-        <w type="STATIC" ws={VISIBLE | CLIPCHILDREN} style={{flexDirection:'column', gap:4, flexGrow:1}}>
-          <w type="STATIC" ws={VISIBLE} text={`ListView (${listData.length} items)`} style={{height:24}} />
-          <w type="STATIC" ws={VISIBLE} style={{flexDirection:'row', gap:6, alignItems:'stretch', flexGrow:1}}>
-            <ListView<Fruit>
-              columns={listCols}
-              data={listData}
-              style={{flexGrow:1}}
-            />
-            <w type="STATIC" ws={VISIBLE | CLIPCHILDREN} style={{flexDirection:'column', gap:6, width:100}}>
-              <Button onClick={() => setListData(d => [...d, { name: 'NewItem ' + String(listData.length + 1), color: '', origin: '' }])} style={{height:28}}>
-                Add
-              </Button>
-              <Button onClick={() => setListCols(cols => [...cols, { name: 'Col' + (listCols.length + 1), dataIndex: 'name' as keyof Fruit }])} style={{height:28}}>
-                +Column
-              </Button>
-            </w>
-          </w>
-        </w>
-        <w type="STATIC" ws={VISIBLE | CLIPCHILDREN} style={{flexDirection:'column', gap:4, flexGrow:1}}>
-          <w type="STATIC" ws={VISIBLE} text="ScrollView (scrollable)" style={{height:24}} />
-          <ScrollView style={{flexGrow:1}} contentWidth={500} contentHeight={560}>
-            {Array.from({ length: 20 }, (_, i) => (
-              <w type="STATIC" ws={VISIBLE}
-                key={i}
-                text={`Item ${i + 1} - ${i === 0 ? 'here is a line so wide that the horizontal scrollbar appears for demonstration' : ''}`}
-                style={{width: i === 0 ? 500 : 200, height:28}}
-              />
-            ))}
-          </ScrollView>
-        </w>
-        <w type="STATIC" ws={VISIBLE | CLIPCHILDREN} style={{flexDirection:'column', gap:4, flexGrow:1}}>
-          <w type="STATIC" ws={VISIBLE} text={`TreeView (sel=${treeSel?.label ?? 'none'})`} style={{height:24}} />
-          <TreeView data={treeData} onSelect={setTreeSel} style={{flexGrow:1}} />
-        </w>
-      </w>
-      </w>
-    </ScrollView>
-  )
-}
-
-const hwnd = gui.CreateWindow(
-  'Gallery', 'Component Gallery',
-  WindowStyle.OVERLAPPEDWINDOW,
-  100, 100, 1400, 1200, null, null
-)
-
-if (hwnd) {
-  const crBuf = RECT.alloc()
-  if (!GetClientRect(hwnd, crBuf.ptr)) throw new Error('gallery: GetClientRect failed')
-  const { left, top, right, bottom } = RECT.decode(crBuf)
-  const scale = getScaleFactor()
-  const svW = Math.round((right - left) / scale)
-  const svH = Math.round((bottom - top) / scale)
-  render(<App svW={svW} svH={svH} />, hwnd)
-  setTimeout(() => {
-    ShowWindow(hwnd, ShowWindowCmd.SHOWNORMAL)
-  }, 0)
-}