Panoptes Front End

Panoptes (ส่วนหน้า)

เริ่มต้นใช้งาน

เราไม่ได้พัฒนาฟีเจอร์สำหรับแอพนี้อีกต่อไป ประชาสัมพันธ์จะได้รับการยอมรับสำหรับการแก้ไขข้อบกพร่อง การแปล และการอัปเดตเนื้อหา การพัฒนาฟีเจอร์ที่ใช้งานกำลังเกิดขึ้นที่ https://github.com/zooniverse/front-end-monorepo/

ด้วยนักเทียบท่า

เพื่อหลีกเลี่ยงการต้องติดตั้ง Node.js หรือการอ้างอิงอื่นๆ คุณสามารถรันทุกอย่างด้วย Docker และ Docker Compose

• docker-compose build จะสร้างอิมเมจนักเทียบท่าในเครื่องและเรียกใช้ npm ci รันสิ่งนี้ทุกครั้งที่คุณเปลี่ยนการพึ่งพาใน package.json

• docker-compose up เริ่มเว็บเซิร์ฟเวอร์การพัฒนาที่รับฟังพอร์ต 3735

• docker-compose down หยุดเซิร์ฟเวอร์การพัฒนา

• docker-compose run --rm shell เริ่มคอนเทนเนอร์ที่รันเชลล์เช่น สำหรับการรันการทดสอบ

ด้วย Node.js

ตรวจสอบให้แน่ใจว่าคุณมีโหนด 8 และ npm 5 หรือสูงกว่า ขอแนะนำให้คุณจัดการการติดตั้งโหนดด้วย nvm

• npm ci ติดตั้งการพึ่งพา

• npm start สร้างและรันไซต์ในเครื่อง

หมายเหตุ 1: แนะนำให้ใช้ npm ci (การติดตั้งใหม่ทั้งหมด) มากกว่า การติดตั้ง npm เนื่องจากไม่ได้แก้ไขการล็อคแพ็คเกจ

หมายเหตุ 2: ณ โหนด 16.15 การรัน npm ci ส่งผลให้เกิดข้อผิดพลาด เช่น npm ERR! ERESOLVE ไม่สามารถแก้ไขได้ และ ขัดแย้งกับการพึ่งพาเพียร์: foobar@xyz คุณสามารถหลีกเลี่ยงปัญหานี้ได้ด้วยการรัน npm ci --legacy-peer-deps แทน โปรดดูปัญหา 6155 สำหรับรายละเอียดเพิ่มเติม

การดูเว็บไซต์

รูท / ถูกเปลี่ยนเส้นทางไปที่ www.zooniverse.org เนื่องจากแอปส่วนหน้านี้ไม่ได้ใช้สำหรับหน้าแรกอีกต่อไป ชี้เบราว์เซอร์ของคุณไปที่เส้นทางย่อยเพื่อดูแอปนี้ทำงานในเครื่อง

เปิดเว็บเบราว์เซอร์ที่คุณเลือกแล้วไปที่ https://localhost:3735/lab

หากคุณต้องการ เข้าสู่ระบบ ผ่าน Panoptes API และ ดูเพจที่ได้รับการตรวจสอบสิทธิ์ คุณจะต้องตั้งค่าและใช้ https://local.zooniverse.org:3735/lab แทนการใช้ localhost:3735 มิฉะนั้นคุณจะพบข้อผิดพลาด CORS (คุณต้องเพิ่มชื่อโฮสต์ลงในไฟล์โฮสต์ของคุณ โดยชี้ไปที่ในเครื่อง คำแนะนำอยู่ใน Stackoverflow ของเรา)

การแก้ไขปัญหา: เว็บเบราว์เซอร์บล็อกเว็บไซต์ท้องถิ่น

ปัญหา: เมื่อพยายามดู localhost:3735 หรือ local.zooniverse.org:3735 เว็บเบราว์เซอร์ของฉันหยุดฉันและแสดงหน้าจอคำเตือน

ตัวอย่างข้อผิดพลาด: "การเชื่อมต่อของคุณไม่เป็นส่วนตัว / NET::ERR_CERT_AUTHORITY_INVALID" บน Chrome 104; "คำเตือน: ความเสี่ยงด้านความปลอดภัยที่อาจเกิดขึ้น" บน Firefox 103; "การเชื่อมต่อนี้ไม่เป็นส่วนตัว" บน Safari 15.4

