व्यूपोर्ट

व्यूपोर्ट घटक

apps/desktop/src/viewport/index.ts निर्यात Editor2D, View3D, उनके प्रोप प्रकार, उपलब्ध उपकरण पहचानकर्ता, और solidsFromProfiles. दोनों घटक अपने मूल को भरते हैं: एक कंटेनर को गैर-शून्य चौड़ाई और ऊंचाई प्रदान करते हैं। कोर सीएडी इकाइयां और सीएएम प्रोग्राम साझा डेटा मॉडल हैं।

2D संपादक कैनवास 2D को प्रस्तुत करता है और अपना स्वयं का चयन, कैमरा और कमांड इतिहास बनाए रखता है। 3डी व्यूअर थ्री.जेएस, ऑर्बिट और ट्रांसफॉर्म कंट्रोल, एसिंक्रोनस मेश जॉब और प्रोग्राम प्लेबैक का उपयोग करता है। किसी पथ या ठोस का प्रतिपादन उसे सहेजने या विनिर्माण संचालन को सत्यापित करने से स्वतंत्र है।

एकीकरण अनुबंध

Editor2DProps आवश्यक है drawing, onChange, और selectedTool. उत्सर्जित चित्रों को वापस प्रोप में फ़ीड करें। घटक अपने स्वयं के उत्सर्जित दस्तावेज़ ऑब्जेक्ट को पहचानता है; दस्तावेज़ को बदलने से नई ड्राइंग बाहरी रूप से लोड हो जाती है और संपादक स्थिति रीसेट हो जाती है।

import { createSignal } from "solid-js"
import { Editor2D, type ToolId } from "./viewport/index.ts"

const [drawing, setDrawing] = createSignal(initialDrawing)
const [tool, setTool] = createSignal<ToolId>("select")

<Editor2D drawing={drawing()} onChange={setDrawing} selectedTool={tool()} />

चयन में लॉक की गई इकाइयां और लॉक की गई परतों पर मौजूद इकाइयां शामिल नहीं हैं। अदृश्य संस्थाओं और छिपी हुई परतों को प्रस्तुत स्थानिक सूचकांक से बाहर रखा गया है। नई इकाइयाँ दस्तावेज़-अद्वितीय पहचानकर्ता प्राप्त करती हैं और उपलब्ध होने पर उन्हें एक दृश्यमान, अनलॉक परत को सौंपा जाता है।

आरेखण उपकरण और इशारे

टूल रजिस्ट्री में चयन, रेखा, आयत, वृत्त, दीर्घवृत्त, पॉलीलाइन, चाप, पाठ, आयाम, चाल, घुमाएँ, स्केल, दर्पण, ऑफ़सेट, ट्रिम और फ़िलेट के लिए फ़ैक्टरियाँ हैं। AVAILABLE_TOOLS उन पंजीकृत कारखानों से प्राप्त होता है। startTool अतिरिक्त रूप से पहचानता है chamfer फ़िलेट टूल फ़ैक्टरी के माध्यम से, लेकिन उस सरणी में चम्फर का विज्ञापन नहीं किया गया है। उपभोक्ताओं को यह तय करने के लिए वास्तविक रजिस्ट्री का उपयोग करना चाहिए कि कौन से उपकरण सक्षम करने हैं।

• व्हील या पिंच ज़ूम; स्पेस-ड्रैग, मिडिल-ड्रैग और राइट-ड्रैग पैन।
• F अनुक्रमित ड्राइंग में फिट बैठता है। डिलीट या बैकस्पेस अनलॉक किए गए चयन को हटा देता है।
• Cmd/Ctrl+Z पूर्ववत करता है; Cmd/Ctrl+Shift+Z या Cmd/Ctrl+Y पुनः करता है.
• एंटर एक पॉलीलाइन बनाता है। एस्केप को उसके वर्तमान जेस्चर को रद्द करने के लिए सक्रिय टूल पर डिलीवर किया जाता है।
• पाठ सक्रिय होने पर, प्लेसमेंट से पहले अक्षर या बैकस्पेस टाइप करें; प्रारंभिक पाठ है Text.

