From 4b0fed10ce82a4396fda7ea241cdd5960b164206 Mon Sep 17 00:00:00 2001
From: Yi-Ting Tu <ricktu256@gmail.com>
Date: Sat, 18 Nov 2023 10:53:36 -0500
Subject: [PATCH] Add line/arrow and drawing tool (#20)

---
 simulator/index.html          |  20 +++++++
 simulator/js/editor.js        |   2 +-
 simulator/js/objs/drawing.js  | 109 ++++++++++++++++++++++++++++++++++
 simulator/js/objs/line.js     |  54 +++++++++++++++++
 simulator/js/parameterBox.js  |  10 ++++
 simulator/locales/de.js       |  36 +++++++++++
 simulator/locales/en.js       |  27 +++++++++
 simulator/locales/fr.js       |  36 +++++++++++
 simulator/locales/ja.js       |  36 +++++++++++
 simulator/locales/ko.js       |  36 +++++++++++
 simulator/locales/nl.js       |  36 +++++++++++
 simulator/locales/pl.js       |  36 +++++++++++
 simulator/locales/ru.js       |  36 +++++++++++
 simulator/locales/si.js       |  36 +++++++++++
 simulator/locales/template.js |  36 +++++++++++
 simulator/locales/zh_CN.js    |  27 +++++++++
 simulator/locales/zh_TW.js    |  27 +++++++++
 17 files changed, 599 insertions(+), 1 deletion(-)
 create mode 100644 simulator/js/objs/drawing.js
 create mode 100644 simulator/js/objs/line.js

diff --git a/simulator/index.html b/simulator/index.html
index a13d5cea..90f7ffe6 100644
--- a/simulator/index.html
+++ b/simulator/index.html
@@ -266,10 +266,19 @@
                           <input type="radio" class="btn-check" name="toolsradio" autocomplete="off" id="tool_power">
                           <label class="btn shadow-none btn-primary dropdown-item" for="tool_power" data-text="tool_power" data-popover="tool_power_popover" data-image="power.svg" data-bs-placement="right" data-bs-offset="60,0"></label>
                         </li>
+                        <li><hr class="dropdown-divider"></li>
                         <li>
                           <input type="radio" class="btn-check" name="toolsradio" autocomplete="off" id="tool_text">
                           <label class="btn shadow-none btn-primary dropdown-item" for="tool_text" data-text="tool_text" data-popover="tool_text_popover" data-bs-placement="right" data-bs-offset="0,0"></label>
                         </li>
+                        <li>
+                          <input type="radio" class="btn-check" name="toolsradio" autocomplete="off" id="tool_line">
+                          <label class="btn shadow-none btn-primary dropdown-item" for="tool_line" data-text="tool_line" data-popover="tool_line_popover" data-bs-placement="right" data-bs-offset="0,0"></label>
+                        </li>
+                        <li>
+                          <input type="radio" class="btn-check" name="toolsradio" autocomplete="off" id="tool_drawing">
+                          <label class="btn shadow-none btn-primary dropdown-item" for="tool_drawing" data-text="tool_drawing" data-popover="tool_drawing_popover" data-bs-placement="right" data-bs-offset="0,0"></label>
+                        </li>
                       </ul>
                     </div>
                     <input type="radio" class="btn-check" name="toolsradio" id="tool_" autocomplete="off" checked>
@@ -682,10 +691,19 @@
                             <input type="radio" class="btn-check" name="toolsradio_mobile" autocomplete="off" id="tool_power_mobile">
                             <label class="btn btn-primary dropdown-item" for="tool_power_mobile" data-text="tool_power"></label>
                           </li>
+                          <li><hr class="dropdown-divider"></li>
                           <li>
                             <input type="radio" class="btn-check" name="toolsradio_mobile" autocomplete="off" id="tool_text_mobile">
                             <label class="btn btn-primary dropdown-item" for="tool_text_mobile" data-text="tool_text"></label>
                           </li>
+                          <li>
+                            <input type="radio" class="btn-check" name="toolsradio_mobile" autocomplete="off" id="tool_line_mobile">
+                            <label class="btn btn-primary dropdown-item" for="tool_line_mobile" data-text="tool_line"></label>
+                          </li>
+                          <li>
+                            <input type="radio" class="btn-check" name="toolsradio_mobile" autocomplete="off" id="tool_drawing_mobile">
+                            <label class="btn btn-primary dropdown-item" for="tool_drawing_mobile" data-text="tool_drawing"></label>
+                          </li>
                         </ul>                      
                       </div>
                       
@@ -1182,6 +1200,8 @@ <h5 class="modal-title" id="staticBackdropLabel" data-text="language"></h5>
     <script src="js/objs/protractor.js"></script>
     <script src="js/objs/power.js"></script>
     <script src="js/objs/text.js"></script>
+    <script src="js/objs/line.js"></script>
+    <script src="js/objs/drawing.js"></script>
     <script src="js/objs/handle.js"></script>
 	<script src="js/objs/grin_circlelens.js"></script>
 	<script src="js/objs/grin_refractor.js"></script>
diff --git a/simulator/js/editor.js b/simulator/js/editor.js
index 52612f74..5e60ac7d 100644
--- a/simulator/js/editor.js
+++ b/simulator/js/editor.js
@@ -633,7 +633,7 @@ function createUndoPoint() {
 }
 
 function undo() {
-  if (isConstructing) {
+  if (isConstructing && !(objs.length > 0 && objs[objs.length - 1].type == 'drawing')) {
     //假如按下復原時,使用者正在建立一個物件,則此時只將建立動作終止,而不做真正的復原 If the user is constructing an object when clicked the undo, then only stop the consturction rather than do the real undo
 
     isConstructing = false;
diff --git a/simulator/js/objs/drawing.js b/simulator/js/objs/drawing.js
new file mode 100644
index 00000000..4b8d4b91
--- /dev/null
+++ b/simulator/js/objs/drawing.js
@@ -0,0 +1,109 @@
+// Mirrors -> Circular Arc
+objTypes['drawing'] = {
+
+  //建立物件 Create the obj
+  create: function(mouse) {
+    return {type: 'drawing', points: [], tmp_isMouseDown: false};
+  },
+
+  //顯示屬性方塊 Show the property box
+  p_box: function(obj, elem) {
+    if (isConstructing) {
+      createButton(getMsg('stop_drawing'), function(obj) {
+        obj.notDone = false;
+        isConstructing = false;
+        selectObj(objs.length - 1);
+      }, elem);
+    }
+  },
+
+  //建立物件過程滑鼠按下 Mousedown when the obj is being constructed by the user
+  c_mousedown: function(obj, mouse, ctrl, shift)
+  {
+    obj.points.push([mouse.x, mouse.y]);
+    obj.tmp_isMouseDown = true;
+    selectObj(objs.length - 1);
+  },
+  //建立物件過程滑鼠移動 Mousemove when the obj is being constructed by the user
+  c_mousemove: function(obj, mouse, ctrl, shift)
+  {
+    if (!obj.tmp_isMouseDown) return;
+    obj.points[obj.points.length - 1].push(mouse.x, mouse.y);
+  },
+  //建立物件過程滑鼠放開 Mouseup when the obj is being constructed by the user
+  c_mouseup: function(obj, mouse, ctrl, shift)
+  {
+    obj.tmp_isMouseDown = false;
+    createUndoPoint();
+  },
+
+  //將物件畫到Canvas上 Draw the obj on canvas
+  draw: function(obj, ctx, aboveLight) {
+    ctx.strokeStyle = getMouseStyle(obj, "white");
+    ctx.beginPath();
+    for (var i = 0; i < obj.points.length; i++) {
+      ctx.moveTo(obj.points[i][0], obj.points[i][1]);
+      for (var j = 2; j < obj.points[i].length; j += 2) {
+        ctx.lineTo(obj.points[i][j], obj.points[i][j + 1]);
+      }
+    }
+    ctx.stroke();
+  },
+
+  //平移物件 Move the object
+  move: function(obj, diffX, diffY) {
+    for (var i = 0; i < obj.points.length; i++) {
+      for (var j = 0; j < obj.points[i].length; j += 2) {
+        obj.points[i][j] += diffX;
+        obj.points[i][j + 1] += diffY;
+      }
+    }
+    return obj;
+  },
+
+
+  //繪圖區被按下時(判斷物件被按下的部分) When the drawing area is clicked (test which part of the obj is clicked)
+  clicked: function(obj, mouse_nogrid, mouse, draggingPart) {
+    for (var i = 0; i < obj.points.length; i++) {
+      for (var j = 0; j < obj.points[i].length - 2; j += 2) {
+        if (mouseOnSegment(mouse_nogrid, graphs.segment(graphs.point(obj.points[i][j], obj.points[i][j + 1]), graphs.point(obj.points[i][j + 2], obj.points[i][j + 3])))) {
+          draggingPart.part = 0;
+          draggingPart.mouse0 = mouse; //開始拖曳時的滑鼠位置 Mouse position when the user starts dragging
+          draggingPart.mouse1 = mouse; //拖曳時上一點的滑鼠位置 Mouse position at the last moment during dragging
+          draggingPart.snapData = {};
+          return true;
+        }
+      }
+    }
+    return false;
+  },
+
+  //拖曳物件時 When the user is dragging the obj
+  dragging: function(obj, mouse, draggingPart, ctrl, shift) {
+    if (shift)
+    {
+      var mouse_snapped = snapToDirection(mouse, draggingPart.mouse0, [{x: 1, y: 0},{x: 0, y: 1}], draggingPart.snapData);
+    }
+    else
+    {
+      var mouse_snapped = mouse;
+      draggingPart.snapData = {}; //放開shift時解除原先之拖曳方向鎖定 Unlock the dragging direction when the user release the shift key
+    }
+
+    var mouseDiffX = draggingPart.mouse1.x - mouse_snapped.x; //目前滑鼠位置與上一次的滑鼠位置的X軸差 The X difference between the mouse position now and at the previous moment
+    var mouseDiffY = draggingPart.mouse1.y - mouse_snapped.y; //目前滑鼠位置與上一次的滑鼠位置的Y軸差 The Y difference between the mouse position now and at the previous moment
+    
+    if (draggingPart.part == 0) {
+      for (var i = 0; i < obj.points.length; i++) {
+        for (var j = 0; j < obj.points[i].length; j += 2) {
+          obj.points[i][j] -= mouseDiffX;
+          obj.points[i][j + 1] -= mouseDiffY;
+        }
+      }
+    }
+
+    //更新滑鼠位置 Update the mouse position
+    draggingPart.mouse1 = mouse_snapped;
+  }
+
+};
diff --git a/simulator/js/objs/line.js b/simulator/js/objs/line.js
new file mode 100644
index 00000000..2ae68b2e
--- /dev/null
+++ b/simulator/js/objs/line.js
@@ -0,0 +1,54 @@
+
+objTypes['line'] = {
+
+  //建立物件 Create the obj
+  create: function(mouse) {
+    return {type: 'line', p1: mouse, p2: mouse, arrow1: false, arrow2: false};
+  },
+
+  //使用lineobj原型 Use the prototype lineobj
+  c_mousedown: objTypes['lineobj'].c_mousedown,
+  c_mousemove: objTypes['lineobj'].c_mousemove,
+  c_mouseup: objTypes['lineobj'].c_mouseup,
+  move: objTypes['lineobj'].move,
+  clicked: objTypes['lineobj'].clicked,
+  dragging: objTypes['lineobj'].dragging,
+
+  //將物件畫到Canvas上 Draw the obj on canvas
+  draw: function(obj, ctx, aboveLight) {    
+    ctx.strokeStyle = getMouseStyle(obj, "white");
+    ctx.beginPath();
+    ctx.moveTo(obj.p1.x, obj.p1.y);
+    ctx.lineTo(obj.p2.x, obj.p2.y);
+    ctx.stroke();
+    if (obj.arrow1) {
+      this.drawArrow(ctx, obj.p1, obj.p2);
+    }
+    if (obj.arrow2) {
+      this.drawArrow(ctx, obj.p2, obj.p1);
+    }
+  },
+
+  //畫箭頭 Draw the arrow
+  drawArrow: function(ctx, p1, p2) {
+    var angle = Math.atan2(p2.y - p1.y, p2.x - p1.x);
+    var len = 10;
+    ctx.beginPath();
+    ctx.moveTo(p2.x, p2.y);
+    ctx.lineTo(p2.x - len * Math.cos(angle - Math.PI / 6), p2.y - len * Math.sin(angle - Math.PI / 6));
+    ctx.moveTo(p2.x, p2.y);
+    ctx.lineTo(p2.x - len * Math.cos(angle + Math.PI / 6), p2.y - len * Math.sin(angle + Math.PI / 6));
+    ctx.stroke();
+  },
+
+  //顯示屬性方塊 Show the property box
+  p_box: function(obj, elem) {
+    createBooleanAttr(getMsg('arrow1'), obj.arrow1, function(obj, value) {
+      obj.arrow1 = value;
+    }, elem);
+    createBooleanAttr(getMsg('arrow2'), obj.arrow2, function(obj, value) {
+      obj.arrow2 = value;
+    }, elem);
+  }
+
+};
diff --git a/simulator/js/parameterBox.js b/simulator/js/parameterBox.js
index adfc61cd..dff58a41 100644
--- a/simulator/js/parameterBox.js
+++ b/simulator/js/parameterBox.js
@@ -369,6 +369,16 @@ function createDropdownAttr(label, value, options, func, elem) {
   };
 }
 
+function createButton(label, func, elem) {
+  var button = document.createElement('button');
+  button.className = 'btn btn-secondary';
+  button.innerHTML = label;
+  button.onclick = function() {
+    func(objs[selectedObj]);
+  };
+  elem.appendChild(button);
+}
+
 function hasSameAttrType(obj1, obj2)
 {
   return obj1.type==obj2.type;
diff --git a/simulator/locales/de.js b/simulator/locales/de.js
index 66b034d2..17e69d14 100644
--- a/simulator/locales/de.js
+++ b/simulator/locales/de.js
@@ -124,6 +124,14 @@ locales["de"] = {
   "toolname_text": {
     "message": "Text"
   },
+  "toolname_line": {
+    "incomplete": true,
+    "message": "Line"
+  },
+  "toolname_drawing": {
+    "incomplete": true,
+    "message": "Drawing"
+  },
   "tool_more_": {
     "message": "Andere"
   },
@@ -245,6 +253,14 @@ locales["de"] = {
   "tool_text": {
     "message": "Text"
   },
+  "tool_line": {
+    "incomplete": true,
+    "message": "Line / Arrow"
+  },
+  "tool_drawing": {
+    "incomplete": true,
+    "message": "Drawing"
+  },
   "tool_": {
     "message": "Ansicht bewegen"
   },
@@ -425,6 +441,18 @@ locales["de"] = {
     "incomplete": true,
     "message": "Angle (°)"
   },
+  "arrow1": {
+    "incomplete": true,
+    "message": "Forward arrow"
+  },
+  "arrow2": {
+    "incomplete": true,
+    "message": "Backward arrow"
+  },
+  "stop_drawing": {
+    "incomplete": true,
+    "message": "Finish Drawing"
+  },
   "beam_warning": {
     "incomplete": true,
     "message": "⚠️ Image detection may not work with divergent/random beams."
@@ -602,6 +630,14 @@ locales["de"] = {
   "tool_text_popover": {
     "message": "Ein Text-Label."
   },
+  "tool_line_popover": {
+    "incomplete": true,
+    "message": "A line segment or arrow. (Drag or click to create.)"
+  },
+  "tool_drawing_popover": {
+    "incomplete": true,
+    "message": "A freehand drawing tool. (Drag to draw.)"
+  },
   "tool__popover": {
     "message": "Ziehen um die Ansicht zu Verschieben. (Rechte Maustaste hat die gleiche Funktion.)"
   },
diff --git a/simulator/locales/en.js b/simulator/locales/en.js
index 05b06a4b..61368737 100644
--- a/simulator/locales/en.js
+++ b/simulator/locales/en.js
@@ -120,6 +120,12 @@ locales["en"] = {
   "toolname_text": {
     "message": "Text"
   },
+  "toolname_line": {
+    "message": "Line"
+  },
+  "toolname_drawing": {
+    "message": "Drawing"
+  },
   "tool_more_": {
     "message": "Other"
   },
@@ -237,6 +243,12 @@ locales["en"] = {
   "tool_text": {
     "message": "Text"
   },
+  "tool_line": {
+    "message": "Line / Arrow"
+  },
+  "tool_drawing": {
+    "message": "Drawing"
+  },
   "tool_": {
     "message": "Move view"
   },
@@ -399,6 +411,15 @@ locales["en"] = {
   "angle": {
     "message": "Angle (°)"
   },
+  "arrow1": {
+    "message": "Forward arrow"
+  },
+  "arrow2": {
+    "message": "Backward arrow"
+  },
+  "stop_drawing": {
+    "message": "Finish Drawing"
+  },
   "beam_warning": {
     "message": "⚠️ Image detection may not work with divergent/random beams."
   },
@@ -564,6 +585,12 @@ locales["en"] = {
   "tool_text_popover": {
     "message": "A text label."
   },
+  "tool_line_popover": {
+    "message": "A line segment or arrow. (Drag or click to create.)"
+  },
+  "tool_drawing_popover": {
+    "message": "A freehand drawing tool. (Drag to draw.)"
+  },
   "tool__popover": {
     "message": "Drag to move the view. (Mouse right button drag has the same function.)"
   },
diff --git a/simulator/locales/fr.js b/simulator/locales/fr.js
index c703f476..2b637ec2 100644
--- a/simulator/locales/fr.js
+++ b/simulator/locales/fr.js
@@ -139,6 +139,14 @@ locales["fr"] = {
   "toolname_text": {
     "message": "Texte"
   },
+  "toolname_line": {
+    "incomplete": true,
+    "message": "Line"
+  },
+  "toolname_drawing": {
+    "incomplete": true,
+    "message": "Drawing"
+  },
   "tool_more_": {
     "message": "Autre"
   },
@@ -268,6 +276,14 @@ locales["fr"] = {
   "tool_text": {
     "message": "Texte"
   },
+  "tool_line": {
+    "incomplete": true,
+    "message": "Line / Arrow"
+  },
+  "tool_drawing": {
+    "incomplete": true,
+    "message": "Drawing"
+  },
   "tool_": {
     "message": "Bouger la vue"
   },
@@ -454,6 +470,18 @@ locales["fr"] = {
     "incomplete": true,
     "message": "Angle (°)"
   },
+  "arrow1": {
+    "incomplete": true,
+    "message": "Forward arrow"
+  },
+  "arrow2": {
+    "incomplete": true,
+    "message": "Backward arrow"
+  },
+  "stop_drawing": {
+    "incomplete": true,
+    "message": "Finish Drawing"
+  },
   "beam_warning": {
     "incomplete": true,
     "message": "⚠️ Image detection may not work with divergent/random beams."
@@ -653,6 +681,14 @@ locales["fr"] = {
   "tool_text_popover": {
     "message": "Une légende, pour un objet quelconque."
   },
+  "tool_line_popover": {
+    "incomplete": true,
+    "message": "A line segment or arrow. (Drag or click to create.)"
+  },
+  "tool_drawing_popover": {
+    "incomplete": true,
+    "message": "A freehand drawing tool. (Drag to draw.)"
+  },
   "tool__popover": {
     "message": "Glisser pour bouger la vue. (Le clic droit à la même fonction.)"
   },
diff --git a/simulator/locales/ja.js b/simulator/locales/ja.js
index 7896a462..1c2e67f9 100644
--- a/simulator/locales/ja.js
+++ b/simulator/locales/ja.js
@@ -159,6 +159,14 @@ locales["ja"] = {
     "incomplete": false,
     "message": "テキスト"
   },
+  "toolname_line": {
+    "incomplete": true,
+    "message": "Line"
+  },
+  "toolname_drawing": {
+    "incomplete": true,
+    "message": "Drawing"
+  },
   "tool_more_": {
     "incomplete": false,
     "message": "その他"
@@ -315,6 +323,14 @@ locales["ja"] = {
     "incomplete": false,
     "message": "テキスト"
   },
+  "tool_line": {
+    "incomplete": true,
+    "message": "Line / Arrow"
+  },
+  "tool_drawing": {
+    "incomplete": true,
+    "message": "Drawing"
+  },
   "tool_": {
     "incomplete": false,
     "message": "ビューを移動する"
@@ -531,6 +547,18 @@ locales["ja"] = {
     "incomplete": false,
     "message": "角度 (°)"
   },
+  "arrow1": {
+    "incomplete": true,
+    "message": "Forward arrow"
+  },
+  "arrow2": {
+    "incomplete": true,
+    "message": "Backward arrow"
+  },
+  "stop_drawing": {
+    "incomplete": true,
+    "message": "Finish Drawing"
+  },
   "beam_warning": {
     "incomplete": true,
     "message": "⚠️ Image detection may not work with divergent/random beams."
@@ -751,6 +779,14 @@ locales["ja"] = {
     "incomplete": false,
     "message": "テキストラベル."
   },
+  "tool_line_popover": {
+    "incomplete": true,
+    "message": "A line segment or arrow. (Drag or click to create.)"
+  },
+  "tool_drawing_popover": {
+    "incomplete": true,
+    "message": "A freehand drawing tool. (Drag to draw.)"
+  },
   "tool__popover": {
     "incomplete": false,
     "message": "ドラッグでビューを移動します。(マウスの右ボタンでドラッグしても同じ機能です）。"
diff --git a/simulator/locales/ko.js b/simulator/locales/ko.js
index 1871e5cc..8c6eb088 100644
--- a/simulator/locales/ko.js
+++ b/simulator/locales/ko.js
@@ -159,6 +159,14 @@ locales["ko"] = {
     "incomplete": false,
     "message": "텍스트"
   },
+  "toolname_line": {
+    "incomplete": true,
+    "message": "Line"
+  },
+  "toolname_drawing": {
+    "incomplete": true,
+    "message": "Drawing"
+  },
   "tool_more_": {
     "incomplete": false,
     "message": "더 보기"
@@ -315,6 +323,14 @@ locales["ko"] = {
     "incomplete": false,
     "message": "텍스트"
   },
+  "tool_line": {
+    "incomplete": true,
+    "message": "Line / Arrow"
+  },
+  "tool_drawing": {
+    "incomplete": true,
+    "message": "Drawing"
+  },
   "tool_": {
     "incomplete": false,
     "message": "화면 이동"
@@ -531,6 +547,18 @@ locales["ko"] = {
     "incomplete": false,
     "message": "각도 (°)"
   },
+  "arrow1": {
+    "incomplete": true,
+    "message": "Forward arrow"
+  },
+  "arrow2": {
+    "incomplete": true,
+    "message": "Backward arrow"
+  },
+  "stop_drawing": {
+    "incomplete": true,
+    "message": "Finish Drawing"
+  },
   "beam_warning": {
     "incomplete": false,
     "message": "⚠️ 발산하거나 랜덤한 빔의 경우 정상적으로 인식되지 않거나 작동하지 않을 수 있습니다."
@@ -751,6 +779,14 @@ locales["ko"] = {
     "incomplete": false,
     "message": "텍스트 추가"
   },
+  "tool_line_popover": {
+    "incomplete": true,
+    "message": "A line segment or arrow. (Drag or click to create.)"
+  },
+  "tool_drawing_popover": {
+    "incomplete": true,
+    "message": "A freehand drawing tool. (Drag to draw.)"
+  },
   "tool__popover": {
     "incomplete": false,
     "message": "화면을 이동하려면 드래그하십시오. (이 버튼을 누르지 않고, 마우스 우클릭 드래그를 사용해도 됩니다.)"
diff --git a/simulator/locales/nl.js b/simulator/locales/nl.js
index 81130d3f..dd048305 100644
--- a/simulator/locales/nl.js
+++ b/simulator/locales/nl.js
@@ -142,6 +142,14 @@ locales["nl"] = {
     "incomplete": true,
     "message": "Text"
   },
+  "toolname_line": {
+    "incomplete": true,
+    "message": "Line"
+  },
+  "toolname_drawing": {
+    "incomplete": true,
+    "message": "Drawing"
+  },
   "tool_more_": {
     "message": "Overig"
   },
@@ -272,6 +280,14 @@ locales["nl"] = {
     "incomplete": true,
     "message": "Text"
   },
+  "tool_line": {
+    "incomplete": true,
+    "message": "Line / Arrow"
+  },
+  "tool_drawing": {
+    "incomplete": true,
+    "message": "Drawing"
+  },
   "tool_": {
     "message": "Verplaats beeld"
   },
@@ -469,6 +485,18 @@ locales["nl"] = {
     "incomplete": true,
     "message": "Angle (°)"
   },
+  "arrow1": {
+    "incomplete": true,
+    "message": "Forward arrow"
+  },
+  "arrow2": {
+    "incomplete": true,
+    "message": "Backward arrow"
+  },
+  "stop_drawing": {
+    "incomplete": true,
+    "message": "Finish Drawing"
+  },
   "beam_warning": {
     "incomplete": true,
     "message": "⚠️ Image detection may not work with divergent/random beams."
@@ -669,6 +697,14 @@ locales["nl"] = {
     "incomplete": true,
     "message": "A text label."
   },
+  "tool_line_popover": {
+    "incomplete": true,
+    "message": "A line segment or arrow. (Drag or click to create.)"
+  },
+  "tool_drawing_popover": {
+    "incomplete": true,
+    "message": "A freehand drawing tool. (Drag to draw.)"
+  },
   "tool__popover": {
     "message": "Sleep om beeld te verplaatsen. (Rechtermuisknop sleep heeft dezelfde functie.)"
   },
diff --git a/simulator/locales/pl.js b/simulator/locales/pl.js
index c9197e65..4f848ba4 100644
--- a/simulator/locales/pl.js
+++ b/simulator/locales/pl.js
@@ -123,6 +123,14 @@ locales["pl"] = {
   "toolname_text": {
     "message": "Tekst"
   },
+  "toolname_line": {
+    "incomplete": true,
+    "message": "Line"
+  },
+  "toolname_drawing": {
+    "incomplete": true,
+    "message": "Drawing"
+  },
   "tool_more_": {
     "message": "Inne"
   },
@@ -244,6 +252,14 @@ locales["pl"] = {
   "tool_text": {
     "message": "Tekst"
   },
+  "tool_line": {
+    "incomplete": true,
+    "message": "Line / Arrow"
+  },
+  "tool_drawing": {
+    "incomplete": true,
+    "message": "Drawing"
+  },
   "tool_": {
     "message": "Przesuń widok"
   },
@@ -413,6 +429,18 @@ locales["pl"] = {
   "angle": {
     "message": "Kąt (°)"
   },
+  "arrow1": {
+    "incomplete": true,
+    "message": "Forward arrow"
+  },
+  "arrow2": {
+    "incomplete": true,
+    "message": "Backward arrow"
+  },
+  "stop_drawing": {
+    "incomplete": true,
+    "message": "Finish Drawing"
+  },
   "beam_warning": {
     "message": "⚠️ Wykrywanie obrazu może nie działać w przypadku wiązek rozbieżnych/losowych."
   },
@@ -584,6 +612,14 @@ locales["pl"] = {
   "tool_text_popover": {
     "message": "Etykieta tekstowa."
   },
+  "tool_line_popover": {
+    "incomplete": true,
+    "message": "A line segment or arrow. (Drag or click to create.)"
+  },
+  "tool_drawing_popover": {
+    "incomplete": true,
+    "message": "A freehand drawing tool. (Drag to draw.)"
+  },
   "tool__popover": {
     "message": "Przeciągnij, aby przesunąć widok. (Przeciąganie prawym przyciskiem myszy ma tę samą funkcję)."
   },
diff --git a/simulator/locales/ru.js b/simulator/locales/ru.js
index 12fa5f60..0fb4a1bc 100644
--- a/simulator/locales/ru.js
+++ b/simulator/locales/ru.js
@@ -139,6 +139,14 @@ locales["ru"] = {
     "incomplete": true,
     "message": "Text"
   },
+  "toolname_line": {
+    "incomplete": true,
+    "message": "Line"
+  },
+  "toolname_drawing": {
+    "incomplete": true,
+    "message": "Drawing"
+  },
   "tool_more_": {
     "message": "Другое"
   },
@@ -269,6 +277,14 @@ locales["ru"] = {
     "incomplete": true,
     "message": "Text"
   },
+  "tool_line": {
+    "incomplete": true,
+    "message": "Line / Arrow"
+  },
+  "tool_drawing": {
+    "incomplete": true,
+    "message": "Drawing"
+  },
   "tool_": {
     "message": "Движение камеры"
   },
@@ -456,6 +472,18 @@ locales["ru"] = {
     "incomplete": true,
     "message": "Angle (°)"
   },
+  "arrow1": {
+    "incomplete": true,
+    "message": "Forward arrow"
+  },
+  "arrow2": {
+    "incomplete": true,
+    "message": "Backward arrow"
+  },
+  "stop_drawing": {
+    "incomplete": true,
+    "message": "Finish Drawing"
+  },
   "beam_warning": {
     "incomplete": true,
     "message": "⚠️ Image detection may not work with divergent/random beams."
@@ -657,6 +685,14 @@ locales["ru"] = {
     "incomplete": true,
     "message": "A text label."
   },
+  "tool_line_popover": {
+    "incomplete": true,
+    "message": "A line segment or arrow. (Drag or click to create.)"
+  },
+  "tool_drawing_popover": {
+    "incomplete": true,
+    "message": "A freehand drawing tool. (Drag to draw.)"
+  },
   "tool__popover": {
     "message": "Потяните, чтобы переместить камеру. (Также можно потянуть правой кнопкой мыши.)"
   },
diff --git a/simulator/locales/si.js b/simulator/locales/si.js
index 4d57a893..1d75efa2 100644
--- a/simulator/locales/si.js
+++ b/simulator/locales/si.js
@@ -129,6 +129,14 @@ locales["si"] = {
     "incomplete": true,
     "message": "Text"
   },
+  "toolname_line": {
+    "incomplete": true,
+    "message": "Line"
+  },
+  "toolname_drawing": {
+    "incomplete": true,
+    "message": "Drawing"
+  },
   "tool_more_": {
     "incomplete": true,
     "message": "Other"
@@ -259,6 +267,14 @@ locales["si"] = {
     "incomplete": true,
     "message": "Text"
   },
+  "tool_line": {
+    "incomplete": true,
+    "message": "Line / Arrow"
+  },
+  "tool_drawing": {
+    "incomplete": true,
+    "message": "Drawing"
+  },
   "tool_": {
     "incomplete": true,
     "message": "Move view"
@@ -460,6 +476,18 @@ locales["si"] = {
   "angle": {
     "message": "කෝණය (°)"
   },
+  "arrow1": {
+    "incomplete": true,
+    "message": "Forward arrow"
+  },
+  "arrow2": {
+    "incomplete": true,
+    "message": "Backward arrow"
+  },
+  "stop_drawing": {
+    "incomplete": true,
+    "message": "Finish Drawing"
+  },
   "beam_warning": {
     "message": "⚠️ අපසාරී/අහඹු කදම්භ සමඟ රූප හඳුනාගැනීම  ක්‍රියා නොකරයි."
   },
@@ -660,6 +688,14 @@ locales["si"] = {
     "incomplete": true,
     "message": "A text label."
   },
+  "tool_line_popover": {
+    "incomplete": true,
+    "message": "A line segment or arrow. (Drag or click to create.)"
+  },
+  "tool_drawing_popover": {
+    "incomplete": true,
+    "message": "A freehand drawing tool. (Drag to draw.)"
+  },
   "tool__popover": {
     "incomplete": true,
     "message": "Drag to move the view. (Mouse right button drag has the same function.)"
diff --git a/simulator/locales/template.js b/simulator/locales/template.js
index 34126f95..1bb9e83c 100644
--- a/simulator/locales/template.js
+++ b/simulator/locales/template.js
@@ -160,6 +160,14 @@ locales["LOCALE_ID"] = {
     "incomplete": true,
     "message": "Text"
   },
+  "toolname_line": {
+    "incomplete": true,
+    "message": "Line"
+  },
+  "toolname_drawing": {
+    "incomplete": true,
+    "message": "Drawing"
+  },
   "tool_more_": {
     "incomplete": true,
     "message": "Other"
@@ -316,6 +324,14 @@ locales["LOCALE_ID"] = {
     "incomplete": true,
     "message": "Text"
   },
+  "tool_line": {
+    "incomplete": true,
+    "message": "Line / Arrow"
+  },
+  "tool_drawing": {
+    "incomplete": true,
+    "message": "Drawing"
+  },
   "tool_": {
     "incomplete": true,
     "message": "Move view"
@@ -532,6 +548,18 @@ locales["LOCALE_ID"] = {
     "incomplete": true,
     "message": "Angle (°)"
   },
+  "arrow1": {
+    "incomplete": true,
+    "message": "Forward arrow"
+  },
+  "arrow2": {
+    "incomplete": true,
+    "message": "Backward arrow"
+  },
+  "stop_drawing": {
+    "incomplete": true,
+    "message": "Finish Drawing"
+  },
   "beam_warning": {
     "incomplete": true,
     "message": "⚠️ Image detection may not work with divergent/random beams."
@@ -752,6 +780,14 @@ locales["LOCALE_ID"] = {
     "incomplete": true,
     "message": "A text label."
   },
+  "tool_line_popover": {
+    "incomplete": true,
+    "message": "A line segment or arrow. (Drag or click to create.)"
+  },
+  "tool_drawing_popover": {
+    "incomplete": true,
+    "message": "A freehand drawing tool. (Drag to draw.)"
+  },
   "tool__popover": {
     "incomplete": true,
     "message": "Drag to move the view. (Mouse right button drag has the same function.)"
diff --git a/simulator/locales/zh_CN.js b/simulator/locales/zh_CN.js
index 6eef303d..fc2fac29 100644
--- a/simulator/locales/zh_CN.js
+++ b/simulator/locales/zh_CN.js
@@ -120,6 +120,12 @@ locales["zh-CN"] = {
   "toolname_text": {
     "message": "文字"
   },
+  "toolname_line": {
+    "message": "线段"
+  },
+  "toolname_drawing": {
+    "message": "绘图"
+  },
   "tool_more_": {
     "message": "其他"
   },
@@ -237,6 +243,12 @@ locales["zh-CN"] = {
   "tool_text": {
     "message": "文字"
   },
+  "tool_line": {
+    "message": "线段 / 箭头"
+  },
+  "tool_drawing": {
+    "message": "绘图"
+  },
   "tool_": {
     "message": "移动画面"
   },
@@ -399,6 +411,15 @@ locales["zh-CN"] = {
   "angle": {
     "message": "角度 (°)"
   },
+  "arrow1": {
+    "message": "前向箭头"
+  },
+  "arrow2": {
+    "message": "后向箭头"
+  },
+  "stop_drawing": {
+    "message": "停止绘图"
+  },
   "beam_warning": {
     "message": "⚠️ 使用发散或随机光束时，像的侦测可能无法正常运作。"
   },
@@ -564,6 +585,12 @@ locales["zh-CN"] = {
   "tool_text_popover": {
     "message": "文字标签。"
   },
+  "tool_line_popover": {
+    "message": "线段或箭头。（拖曳或点击以创建。）"
+  },
+  "tool_drawing_popover": {
+    "message": "手绘工具。（拖曳以绘图。）"
+  },
   "tool__popover": {
     "message": "拖曳以移动视窗。（滑鼠右键拖曳也有相同的功能）"
   },
diff --git a/simulator/locales/zh_TW.js b/simulator/locales/zh_TW.js
index 967a118e..b4bed7ba 100644
--- a/simulator/locales/zh_TW.js
+++ b/simulator/locales/zh_TW.js
@@ -120,6 +120,12 @@ locales["zh-TW"] = {
   "toolname_text": {
     "message": "文字"
   },
+  "toolname_line": {
+    "message": "線段"
+  },
+  "toolname_drawing": {
+    "message": "繪圖"
+  },
   "tool_more_": {
     "message": "其他"
   },
@@ -237,6 +243,12 @@ locales["zh-TW"] = {
   "tool_text": {
     "message": "文字"
   },
+  "tool_line": {
+    "message": "線段 / 箭頭"
+  },
+  "tool_drawing": {
+    "message": "繪圖"
+  },
   "tool_": {
     "message": "移動畫面"
   },
@@ -399,6 +411,15 @@ locales["zh-TW"] = {
   "angle": {
     "message": "角度 (°)"
   },
+  "arrow1": {
+    "message": "前向箭頭"
+  },
+  "arrow2": {
+    "message": "後向箭頭"
+  },
+  "stop_drawing": {
+    "message": "停止繪圖"
+  },
   "beam_warning": {
     "message": "⚠️ 使用發散或隨機光束時，像的偵測可能無法正常運作。"
   },
@@ -564,6 +585,12 @@ locales["zh-TW"] = {
   "tool_text_popover": {
     "message": "文字標籤。"
   },
+  "tool_line_popover": {
+    "message": "線段或箭頭。（拖曳或點擊以創建。）"
+  },
+  "tool_drawing_popover": {
+    "message": "手繪工具。（拖曳以繪圖。）"
+  },
   "tool__popover": {
     "message": "拖曳以移動視窗。（滑鼠右鍵拖曳也有相同的功能）"
   },