สาเหตุ: เว็บเซิร์ฟเวอร์ในเครื่องกำลังเรียกใช้ HTTPS และกำลังใช้ใบรับรองที่ลงนามด้วยตนเอง เว็บเบราว์เซอร์สมัยใหม่ถือว่าใบรับรองเหล่านี้ไม่น่าเชื่อถืออย่างยิ่ง และเป็นตัวบ่งชี้ที่เป็นไปได้ของการโจมตีแบบแทรกกลาง

วิธีแก้ปัญหา:

• ถ้าใช้ Firefox หรือ Safari ให้เปิด ตัวเลือกขั้นสูง ในหน้าคำเตือน แล้วคลิกอะไรก็ได้ที่เทียบเท่ากับ "accept Risk and Continue"
• สำหรับ Chrome ให้พิมพ์ คำสำคัญข้ามโฆษณาคั่นระหว่างหน้า ( thisisunsafe ) ที่ใดก็ได้บนหน้าต่างเพื่อข้ามคำเตือนชั่วคราว หรือ เพิ่มใบรับรอง SSL ด้วยตนเองในรายการใบรับรองที่เชื่อถือได้ของคอมพิวเตอร์ของคุณ ดู Stackoverflow สำหรับรายละเอียดเพิ่มเติม

คำเตือน: โปรดใช้ความระมัดระวังหากคุณเปลี่ยนการตั้งค่าความปลอดภัยของเว็บเบราว์เซอร์หรือคอมพิวเตอร์

การกำหนดค่า

แอปสามารถกำหนดค่าได้โดยใช้ตัวแปรสภาพแวดล้อมต่อไปนี้:

• NODE_ENV - ตั้งค่าสภาพแวดล้อมของโค้ด และกำหนดว่าจะใช้การเพิ่มประสิทธิภาพการผลิตใดๆ กับโค้ดที่รวมมาหรือไม่ และชุดค่าเริ่มต้นที่จะใช้สำหรับ เช่น URL โฮสต์ API, URL โฮสต์ Talk เป็นต้น
• PANOPTES_API_APPLICATION - ตั้งค่า ID แอปพลิเคชันเพื่อใช้เมื่อทำการร้องขอการรับรองความถูกต้องไปยัง Panoptes API ค่าเริ่มต้นที่กำหนดโดย NODE_ENV
• PANOPTES_API_HOST - ตั้งค่า URL ของอินสแตนซ์ของ Panoptes API ค่าเริ่มต้นที่กำหนดโดย NODE_ENV
• STAT_HOST - ตั้งค่า URL ของอินสแตนซ์ของ Stats API ค่าเริ่มต้นที่กำหนดโดย NODE_ENV
• SUGAR_HOST - ตั้งค่า URL ของอินสแตนซ์ของ Sugar API ค่าเริ่มต้นที่กำหนดโดย NODE_ENV
• TALK_HOST - ตั้งค่า URL ของอินสแตนซ์ของ Talk API ค่าเริ่มต้นที่กำหนดโดย NODE_ENV

บันทึกการกำหนดค่า

• ตัวแปรสภาพแวดล้อมเหล่านี้บางส่วนถูกกำหนดโดยคำสั่งในบล็อก scripts package.json คุณจะต้องแก้ไข package.json เพื่อแทนที่ไฟล์เหล่านั้น
• หากต้องการดูค่าเริ่มต้นที่กำหนดโดยตัวแปรสภาพแวดล้อม NODE_ENV โปรดดู config.js ใน panoptes-javascript-client

การพัฒนา

GitHub PR ใหม่จากภายในองค์กร Zooniverse จะถูกจัดแสดงโดย Jenkins โดยเป็นส่วนหนึ่งของกระบวนการ CI เมื่อ CI เสร็จสิ้น การเปลี่ยนแปลงของคุณควรถูกจัดเตรียมไว้ที่ https://pr-{PR-Number}.pfe-preview.zooniverse.org บางครั้งเจนกินส์หมดเวลาก่อนที่จะสร้างเสร็จ หากการสร้าง PR ล้มเหลว ให้ใช้ลิงก์ไปยัง Jenkins (จาก PR ของคุณ) เพื่อเข้าสู่ระบบและลองเริ่มต้นการสร้างใหม่