उपकरण प्रेषण से पहले सूचक स्थिति को विश्व निर्देशांक में परिवर्तित कर दिया जाता है। स्नैपिंग स्थानिक सूचकांक, ज्यामितीय उम्मीदवारों और एक कैमरा-निर्भर ग्रिड को जोड़ती है; चयन हिट सहनशीलता आठ स्क्रीन पिक्सल से मेल खाती है। टूल मशीनें फ़ाइलें लिखने या एपीआई को कॉल करने के बजाय कमांड और पूर्वावलोकन उत्पन्न करती हैं।

3डी प्रतिपादन और प्लेबैक

View3D चित्र, ठोस पदार्थ, वैकल्पिक प्रोफ़ाइल एक्सट्रूज़न स्वीकार करता है, ए cam.Program, स्टॉक आयाम, और उपकरण परिभाषाएँ। यह परिप्रेक्ष्य, ऊपर, नीचे, आगे, पीछे, बाएँ, दाएँ, आइसोमेट्रिक और चार-दृश्य प्रीसेट का समर्थन करता है। डिस्प्ले मोड को छायांकित किया गया है, किनारों, वायरफ्रेम और एक्स-रे के साथ छायांकित किया गया है। प्रकाश, भौतिक गुण, क्लिपिंग अनुभाग, ग्रिड, अक्ष और मूल को प्रॉप्स के माध्यम से कॉन्फ़िगर किया जा सकता है।

इसके साथ प्लेबैक को नियंत्रित करें playing, playbackTime सेकंड में, playbackRate, और onPlaybackTimeChange. प्लेबैक ड्रिलिंग चक्रों का विस्तार करता है, वृत्ताकार/पेचदार गति को टेसेलेट करता है, रुकने का समय संरक्षित करता है, और तीव्र गति को स्पष्ट रूप से खींचता है। उपकरण मानचित्र और एक वैकल्पिक डिफ़ॉल्ट कटर आपूर्ति कटर, शैंक और धारक ज्यामिति; कल्पित ज्यामिति दृष्टिगत रूप से प्रतिष्ठित है।

चयन कॉलबैक एक ठोस सूचकांक की रिपोर्ट करते हैं। ट्रांसफ़ॉर्म नियंत्रण स्थिति, घूर्णन और स्केल का उत्सर्जन करते हैं onTransformCommit; कॉल करने वाले निर्णय लेते हैं कि उस परिवर्तन को कैसे जारी रखा जाए। टूलपाथ ओवरले बिंदु और लेबल, बिंदु-प्रकार के फ़िल्टर, चाप केंद्र, चाप त्रिज्या और स्टॉक पारदर्शिता दिखा सकते हैं।

निर्देशांक और इकाइयाँ

कोर ड्राइंग निर्देशांक और स्टॉक आकार मिलीमीटर का उपयोग करते हैं। आरेखण कोण और थ्री.जेएस रोटेशन घटक रेडियन का उपयोग करते हैं; उस कन्वेंशन को सीएएम रोटरी-अक्ष मानों या फ़ीचर इनपुट पर लागू न करें जो स्पष्ट रूप से डिग्री का उपयोग करते हैं। viewport/units.ts प्रदर्शित मिलीमीटर और इंच के लिए रूपांतरण सहायक शामिल हैं। इनपुट/आउटपुट सीमाओं पर कनवर्ट करें ताकि स्नैपिंग, ज्यामिति और टूलपाथ गति एक सुसंगत इकाई प्रणाली को बनाए रखे।

2डी कैमरा सीएसएस पिक्सल के साथ दुनिया के समन्वय को मैप करता है; बैकिंग कैनवास आयामों में डिवाइस पिक्सेल अनुपात शामिल होता है। आकार बदलने से कैमरा और बैकिंग बफ़र अपडेट हो जाता है ResizeObserver. कैमरा स्केल ग्रिड रिक्ति और स्क्रीन-स्पेस हिट सहनशीलता निर्धारित करता है।

