ความคิดเห็นใน Workspace

ความคิดเห็นในพื้นที่ทำงานคือองค์ประกอบแบบกราฟิกที่คุณป้อนข้อความได้ โดยปกติแล้ว จะใช้เพื่อบันทึกสิ่งต่างๆ เกี่ยวกับโค้ดของคุณ เช่นเดียวกับความคิดเห็นในภาษาโปรแกรมแบบข้อความ

ความคิดเห็นใน Workspace

เปิดใช้ความคิดเห็นในพื้นที่ทำงาน

หากต้องการเปิดใช้ความคิดเห็นในพื้นที่ทำงานในแอปพลิเคชัน คุณต้องให้วิธีแก่ผู้ใช้ในการสร้างความคิดเห็น วิธีหนึ่งในการทำเช่นนี้คือการเพิ่มรายการเมนูบริบทที่ สร้างความคิดเห็นในพื้นที่ทำงาน คุณลงทะเบียนรายการเมนูตามบริบทเริ่มต้นเพื่อ สร้าง ลบ และทำซ้ำความคิดเห็นในพื้นที่ทำงานได้ด้วยโค้ดต่อไปนี้

// This should be called on page load. It can be called before or after
// you inject your workspace.
Blockly.ContextMenuItems.registerCommentOptions();

นอกจากนี้ คุณยังสร้างตัวเลือกเมนูบริบทของคุณเอง หรือเพิ่มวิธีอื่นให้ผู้ใช้เพิ่มความคิดเห็นในพื้นที่ทำงานได้ด้วย ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือกเมนูตามบริบทได้ที่เมนูตามบริบท

ปรับแต่งความคิดเห็นด้วยภาพ

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

ตัวแปร CSS สี

คุณตั้งค่าcommentFillColourตัวแปร CSS เพื่อเปลี่ยนสีพื้นหลัง ของพื้นที่ข้อความได้ คุณตั้งค่าตัวแปร CSS commentBorderColour เพื่อเปลี่ยน สีของแถบด้านบนของความคิดเห็นและเส้นขอบของความคิดเห็นได้

.blocklyWorkspace {
  --commentFillColour: blue;
  --commentBorderColour: red;
}

ความคิดเห็นในพื้นที่ทำงานที่มีการเปลี่ยนสี

คลาส CSS

มีคลาส CSS ต่างๆ ที่กำหนดให้กับองค์ประกอบต่างๆ ของมุมมองความคิดเห็น ซึ่งช่วยให้คุณแก้ไขสไตล์ขององค์ประกอบได้

คลาส CSS รูปภาพ
blocklyComment, blocklyDraggable ความคิดเห็นใน Workspace
blocklySelected, blocklyCommentHighlight ความคิดเห็นที่เลือก ความคิดเห็นที่ยุบที่เลือก
blocklyCollapsed ความคิดเห็นในพื้นที่ทำงานที่ยุบ
blocklyCommentTopbar แถบด้านบนของความคิดเห็นใน Workspace
blocklyFoldoutIcon ไอคอนเมนูแบบเลื่อนลง
blocklyCommentPreview, blocklyText ตัวอย่างความคิดเห็น
blocklyDeleteIcon ลบไอคอน
blocklyText ข้อความ
blocklyResizeHandle ไอคอนปรับขนาด

การใช้ CSS ขั้นพื้นฐาน

ในกรณีส่วนใหญ่ คุณสามารถใช้แอตทริบิวต์ที่กำหนดเองกับคลาส CSS ที่เหมาะสมได้ 

.blocklyCommentTopbarBackground {
  height: 50px;
}

ความคิดเห็นใน Workspace ที่มีแถบด้านบนสูงขึ้น

CSS สำหรับข้อความ

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

/* Modifies the preview text. */
.blocklyComment .blocklyCommentPreview.blocklyText {
  fill: blue;
}

/* Modifies the input text. */
.blocklyComment .blocklyText {
  color: blue;
}

ความคิดเห็นในพื้นที่ทำงานที่มีข้อความตัวอย่างสีน้ำเงิน

ความคิดเห็นในพื้นที่ทำงานที่มีข้อความป้อนข้อมูลสีน้ำเงิน text

CSS สำหรับไฮไลต์ที่เลือก

และสำหรับการไฮไลต์ความคิดเห็นเมื่อมีการเลือก วัตถุที่ควรใช้ CSS จะเปลี่ยนแปลงไปตามว่าความคิดเห็นนั้นยุบอยู่หรือไม่ เมื่อblocklyCommentTopbarBackgroundยุบอยู่ ให้ใช้ CSS กับ blocklyCommentTopbarBackground มิฉะนั้นให้ใช้กับ blocklyCommentHighlight

/* Highlight when expanded. */
.blocklySelected .blocklyCommentHighlight {
  stroke: #fc3;
  stroke-width: 3px;
}

/* Hide normal highlight when collapsed. */
.blocklyCollapsed.blocklySelected .blocklyCommentHighlight {
  stroke: none;
}

/* Instead apply the collapsed highlight to the top bar. */
.blocklyCollapsed.blocklySelected .blocklyCommentTopbarBackground {
  stroke: #fc3;
  stroke-width: 3px;
}

ไอคอน

คลาส blocklyFoldoutIcon, blocklyDeleteIcon และ blocklyResizeHandle จะใช้กับองค์ประกอบ <image> ทั้งหมด ซึ่งหมายความว่าหาก คุณต้องการเปลี่ยนสีหรือรูปร่างของไอคอน คุณจะใส่รูปภาพอื่น ในโฟลเดอร์สื่อได้

ชื่ออิมเมจ รูปภาพ
foldout-icon.svg ไอคอนเมนูแบบเลื่อนลง
delete-icon.svg ลบไอคอน
resize-handle.svg ไอคอนปรับขนาด

ลบไอคอน

ระบบจะซ่อนไอคอนลบโดยค่าเริ่มต้น หากต้องการเปิดใช้ คุณต้องใช้ CSS เพื่อให้มองเห็นได้ ดังนี้

.blocklyDeleteIcon {
  display: block;
}

ขนาดเริ่มต้น

หากต้องการตั้งค่าขนาดความคิดเห็นเริ่มต้น ให้ตั้งค่าพร็อพเพอร์ตี้แบบคงที่ Blockly.comments.CommentView.defaultCommentSize ดังนี้

Blockly.comments.CommentView.defaultCommentSize = new Blockly.utils.Size(200, 200);