إنشاء مكتبة رسم مخططات
وصف المشروع
نريد إنشاء مكتبة Library جديدة، أو تعديل مكتبة موجودة مفتوحة المصدر (JavaScript or jQuery)، تقدم منصة رسم مخططات تدفقية رئيسية Flowchart (لاحقاً سيتم استخدامها لرسم الأشكال الشبيهة BPM, Activity, ...) بها تعمل بشكل كامل على مستعرضات الويب الحديثة بمختلف نسخها الأخيرة، وتحتوي على مجموعة من المزايا كما هو موضح في الأسفل.
سيتم استخدام هذه المكتبة في مكتبة جديدة تقوم بتمكين رسم مخططات من نمط نمذجة معين (UML, ...)، لذلك يجب أن تكون المكتبة مرنة، مبنية ومكتوبة بشكل سليم وواضح، وتقدم نقاط ربط وتكامل برمجية APIs بشكل كامل.
المتطلبات العملية
يجب أن تدعم المنصة ما يلي:
١. إضافة عناصر المخطط إلى اللوحة وإضافة روابط بينها.
٢. تحريك العناصر لتغيير موضعها وتعديل الروابط بينها.
٣. تنسيق العناصر (الخط، اللون، الحجم، ...).
٤. إضافة نصوص إلى العناصر أو الروابط.
٥. حذف العناصر أو الروابط بينها.
٦. تحديد، نسخ، ولصق العناصر.
٧. التنقل ضمن المخطط Navigate (zoom in/out, pan, bird-eye).
٨. حفظ/تصدير المخطط على هيئة JSON/XML (متضمناً التنسيقات ومواضع العناصر).
٩. فتح/استيراد المخطط من ملف JSON/XML
١٠. طباعة المخطط
المتطلبات التقنية
١. مكتوبة بشكل كامل وبحت على JavaScript ويسمح بالاعتماد على jQuery أو مكتبات JavaScript البحتة (باستثناء الأطر المتكاملة Frameworks).
٢. صغيرة الحجم، بأقل أو بدون اعتماد على مكتبات أخرى.
٣. لا يتم استخدام المشروع بمخرجاته النهائية بشكل مباشر أو معدل لصالح أي جهة أخرى.
٣. الشفرة المصدرة Source Code المعدلة مرخصة بشكل حصري، والاعتمادات Dependencies، والملفات مرخصة بشكل كامل ودون قيود لصالح الزبون.
٥. تعمل المكتبة بشكل مستقل دون الحاجة لمتطلبات تشغيلية محددة أو إضافات أخرى على المستعرض.
٦. تدعم المكتبة الإصدارات الأخيرة من جميع المستعرضات الحالية، والنسخ الأقدم من المستعرضات الحديثة الرئيسية (كروم، فايرفوكس، أوبرا، إيدج، وسفاري).
٧. تدعم المكتبة التخصيص والتوسيع Extensions عن طريق نقاط ربط ومكاملة برمجية APIs.
٨. الشفرة المصدرية مكتوبة بشكل واضح، موثق، نظيف، منظم، ومتفق مع المعايير العالمية.
استخدام المصادر المفتوحة
لا مانع من استخدام مكتبة مفتوحة المصدر (مثل diagram-js، والمستخدمة من قبل مكتبات أخرى مثل bpmn-js)، بشرط أن يكون ترخيص الاستخدام غير مقيد بأي شكل للأعمال التجارية، ولا يجبر المستخدم على عرض أي شعارات أو أسماء أو الإشارة إليها.
يوجد الكثير من المكتبات المتوفرة على الإنترنت، وبغض النظر عن أيها ستختار، يجب أن تكون متمكناً بشكل كامل واحترافي وعميق من الجافاسكربت والمكتبة لتنفيذ التعديلات التي سنطلبها.
We need a javascript library (pure or jQuery-based), that can be used directly in an HTML page, or indirectly by another javascript code, to draw diagrams (flowcharts/activity/business-process like diagrams) in the web-browser. The library should also allow some additional features.
In a later release/project, this library will be used as a base library to create another libraries to draw business-specific diagrams (BPMN2, UML, …), so, it should be flexible in defining the shapes and anchor/joint points on them (maybe as SVG).
Business Requirement
The library should provide the following features
1- Draw diagram elements to the canvas and link them to each other.
2- Ability to move the elements around,
3- format the elements (color, resize, …),
4- Add text labels to the elements and links
5- Delete the elements,
6- Select, copy, & paste the elements
7- Navigation around the canvas (zoom in/out, pan, bird-eye)
8- Save/export as JSON/XML (including the positions)
9- Open/import from JSON/XML
10- Print the diagram
Technical Requirements
1- A JavaScript library that runs on the Web-browser (pure or jQuery-based).
2- Minimal and have minimum or no dependencies on other files and libraries.
3- All the code, dependencies, and files will be property and proprietary to the client.
4- All the code, dependencies, and files are fully/unlimitedly licensed to the client, or open-source with unlimited license (i.e. basic MIT, AGPL, GPL2, Apache, ...).
5- The library can work independently from any other additions.
6- The library can work on the latest versions of browsers, and backward compatible as much as possible. At least Edge, FF, Chrome, Safari, and Opera should be supported.
7- The library can be extendable using its native APIs.
8- The code is well-documented, concise, clean, organized, and apply industry standards.
Using Open-Source Libraries
It is fine to use an open-source library (like diagram-js, which is used by other libraries like bpmn-js [license is not good for us] to achieve exactly the same goal we are looking for).
You can find a lot of libraries out there, however, whatever you will choose, please make sure you have good command on it, and can provide the customization/support that we may require.