feat: move all socket labels to strings.ts

wooningeire · May 10, 2024 · ca43a5b · ca43a5b
1 parent 8407cef
commit ca43a5b
Show file tree

Hide file tree

Showing 14 changed files with 509 additions and 342 deletions.
diff --git a/src/components/input/SpectralPowerDistributionEntry.vue b/src/components/input/SpectralPowerDistributionEntry.vue
@@ -7,6 +7,7 @@ import {settings} from '../store';
 import {models} from "@/models/nodetypes";
 import {Listen, clearTextSelection, lerp, clamp} from "@/util";
 import * as cm from "@/models/colormanagement";
+import getString from "@/strings";
 
 const props = defineProps({
   node: {
@@ -168,7 +169,7 @@ const beginInput = (downEvent: PointerEvent) => {
 
       <div class="wavelength-label">
         <div class="tickmark">360</div>
-        <div>Wavelength (nm)</div>
+        <div v-html="getString('label.socket.wavelength')"></div>
         <div class="tickmark">830</div>
       </div>
     </div>
@@ -191,11 +192,17 @@ const beginInput = (downEvent: PointerEvent) => {
 
       <div class="control-row">
         <div>
-          <label>Dataset</label>
+          <label v-html="getString('label.socket.cmfDataset')"></label>
           <select v-model="datasetIdRef"
               @change="onchangeDatasetId">
-            <option value="2deg">CIE 2° observer (1931)</option>
-            <option value="10deg">CIE 10° observer (1964)</option>
+            <option
+              value="2deg"
+              v-html="getString('label.cmfDataset.2deg')"
+            ></option>
+            <option
+              value="10deg"
+              v-html="getString('label.cmfDataset.10deg')"
+            ></option>
           </select>
         </div>
       </div>
@@ -257,10 +264,12 @@ const beginInput = (downEvent: PointerEvent) => {
     > .control-row {
       display: flex;
       justify-content: space-between;
+      align-items: center;
 
       > div {
         display: flex;
         flex-flow: row;
+        align-items: center;
         gap: 0.25em;
       }
     }

diff --git a/src/components/node/NodeSocket.vue b/src/components/node/NodeSocket.vue
@@ -117,14 +117,22 @@ const showTooltip = () => {
   const rect = socketContainer.value!.getBoundingClientRect();
 
   const socketTypeName = socketTypeNames.get(props.socket.type);
+  const inOut = props.socket.isInput ? "in" : "out";
 
   let tooltipString = `${getString(props.socket.socketDesc ?? NO_DESC)}`;
   
   if (props.socket.showSocket) {
     tooltipString += `<br />
 <br />
 ${getString("general.socketDataTypeLabel")}${getString(`label.socketType.${socketTypeName}`)}<br />
-${getString(`desc.socketType.${socketTypeName}.${props.socket.isInput ? "in" : "out"}`)}`;
+${getString(`desc.socketType.${socketTypeName}.${inOut}`)}`;
+  }
+
+  if (props.socket.constant) {
+    tooltipString += `<br />
+<br />
+${getString("label.socketAttr.constant")}<br />
+${getString(`desc.socketAttr.constant.${inOut}`)}`;
   }
 
   if (props.socket.showSocket && props.socket.hasLinks) {
@@ -189,9 +197,10 @@ Object.defineProperties(socketVue, {
           }"
           :style="{'--socket-color': socketColor} as any"></div>
     </div>
-    <div class="socket-label">
-      {{socket.label}}
-    </div>
+    <div
+      class="socket-label"
+      v-html="getString(socket.label)"
+    ></div>
 
     <NodeSocketField v-if="shouldShowFields"
         :socket="socket"

diff --git a/src/components/node/NodeSocketField.vue b/src/components/node/NodeSocketField.vue
@@ -9,6 +9,7 @@ import {settings, tree} from "../store";
 
 import {Socket, SocketType as St, SocketFlag, Tree} from "@/models/Node";
 import {externals} from "@/models/nodetypes";
+import getString, {NO_DESC} from "@/strings";
 
 const props = defineProps<{
   socket: Socket,
@@ -118,10 +119,11 @@ type VectorSocket = Socket<St.Vector | St.VectorOrColor>;
       <label>
         <select v-model="socket.fieldValue"
             @change="onValueChange(socket.valueChangeRequiresShaderReload)">
-          <option v-for="{text, value} of (socket as Socket<St.Dropdown>).data.options"
-              :value="value">
-            {{text}}
-          </option>
+          <option
+            v-for="{text, value} of (socket as Socket<St.Dropdown>).data.options"
+            :value="value"
+            v-html="getString(text)"
+          ></option>
         </select>
       </label>
     </template>

diff --git a/src/models/Node.ts b/src/models/Node.ts
@@ -432,7 +432,7 @@ type SocketData<St extends SocketType=any> =
     St extends SocketType.Dropdown ? {
       options?: {
         value: string,
-        text: string,
+        text: StringKey,
       }[],
     } :
     St extends SocketType.Float ? {
@@ -536,7 +536,7 @@ export abstract class Socket<St extends SocketType=any> {
     readonly isInput: boolean,
     public type: St,
 
-    public label: string="",
+    public label: StringKey=NO_DESC,
 
     /** Object that specifies SocketType-independent options for this socket as well as SocketType-specific properties/data */
     options=<SocketOptions<St>>{},
@@ -647,7 +647,7 @@ export class InSocket<St extends SocketType=any> extends Socket<St> {
     node: Node,
     type: St,
 
-    public label: string="",
+    label: StringKey,
 
     options=<InSocketOptions<St>>{},
   ) {
@@ -795,7 +795,7 @@ export class OutSocket<St extends SocketType=any> extends Socket<St> {
     node: Node,
     type: St,
 
-    public label: string="",
+    label: StringKey,
 
     readonly outValue: (context: NodeEvalContext) => SocketValue<St>,
 
@@ -854,7 +854,7 @@ export class Field {
   value = 0;
 
   constructor(
-    public label: string="",
+    public label: StringKey=NO_DESC,
   ) {}
 }
 

diff --git a/src/models/Overload.ts b/src/models/Overload.ts
@@ -1,10 +1,11 @@
 import { WebglOutputs, WebglVariables } from "@/webgl-compute/WebglVariables";
 import { InSocket, Node, NodeDisplay, NodeEvalContext, OutSocket, SocketType, SocketType as St, Tree } from "./Node";
+import { NO_DESC, StringKey } from "@/strings";
 
 /** A collection of input/output sockets, as well as a function to compute outputs from the inputs' values */
 export class Overload<NodeType extends Node=any, InSockets extends InSocket[]=any, OutSockets extends OutSocket[]=any> {
   constructor(
-    readonly label: string,
+    readonly label: StringKey,
     readonly buildInSockets: (node: NodeType) => [...InSockets],
     readonly buildOutSockets: (node: NodeType, ins: InSockets) => [...OutSockets],
     readonly nodeDisplay: (ins: InSockets, outs: OutSockets, context: NodeEvalContext, node: NodeType) => NodeDisplay=() => { throw new Error("not implemented") },
@@ -21,7 +22,7 @@ export class OverloadGroup<Mode extends string, NodeType extends Node=any> {
   ) {}
 
   buildDropdown(node: NodeType, defaultMode: Mode, overloadManager: OverloadManager<Mode>) {
-    return new InSocket(node, SocketType.Dropdown, "", {
+    return new InSocket(node, SocketType.Dropdown, NO_DESC, {
       showSocket: false,
       options: [...this.modes].map(([mode, overload]) => (
         {value: mode, text: overload.label}

diff --git a/src/models/nodetypes/externals.ts b/src/models/nodetypes/externals.ts
@@ -1,31 +1,31 @@
-import {Tree, Node, Socket, SocketType as St, Link, NodeEvalContext, OutputDisplayType, SocketFlag, InSocket, OutSocket} from "../Node";
+import {Tree, Node, Socket, SocketType, Link, NodeEvalContext, OutputDisplayType, SocketFlag, InSocket, OutSocket} from "../Node";
 import * as cm from "../colormanagement";
 
 export namespace externals {
   export class DeviceTransformNode extends Node {
     static readonly TYPE = Symbol(this.name);
     static readonly LABEL = "Display buffer";
 
-    readonly colorSockets: Socket<St.VectorOrColor>[];
+    readonly colorSockets: Socket<SocketType.VectorOrColor>[];
 
     constructor() {
       super();
 
       this.ins.push(
         ...(this.colorSockets = [
-          new InSocket(this, Socket.Type.VectorOrColor, "Color"),
+          new InSocket(this, SocketType.VectorOrColor, "Color"),
         ]),
       );
 
       this.outs.push(
-        new OutSocket(this, Socket.Type.Unknown, "Color data", context => {}),
+        new OutSocket(this, SocketType.Unknown, "Color data", context => {}),
       );
 
       this.canMove = false;
     }
 
     output(context: NodeEvalContext): cm.Srgb {
-      const color = (context.socket! as Socket<St.VectorOrColor>).inValue(context);
+      const color = (context.socket! as Socket<SocketType.VectorOrColor>).inValue(context);
 
       return color && cm.Srgb.from(color);
       // return this.colorSockets.filter(socket => socket.hasLinks)
@@ -43,7 +43,7 @@ export namespace externals {
 
       if (!socket.isInput) return;
 
-      const newSocket = new InSocket(this, Socket.Type.VectorOrColor, "Color");
+      const newSocket = new InSocket(this, SocketType.VectorOrColor, "Color");
 
       this.ins.push(newSocket);
       this.colorSockets.push(newSocket);
@@ -67,11 +67,11 @@ export namespace externals {
       super();
 
       this.ins.push(
-        new InSocket(this, Socket.Type.Unknown, "Color data"),
+        new InSocket(this, SocketType.Unknown, "Color data"),
       );
 
       this.outs.push(
-        new OutSocket(this, Socket.Type.Unknown, "Screen image", context => {}),
+        new OutSocket(this, SocketType.Unknown, "Screen image", context => {}),
       );
 
       this.canMove = false;
@@ -87,11 +87,11 @@ export namespace externals {
       super();
 
       this.ins.push(
-        new InSocket(this, Socket.Type.Unknown, "Radiation"),
+        new InSocket(this, SocketType.Unknown, "Radiation"),
       );
 
       this.outs.push(
-        new OutSocket(this, Socket.Type.Unknown, "Radiation"),
+        new OutSocket(this, SocketType.Unknown, "Radiation"),
       );
 
       this.canMove = false;
@@ -107,7 +107,7 @@ export namespace externals {
       super();
 
       this.ins.push(
-        new InSocket(this, Socket.Type.Unknown, "Light"),
+        new InSocket(this, SocketType.Unknown, "Light"),
       );
 
       this.canMove = false;

diff --git a/src/models/nodetypes/images.ts b/src/models/nodetypes/images.ts
@@ -26,23 +26,23 @@ export namespace images {
       const {val} = GradientNode.outputSlots;
 
       this.ins.push(
-        (this.axisSocket = new InSocket(this, SocketType.Dropdown, "Axis", {
+        (this.axisSocket = new InSocket(this, SocketType.Dropdown, "label.socket.gradient.axis", {
           showSocket: false,
           options: [
-            {text: "X", value: "0"},
-            {text: "Y", value: "1"},
+            {text: "label.socket.x", value: "0"},
+            {text: "label.socket.y", value: "1"},
           ],
           defaultValue: "0",
           valueChangeRequiresShaderReload: true,
         })),
         ...(this.boundsSockets = [
-          new InSocket(this, SocketType.Float, "From", {
+          new InSocket(this, SocketType.Float, "label.socket.gradient.from", {
             sliderProps: {
               hasBounds: false,
             },
             webglOutputMapping: {[webglOuts.val]: from},
           }),
-          new InSocket(this, SocketType.Float, "To", {
+          new InSocket(this, SocketType.Float, "label.socket.gradient.to", {
             defaultValue: 1,
             sliderProps: {
               hasBounds: false,
@@ -53,7 +53,7 @@ export namespace images {
       );
 
       this.outs.push(
-        new OutSocket(this, SocketType.Float, "Values", context => {
+        new OutSocket(this, SocketType.Float, "label.socket.gradient.values", context => {
           const fac = context.coords?.[this.whichDimension] ?? 0;
           const value0 = this.boundsSockets[0].inValue(context);
           const value1 = this.boundsSockets[1].inValue(context);
@@ -91,12 +91,14 @@ export namespace images {
 
     private static readonly outputSlots = WebglSlot.outs("val", "texture", "width", "height");
 
+    width = 200;
+
     constructor() {
       super();
 
       this.ins.push(
-        (this.imageSocket = new InSocket(this, SocketType.Image, "File", {showSocket: false})),
-        (this.normalizeCoordinatesSocket = new InSocket(this, SocketType.Bool, "Normalize coordinates", {
+        (this.imageSocket = new InSocket(this, SocketType.Image, "label.socket.imageFile.file", {showSocket: false})),
+        (this.normalizeCoordinatesSocket = new InSocket(this, SocketType.Bool, "label.socket.normalizeCoordinates", {
           showSocket: false,
           defaultValue: true,
         })),
@@ -105,7 +107,7 @@ export namespace images {
       const {val, width, height} = ImageFileNode.outputSlots;
 
       this.outs.push(
-        new OutSocket(this, SocketType.Vector, "RGB", context => {
+        new OutSocket(this, SocketType.Vector, "label.rgb", context => {
           const imageData = this.imageSocket.inValue(context);
           if (!imageData) return [0, 0, 0] as Vec3;
 
@@ -121,8 +123,9 @@ export namespace images {
           webglOutputs: socket => () => ({
             [webglOuts.val]: WebglTemplate.source`${val}.rgb`,
           }),
+          socketDesc: "desc.socket.imageFileRgb",
         }),
-        new OutSocket(this, SocketType.Float, "Alpha", context => {
+        new OutSocket(this, SocketType.Float, "label.socket.alpha", context => {
           const imageData = this.imageSocket.inValue(context);
           if (!imageData) return 0;
 
@@ -135,18 +138,21 @@ export namespace images {
           webglOutputs: socket => () => ({
             [webglOuts.val]: WebglTemplate.source`${val}.a`,
           }),
+          socketDesc: "desc.socket.imageFileRgb",
         }),
-        new OutSocket(this, SocketType.Float, "Width", context => this.imageSocket.inValue(context)?.width ?? 0, {
+        new OutSocket(this, SocketType.Float, "label.socket.width", context => this.imageSocket.inValue(context)?.width ?? 0, {
           constant: true,
           webglOutputs: socket => () => ({
             [webglOuts.val]: WebglTemplate.slot(width),
           }),
+          socketDesc: "desc.socket.imageFileWidth",
         }),
-        new OutSocket(this, SocketType.Float, "Height", context => this.imageSocket.inValue(context)?.height ?? 0, {
+        new OutSocket(this, SocketType.Float, "label.socket.height", context => this.imageSocket.inValue(context)?.height ?? 0, {
           constant: true,
           webglOutputs: socket => () => ({
             [webglOuts.val]: WebglTemplate.slot(height),
           }),
+          socketDesc: "desc.socket.imageFileHeight",
         }),
       );
     }
@@ -233,18 +239,18 @@ uniform float ${height};`,
       const {val, color} = SampleNode.outputSlots;
 
       this.ins.push(
-        new InSocket(this, SocketType.Any, "Source", {
+        new InSocket(this, SocketType.Any, "label.socket.sample.source", {
           ...dynamicTyping.inSocketOptions,
           constant: true,
         }),
         ...(this.coordsSockets = [
-          new InSocket(this, SocketType.Float, "X", {webglOutputMapping: {[webglOuts.val]: x}}),
-          new InSocket(this, SocketType.Float, "Y", {webglOutputMapping: {[webglOuts.val]: y}}),
+          new InSocket(this, SocketType.Float, "label.socket.x", {webglOutputMapping: {[webglOuts.val]: x}}),
+          new InSocket(this, SocketType.Float, "label.socket.y", {webglOutputMapping: {[webglOuts.val]: y}}),
         ])
       );
 
       this.outs.push(
-        new OutSocket(this, SocketType.Any, "Output", context => {
+        new OutSocket(this, SocketType.Any, "label.socket.value", context => {
           return this.ins[0].inValue({
             coords: this.coordsSockets.map(socket => socket.inValue(context)) as [number, number],
           });