| import { createViewer } from './viewer.js'; |
|
|
| const DEFAULT_VIEW = [0.86, -1.35, 0.98]; |
| const MAX_FILE_BYTES = 512 * 1024; |
|
|
| const byId = (id) => document.getElementById(id); |
| const els = { |
| runtime: byId('runtime'), |
| runtimeText: byId('runtimeText'), |
| loadBtn: byId('loadBtn'), |
| fileInput: byId('fileInput'), |
| exampleList: byId('exampleList'), |
| exampleCount: byId('exampleCount'), |
| fileName: byId('fileName'), |
| fileState: byId('fileState'), |
| revertBtn: byId('revertBtn'), |
| runBtn: byId('runBtn'), |
| editorWrap: byId('editorWrap'), |
| cursorInfo: byId('cursorInfo'), |
| objectCount: byId('objectCount'), |
| autoBtn: byId('autoBtn'), |
| resetBtn: byId('resetBtn'), |
| canvasWrap: byId('canvasWrap'), |
| view: byId('view'), |
| canvasHint: byId('canvasHint'), |
| loadingState: byId('loadingState'), |
| loadingText: byId('loadingText'), |
| emptyState: byId('emptyState'), |
| emptyHint: byId('emptyHint'), |
| errorState: byId('errorState'), |
| errorText: byId('errorText'), |
| dismissError: byId('dismissError'), |
| toast: byId('toast'), |
| dropOverlay: byId('dropOverlay'), |
| }; |
|
|
| const state = { |
| examples: [], |
| current: null, |
| mode: 'example', |
| source: '', |
| fileName: '未命名.py', |
| dirty: false, |
| scene: null, |
| sceneSource: '', |
| busy: false, |
| pendingRun: null, |
| uiSeq: 0, |
| cm: null, |
| viewer: null, |
| toastTimer: null, |
| hintTimer: null, |
| }; |
|
|
| const RUNTIME_LABELS = { |
| idle: 'Python 待命', |
| loading: 'Python 載入中', |
| ready: 'Python 就緒', |
| busy: 'Python 執行中', |
| error: 'Python 離線', |
| }; |
|
|
| class PythonRuntime { |
| constructor() { |
| this.worker = null; |
| this.ready = false; |
| this.failed = false; |
| this.shim = null; |
| this.initPromise = null; |
| this.seq = 0; |
| this.pending = new Map(); |
| this.onState = () => {}; |
| this.lastError = ''; |
| this._readyResolve = null; |
| this._readyReject = null; |
| this._initTimer = null; |
| } |
|
|
| setState(name, detail = '') { |
| this.state = name; |
| this.onState(name, detail); |
| } |
|
|
| async loadShim() { |
| if (this.shim) return this.shim; |
| const response = await fetch('cadshim.py', { cache: 'no-cache' }); |
| if (!response.ok) { |
| throw new Error(`無法載入 Python shim（HTTP ${response.status}）`); |
| } |
| const text = await response.text(); |
| if (!text.includes('__wfcad_runtime')) { |
| throw new Error('Python shim 內容不正確'); |
| } |
| this.shim = text; |
| return text; |
| } |
|
|
| preload() { |
| this.ensure().catch(() => {}); |
| } |
|
|
| async ensure() { |
| if (this.ready && this.worker) return; |
| if (this.initPromise) return this.initPromise; |
| this.initPromise = this.boot(); |
| try { |
| await this.initPromise; |
| } catch (error) { |
| if (this.initPromise === null) throw error; |
| this.initPromise = null; |
| throw error; |
| } |
| } |
|
|
| async boot() { |
| this.setState('loading'); |
| let shim; |
| try { |
| shim = await this.loadShim(); |
| } catch (error) { |
| this.fail(error); |
| throw error; |
| } |
|
|
| let worker; |
| try { |
| worker = new Worker('worker.js'); |
| } catch (error) { |
| this.fail(error); |
| throw error; |
| } |
| this.worker = worker; |
| worker.onmessage = (event) => this.handleMessage(event.data); |
| worker.onerror = (event) => { |
| this.fail(event.message || 'Python worker 發生錯誤'); |
| }; |
|
|
| const ready = new Promise((resolve, reject) => { |
| this._readyResolve = resolve; |
| this._readyReject = reject; |
| }); |
|
|
| this._initTimer = setTimeout(() => { |
| this.fail('Python 執行環境載入逾時，請檢查網路後重試。'); |
| }, 90000); |
|
|
| worker.postMessage({ type: 'init', shim }); |
| await ready; |
| } |
|
|
| handleMessage(message) { |
| if (!message) return; |
| if (message.type === 'ready') { |
| if (this._initTimer) { |
| clearTimeout(this._initTimer); |
| this._initTimer = null; |
| } |
| this.ready = true; |
| this.failed = false; |
| this.setState('ready'); |
| const resolve = this._readyResolve; |
| this._readyResolve = null; |
| this._readyReject = null; |
| if (resolve) resolve(); |
| return; |
| } |
| if (message.type === 'fatal') { |
| this.fail(message.error || 'Python 執行環境發生錯誤'); |
| return; |
| } |
| if (message.type === 'result' || message.type === 'error') { |
| const pending = this.pending.get(message.id); |
| if (!pending) return; |
| this.pending.delete(message.id); |
| if (message.type === 'result') { |
| pending.resolve(message.result); |
| } else { |
| pending.reject(new Error(message.error || 'Python 執行失敗')); |
| } |
| } |
| } |
|
|
| fail(error) { |
| const reason = error instanceof Error ? error.message : String(error || 'Python 執行環境發生錯誤'); |
| this.lastError = reason; |
| this.ready = false; |
| this.failed = true; |
| if (this._initTimer) { |
| clearTimeout(this._initTimer); |
| this._initTimer = null; |
| } |
| if (this.worker) { |
| this.worker.terminate(); |
| this.worker = null; |
| } |
| this.initPromise = null; |
| const rejectReady = this._readyReject; |
| this._readyResolve = null; |
| this._readyReject = null; |
| if (rejectReady) rejectReady(new Error(reason)); |
| for (const pending of [...this.pending.values()]) { |
| pending.reject(new Error(reason)); |
| } |
| this.pending.clear(); |
| this.setState('error', reason); |
| } |
|
|
| async run(code) { |
| await this.ensure(); |
| if (!this.worker) throw new Error('Python 執行環境不在線'); |
| this.setState('busy'); |
| const id = ++this.seq; |
| return new Promise((resolve, reject) => { |
| const timer = setTimeout(() => { |
| this.pending.delete(id); |
| this.restart(); |
| reject(new Error('執行逾時。程式可能進入了無窮迴圈，已停止執行。')); |
| }, 20000); |
| this.pending.set(id, { |
| resolve: (value) => { |
| clearTimeout(timer); |
| this.finishRun(); |
| resolve(value); |
| }, |
| reject: (error) => { |
| clearTimeout(timer); |
| this.finishRun(); |
| reject(error); |
| }, |
| }); |
| this.worker.postMessage({ type: 'run', id, code }); |
| }); |
| } |
|
|
| finishRun() { |
| if (this.ready) { |
| this.setState('ready'); |
| } else if (this.failed) { |
| this.setState('error', this.lastError); |
| } |
| } |
|
|
| restart() { |
| if (this.worker) { |
| this.worker.terminate(); |
| this.worker = null; |
| } |
| this.ready = false; |
| this.failed = false; |
| this.initPromise = null; |
| this.pending.clear(); |
| this.setState('idle'); |
| } |
| } |
|
|
| const runtime = new PythonRuntime(); |
| runtime.onState = (name, detail) => { |
| els.runtime.dataset.state = name; |
| els.runtimeText.textContent = RUNTIME_LABELS[name] || 'Python'; |
| if (name === 'error') { |
| els.runtime.title = detail || 'Python 執行環境無法載入'; |
| } else { |
| els.runtime.title = 'Python 執行環境'; |
| } |
| }; |
|
|
| |
| |
| |
|
|
| function escapeHtml(value) { |
| return String(value).replace(/[&<>"']/g, (char) => { |
| const map = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }; |
| return map[char]; |
| }); |
| } |
|
|
| function cleanError(value) { |
| let text = value instanceof Error ? value.stack || value.message : String(value || '未知錯誤'); |
| text = text.replace(/\u001b\[[0-9;]*m/g, '').trim(); |
| if (text.length > 7000) text = `${text.slice(0, 7000)}\n…`; |
| return text || '未知錯誤'; |
| } |
|
|
| function hideToast() { |
| if (state.toastTimer) clearTimeout(state.toastTimer); |
| state.toastTimer = null; |
| els.toast.hidden = true; |
| } |
|
|
| function toast(message, tone = 'info') { |
| hideToast(); |
| els.toast.textContent = message; |
| els.toast.dataset.tone = tone; |
| els.toast.hidden = false; |
| state.toastTimer = setTimeout(() => { |
| els.toast.hidden = true; |
| state.toastTimer = null; |
| }, tone === 'error' ? 4200 : 2800); |
| } |
|
|
| function showLoading(text) { |
| hideToast(); |
| if (text) els.loadingText.textContent = text; |
| els.loadingState.hidden = false; |
| els.emptyState.hidden = true; |
| els.errorState.hidden = true; |
| } |
|
|
| function showError(message) { |
| hideToast(); |
| els.errorText.textContent = cleanError(message); |
| els.errorState.hidden = false; |
| els.loadingState.hidden = true; |
| els.emptyState.hidden = true; |
| els.canvasHint.classList.add('is-hidden'); |
| els.fileState.textContent = '錯誤'; |
| els.fileState.dataset.state = 'error'; |
| } |
|
|
| function hideError() { |
| if (!els.errorState.hidden) { |
| els.errorState.hidden = true; |
| updateFileUI(); |
| } |
| } |
|
|
| function updateCursor() { |
| if (!state.cm) return; |
| const cursor = state.cm.getCursor(); |
| els.cursorInfo.textContent = `Ln ${cursor.line + 1}, Col ${cursor.ch + 1}`; |
| } |
|
|
| function updateRunButton() { |
| els.runBtn.disabled = state.busy; |
| els.runBtn.setAttribute('aria-busy', String(state.busy)); |
| els.runBtn.classList.toggle('is-busy', state.busy); |
| } |
|
|
| function updateFileUI() { |
| els.fileName.textContent = state.fileName || '未命名.py'; |
| document.title = `${state.fileName || 'WFreeCAD'} · WFreeCAD`; |
| els.revertBtn.disabled = !(state.mode === 'example' && state.current); |
| els.revertBtn.title = els.revertBtn.disabled ? '只有範例可以還原' : '回到範例程式'; |
|
|
| let label = '範例'; |
| let kind = 'example'; |
| if (state.mode === 'upload') { |
| label = state.dirty ? '已修改' : '已載入'; |
| kind = state.dirty ? 'modified' : 'upload'; |
| } else if (state.dirty) { |
| label = '已修改'; |
| kind = 'modified'; |
| } |
| els.fileState.textContent = label; |
| els.fileState.dataset.state = kind; |
| } |
|
|
| function updateActive(id) { |
| const cards = els.exampleList.querySelectorAll('.example-card'); |
| for (const card of cards) { |
| const active = card.dataset.id === id; |
| card.classList.toggle('is-active', active); |
| if (active) { |
| card.setAttribute('aria-current', 'true'); |
| } else { |
| card.removeAttribute('aria-current'); |
| } |
| } |
| } |
|
|
| |
| |
| |
|
|
| function initEditor() { |
| state.cm = CodeMirror.fromTextArea(byId('editor'), { |
| mode: 'python', |
| lineNumbers: true, |
| indentUnit: 4, |
| tabSize: 4, |
| indentWithTabs: false, |
| lineWrapping: true, |
| matchBrackets: true, |
| autoCloseBrackets: true, |
| styleActiveLine: true, |
| viewportMargin: 40, |
| extraKeys: { |
| Tab: (editor) => { |
| if (editor.somethingSelected()) { |
| editor.indentSelection('add'); |
| } else { |
| editor.replaceSelection(' ', 'end'); |
| } |
| }, |
| }, |
| }); |
| state.cm.setSize('100%', '100%'); |
| state.cm.on('change', () => { |
| const value = state.cm.getValue(); |
| state.dirty = value !== state.source; |
| updateFileUI(); |
| updateCursor(); |
| if (!els.errorState.hidden) hideError(); |
| }); |
| state.cm.on('cursorActivity', updateCursor); |
| state.cm.on('focus', () => runtime.preload()); |
| requestAnimationFrame(() => state.cm.refresh()); |
| updateCursor(); |
| } |
|
|
| function setEditor(text, { mode, name } = {}) { |
| state.source = text; |
| if (mode) state.mode = mode; |
| if (name) state.fileName = name; |
| state.dirty = false; |
| state.cm.setValue(text || ''); |
| state.cm.clearHistory(); |
| state.cm.setCursor({ line: 0, ch: 0 }); |
| updateFileUI(); |
| updateCursor(); |
| requestAnimationFrame(() => state.cm.refresh()); |
| } |
|
|
| |
| |
| |
|
|
| function showScene(scene, view) { |
| if (!scene) { |
| showError('沒有可顯示的場景'); |
| return { objects: 0, skipped: 0 }; |
| } |
| const stats = state.viewer.setScene(scene, view || DEFAULT_VIEW); |
| els.objectCount.textContent = `${stats.objects} 個物件`; |
| els.loadingState.hidden = true; |
| els.errorState.hidden = true; |
| if (stats.objects === 0) { |
| els.emptyState.hidden = false; |
| if (stats.skipped > 0) { |
| els.emptyHint.textContent = '場景中的幾何使用了尚未支援的 FreeCAD API'; |
| } else { |
| els.emptyHint.innerHTML = '在程式裡呼叫 <code>Part.show(shape)</code>'; |
| } |
| } else { |
| els.emptyState.hidden = true; |
| } |
| return stats; |
| } |
|
|
| function presentScene(scene, view, { notify = false } = {}) { |
| const stats = showScene(scene, view); |
| const errors = (scene && scene.errors) || []; |
| if (stats.objects === 0 && errors.length) { |
| showError(errors.join('\n')); |
| } else if (errors.length) { |
| toast(`有 ${errors.length} 個物件計算失敗`, 'error'); |
| } else if (stats.objects === 0) { |
| |
| } else if (stats.skipped > 0) { |
| toast(`已顯示 ${stats.objects} 個物件，${stats.skipped} 個未支援`, 'error'); |
| } else if (notify) { |
| toast('執行完成'); |
| } |
| return stats; |
| } |
|
|
| |
| |
| |
|
|
| async function loadExamples() { |
| const indexResponse = await fetch('examples/index.json', { cache: 'no-cache' }); |
| if (!indexResponse.ok) { |
| throw new Error(`無法載入範例索引（HTTP ${indexResponse.status}）`); |
| } |
| const index = await indexResponse.json(); |
| const examples = await Promise.all( |
| index.map(async (item) => { |
| const [codeResponse, sceneResponse] = await Promise.all([ |
| fetch(`examples/${item.code}`, { cache: 'no-cache' }), |
| fetch(`scenes/${item.scene}`, { cache: 'no-cache' }), |
| ]); |
| if (!codeResponse.ok || !sceneResponse.ok) { |
| throw new Error(`無法載入 ${item.id} 的範例檔`); |
| } |
| return { |
| ...item, |
| codeText: await codeResponse.text(), |
| sceneData: await sceneResponse.json(), |
| }; |
| }), |
| ); |
| state.examples = examples; |
| els.exampleCount.textContent = String(examples.length).padStart(2, '0'); |
| renderExamples(); |
| return examples; |
| } |
|
|
| function renderExamples() { |
| els.exampleList.innerHTML = ''; |
| const fragment = document.createDocumentFragment(); |
| state.examples.forEach((item, index) => { |
| const button = document.createElement('button'); |
| button.type = 'button'; |
| button.className = 'example-card'; |
| button.dataset.id = item.id; |
| button.innerHTML = ` |
| <span class="example-thumb"> |
| <img src="thumbs/${encodeURIComponent(item.thumb)}" alt="" loading="lazy" draggable="false"> |
| </span> |
| <span class="example-meta"> |
| <span class="example-title">${escapeHtml(item.title || item.id)}</span> |
| <span class="example-sub">${escapeHtml(item.subtitle || item.code)}</span> |
| </span> |
| <span class="example-index">${String(index + 1).padStart(2, '0')}</span> |
| <span class="example-chev" aria-hidden="true"> |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"> |
| <path d="m9 6 6 6-6 6"/> |
| </svg> |
| </span> |
| `; |
| button.addEventListener('click', () => loadExample(item)); |
| fragment.appendChild(button); |
| }); |
| els.exampleList.appendChild(fragment); |
| } |
|
|
| function loadExample(item, { initial = false } = {}) { |
| if (!item) return; |
| hideToast(); |
| state.uiSeq += 1; |
| state.pendingRun = null; |
| state.current = item; |
| state.mode = 'example'; |
| state.fileName = item.code; |
| state.source = item.codeText; |
| state.dirty = false; |
| state.scene = item.sceneData; |
| state.sceneSource = item.codeText; |
| setEditor(item.codeText, { mode: 'example', name: item.code }); |
| updateActive(item.id); |
| hideError(); |
| presentScene(item.sceneData, item.view); |
| if (initial) { |
| els.canvasHint.classList.remove('is-hidden'); |
| if (state.hintTimer) clearTimeout(state.hintTimer); |
| state.hintTimer = setTimeout(() => els.canvasHint.classList.add('is-hidden'), 9000); |
| } |
| } |
|
|
| |
| |
| |
|
|
| async function runCode(code) { |
| if (state.busy) { |
| state.pendingRun = { code }; |
| toast('正在執行，完成後會接著執行'); |
| return; |
| } |
| state.busy = true; |
| updateRunButton(); |
| const uiSeq = state.uiSeq; |
| showLoading(runtime.ready ? '正在解析 Part 指令…' : 'Python 執行環境載入中…（首次約 10 MB）'); |
| runtime.preload(); |
| try { |
| const result = await runtime.run(code); |
| if (uiSeq !== state.uiSeq) return; |
| if (!result || !result.ok) { |
| showError((result && result.error) || '執行失敗'); |
| return; |
| } |
| state.scene = result.scene; |
| state.sceneSource = code; |
| presentScene(result.scene, state.current ? state.current.view : DEFAULT_VIEW, { notify: true }); |
| } catch (error) { |
| if (uiSeq !== state.uiSeq) return; |
| showError(error && error.message ? error.message : error); |
| } finally { |
| state.busy = false; |
| updateRunButton(); |
| if (state.pendingRun) { |
| const pending = state.pendingRun; |
| state.pendingRun = null; |
| runCode(pending.code); |
| } |
| } |
| } |
|
|
| function requestRun(code) { |
| runtime.preload(); |
| if (state.busy) { |
| state.pendingRun = { code }; |
| toast('正在執行，完成後會接著執行'); |
| return; |
| } |
| runCode(code); |
| } |
|
|
| function runCurrent() { |
| const code = state.cm.getValue(); |
| if (state.mode === 'example' && state.current && !state.dirty && state.current.sceneData) { |
| state.uiSeq += 1; |
| presentScene(state.current.sceneData, state.current.view); |
| if (els.errorState.hidden) toast('已重新載入範例預覽'); |
| return; |
| } |
| requestRun(code); |
| } |
|
|
| |
| |
| |
|
|
| async function loadFile(file) { |
| if (!file) return; |
| if (!/\.(py|txt)$/i.test(file.name)) { |
| toast('請選擇 .py 檔', 'error'); |
| return; |
| } |
| if (file.size > MAX_FILE_BYTES) { |
| toast('檔案太大（上限 512 KB）', 'error'); |
| return; |
| } |
| try { |
| const text = await file.text(); |
| state.uiSeq += 1; |
| state.pendingRun = null; |
| state.current = null; |
| state.mode = 'upload'; |
| state.fileName = file.name; |
| state.source = text; |
| state.dirty = false; |
| state.scene = null; |
| state.sceneSource = ''; |
| setEditor(text, { mode: 'upload', name: file.name }); |
| updateActive(null); |
| hideError(); |
| requestRun(text); |
| } catch (error) { |
| showError(error && error.message ? error.message : error); |
| } |
| } |
|
|
| |
| |
| |
|
|
| function bindUI() { |
| els.loadBtn.addEventListener('click', () => { |
| runtime.preload(); |
| els.fileInput.click(); |
| }); |
|
|
| els.fileInput.addEventListener('change', () => { |
| const file = els.fileInput.files && els.fileInput.files[0]; |
| if (file) loadFile(file); |
| els.fileInput.value = ''; |
| }); |
|
|
| els.runBtn.addEventListener('click', runCurrent); |
|
|
| els.revertBtn.addEventListener('click', () => { |
| if (!state.current) return; |
| state.uiSeq += 1; |
| state.pendingRun = null; |
| loadExample(state.current); |
| toast('已回到範例程式'); |
| }); |
|
|
| els.dismissError.addEventListener('click', hideError); |
|
|
| els.autoBtn.addEventListener('click', () => { |
| const enabled = !state.viewer.isAutoRotate(); |
| state.viewer.setAutoRotate(enabled); |
| els.autoBtn.classList.toggle('is-on', enabled); |
| els.autoBtn.setAttribute('aria-pressed', String(enabled)); |
| els.autoBtn.title = enabled ? '自動旋轉' : '自動旋轉（已暫停）'; |
| }); |
|
|
| els.resetBtn.addEventListener('click', () => { |
| state.viewer.resetView(); |
| els.canvasHint.classList.add('is-hidden'); |
| }); |
|
|
| els.view.addEventListener( |
| 'pointerdown', |
| () => { |
| els.canvasHint.classList.add('is-hidden'); |
| }, |
| { once: true }, |
| ); |
|
|
| window.addEventListener('keydown', (event) => { |
| if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') { |
| event.preventDefault(); |
| runCurrent(); |
| } else if (event.key === 'Escape') { |
| hideError(); |
| els.dropOverlay.hidden = true; |
| } |
| }); |
|
|
| let dragDepth = 0; |
| const hasFiles = (event) => { |
| const types = event.dataTransfer && event.dataTransfer.types; |
| return Boolean(types && Array.from(types).includes('Files')); |
| }; |
| window.addEventListener('dragenter', (event) => { |
| if (!hasFiles(event)) return; |
| event.preventDefault(); |
| dragDepth += 1; |
| els.dropOverlay.hidden = false; |
| }); |
| window.addEventListener('dragover', (event) => { |
| if (!hasFiles(event)) return; |
| event.preventDefault(); |
| if (event.dataTransfer) event.dataTransfer.dropEffect = 'copy'; |
| }); |
| window.addEventListener('dragleave', (event) => { |
| if (!hasFiles(event)) return; |
| dragDepth = Math.max(0, dragDepth - 1); |
| if (dragDepth === 0) els.dropOverlay.hidden = true; |
| }); |
| window.addEventListener('drop', (event) => { |
| event.preventDefault(); |
| dragDepth = 0; |
| els.dropOverlay.hidden = true; |
| const file = event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]; |
| if (file) loadFile(file); |
| }); |
|
|
| let resizeTimer = null; |
| window.addEventListener('resize', () => { |
| if (resizeTimer) clearTimeout(resizeTimer); |
| resizeTimer = setTimeout(() => { |
| if (state.cm) state.cm.refresh(); |
| }, 120); |
| }); |
| } |
|
|
| function schedulePreload() { |
| const connection = |
| navigator.connection || navigator.mozConnection || navigator.webkitConnection; |
| if (connection && (connection.saveData || /2g/.test(connection.effectiveType || ''))) { |
| return; |
| } |
| setTimeout(() => runtime.preload(), 5000); |
| } |
|
|
| async function init() { |
| state.viewer = createViewer(els.view, { autoRotate: true }); |
| initEditor(); |
| bindUI(); |
| updateFileUI(); |
| showLoading('正在載入範例…'); |
| try { |
| const examples = await loadExamples(); |
| if (examples.length > 0) { |
| loadExample(examples[0], { initial: true }); |
| } else { |
| showError('找不到任何範例。'); |
| } |
| } catch (error) { |
| showError(error && error.message ? error.message : error); |
| } |
| schedulePreload(); |
| } |
|
|
| init().catch((error) => { |
| console.error(error); |
| showError(error && error.message ? error.message : error); |
| }); |
|
|
