ShaftWeb/index.html at main · ShaftUI/ShaftWeb · GitHub

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
<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <title>ShaftWeb Demo</title>

    <!-- <style>
        :active {
            outline: 2px solid #000;
        }
    </style> -->

    <script type="module">
        import { init } from "./.build/plugins/PackageToJS/outputs/Package/index.js";

        // Set up canvas with proper DPI scaling
        function setupCanvasForDPI() {
            const canvas = document.getElementById('canvas');
            if (!canvas) return;

            // Get the device pixel ratio
            const dpr = window.devicePixelRatio || 1;

            // Set logical size (CSS pixels)
            const logicalWidth = 800;
            const logicalHeight = 600;

            // Set actual size in memory (scaled for retina)
            canvas.width = logicalWidth * dpr;
            canvas.height = logicalHeight * dpr;

            // Set CSS size to logical size
            canvas.style.width = logicalWidth + 'px';
            canvas.style.height = logicalHeight + 'px';

            // Scale the drawing context so everything draws at the correct size
            const ctx = canvas.getContext('2d');
            ctx.scale(dpr, dpr);

            // Store the DPI information for Swift code
            canvas.dataset.devicePixelRatio = dpr;
            canvas.dataset.logicalWidth = logicalWidth;
            canvas.dataset.logicalHeight = logicalHeight;

            console.log(`Canvas DPI setup: ${dpr}x scale, ${logicalWidth}x${logicalHeight} logical, ${canvas.width}x${canvas.height} physical`);
        }

        // Initialize canvas when DOM is ready
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', setupCanvasForDPI);
        } else {
            setupCanvasForDPI();
        }

        init();
    </script>
</head>

<body>
    <h1>ShaftWeb Demo</h1>
    <div style="display: flex; justify-content: center; align-items: center; min-height: 70vh;">
        <canvas id="canvas" style="border: 1px solid #ccc; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"></canvas>
    </div>
</body>

</html>