Add custom surface tools (#123, #131, #132, #250)

Author: ricktu288

locales/en/main.json

@@ -168,13 +168,24 @@
       "description": "A freehand drawing tool.",
       "instruction": "Drag to draw."
     },
+    "CustomSurface": {
+      "title": "Custom Surface",
+      "description": "A custom line-segment surface where the angles (θ) and brightnesses (P) of the outgoing rays (when a ray is incident on it) are defined by custom equations."
+    },
+    "CustomArcSurface": {
+      "title": "Custom Arc Surface",
+      "description": "A custom surface with shape of a circular arc."
+    },
     "moveView": {
       "title": "Move view",
       "description": "Drag to move the view. (Mouse right button drag has the same function.)"
     },
     "modules": {
       "import": "Import Modules…",
       "remove": "Remove module"
+    },
+    "moreTools": {
+      "title": "More Tools…"
     }
   },
   "view": {

locales/en/simulator.json

@@ -312,6 +312,30 @@
     },
     "CustomGlass": {
       "curveGenerationError": "Curve generation error: f(x) > g(x) at x = {{x}}"
+    },
+    "BaseCustomSurface": {
+      "info": {
+        "angles": "{{theta_0}} and {{theta_j}} are the angles of the incident and jth outgoing rays, respectively, in radians and relative to the normal direction.",
+        "brightnesses": "{{P_0}} and {{P_j}} are the brightnesses of the incident and jth outgoing rays, respectively, in the same unit as the detector tool.",
+        "previousFormulas": "A formula can refer to the result of previous formulas. If a formula gives an invalid value, that outgoing ray is ignored and its brightness is treated as 0.",
+        "otherParams": "Other parameters of the incident rays that can be used are {{lambda}} (wavelength in nm) and {{p}} (0 for s-polarized, 1 for p-polarized). They remain the same for the outgoing rays.",
+        "coating": "This object can act as a coating of glass objects by overlapping with their surfaces. In this case, the refraction itself also needs to be handled by the formulas of this object. The refractive indices of the material attached to the same and opposite sides of the incident ray can be referred to as {{n_0}} and {{n_1}}, respectively. If this object is inside a glass object, the values are relative to it.",
+        "twoSides": "If you want the two sides of this surface to have different formulas, you can overlap two single-sided surfaces with opposite orientations.",
+        "module": "To have custom parameters, complicated formulas, or a large number of outgoing rays, you can create a custom module. See Tools -> Other -> Import Modules -> Make custom modules for more information."
+      },
+      "twoSided": "Two-sided",
+      "addOutgoingRay": "Add outgoing ray",
+      "removeOutgoingRay": "Remove outgoing ray"
+    },
+    "CustomSurface": {
+      "info": {
+        "incidentPos": "The position of the incident point can be referred to as {{t}}, which interpolates linearly from -1 to 1 between the two endpoints of the line-segment."
+      }
+    },
+    "CustomArcSurface": {
+      "info": {
+        "incidentPos": "The position of the incident point can be referred to as {{t}}, which interpolates uniformly (with respect to angle) from -1 to 1 between the two endpoints of the arc."
+      }
     }
   },
   "saveModal": {
@@ -469,6 +493,9 @@
     "handleArrow": {
       "title": "Handle arrow"
     },
+    "customSurface": {
+      "title": "Custom surface style"
+    },
     "import": {
       "title": "Import",
       "description": "Import theme from a scene JSON file.",

locales/zh-CN/main.json

@@ -168,13 +168,24 @@
       "description": "手绘工具。",
       "instruction": "拖曳以绘图。"
     },
+    "CustomSurface": {
+      "title": "自定义表面",
+      "description": "当光线入射时，出射光线的角度 (θ) 和亮度 (P) 由自定义方程决定的线段形表面。"
+    },
+    "CustomArcSurface": {
+      "title": "自定义弧形表面",
+      "description": "形状为圆弧的自定义表面。"
+    },
     "moveView": {
       "title": "移动画面",
       "description": "拖曳以移动视窗。（滑鼠右键拖曳也有相同的功能。）"
     },
     "modules": {
       "import": "导入模块…",
       "remove": "移除模块"
+    },
+    "moreTools": {
+      "title": "更多工具…"
     }
   },
   "view": {

locales/zh-CN/simulator.json

@@ -312,6 +312,30 @@
     },
     "CustomGlass": {
       "curveGenerationError": "曲线生成错误：x = {{x}} 时 f(x) > g(x)"
+    },
+    "BaseCustomSurface": {
+      "info": {
+        "angles": "{{theta_0}} 和 {{theta_j}} 分别是入射光线和第 j 条出射光线的角度，以弧度为单位，相对于法线方向。",
+        "brightnesses": "{{P_0}} 和 {{P_j}} 分别是入射光线和第 j 条出射光线的亮度，单位与探测器工具相同。",
+        "previousFormulas": "公式可以引用先前公式的结果。如果公式给出无效值，该出射光线将被忽略，且亮度视为 0。",
+        "otherParams": "其他可用的入射光线参数为 {{lambda}}（波长，单位为 nm）和 {{p}}（0 表示 s 偏振，1 表示 p 偏振）。出射光线将保持相同的参数。",
+        "coating": "此物件可与透光物表面重叠来作为涂层。在这种情况下，折射本身也需要包含在此物件的公式中。公式中可用 {{n_0}} 和 {{n_1}} 来分别代表与入射光线同侧和对侧相接的材料折射率。如果此物件位于一个透光物内部，则这些值相对于该透光物。",
+        "twoSides": "如需让表面的两侧以不同公式定义，可重叠两个方向相反的单面表面。",
+        "module": "如需自定义参数、使用复杂的公式或定义大量出射光线，可使用自定义模块。更多信息请参见工具->其他->导入模块->创建自定义模块。"
+      },
+      "twoSided": "双面",
+      "addOutgoingRay": "添加出射光线",
+      "removeOutgoingRay": "移除出射光线"
+    },
+    "CustomSurface": {
+      "info": {
+        "incidentPos": "公式中可用 {{t}} 代表入射点的位置，在线段两端点之间从 -1 到 1 线性插值。"
+      }
+    },
+    "CustomArcSurface": {
+      "info": {
+        "incidentPos": "公式中可用 {{t}} 代表入射点的位置，在圆弧两端点之间从 -1 到 1 均匀插值（相对于角度）。"
+      }
     }
   },
   "saveModal": {
@@ -469,6 +493,9 @@
     "handleArrow": {
       "title": "控制杆箭头"
     },
+    "customSurface": {
+      "title": "自定义表面样式"
+    },
     "import": {
       "title": "导入",
       "description": "从场景 JSON 文件导入主题。",

locales/zh-TW/main.json

@@ -168,13 +168,24 @@
       "description": "手繪工具。",
       "instruction": "拖曳以繪圖。"
     },
+    "CustomSurface": {
+      "title": "自訂表面",
+      "description": "當光線入射時，出射光線的角度 (θ) 和亮度 (P) 由自訂方程式決定的線段形表面。"
+    },
+    "CustomArcSurface": {
+      "title": "自訂弧形表面",
+      "description": "形狀為圓弧的自訂表面。"
+    },
     "moveView": {
       "title": "移動畫面",
       "description": "拖曳以移動視窗。（滑鼠右鍵拖曳也有相同的功能。）"
     },
     "modules": {
       "import": "匯入模組…",
       "remove": "移除模組"
+    },
+    "moreTools": {
+      "title": "更多工具…"
     }
   },
   "view": {

locales/zh-TW/simulator.json

@@ -312,6 +312,30 @@
     },
     "CustomGlass": {
       "curveGenerationError": "曲線生成錯誤：x = {{x}} 時 f(x) > g(x)"
+    },
+    "BaseCustomSurface": {
+      "info": {
+        "angles": "{{theta_0}} 和 {{theta_j}} 分別是入射光線和第 j 條出射光線的角度，以弳度為單位，相對於法線方向。",
+        "brightnesses": "{{P_0}} 和 {{P_j}} 分別是入射光線和第 j 條出射光線的亮度，單位與探測器工具相同。",
+        "previousFormulas": "公式可以引用先前公式的結果。如果公式給出無效值，該出射光線將被忽略，且亮度視為 0。",
+        "otherParams": "其他可用的入射光參數為 {{lambda}}（波長，單位為 nm）及 {{p}}（0 表示 s 偏振，1 表示 p 偏振）。出射光線將保持相同的參數。",
+        "coating": "此物件可與透光物表面重疊來作為塗層。在這種情況下，折射本身也須包含於此物件的公式中。公式中可用 {{n_0}} 和 {{n_1}} 來分別代表與入射光的同側和對側相接的材料折射率。如果此物件位於一透光物內部，則這些值相對於該透光物。",
+        "twoSides": "如需讓表面的兩側以不同公式定義，可重疊兩個方向相反的單面表面。",
+        "module": "如需自訂參數、使用複雜的公式或定義大量出射光線，可使用自訂模組。更多資訊請參見工具->其他->匯入模組->建立自訂模組。"
+      },
+      "twoSided": "雙面",
+      "addOutgoingRay": "新增出射光線",
+      "removeOutgoingRay": "移除出射光線"
+    },
+    "CustomSurface": {
+      "info": {
+        "incidentPos": "公式中可用 {{t}} 代表入射點的位置，在線段兩端點之間從 -1 到 1 線性插值。"
+      }
+    },
+    "CustomArcSurface": {
+      "info": {
+        "incidentPos": "公式中可用 {{t}} 代表入射點的位置，在圓弧兩端點之間從 -1 到 1 均勻插值（相對於角度）。"
+      }
     }
   },
   "saveModal": {
@@ -469,6 +493,9 @@
     "handleArrow": {
       "title": "控制桿箭頭"
     },
+    "customSurface": {
+      "title": "自訂表面樣式"
+    },
     "import": {
       "title": "匯入",
       "description": "從場景 JSON 檔案匯入佈景主題。",

src/app/components/App.vue

@@ -82,10 +82,17 @@ export default {
 .popover {
   padding-bottom:10px;
 }
+
 .popover-body {
   padding-bottom:0px;
+  max-height: 80vh;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
+.popover-body ul {
+  padding-left: 10px;
+}
 
 #main-flex-wrapper {
   position: fixed;
@@ -116,6 +123,10 @@ export default {
   border-radius: 0;
 }
 
+.dropdown-menu>li>div>ul>li>.btn {
+  border-radius: 0;
+}
+
 .mobile-dropdown>ul {
   list-style-type: none;
   padding-left: 0;
@@ -125,6 +136,10 @@ export default {
   border-radius: 0;
 }
 
+.mobile-dropdown>ul>li>div>ul>li>.btn {
+  border-radius: 0;
+}
+
 .modal-backdrop {
   background-color: rgba(0, 0, 0, 0.3);
   z-index: 1040;

src/app/components/theme/ThemeOptionsList.vue

@@ -339,6 +339,14 @@
         @update="updateHandleArrow"
       />
     </div>
+
+    <div class="theme-option-row">
+      <StrokeControl
+        :label="$t('simulator:themeModal.customSurface.title')"
+        :strokeOptions="customSurfaceOptions"
+        @update="updateCustomSurface"
+      />
+    </div>
   </div>
 </template>
 
@@ -423,6 +431,7 @@ export default {
     const decorationOptions = computed(() => themeStore.getThemeObject('decoration'))
     const handlePointOptions = computed(() => themeStore.getThemeObject('handlePoint'))
     const handleArrowOptions = computed(() => themeStore.getThemeObject('handleArrow'))
+    const customSurfaceOptions = computed(() => themeStore.getThemeObject('customSurface'))
 
     // All theme options update functions
     const updateBackground = (newBackground) => themeStore.setThemeObject('background', newBackground)
@@ -465,6 +474,7 @@ export default {
     const updateDecoration = (newDecoration) => themeStore.setThemeObject('decoration', newDecoration)
     const updateHandlePoint = (newHandlePoint) => themeStore.setThemeObject('handlePoint', newHandlePoint)
     const updateHandleArrow = (newHandleArrow) => themeStore.setThemeObject('handleArrow', newHandleArrow)
+    const updateCustomSurface = (newCustomSurface) => themeStore.setThemeObject('customSurface', newCustomSurface)
 
     return {
       // Theme options
@@ -508,6 +518,7 @@ export default {
       decorationOptions,
       handlePointOptions,
       handleArrowOptions,
+      customSurfaceOptions,
       // Update functions
       updateBackground,
       updateRay,
@@ -548,7 +559,8 @@ export default {
       updateRulerText,
       updateDecoration,
       updateHandlePoint,
-      updateHandleArrow
+      updateHandleArrow,
+      updateCustomSurface
     }
   }
 }

src/app/components/toolbar/Toolbar.vue

@@ -151,12 +151,23 @@ export default {
           } else if (input.name == 'toolsradio_mobile') {
             app.resetDropdownButtons();
 
-            // Get the associated mobile trigger button
-            let groupId = input.parentElement.parentElement.id.replace('mobile-dropdown-', '');
-            let toggle = document.getElementById(`mobile-dropdown-trigger-${groupId}`);
-            if (toggle != null) {
-              // Style the button to indicate selection.
-              toggle.classList.add('selected');
+            // Get the associated mobile trigger button by searching up the DOM tree
+            let element = input;
+            let groupId = null;
+            while (element && element.parentElement) {
+              element = element.parentElement;
+              if (element.id && element.id.startsWith('mobile-dropdown-')) {
+                groupId = element.id.replace('mobile-dropdown-', '');
+                break;
+              }
+            }
+            
+            if (groupId) {
+              let toggle = document.getElementById(`mobile-dropdown-trigger-${groupId}`);
+              if (toggle != null) {
+                // Style the button to indicate selection.
+                toggle.classList.add('selected');
+              }
             }
           }
         }

src/app/components/toolbar/ToolsList.vue

@@ -265,6 +265,23 @@
       :layout="layout"
     />
     <li><hr class="dropdown-divider"></li>
+    <MoreToolsCollapsible :layout="layout">
+      <ToolItem
+        id="CustomSurface"
+        :title="$t('main:tools.CustomSurface.title') + '<sup>Beta</sup>'"
+        :popoverContent="$t('main:meta.parentheses', {main: $t('main:tools.CustomSurface.description'), sub: $t('main:tools.common.lineInstruction')})"
+        :verticalOffset="0"
+        :layout="layout"
+      />
+      <ToolItem
+        id="CustomArcSurface"
+        :title="$t('main:tools.CustomArcSurface.title') + '<sup>Beta</sup>'"
+        :popoverContent="$t('main:meta.parentheses', {main: $t('main:tools.CustomArcSurface.description'), sub: $t('main:tools.ArcMirror.instruction')})"
+        :verticalOffset="0"
+        :layout="layout"
+      />
+      <li><hr class="dropdown-divider"></li>
+    </MoreToolsCollapsible>
     <ModuleTools :layout="layout" />
   </ToolsCategory>
 </template>
@@ -278,13 +295,15 @@
 import ToolsCategory from './ToolsCategory.vue'
 import ToolItem from './controls/ToolItem.vue'
 import ModuleTools from './ModuleTools.vue'
+import MoreToolsCollapsible from './controls/MoreToolsCollapsible.vue'
 
 export default {
   name: 'ToolsList',
   components: {
     ToolsCategory,
     ToolItem,
-    ModuleTools
+    ModuleTools,
+    MoreToolsCollapsible
   },
   props: {
     layout: {