इंच डिस्प्ले बिल्कुल 25.4 मिमी प्रति इंच के साथ परिवर्तित होता है, और लंबाई डिफ़ॉल्ट रूप से 3 दशमलव (apps/desktop/src/viewport/units.ts). 2D संपादक में प्रत्येक व्हील स्टेप 1.15 के गुणक से ज़ूम करता है, स्केल 0.001 और 100,000 के बीच सीमित रहता है, और फ़िट-टू-व्यू 10% मार्जिन छोड़ता है (editor2d/camera.ts).

संसाधन और जीवनचक्र

2डी घटक कतारबद्ध एनीमेशन फ़्रेमों को रद्द कर देता है और अनमाउंट करने पर इसके आकार बदलने वाले पर्यवेक्षक को डिस्कनेक्ट कर देता है। 3डी घटक आकार और दृश्यता श्रोता, कक्षा और परिवर्तन नियंत्रण, जाल कार्यकर्ता, एनीमेशन शेड्यूलिंग, ज्यामिति, सामग्री, स्प्राइट, टूल जाल और वेबजीएल रेंडरर जारी करता है।

फ़्रेम अनुसूचक अमान्यताओं को एकत्रित करता है और अतिरिक्त फ़्रेमों का अनुरोध करता है जबकि कैमरे को डैम्पिंग या प्लेबैक की आवश्यकता होती है। दृश्यता परिवर्तन से कार्य रुक जाता है। यह एक शेड्यूलिंग नीति है, प्रत्येक मॉडल और डिवाइस के लिए गारंटीशुदा फ़्रेम-रेट बजट नहीं।

मॉड्यूल मानचित्र

• editor2d/editor2d.tsx: नियंत्रित घटक, सूचक प्रेषण, कैमरा, चयन, इतिहास और कैनवास पेंटिंग।
• editor2d/tools/: जेस्चर स्टेट मशीनें और कमांड निर्माण।
• editor2d/camera.ts, render.ts, और snap-pipeline.ts: समन्वय परिवर्तन, इकाई प्रतिपादन, चयन और स्नैप ऑर्केस्ट्रेशन।
• spatial/grid.ts: स्थानिक सूचकांक बनाना।
• view3d/view3d.tsx: दृश्य संरचना, कैमरा नियंत्रण, चयन, परिवर्तन, स्टॉक और उपकरण।
• view3d/playback.ts, toolpath-overlays.ts, और modeling.ts: मोशन टाइमलाइन, ओवरले डेटा और प्रोफाइल-टू-सॉलिड रूपांतरण।
• view3d/mesh-jobs.ts और mesh-worker.ts: पृष्ठभूमि ज्यामिति निर्माण और कार्य स्वामित्व।

उपकरण उपलब्धता

ToolId बड़े उपकरण शब्दावली का वर्णन करता है; AVAILABLE_TOOLS पंजीकृत उपसमुच्चय का वर्णन करता है। इंटरैक्टिव टूल के लिए, उपयोग करें startTool(id, lookup, context, text). चयन लुकअप क्वेरीज़ उम्मीदवार इकाइयाँ; संदर्भ वर्तमान चयन और इकाई पहुंच प्रदान करता है; टेक्स्ट एनोटेशन सामग्री प्रदान करता है।

एक लापता फ़ैक्टरी वापस आती है undefined. किसी अक्षम या अप्रयुक्त टूल को सक्रिय संपादन मोड के रूप में प्रस्तुत करने के बजाय उसे स्पष्ट रूप से संभालें। मौजूदा ज्यामिति को संशोधित करने वाले उपकरणों को वर्तमान चयन और इकाई संदर्भ की आवश्यकता होती है; उन निर्भरताओं के बिना किसी फ़ैक्टरी को शुरू करना एक उपयोगी संपादन के लिए अपर्याप्त है।

मेशिंग और सत्यापन