สำหรับการทดสอบกับข้อมูลการใช้งานจริง คุณสามารถเพิ่ม env=production ให้กับ url การพัฒนาของคุณได้ เช่น localhost:3735/projects?env=production โปรดทราบว่าจะถูกลบออกในการรีเฟรชทุกหน้า

สิ่งดีๆทั้งหมดอยู่ใน ./ app เริ่มต้นที่ ./app/main.cjsx

เราเชื่อมโยงโค้ด JavaScript ของเรากับคู่มือสไตล์ AirBnB เวอร์ชันแก้ไข โปรดเชื่อมโยงการเปลี่ยนแปลงของคุณด้วย eslint โดยใช้ไฟล์ .eslintrc ที่รากของ repo นี้ หากคุณมีคำถามใด ๆ อย่าลังเลที่จะถามเราบน GitHub

ขณะแก้ไข พยายามปฏิบัติตามรูปแบบและสถาปัตยกรรมที่โปรเจ็กต์ใช้อยู่แล้ว โค้ดเบสมีขนาดใหญ่ และสไตล์ก็มีการพัฒนาในระหว่างการพัฒนา ดู Zooniverse/front-end-monorepo เพื่อทำความเข้าใจเกี่ยวกับแบบแผนของเราในการจัดระเบียบส่วนประกอบต่างๆ

จะทำอย่างไรถ้ามันไม่ทำงาน

ลอง npm ci เพื่อทำให้การพึ่งพาของคุณสดชื่นขึ้น และอ่านคำเตือน พวกเขาควรบอกคุณว่าคุณใช้ Node หรือ npm เวอร์ชันผิดหรือหากคุณขาดการอ้างอิงใด ๆ หากคุณใช้ docker-compose เพื่อสร้างและทดสอบไซต์ คุณไม่ควรประสบปัญหาใดๆ กับเวอร์ชัน Node แต่ docker-compose build จะสร้างอิมเมจใหม่ด้วย npm ci ใหม่

การทดสอบ

หากคุณเขียนส่วนประกอบใหม่ ให้เขียนแบบทดสอบ แต่ละองค์ประกอบควรมีไฟล์ .spec.js ของตัวเอง นักวิ่งทดสอบคือ Mocha และ Enzyme ใช้สำหรับทดสอบส่วนประกอบของ React Mocha ส่งข้อผิดพลาด ( Illegal import declaration ) เมื่อรวบรวมไฟล์ coffeescript ที่มีคำสั่งนำเข้า ES6 พร้อมสตริงเทมเพลต แปลงการนำเข้าเหล่านี้เพื่อให้ require คำสั่ง คุณสามารถรันการทดสอบด้วย npm test

การปรับใช้

การปรับใช้ได้รับการจัดการโดย Github Action

การแสดงละคร

เมื่อเปิดคำขอดึง การดำเนินการ Github จะถูกทริกเกอร์ให้ปรับใช้กับตำแหน่งการแสดงชั่วคราวของสาขา ตำแหน่งที่เก็บข้อมูล Blob ขึ้นอยู่กับหมายเลขคำขอดึง เช่น https://pr-5926.pfe-preview.zooniverse.org

เมื่อพุชเป็นมาสเตอร์ Github Action จะถูกทริกเกอร์ให้ปรับใช้กับการจัดเตรียมต้นแบบซึ่งอยู่ที่ https://master.pfe-preview.zooniverse.org

การผลิต

การปรับใช้การผลิตจะถูกทริกเกอร์โดยการอัปเดตที่ชี้ไปที่แท็ก production-release จริง แท็กนี้ควรได้รับการอัปเดตผ่านการแชท จากนั้น Github Action จะทำงานที่สร้างและอัปโหลดไฟล์ไปยังผู้ให้บริการคลาวด์ของเรา ซึ่งอยู่ที่ https://www.zooniverse.org การปรับใช้ที่ใช้งานจริงสามารถรันเฉพาะกิจในแท็บการดำเนินการได้ตามต้องการ หากคุณมีสิทธิ์ที่เหมาะสมบนที่เก็บ แต่ให้ดำเนินการในกรณีฉุกเฉินเท่านั้น

โครงสร้างไดเร็กทอรี

• ./app/ลักษณนาม/

  ทุกสิ่งที่เกี่ยวข้องกับลักษณนาม

• ./app/คอลเลกชัน/

  ส่วนประกอบที่เกี่ยวข้องกับคอลเลกชัน

• ./app/ส่วนประกอบ/

  ส่วนประกอบทั่วไปอื่นๆ ที่สามารถนำมาใช้ซ้ำได้

