joint

JointJS - ไลบรารีไดอะแกรม JavaScript ที่ขับเคลื่อน UI ที่ยอดเยี่ยม

JointJS คือไลบรารีไดอะแกรม JavaScript / Typescript ที่ได้รับการทดสอบและพิสูจน์แล้ว ซึ่งช่วยให้นักพัฒนาและบริษัททุกขนาดสร้างแอปพลิเคชันแบบวิชวลและแบบ No-Code/Low-Code ได้เร็วขึ้นและมั่นใจ เป็นเครื่องมือที่ยืดหยุ่นซึ่งสามารถสร้าง UI ได้หลากหลาย (แอปพลิเคชันสร้างไดอะแกรมเชิงโต้ตอบ เครื่องมือวาดภาพ การแสดงภาพข้อมูล UI สำหรับระบบตรวจสอบ และอื่นๆ อีกมากมาย) มันสามารถกลายเป็นรากฐานของการสมัครครั้งต่อไปของคุณ และช่วยให้คุณนำแนวคิดของคุณออกสู่ตลาดได้ภายในไม่กี่วัน ไม่ใช่เป็นเดือนหรือเป็นปี

ข้อมูล เพิ่มเติม ตัวอย่าง และ เอกสารประกอบ สามารถดูได้ที่ jointjs.com

- เริ่มต้นด้วยบทช่วยสอน

หากต้องการถามคำถาม แบ่งปันคำติชม หรือมีส่วนร่วมในการสนทนากับสมาชิกชุมชนคนอื่นๆ โปรดไปที่การสนทนา GitHub ของเรา

ตัวอย่างเพิ่มเติมมีอยู่ใน CodePen

ตรวจสอบเอกสารแผนที่ความคิดของเรา

คุณสมบัติ

• องค์ประกอบแผนภาพที่สำคัญ (สี่เหลี่ยม วงกลม วงรี ข้อความ รูปภาพ เส้นทาง)
• องค์ประกอบไดอะแกรมที่พร้อมใช้งานของไดอะแกรมที่รู้จักกันดี (ERD, แผนภูมิองค์กร, FSA, UML, PN, DEVS, ... )
• องค์ประกอบไดอะแกรมที่กำหนดเองตาม SVG หรือแสดงผลโดยทางโปรแกรม
• การเชื่อมต่อองค์ประกอบไดอะแกรมด้วยลิงก์หรือลิงก์พร้อมลิงก์
• ลิงก์ที่ปรับแต่งได้ หัวลูกศร และป้ายกำกับ
• รูปร่างลิงค์ที่กำหนดค่าได้ (จุดยึด, จุดเชื่อมต่อ, จุดยอด, เราเตอร์, ตัวเชื่อมต่อ)
• คุณสมบัติและข้อมูลองค์ประกอบที่กำหนดเอง
• นำเข้า/ส่งออกจาก/เป็นรูปแบบ JSON
• พอร์ตองค์ประกอบที่ปรับแต่งได้ (รูปลักษณ์และตำแหน่ง กระจายไปตามรูปร่างหรือวางตำแหน่งด้วยตนเอง)
• Rich Graph API (การสำรวจเส้นทาง, dfs, bfs, ค้นหาเพื่อนบ้าน, รุ่นก่อน, องค์ประกอบ ณ จุด, ... )
• การโต้ตอบแบบละเอียด
• ไดอะแกรมลำดับชั้น (คอนเทนเนอร์ องค์ประกอบที่ฝังตัว ความสัมพันธ์ระหว่างผู้ปกครองและเด็ก)
• เครื่องมือองค์ประกอบและลิงก์ (ปุ่ม ไอคอนสถานะ เครื่องมือสำหรับเปลี่ยนรูปร่างของลิงก์ ...)
• ปากกาเน้นข้อความ (เน้นการมองเห็นองค์ประกอบของคุณ)
• เค้าโครงอัตโนมัติ (จัดเรียงองค์ประกอบและลิงก์อัตโนมัติ)
• ขับเคลื่อนด้วยเหตุการณ์สูง (ตอบสนองต่อเหตุการณ์ใด ๆ ที่เกิดขึ้นภายในแผนภาพ)
• ซูมเข้า/ออก
• รองรับการสัมผัส
• สถาปัตยกรรมเอ็มวีซี
• อิงตาม SVG
• ... มากขึ้น

