نظرة عامة على البنية

يعمل MLightCAD بالكامل داخل المتصفح دون أي اعتماد على خادم خلفي. تُحلَّل ملفات DWG/DXF وتُعالَج محليًا باستخدام WebAssembly وJavaScript، مما يضمن:

• عدم الحاجة إلى خادم - انشره في أي مكان باستخدام استضافة الملفات الثابتة فقط
• خصوصية كاملة للبيانات - لا تغادر الملفات جهاز المستخدم أبدًا
• دمج فوري - لا حاجة إلى إعداد خلفي معقد أو تهيئة API
• القدرة على العمل دون اتصال - يعمل بدون اتصال بالإنترنت

يتوزّع MLightCAD على عدة حزم فرعية، كل منها مسؤولة عن جانب محدد من النظام:

• cad-viewer: مكوّن Vue 3 الرئيسي والتطبيق الواجهي، بما في ذلك مكوّنات واجهة المستخدم والحوارات وأشرطة الأدوات وإدارة الحالة والتكامل مع محركات العرض.
• cad-simple-viewer: المنطق الأساسي لإدارة المستندات ومعالجة الأوامر والتكامل بين واجهة المستخدم ومحركات العرض. مستقل عن أطر العمل وخالٍ من واجهة المستخدم (لوحة الرسم فقط).
• svg-renderer: يعرض كيانات DWG/DXF كرسومات SVG للتصدير والإخراج ثنائي الأبعاد القابل للتحجيم.
• three-renderer: يستخدم THREE.js لعرض كيانات DWG/DXF كرسومات تفاعلية ثنائية وثلاثية الأبعاد مع تصور متقدم وتظليل مخصص.

نظرة عامة على البنية

MLightCAD هو عارض DWG/DXF عالي الأداء يعمل في المتصفح فقط، ويعتمد بنية وحدوية وقابلة للتوسعة لدعم تحميل صيغ بيانات CAD متعددة وتحليلها وعرضها والتفاعل معها. ينقسم النظام إلى الطبقات الأساسية التالية:

تضمن هذه البنية الطبقية أن يحافظ MLightCAD على أداء عالٍ وزمن استجابة منخفض وقابلية توسع قوية عند التعامل مع أحجام بيانات ومتطلبات عرض وبيئات نشر مختلفة.

طبقة النموذج

• تعرّف نموذج بيانات موحّدًا لوصف بيانات CAD المحلَّلة (بما في ذلك الكيانات الهندسية ومعلومات الطبقات ومعاملات العرض وغيرها) عبر وحدة @mlightcad/data-model في realdwg-web.
• تنفّذ واجهة موحّدة لتحويل ملفات CAD عبر AcDbDatabaseConverter، مما يتيح للمحوّلات المختلفة تحويل بيانات CAD إلى نموذج البيانات الموحّد.
• توفّر قدرات تحليل DWG عبر وحدة @mlightcad/libredwg-converter في realdwg-web، بتحويل ملفات DWG إلى نموذج البيانات الموحّد.
• توفّر قدرات تحليل DXF عبر وحدة @mlightcad/dxf-json، بتحويل ملفات DXF إلى نموذج البيانات الموحّد.
• تتيح محركًا هندسيًا عبر وحدة @mlightcad/geometry-engine في realdwg-web، يدعم حسابات هندسية متنوعة (النقاط والخطوط والخطوط المتعددة والخطوط الحرة والدوائر والأقواس والقطوع الناقصة والأقواس الناقصة) بالإضافة إلى العمليات الرياضية (المتجهات والمصفوفات وغيرها).

ملاحظة سريعة حول سبب تعريف واجهة AcDbDatabaseConverter: غالبًا ما تكون أدوات قراءة وكتابة وتحويل DXF/DWG الموجودة في السوق غير مكتملة. لقد نفّذت @mlightcad/libredwg-converter و@mlightcad/dxf-json استنادًا إلى بعض الشيفرة مفتوحة المصدر. ومع ذلك، فإن أفضل أداة متاحة لتحليل DWG/DXF وتحويله هي في الواقع ODA. لاستخدامها يجب شراء ترخيص للوصول إلى شيفرتها المصدرية، ومنها يمكن بناء وحدة WebAssembly تحوّل DXF/DWG إلى نموذج البيانات الموحّد المعرَّف في @mlightcad/data-model. وإذا صادف أن شاركني أحدهم شيفرة ODA المصدرية، فسأتمكن أيضًا من تنفيذ محوّل قائم عليها.