• ./app/เค้าโครง/

  เนื้อหาเค้าโครงระดับแอปอยู่ที่นี่ หากมีผลกระทบต่อส่วนหัวของไซต์หลัก ส่วนท้ายของไซต์หลัก หรือเค้าโครงของเนื้อหาของไซต์หลัก ก็จะอยู่ที่นี่

• ./app/lib/

  ฟังก์ชันและข้อมูลส่วนบุคคลที่นำมาใช้ซ้ำระหว่างส่วนประกอบต่างๆ

• ./app/pages/

  นี่คือที่ที่แอปส่วนใหญ่อาศัยอยู่ ตามหลักการแล้ว แต่ละเส้นทางจะชี้ไปยังองค์ประกอบของเพจที่รับผิดชอบในการดึงข้อมูลและจัดการการกระทำใดๆ ที่ผู้ใช้สามารถดำเนินการกับข้อมูลนั้นได้ ส่วนประกอบของหน้านั้นใช้ข้อมูลนั้นเพื่อแสดง UI ด้วยส่วนประกอบที่เป็นใบ้ โดยส่งผ่านการดำเนินการตามที่จำเป็น

• ./app/บางส่วน/

  เดิมทีตั้งใจไว้เพื่อเก็บส่วนประกอบที่แยกออกมาซึ่งจะไม่สามารถนำมาใช้ซ้ำได้ทุกที่ สิ่งเหล่านี้อาจใกล้กับจุดที่ใช้งานจริงมากขึ้น

• ./app/วิชา/

  มุมมองของหัวเรื่อง (TODOC: สิ่งนี้เกี่ยวข้องกับการพูดคุย/การรวบรวมอย่างไร)

• ./app/พูดคุย/

  องค์ประกอบที่เกี่ยวข้องกับการพูดคุย

• ./สาธารณะ

  ไฟล์ที่นี่จะถูกคัดลอกไปยังไดเร็กทอรีเอาต์พุตระหว่างการสร้าง

งานลักษณนาม

แต่ละคลาสองค์ประกอบของงานควรมีองค์ประกอบคงที่สองสามรายการ:

• Summary : แสดงสรุปหลังการจัดหมวดหมู่ของคำอธิบายประกอบของงาน

• Editor : ส่วนประกอบที่ใช้ในการแก้ไขงานเวิร์กโฟลว์ในตัวสร้างโครงการ

นอกจากนี้ยังมีจุดเชื่อมต่อบางส่วนในอินเทอร์เฟซการจำแนกประเภทที่เหลือ หากงานจำเป็นต้องแสดงผลนอกพื้นที่งาน

• BeforeSubject : เนื้อหา HTML ที่จะปรากฏก่อนรูปภาพหัวเรื่องระหว่างงาน

• InsideSubject : เนื้อหา SVG ที่ปรากฏเหนือรูปภาพหัวเรื่องระหว่างงาน

• เนื้อหา HTML AfterSubject จะปรากฏหลังรูปภาพหัวเรื่องระหว่างงาน

hooks เหล่านี้สามารถขึ้นต้นด้วย Persist ซึ่งจะทำให้ตะขอเหล่านี้ปรากฏขึ้นพร้อมกับงานและคงอยู่แม้ว่าผู้ใช้จะไปยังงานถัดไปแล้วก็ตาม

Persist{Before,After}Task ทำงานในลักษณะเดียวกัน แต่สำหรับพื้นที่งาน ตะขอที่ไม่ถาวรนั้นไม่จำเป็นสำหรับพื้นที่งาน

แต่ละองค์ประกอบยังต้องการวิธีการคงที่บางประการด้วย:

• getDefaultTask : ส่งคืนคำอธิบายงานที่จะใช้เป็นค่าเริ่มต้นเมื่อผู้ใช้เพิ่มงานลงในเวิร์กโฟลว์ในตัวสร้างโปรเจ็กต์

• getTaskText : มอบหมายงาน ซึ่งจะส่งคืนคำอธิบายข้อความพื้นฐานของงาน (เช่น คำถามในงานคำถาม คำแนะนำในงานวาดภาพ ฯลฯ)

• getDefaultAnnotation : คำอธิบายประกอบที่จะสร้างขึ้นเมื่อตัวแยกประเภทเริ่มต้นงาน