เบราว์เซอร์ที่รองรับ

• Google Chrome เวอร์ชันล่าสุด (รวมถึงอุปกรณ์เคลื่อนที่)
• ไฟร์ฟอกซ์ ใหม่ล่าสุด
• Safari ล่าสุด (รวมถึงมือถือ)
• Microsoft's Edge รุ่นล่าสุด
• โอเปร่าล่าสุด

สภาพแวดล้อมการพัฒนา

หากคุณต้องการทำงานกับ JointJS ภายในเครื่อง ให้ใช้แนวทางต่อไปนี้เพื่อเริ่มต้น

การพึ่งพาอาศัยกัน

ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้งการขึ้นต่อกันต่อไปนี้บนระบบของคุณ:

• โหนด js
• ฮึดฮัด-cli
• คอมไพล์
• เส้นด้าย

ตรวจสอบให้แน่ใจว่าคุณใช้เวอร์ชัน Yarn >= 2.0.0 เพื่อให้คุณสามารถเข้าถึงฟังก์ชันช่วงพื้นที่ทำงานของ Yarn ได้ หากคุณใช้ Volta ระบบจะอ่านข้อจำกัดนี้จาก package.json โดยอัตโนมัติ

ตั้งค่า

โคลนที่เก็บ git นี้:

git clone https://github.com/clientIO/joint.git

นำทางไปยังไดเร็กทอรี joint :

 cd joint

ติดตั้งการพึ่งพาทั้งหมด:

yarn install

สร้างไฟล์การแจกจ่ายจากซอร์สโค้ด:

yarn run dist

ตอนนี้คุณพร้อมที่จะเรียกดูแอปพลิเคชันตัวอย่างของเรา ซึ่งรวมฟังก์ชันการทำงานจากแพ็คเกจ JointJS หลายรายการ:

 cd examples

โปรดดูคำแนะนำเพิ่มเติมในไฟล์ README.md ของแต่ละแอปพลิเคชัน

คุณยังสามารถเรียกดูแอปพลิเคชันสาธิตของแพ็คเกจ JointJS Core ของเราได้:

 cd packages/joint-core/demo

การสาธิตส่วนใหญ่สามารถทำได้โดยเพียงแค่เปิดไฟล์ index.html ในเบราว์เซอร์ของคุณ การสาธิตบางรายการมีคำแนะนำเพิ่มเติม ซึ่งคุณสามารถดูได้ในไฟล์ README.md ที่เกี่ยวข้อง

การทดสอบ

หากต้องการรันการทดสอบทั้งหมด:

yarn run test

หากต้องการรันเฉพาะการทดสอบฝั่งเซิร์ฟเวอร์:

yarn run test-server

หากต้องการรันเฉพาะการทดสอบฝั่งไคลเอ็นต์:

yarn run test-client

หากต้องการรันการทดสอบ TypeScript เท่านั้น:

yarn run test-ts

ผ้าสำลี

หากต้องการตรวจสอบข้อผิดพลาดของขุยในไดเร็กทอรี src และ types :

yarn run lint

หากต้องการแก้ไขข้อผิดพลาดอัตโนมัติ ให้รัน eslint สำหรับไดเร็กทอรี src และ types :

yarn run lint-fix

รายงานการครอบคลุมโค้ด

หากต้องการส่งออกรายงานการครอบคลุมโค้ดในรูปแบบ HTML:

yarn run test-coverage

หากต้องการส่งออกรายงานการครอบคลุมโค้ดในรูปแบบ lcov:

yarn run test-coverage-lcov

ผลลัพธ์สำหรับการทดสอบหน่วยทั้งหมดจะถูกบันทึกไว้ในไดเร็กทอรี packages/joint-core/coverage

ผู้ร่วมให้ข้อมูล

ใบอนุญาต

ไลบรารี JointJS ได้รับอนุญาตภายใต้ Mozilla Public License 2.0

ลิขสิทธิ์ © 2013-2024 ไคลเอนต์ IO