ऊपर अनुमानित शीर्ष गणना वाले ठोस पदार्थों के लिए, 50,000 और ब्राउज़र वर्कर समर्थन, व्यूअर एक मॉड्यूल वर्कर में मेश निर्माण को कतारबद्ध करता है। छोटे ठोस समकालिक रूप से जाल बनाते हैं। मेश कतार पूर्णता, पुरानी नौकरियों, कार्यकर्ता त्रुटियों और सफाई को संभालती है। सीमा शेड्यूलिंग के लिए उपयोग किया जाने वाला एक अनुमान है, न कि दस्तावेज़ीकृत मॉडल-आकार की सीमा।

bun test apps/desktop/src/viewport
bun run --filter @cadcamfun/desktop typecheck

लॉजिक टेस्ट में रेंडरिंग हेल्पर्स, टूल जेस्चर, स्थानिक अनुक्रमण, प्लेबैक और ओवरले शामिल हैं। ब्राउज़र/वेबजीएल व्यवहार ग्राफ़िक्स वातावरण पर भी निर्भर करता है; कैमरा नियंत्रण, दृश्य जीवनचक्र, या रेंडरिंग बदलते समय वास्तविक व्यूपोर्ट इंटरैक्शन का निरीक्षण करें।

नियंत्रित प्लेबैक उदाहरण

माता-पिता दर्शक की गति समयरेखा की नकल किए बिना परिवहन नियंत्रण का स्वामी हो सकते हैं। यह घटक पहले से निर्मित सीएएम प्रोग्राम को स्वीकार करता है और समय, खेल की स्थिति, गति और व्यूपोर्ट प्रीसेट को नियंत्रित करता है। इसके आयात पथ सीधे एक फ़ाइल मानते हैं apps/desktop/src.

import { createSignal } from "solid-js"
import { cam } from "@cadcamfun/core"
import { View3D } from "./viewport/index.ts"

export function ProgramPreview(props: { program: cam.Program }) {
  const [seconds, setSeconds] = createSignal(0)
  const [playing, setPlaying] = createSignal(false)
  return <div style={{ height: "600px" }}>
    <button onClick={() => setPlaying(value => !value)}>Play / pause</button>
    <button onClick={() => { setSeconds(0); setPlaying(true) }}>Restart</button>
    <View3D
      program={props.program}
      preset="isometric"
      playing={playing()}
      playbackTime={seconds()}
      playbackRate={1}
      onPlaybackTimeChange={setSeconds}
      stock={{ origin: { x: 0, y: 0, z: -10 }, size: { x: 100, y: 80, z: 10 } }}
    />
  </div>
}

प्लेबैक बिल्डर मूल से शुरू होता है, चक्रों को चालों में विस्तारित करता है, और यात्रा की लंबाई और फ़ीड से अवधि की गणना करता है। इसकी डिफ़ॉल्ट तीव्र गति 5,000 मिमी/मिनट है और डिफ़ॉल्ट आर्क टेस्सेलेशन सहनशीलता 0.1 मिमी है। ये पूर्वावलोकन धारणाएँ हैं, न कि मापी गई मशीन त्वरण या नियंत्रक समय। ड्वेल कमांड अपने बताए गए सेकंड बनाए रखते हैं; टिप्पणियाँ और केवल-उन्मुखीकरण प्रविष्टियाँ रैखिक यात्रा नहीं जोड़ती हैं।

टूल रंग प्रत्येक टूल पहचानकर्ता की पहली घटना द्वारा निर्दिष्ट किए जाते हैं और उसके पथों में बनाए रखे जाते हैं। असेंबली ज्योमेट्री के लिए टूल मैप/डिफ़ॉल्ट टूल की आपूर्ति करें; अकेले रंगीन पथ सत्यापन द्वारा उपयोग किए जाने वाले कटर या धारक आयामों को स्थापित नहीं करता है।

व्यंजनों और वर्तमान टूल सीमाओं का संपादन

ये विवरण उनके पैलेट लेबल के बजाय इशारों के कार्यान्वयन से आते हैं। प्रतिबद्ध होने से पहले पूर्वावलोकन का निरीक्षण करें और यदि परिणाम इच्छित ज्यामिति से भिन्न हो तो पूर्ववत करें का उपयोग करें। कोई टूल जो कोई कमांड नहीं लौटा रहा है, इसका मतलब यह हो सकता है कि इसकी ज्यामितीय पूर्वापेक्षाएँ संतुष्ट नहीं थीं, इसका मतलब यह नहीं है कि संपादक ने पॉइंटर इवेंट खो दिया है।