• isAnnotationComplete : กำหนดงานและคำอธิบายประกอบ ซึ่งจะกำหนดว่าตัวแยกประเภทจะอนุญาตให้ผู้ใช้ไปยังงานถัดไปหรือไม่

• testAnnotationQuality : เมื่อพิจารณาคำอธิบายประกอบของผู้ใช้และคำอธิบายประกอบ "มาตรฐานระดับสูง" ที่ทราบดีสำหรับงานเดียวกัน ระบบจะส่งคืนตัวเลขระหว่าง 0 (ผิดทั้งหมด) ถึง 1 (ถูกต้องทั้งหมด) ซึ่งบ่งชี้ว่าคำอธิบายประกอบของผู้ใช้ใกล้เคียงกับมาตรฐานเพียงใด

บรรณาธิการงาน

ตรวจสอบให้แน่ใจว่าคุณเรียก this.props.onChange พร้อมกับงานที่อัปเดตเมื่อมีการเปลี่ยนแปลง

เครื่องมืองานวาดภาพ

วิธีการคงที่บางวิธี เรียกจากส่วนประกอบ MarkInitializer ซึ่งควบคุมค่าของเครื่องหมายระหว่างการดำเนินการสร้างเครื่องหมายครั้งแรกของผู้ใช้:

• defaultValues ​​: เป็นเพียงค่าเริ่มต้นบางส่วนสำหรับการทำเครื่องหมาย

• initStart : สำหรับทุกเมาส์ดาวน์/ทัชสตาร์ทจนกระทั่ง isComplete คืนค่าเป็นจริง ให้ส่งคืนค่าสำหรับเครื่องหมาย

• initMove : สำหรับทุก mousemove/touchmove ให้ส่งคืนค่าใหม่สำหรับเครื่องหมาย

• initRelease : สำหรับทุก mouseup/touchend ให้คืนค่าใหม่สำหรับเครื่องหมาย

• isComplete : เครื่องหมายเสร็จสมบูรณ์หรือไม่ เครื่องหมายบางตัวจำเป็นต้องมีการโต้ตอบหลายครั้งก่อนที่ตัวเริ่มต้นจะยกเลิกการควบคุม

• initValid : หากเครื่องหมายไม่ถูกต้อง (เช่น สี่เหลี่ยมที่มีความกว้างหรือความสูงเป็นศูนย์) เครื่องหมายนั้นจะถูกทำลายโดยอัตโนมัติ

ส่วนประกอบตัวช่วยสองสามอย่างคือ DrawingToolRoot ซึ่งจัดการสถานะที่เลือก/ปิดใช้งาน และแสดงป๊อปอัปงานย่อย และ DeleteButton และ DragHandle ซึ่งแสดงการควบคุมที่สอดคล้องกันสำหรับเครื่องมือวาดภาพ นอกจากนี้ยังมีฟังก์ชัน deleteIfOutOfBounds ที่ควรเรียกหลังจากการลากเครื่องหมายทั้งหมด

อนุสัญญา

React ต้องการให้แต่ละส่วนประกอบในอาร์เรย์ต้องมี key ที่ไม่ซ้ำกัน เมื่อเรนเดอร์อาร์เรย์ของสิ่งต่าง ๆ ที่ไม่มี ID (คำอธิบายประกอบ คำตอบ) ให้ระบุคุณสมบัติ _key แบบสุ่ม หากไม่มีอยู่ ตรวจสอบให้แน่ใจว่าคุณสมบัติคำนำหน้าขีดล่างไม่มีอยู่ นั่นเป็นไปโดยอัตโนมัติด้วยคลาส JSONAPIClient.Model

< ul >
  { for item in things
    item . _key ?= Math . random ()
    < li key = { item . _key }>{ item . label }</ li >}
</ ul >

ส่วนประกอบตัวช่วย Async

มีบ้าง ดี ส่วนประกอบ ที่โชคร้าย (ในการเข้าใจถึงปัญหาหลังเหตุการณ์) เพื่อช่วยในเรื่องค่าอะซิงก์ พวกเขาใช้ฟังก์ชันเป็น @props.children ซึ่งดูออกแนวม้าไปหน่อยแต่ก็ใช้งานได้ดีทีเดียว ข้อมูลที่ร้องขอส่วนใหญ่จะถูกแคชไว้ในเครื่อง ดังนั้นข้อมูลเหล่านี้มักจะปลอดภัย แต่หากคุณสังเกตเห็นว่ามีการส่งคำขอเดียวกันหลายครั้งติดต่อกัน นี่เป็นจุดเริ่มต้นที่ดีในการค้นหาการโทรซ้ำซ้อน ต่อไปนี้คือตัวอย่างการเรนเดอร์ใหม่เมื่อโปรเจ็กต์เปลี่ยนแปลง ซึ่งส่งผลให้มีการตรวจสอบเจ้าของโปรเจ็กต์

