update use object keys as key instead of display name

kermanx · kermanx · commit 0eda14504bd4 · 2023-11-22T15:42:28.000+08:00
diff --git a/packages/northstar/src/blocks/component/block.ts b/packages/northstar/src/blocks/component/block.ts
@@ -78,11 +78,11 @@ export class ComponentBlock extends RectBlock {
   }
 
   socketUpdater(useSocket: UseSocket): void {
-    const contents = Object.values(this.info.contents);
-    const events = Object.values(this.info.events);
-    const inputs = Object.values(this.info.inputs);
-    const outputs = Object.values(this.info.outputs);
-    const methods = Object.values(this.info.methods);
+    const contents = Object.entries(this.info.contents);
+    const events = Object.entries(this.info.events);
+    const inputs = Object.entries(this.info.inputs);
+    const outputs = Object.entries(this.info.outputs);
+    const methods = Object.entries(this.info.methods);
 
     useSocket("parent", SingleInSocket, {
       type: "L",
@@ -102,73 +102,81 @@ export class ComponentBlock extends RectBlock {
       }
     }
 
-    const shouldHideSocket = (socketInfo: {
-      mode: string;
-      displayName: string;
-    }) => {
-      const prop = this.props[`[${socketInfo.displayName}]`];
+    const shouldHideSocket = (
+      k: string,
+      socketInfo: {
+        mode: string;
+        displayName: string;
+      },
+    ) => {
+      const prop = this.props[`[${k}]`];
       return (
         (socketInfo.mode === "as-hidden-socket" && prop !== true) ||
         (socketInfo.mode === "as-hidable-socket" && prop === false) ||
         (socketInfo.mode === "as-primary-and-socket" && this.primaryFilled)
       );
     };
 
-    for (const content of contents) {
-      if (content.mode === "as-primary" || shouldHideSocket(content)) continue;
-      const socket = useSocket(content.displayName, MultiOutSocket, {
+    for (const [k, v] of contents) {
+      if (v.mode === "as-primary" || shouldHideSocket(k, v)) continue;
+      const socket = useSocket(k, MultiOutSocket, {
+        label: v.displayName,
         type: "L",
         path: PATH_OUT_RECT,
         hideLabel: contents.length === 1,
-        direction: content.position ?? Direction.RIGHT,
+        direction: v.position ?? Direction.RIGHT,
       });
 
-      if (content.mode === "as-primary-and-socket") {
+      if (v.mode === "as-primary-and-socket") {
         this.getPrimaryDisabled = () => {
           return socket.allConnectedLines.length > 0;
         };
       }
     }
 
-    for (const event of events) {
-      if (shouldHideSocket(event)) continue;
-      useSocket(event.displayName, SingleOutSocket, {
+    for (const [k, v] of events) {
+      if (shouldHideSocket(k, v)) continue;
+      useSocket(k, SingleOutSocket, {
+        label: v.displayName,
         type: "E",
         path: PATH_OUT_TRIANGLE,
-        direction: event.position ?? Direction.BOTTOM,
+        direction: v.position ?? Direction.BOTTOM,
       });
     }
 
-    for (const input of inputs) {
-      if (input.mode === "as-primary" || shouldHideSocket(input)) continue;
-      const socket = useSocket(input.displayName, SingleInSocket, {
+    for (const [k, v] of inputs) {
+      if (v.mode === "as-primary" || shouldHideSocket(k, v)) continue;
+      const socket = useSocket(k, SingleInSocket, {
+        label: v.displayName,
         type: "D",
         path: PATH_IN_ELIPSE,
-        direction: input.position ?? Direction.UP,
+        direction: v.position ?? Direction.UP,
       });
 
-      if (input.mode === "as-primary-and-socket") {
+      if (v.mode === "as-primary-and-socket") {
         this.getPrimaryDisabled = () => {
           return socket.allConnectedLines.length > 0;
         };
       }
     }
 
-    for (const output of outputs) {
-      if (shouldHideSocket(output)) continue;
-      useSocket(output.displayName, MultiOutSocket, {
+    for (const [k, v] of outputs) {
+      if (shouldHideSocket(k, v)) continue;
+      useSocket(k, MultiOutSocket, {
+        label: v.displayName,
         type: "D",
         path: PATH_OUT_ELIPSE,
-        direction: output.position ?? Direction.BOTTOM,
+        direction: v.position ?? Direction.BOTTOM,
       });
     }
 
-    for (const method of methods) {
-      if (shouldHideSocket(method)) continue;
-      useSocket(method.displayName, MultiInSocket, {
+    for (const [k, v] of methods) {
+      if (shouldHideSocket(k, v)) continue;
+      useSocket(k, MultiInSocket, {
+        label: v.displayName,
         type: "E",
         path: PATH_IN_TRIANGLE,
-        direction: method.position ?? Direction.TOP,
+        direction: v.position ?? Direction.TOP,
       });
     }
   }
diff --git a/packages/northstar/src/blocks/component/getProps.ts b/packages/northstar/src/blocks/component/getProps.ts
@@ -9,7 +9,8 @@ export function getProps(block: ComponentBlock): PropsData {
   const primaryInputInfo = block.primaryInputInfo;
   if (primaryInputInfo) {
     slotPos.push({
-      name: "slots pos",
+      key: "slots-pos",
+      displayName: "slots pos",
       type: "dropdown",
       options: ["TOP", "BOTTOM"],
       getVal: () => {
@@ -23,44 +24,44 @@ export function getProps(block: ComponentBlock): PropsData {
 
   return [
     ...slotPos,
-    ...Object.values(info.props).map(
-      (v) =>
+    ...Object.entries(info.props).map(
+      ([k, v]) =>
         ({
           ...v,
+          key: k,
           getVal:
             v.type === "readonly"
               ? () => v.value
               : () => {
-                  return block.props[v.name] ?? v.defaultVal;
+                  return block.props[k] ?? v.defaultVal;
                 },
           setVal: (val: any) => {
-            block.props[v.name] = val;
+            block.props[k] = val;
           },
         }) as PropData,
     ),
-    ...Object.values({
+    ...Object.entries({
       ...info.contents,
       ...info.inputs,
       ...info.outputs,
       ...info.events,
       ...info.methods,
     })
       .filter(
-        (v) => v.mode === "as-hidable-socket" || v.mode === "as-hidden-socket",
+        ([k, v]) =>
+          v.mode === "as-hidable-socket" || v.mode === "as-hidden-socket",
       )
       .map(
-        (v) =>
+        ([k, v]) =>
           ({
-            name: `[${v.displayName}]`,
+            key: `[${k}]`,
+            displayName: `[${v.displayName}]`,
             type: "switch",
             getVal: () => {
-              return (
-                block.props[`[${v.displayName}]`] ??
-                v.mode === "as-hidable-socket"
-              );
+              return block.props[`[${k}]`] ?? v.mode === "as-hidable-socket";
             },
             setVal: (val: any) => {
-              block.props[`[${v.displayName}]`] = val;
+              block.props[`[${k}]`] = val;
             },
           }) as PropData,
       ),
diff --git a/packages/northstar/src/blocks/component/toBlockOutput.ts b/packages/northstar/src/blocks/component/toBlockOutput.ts
@@ -16,63 +16,62 @@ import { ValidatorBlock } from "../special/validator";
 import { ComponentBlock } from "./block";
 
 export function toBlockOutput(block: ComponentBlock) {
-  const blockContents = Object.values(block.info.contents);
-  const blockEvents = Object.values(block.info.events);
-  const blockInputs = Object.values(block.info.inputs);
-  const blockProps = Object.values(block.info.props);
-  const blockPlugins = Object.values(block.info.plugins);
+  const blockContents = Object.entries(block.info.contents);
+  const blockEvents = Object.entries(block.info.events);
+  const blockInputs = Object.entries(block.info.inputs);
+  const blockProps = Object.entries(block.info.props);
+  const blockPlugins = Object.entries(block.info.plugins);
 
   const callbacks = {} as ComponentBlockCallbacks;
-  for (const event of blockEvents) {
-    callbacks[event.displayName] = singleOutSocketToOutput(
-      block.getSocketByName(event.displayName) as SingleOutSocket,
+  for (const [k, v] of blockEvents) {
+    callbacks[k] = singleOutSocketToOutput(
+      block.getSocketByName(k) as SingleOutSocket,
     );
   }
 
   const props = {} as ComponentBlockProps;
-  for (const v of blockProps) {
+  for (const [k, v] of blockProps) {
     if (v.type !== "readonly") {
-      props[v.name] = block.props[v.name] ?? v.defaultVal;
+      props[k] = block.props[k] ?? v.defaultVal;
     }
   }
-  for (const input of blockInputs) {
+  for (const [k, v] of blockInputs) {
     if (
-      input.mode === "as-primary" ||
-      (input.mode === "as-primary-and-socket" && block.primaryFilled)
+      v.mode === "as-primary" ||
+      (v.mode === "as-primary-and-socket" && block.primaryFilled)
     )
       continue;
-    const socket = block.getSocketByName(input.displayName)
-      ?.allConnectedLines[0]?.a;
-    props[input.displayName] = {
+    const socket = block.getSocketByName(k)?.allConnectedLines[0]?.a;
+    props[k] = {
       blockId: socket?.block.id ?? NaN,
       socketName: socket?.label ?? "",
     };
   }
 
   let children = {} as ComponentBlockChildren;
-  for (const content of blockContents) {
+  for (const [k, v] of blockContents) {
     if (
-      content.mode === "as-primary" ||
-      (content.mode === "as-primary-and-socket" && block.primaryFilled)
+      v.mode === "as-primary" ||
+      (v.mode === "as-primary-and-socket" && block.primaryFilled)
     )
       continue;
-    children[content.displayName] =
+    children[k] =
       block
-        .getSocketByName(content.displayName)
+        .getSocketByName(k)
         ?.allConnectedLines.map((l) => (l.b as Socket).block)
         .sort((a, b) => a.boardY - b.boardY)
         .map((b) => b.id) ?? [];
   }
 
   let plugins = {} as ComponentBlockPlugins;
-  for (const plugin of blockPlugins) {
-    if (plugin.kind !== "input-plugin") continue;
+  for (const [k, v] of blockPlugins) {
+    if (v.kind !== "input-plugin") continue;
 
     const validators: ValidatorBlock[] = [];
     let currentPluginBlock: Block | undefined = block;
     while (true) {
       currentPluginBlock = currentPluginBlock.dockedByBlocks.find(
-        ([d, b]) => d === plugin.direction,
+        ([d, b]) => d === v.direction,
       )?.[1];
       if (!currentPluginBlock) {
         break;
@@ -84,7 +83,7 @@ export function toBlockOutput(block: ComponentBlock) {
       }
     }
 
-    plugins[plugin.displayName] = `$ => {
+    plugins[k] = `$ => {
       ${validators
         .map((v) => {
           if (v.inputValue.value.length === 0)
diff --git a/packages/northstar/src/blocks/special/FuncBlockBase.r.ts b/packages/northstar/src/blocks/special/FuncBlockBase.r.ts
@@ -189,7 +189,8 @@ export abstract class FuncBlockBase extends RectBlock implements SpecialBlock {
   getProps(): PropsData {
     return [
       {
-        name: "slots pos",
+        key: "slots-pos",
+        displayName: "slots pos",
         type: "dropdown",
         options: ["TOP", "BOTTOM"],
         getVal: () => {
@@ -200,7 +201,8 @@ export abstract class FuncBlockBase extends RectBlock implements SpecialBlock {
         },
       } satisfies PropData,
       {
-        name: "output pos",
+        key: "output-pos",
+        displayName: "output pos",
         type: "dropdown",
         options: ["BOTTOM", "TOP"],
         getVal: () => {
diff --git a/packages/northstar/src/blocks/special/do.r.ts b/packages/northstar/src/blocks/special/do.r.ts
@@ -65,7 +65,8 @@ export class DoBlock extends RectBlock {
   getProps(): PropsData {
     return [
       {
-        name: "number",
+        key: "number",
+        displayName: "number",
         type: "number",
         min: 2,
         max: 5,
@@ -77,7 +78,8 @@ export class DoBlock extends RectBlock {
         },
       },
       {
-        name: "rotate",
+        key: "rotate",
+        displayName: "rotate",
         type: "switch",
         getVal: () => {
           return this.rotate;
diff --git a/packages/northstar/src/blocks/special/if.r.ts b/packages/northstar/src/blocks/special/if.r.ts
@@ -79,7 +79,8 @@ export class IfElseBlock extends RectBlock implements SpecialBlock {
   getProps(): PropsData {
     return [
       {
-        name: "[else]",
+        key: "[else]",
+        displayName: "[else]",
         type: "switch",
         getVal: () => {
           return this.hasElse;
diff --git a/packages/northstar/src/blocks/special/imp.ts b/packages/northstar/src/blocks/special/imp.ts
@@ -70,7 +70,8 @@ export class ImpBlock extends FuncBlockBase {
   getProps(): PropsData {
     return [
       {
-        name: "[then]",
+        key: "[then]",
+        displayName: "[then]",
         type: "switch",
         getVal: () => {
           return this.hasThen;
diff --git a/packages/northstar/src/utils/props.ts b/packages/northstar/src/utils/props.ts
@@ -1,7 +1,8 @@
 import { currentGraph } from "../store";
 
 export interface PropDataBase {
-  name: string;
+  key: string;
+  displayName: string;
 }
 
 export interface TextPropData extends PropDataBase {
@@ -49,7 +50,7 @@ export function mergeProps([props0, ...propsRest]: PropsData[]) {
   for (const v of props0) {
     if (
       propsRest.every((ps) =>
-        ps.some((p) => p.name === v.name && p.type === v.type),
+        ps.some((p) => p.displayName === v.displayName && p.type === v.type),
       )
     ) {
       mergedProps.push(v);
diff --git a/packages/northstar/src/views/properties.r.ts b/packages/northstar/src/views/properties.r.ts
@@ -5,7 +5,7 @@ import { getSelectedProps } from "../utils/props";
 
 export default view(_ => {
   const props = getSelectedProps();
-  _.for(props, "name", p => {
+  _.for(props, "key", p => {
     const r = ref() as MainElRef;
     _.$cls`col-span-1 flex justify-center items-center border-b border-gray-500 h-8`;
     _._div(
@@ -14,7 +14,7 @@ export default view(_ => {
           (r.current?.$mainEl?.firstChild as HTMLElement | null | undefined)?.focus();
         },
       },
-      p.name,
+      p.displayName,
     );
     _.$cls`col-span-2 h-8`;
     if (p.type === "text") {
diff --git a/packages/runtime/src/types/prop.ts b/packages/runtime/src/types/prop.ts