रेंडरिंग और मेशिंग विफलताएँ

बैकग्राउंड मेश कतार डिफ़ॉल्ट रूप से अधिकतम 128 लंबित कार्यों को स्वीकार करती है, एक समय में एक को चलाती है, और प्रति कार्य के लिए डिफ़ॉल्ट 15-सेकंड का टाइमआउट होता है। किसी दृश्य को रीसेट करने से कर्मचारी समाप्त हो जाता है और कतारबद्ध कार्य साफ़ हो जाता है; पुरानी प्रतिक्रियाओं को नजरअंदाज कर दिया जाता है। अमान्य कार्यकर्ता प्रतिक्रियाएँ, संदेश डिकोडिंग त्रुटियाँ, टाइमआउट और कतार क्षमता विफलताएँ कतार कॉलबैक के माध्यम से त्रुटियों की रिपोर्ट करती हैं।

प्रासंगिक परीक्षण शामिल हैं editor2d/tools/offset.test.ts, annotation-transform.test.ts, spatial/grid.test.ts, view3d/playback.test.ts, और toolpath-overlays.test.ts. जाल कतार कार्यान्वयन है view3d/mesh-jobs.ts.

इकाइयों को विस्तार से प्रदर्शित करें

संपादक हमेशा मिलीमीटर में काम करता है. नीचे दिए गए सटीक कारकों का उपयोग करके, केवल वही परिवर्तित किया जाता है जो उपयोगकर्ता पढ़ता है और टाइप करता है। एक संग्रहित ड्राइंग की अपनी इकाई रहती है mm या inch; अतिरिक्त इकाइयाँ केवल प्रदर्शन विकल्प हैं।

import { formatLength, parseLength, formatAngle, programUnitsOf } from "./units"

formatLength(25.4, "inch")     // "1.0000 inch"
formatLength(12.5)             // "12.500 mm"
formatLength(0.0254, "thou")   // "1.00 thou"
parseLength("2 in", "inch")    // 50.8  (a trailing unit word is ignored)
parseLength("abc")             // undefined
formatAngle(Math.PI / 2)       // "90.0°"
programUnitsOf("thou")         // "inch"

2डी कैमरा और ग्रिड

const camera = createCamera({ x: 0, y: 0 }, 2, 800, 600)   // 2 px per mm
worldToScreen(camera, { x: 10, y: 10 })   // { x: 420, y: 280 }
screenToWorld(camera, { x: 420, y: 280 }) // { x: 10, y: 10 }
gridStep(2)    // 5   -> 5 mm apart = 10 px
gridStep(0.5)  // 20  -> 20 mm apart = 10 px

प्रतिपादन संस्थाओं को विरुद्ध कर देता है visibleBounds(camera). स्नैपिंग पूरी ड्राइंग को स्कैन करने से भी बचता है: एक समान स्थानिक ग्रिड उन संस्थाओं को लौटाता है जिनकी सीमाएं स्नैप सहनशीलता के साथ-साथ 2 मिमी उम्मीदवार मार्जिन के भीतर होती हैं, और केवल उन्हें ही कोर में पास किया जाता है findSnap. इससे कई संस्थाओं के साथ ड्राइंग में पॉइंटर तेजी से चलता रहता है।

स्नैपिंग संदर्भ

स्नैप प्रकारों को प्राथमिकता क्रम में आज़माया जाता है। डिफ़ॉल्ट क्रम लीगेसी संपादक से मेल खाता है: endpoint, midpoint, center, intersection, perpendicular, tangent, nearest, और quadrant. समापनबिंदु स्रोत इकाई के शीर्ष हैं, न कि उसके टेस्सेलेशन के।