< ChangeListener target = { @props . project }>{ =>
  < PromiseRenderer promise = { @props . project . get ( ' owners ' )}>{([owner]) =>
    if owner is @props . user
      < p > This project is yours.</ p >
    else
      < p > This project belongs to { owner . display_name }.</ p >
  }</ PromiseRenderer >
}</ ChangeListener >

อย่าเขียนโค้ดใหม่โดยใช้ ChangeListener หรือ PromiseRenderer

หากสมเหตุสมผล ให้แทนที่อินสแตนซ์ ChangeListener และ PromiseRenderer ด้วยสถานะส่วนประกอบในโค้ดที่คุณใช้งาน มีรายละเอียดมากกว่าแต่สามารถอ่านได้มากกว่า และจะทำให้เราเข้าใกล้การเรนเดอร์บนเซิร์ฟเวอร์มากขึ้นในอนาคต

อนุสัญญา CSS

รวม CSS ใดๆ ที่จำเป็นสำหรับฟังก์ชันการทำงานของส่วนประกอบ ไว้ในองค์ประกอบ ไม่เช่นนั้นจะเก็บไว้ในไฟล์แยกต่างหาก หนึ่งไฟล์ต่อส่วนประกอบ สำหรับส่วนประกอบที่กำหนด ให้เลือกชื่อคลาสระดับบนสุดที่ไม่ซ้ำกันสำหรับส่วนประกอบนั้น และซ้อนคลาสลูกไว้ข้างใต้ เก็บรูปแบบพื้นฐานและตัวแปรทั่วไปไว้ใน common.styl การจัดรูปแบบสไตลัส: ใช่โคลอน ไม่มีอัฒภาค ไม่มีเครื่องหมายปีกกา @extends ขึ้นด้านบน จากนั้นคุณสมบัติ (ตัวอักษร) จากนั้นตัวเลือกสืบทอด ต้องการใช้ display: flex และ flex-wrap: wrap เพื่อสอบถามสื่อที่ชัดเจนทุกครั้งที่เป็นไปได้

CSS ของเราได้รับความนิยมอย่างมาก ดังนั้นเราจึงทดลองใช้ BEM สำหรับองค์กร

 // <special-button.styl>
.special-button
  background : red
  color : white

.special-button__icon
  width : 1 em ;

// <special-container.styl>
.special-container
  margin : 1 em 1 vw

  .special-container__button
    border : 1 px solid

การเขียนส่วนประกอบใน ES6/ES2015

เรากำลังย้ายจาก coffeescript ไปเป็น ES6 ซึ่งสามารถทำได้ทีละน้อยโดยการเขียนส่วนประกอบใหม่หรือเขียนส่วนประกอบที่มีอยู่ใน ES6 ใหม่ ควรกล่าวถึง gotchas บางประการ:

• ตัวดำเนินการที่มีอยู่ไม่มีอยู่ใน ES6 เปรียบเทียบอย่างชัดเจนกับ null หรือใช้ !!thing หากจำเป็นต้องเป็นความจริง

• แนะนำให้ใช้คลาส ES6 แบบเนทีฟเนื่องจาก React.createClass() เลิกใช้แล้ว อย่างไรก็ตาม หากส่วนประกอบที่มีอยู่ต้องใช้มิกซ์อิน ให้พิจารณาใช้ createReactClass()

• Mixins กำลังเลิกใช้แล้วและไม่รองรับคลาสเนทิฟ ดังนั้นอย่าใช้ในคอมโพเนนต์ใหม่

• ใช้ backticks เพื่อนำเข้าส่วนประกอบ ES6 ไปยังส่วนประกอบ coffeescript:

 `import NewComponent from './new-component'`

ไฟล์การกำหนดค่า ESLint ได้รับการตั้งค่าไว้ที่รากของพื้นที่เก็บข้อมูลเพื่อให้คุณใช้กับโปรแกรมแก้ไขข้อความเพื่อ Lint ทั้ง ES6 และใช้คำแนะนำสไตล์ React ของ Airbnb

