init

2025-07-18 20:25:57 +08:00
commit 68c8096686
15 changed files with 2582 additions and 0 deletions
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Simple Vue.js Rendering Canvas Demo</title>
+    <!-- Use vue.global.prod.js for production deployment -->
+    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@microsoft/signalr@latest/dist/browser/signalr.min.js"></script>
+    <style>
+        body {
+            margin: 0;
+            padding: 20px;
+            font-family: Arial, sans-serif;
+        }
+        
+        .demo-container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        
+        .canvas-wrapper {
+            height: 600px;
+            border: 1px solid #ddd;
+            margin: 20px 0;
+        }
+        
+        .controls {
+            margin-bottom: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div id="app">
+        <div class="demo-container">
+            <h1>Simple Rendering Canvas Demo</h1>
+            
+            <div class="controls" v-if="canvas">
+                <!-- View dropdown component -->
+                <rendering-canvas-view-dropdown
+                    :rendering-canvas="canvas"
+                ></rendering-canvas-view-dropdown>
+            </div>
+            
+            <div class="canvas-wrapper">
+                <!-- Self-contained canvas component -->
+                <rendering-canvas
+                    ref="canvas"
+                    :auto-connect="true"
+                    @initialized="onCanvasInitialized"
+                    @server-initialized="onServerInitialized"
+                ></rendering-canvas>
+            </div>
+        </div>
+    </div>
+
+    <script type="module">
+        import RenderingCanvas from './disp/rendering-canvas.js';
+        import RenderingCanvasViewDropdown from './disp/rendering-canvas-view-dropdown.js';
+        
+        const { createApp } = Vue;
+        
+        createApp({
+            components: {
+                RenderingCanvas,
+                RenderingCanvasViewDropdown
+            },
+            data() {
+                return {
+                    canvas: null
+                }
+            },
+            mounted() {
+                // Make the canvas reference available after mounting
+                this.$nextTick(() => {
+                    this.canvas = this.$refs.canvas;
+                });
+            },
+            methods: {
+                onCanvasInitialized(canvasId) {
+                    console.log('Canvas initialized:', canvasId);
+                    // Update the canvas reference to ensure dropdown is enabled
+                    this.canvas = this.$refs.canvas;
+                },
+                
+                async onServerInitialized(sessionId) {
+                    console.log('Server initialized with session:', sessionId);
+                    // Load test objects for this demo
+                    await this.loadTestObjects(sessionId);
+                },
+                
+                async loadTestObjects(sessionId) {
+                    try {
+                        const response = await fetch(`/api/rendering/test-objects/${sessionId}`, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json'
+                            }
+                        });
+                        
+                        if (response.ok) {
+                            console.log('Test objects loaded successfully');
+                        } else {
+                            const errorText = await response.text();
+                            console.error(`Failed to load test objects: ${response.status} - ${errorText}`);
+                        }
+                    } catch (err) {
+                        console.error(`Error loading test objects: ${err}`);
+                    }
+                }
+            }
+        }).mount('#app');
+    </script>
+</body>
+</html>