पाइपलाइन स्नैप, कर्सर के नीचे इकाइयों की आईडी (सबसे पहले, जो चयन उपकरण उपभोग करता है), और विचार किए गए उम्मीदवारों की संख्या लौटाती है।

टूलपाथ प्लेबैक का समय निर्धारण कैसे किया जाता है

const playback = buildPlayback(program)          // rapids at 5000 mm/min
playback.duration                                // total seconds
positionAt(playback, 12.5)                       // tool position at t = 12.5 s
toolAt(playback, 12.5)                           // toolId cutting at that time
toolColors(program)                              // Map toolId -> colour, first use order

// A 10 mm feed move at 600 mm/min lasts 10 / 600 × 60 = 1 s.
// The same 10 mm as a rapid lasts 10 / 5000 × 60 = 0.12 s.

व्यूपोर्ट अभ्यास

• किनारे पर कनवर्ट करें: मिलीमीटर और रेडियन में स्टोर करें और गणना करें, और केवल प्रदर्शन के लिए प्रारूपित करें formatLength और formatAngle.
• इसके बाद कभी भी पार्स की गई लंबाई का पुन: उपयोग न करें parseLength रिटर्न undefined; पिछला मान रखें और सत्यापन संकेत दिखाएं।
• ड्राइंग टूल जोड़ते समय, इसे टूल फ़ैक्टरी तालिका में पंजीकृत करें ताकि टूलबार, शॉर्टकट और परीक्षण इसे एक ही आईडी से संबोधित करें।
• स्नैप उम्मीदवार प्रश्नों को स्थानिक रखें। प्रत्येक इकाई को पास करना findSnap प्रत्येक सूचक चाल पर सूचकांक पराजित होता है।
• प्लेबैक अवधि को पूर्वावलोकन के रूप में मानें, न कि चक्र-समय उद्धरण के रूप में।

पैमाने पर हिट-परीक्षण: स्थानिक ग्रिड

2डी संपादक 60 एफपीएस को 10,000 इकाइयों के साथ लक्षित करता है, इसलिए हिट-टेस्टिंग और कलिंग कभी भी प्रत्येक इकाई को प्रति पॉइंटर इवेंट में स्कैन नहीं करता है। viewport/spatial/grid.ts एक समान ग्रिड रखता है: प्रत्येक आइटम अपने बाउंडिंग बॉक्स को छूने वाले प्रत्येक सेल में पंजीकृत होता है, और एक क्वेरी उन सभी आइटमों को लौटाती है जिनकी सीमाएं क्वेरी बॉक्स को सम्मिलन क्रम में काटती हैं। परिणाम सटीक है, नमूना कभी नहीं।

धराशायी क्वेरी बॉक्स द्वारा स्पर्श की गई कोशिकाओं का दौरा किया जाता है; ए और लंबी रेखा वापस आ जाती है क्योंकि उनकी सीमाएं इसे काटती हैं, बी नहीं।

3डी मेशिंग कतार

वेब वर्कर में सॉलिड्स को जाली से जोड़ा जाता है ताकि यूआई थ्रेड कभी ब्लॉक न हो। MeshWorkerQueue में view3d/mesh-jobs.ts एक समय में एक ही कार्य चलाता है:

कोई भी विफलता कार्यकर्ता को समाप्त कर देती है और पूरी कतार को साफ़ कर देती है, इसलिए पुराने दृश्य का काम नए संपादन के बाद कभी नहीं मिलता है; अगला सबमिशन एक नया कार्यकर्ता शुरू करता है। उत्तरों का मिलान नौकरी आईडी से किया जाता है, इसलिए हटाए गए कर्मचारी के देर से दिए गए उत्तर को नजरअंदाज कर दिया जाता है।

2डी टूल कार्यान्वयन

प्रत्येक उपकरण एक छोटी स्टेट मशीन है onPointerDown, onPointerMove और onPointerUp, में एक कारखाने द्वारा बनाया गया tools/index.ts, प्रति पैलेट प्रविष्टि एक। सूचक स्थितियाँ गुजरती हैं snap-pipeline.ts इससे पहले कि कोई उपकरण उन्हें देख ले।