คำแนะนำในการเขียนคลาสเนทิฟเทียบกับการใช้ createReactClass()

โครงการที่กำหนดเอง

ดูไลบรารี panoptes-client : https://www.npmjs.com/package/panoptes-client

รูปแบบของค่าคำอธิบายประกอบ

รูปแบบของค่าของคำอธิบายประกอบขึ้นอยู่กับงานที่ใช้ในการสร้างคำอธิบายประกอบ

• single: ดัชนีของคำตอบที่เลือก

• หลายรายการ: อาร์เรย์ของดัชนีของคำตอบที่เลือก (ตามลำดับที่เลือก)

• การวาด: อาร์เรย์ของเครื่องหมายเครื่องมือการวาด (คำอธิบายตามด้านล่าง)

• แบบสำรวจ: อาร์เรย์ของการระบุตัวตนเป็นวัตถุ การระบุแต่ละ choice (รหัสของสัตว์ที่ระบุ) และ answers วัตถุ แต่ละคีย์ใน answers คือ ID ของคำถาม หากคำถามนั้นอนุญาตให้ตอบได้หลายคำตอบ ค่าจะเป็นอาร์เรย์ของรหัสคำตอบ ไม่เช่นนั้นจะเป็นรหัสคำตอบเดียว

• ครอบตัด: วัตถุที่มี x , y , width และ height ของขอบเขตที่ครอบตัด

• ข้อความ: สตริง

• คอมโบ: อาร์เรย์ย่อยของคำอธิบายประกอบ

• ดรอปดาวน์: อาร์เรย์ของออบเจ็กต์โดยที่ value สตริงอ้างอิงถึงคำตอบของคำถามที่เกี่ยวข้อง และ option บูลีนระบุว่าคำตอบนั้นอยู่ในรายการตัวเลือก

เครื่องหมายเครื่องมือการวาด

พิกัดทั้งหมดสัมพันธ์กับด้านซ้ายบนของรูปภาพ

เครื่องหมายทั้งหมดมี tool ซึ่งเป็นดัชนีของเครื่องมือ (เช่น workflow.tasks.T0.tools[0] ) ที่ใช้ในการสร้างเครื่องหมาย

เครื่องหมายทั้งหมดมี frame ซึ่งเป็นดัชนีของกรอบวัตถุ (เช่น subject.locations[0] ) ที่มีการทำเครื่องหมายไว้

หากมีการกำหนดงาน details สำหรับเครื่องมือ เครื่องหมายจะมีอาร์เรย์ details ของการแบ่งประเภทย่อย (แต่ละค่ามี value ตามคำอธิบายข้างต้น)

ค่าคำอธิบายประกอบการวาดมีดังนี้:

• จุด: พิกัด x และ y

• บรรทัด: พิกัดเริ่มต้น ( x1 , y1 ) และจุดสิ้นสุด ( x2 , y2 )

• รูปหลายเหลี่ยม: อาร์เรย์ของวัตถุ แต่ละวัตถุมีพิกัด x และ y ของจุดยอด หากผู้ใช้ไม่ได้ปิดเครื่องหมายอย่างชัดเจน auto_closed จะเป็น true

• สี่เหลี่ยมผืนผ้า: พิกัด x , y ของจุดซ้ายบนของสี่เหลี่ยมผืนผ้าพร้อมด้วย width และ height

• วงกลม: พิกัด x และ y ของจุดศูนย์กลางของวงกลมและรัศมี r

• วงรี: พิกัด x และ y ของจุดศูนย์กลางของวงรี รัศมี rx และ ry และ angle ของ rx ที่สัมพันธ์กับแกน x ในหน่วยองศา (ทวนเข็มนาฬิกาตั้งแต่ 3:00 น.)

• เบซิเยร์: เช่นเดียวกับรูปหลายเหลี่ยม แต่ทุกจุดที่จัดทำดัชนีคี่คือพิกัดของจุดควบคุมของเส้นโค้งเบซิเยร์กำลังสอง

• คอลัมน์: พิกเซล x ด้านซ้ายสุดและ width ของการเลือกคอลัมน์

รับทราบ

ขอขอบคุณ BrowserStack ที่ให้การสนับสนุนโอเพ่นซอร์สและช่วยให้เราทดสอบโปรเจ็กต์นี้บนหลายแพลตฟอร์ม