طبقة العرض

• تعرّف واجهة عرض موحّدة عبر وحدة @mlightcad/graphic-interface في realdwg-web لعرض أنواع مختلفة من كيانات CAD.
• تنفّذ واجهة العرض في وحدة @mlightcad/three-renderer في cad-viewer، باستخدام Three.js لعرض جميع أنواع الكيانات.
• تنفّذ واجهة العرض في وحدة @mlightcad/svg-renderer في cad-viewer، بعرض الرسومات بصيغة SVG.

طبقة العرض المرئي

• توفّر وحدة @mlightcad/cad-simple-viewer في cad-viewer منطق العرض الأساسي لملفات CAD، مثل إدارة المستندات ومعالجة الأوامر والتنسيق بين واجهة المستخدم ومحرك العرض. لا تعتمد على أي إطار عمل واجهة مستخدم ولا توفّر عناصر واجهة غير لوحة الرسم.
• تبني وحدة @mlightcad/cad-viewer على @mlightcad/cad-simple-viewer لتوفير واجهة مستخدم قائمة على Vue 3 مع القوائم وأشرطة الأدوات وسطر الأوامر وشريط الحالة والسمتين الداكنة والفاتحة. وهي تغلّف جميع الميزات الأساسية في مكوّن Vue 3 لسهولة الدمج.

محرك العرض

يطرح عرض ملفات DXF/DWG عدة تحديات:

• عرض عالي الأداء للرسومات التي تحتوي على عدد كبير من الكيانات.
• إعادة إنتاج تأثيرات عرض النصوص في AutoCAD.
• دعم أنماط الخطوط وأنماط التهشير.

العرض عالي الأداء

للحصول على عرض عالي الأداء للرسومات الكبيرة، يكمن المفتاح في دمج النقاط والخطوط والأوجه لتقليل Draw Calls. يوفّر THREE.js حلًا جزئيًا عبر فئة BatchedMesh لدمج الشبكات المثلثية. ومع ذلك، فهي لا تدعم دمج النقاط والخطوط، وحتى دمج الأوجه فيها لا يلبي احتياجاتنا بالكامل. لذلك نفّذنا عدة فئات مستوحاة من BatchedMesh لدمج النقاط والخطوط والأوجه. يمكنك الاطلاع على الشيفرة هنا.

عرض النصوص

يستخدم AutoCAD صيغة MText للنصوص الغنية وخط SHX خاصًا (خط قائم على الخطوط يُرسم بالخطوط فقط) لعرض أسرع. تتمثل التحديات الرئيسية في:

• تحليل MText – منفَّذ باستخدام حزمة @mlightcad/mtext-parser.
• تحليل خطوط SHX – منفَّذ باستخدام حزمة @mlightcad/shx-parser.
• عرض MText – منفَّذ باستخدام حزمة @mlightcad/mtext-renderer. من أجل الأداء، تُخزَّن ملفات الخطوط المحلَّلة في IndexedDB الخاص بالمتصفح، بحيث يصبح العرض اللاحق أسرع بعد التنزيل والتحليل مرة واحدة.

لتصحيح أخطاء عرض النصوص، بنينا محرر نصوص غنية قائمًا على THREE.js باسم mtext-editor. لا يوجد حاليًا محرر نصوص غنية آخر مفتوح المصدر قائم على THREE.js، لذا يمكن إعادة استخدام هذا المحرر كفاتح نصوص لأي محرك عرض.

أنماط الخطوط وأنماط التهشير

يدعم AutoCAD أنواع خطوط وأنماط تهشير مخصصة. لقد نفّذنا بعضًا منها (أنواع الخطوط التي تحتوي على نصوص غير مدعومة بعد). تُنفَّذ جميع أنماط الخطوط وتأثيرات التهشير باستخدام ShaderMaterial من THREE.js. يمكنك الاطلاع على الشيفرة هنا.