fix layout-throttling in node-graph (#210)

* fix layout-throttling in node-graph

* remove commented code

* stowawy features

core/ts/recipe/Chef.ts

@@ -23,7 +23,7 @@ export class Chef {
       return;
     }
     //log.groupCollapsed('executing recipe...', recipe.$meta);
-    log('|-->...| executing recipe: ', recipe.$meta ?? '');
+    log('|-->...| executing recipe: ', recipe);
     const plan = new Parser(recipe);
     // `store` preparation
     await StoreCook.execute(runtime, arc, plan.stores);

pkg/Library/Designer/designer-layout.js

@@ -7,6 +7,9 @@
 import {Xen} from '../Dom/Xen/xen-async.js';
 import {DragDrop} from '../Dom/drag-drop.js';
 import {IconsCss} from '../Dom/Material/material-icon-font/icons.css.js';
+import {logFactory} from '../Core/utils.js';
+
+const log = logFactory(logFactory.flags['designer-layout'], 'designer-layout', '#8B8000', '#333');
 
 const {assign} = Object;
 
@@ -183,26 +186,32 @@ export class DesignerLayout extends DragDrop {
       this.dragKind = 'resize';
       this.dragFrom = from;
     }
+    //
     e.stopPropagation();
+    //
     this.rect = this.target && this.getRect(this.target);
+    this.dragRect = this.rect;
+    this.dragStarted = false;
+    //
     this.restyleSelection();
     this.updateOrders(this.target);
     // This is to select the node right away when pointer is down.
     this.firePosition(this.target);
-    this.dragRect = this.rect;
   }
   doMove(dx, dy) {
     if (this.dragRect && this.target) {
       // grid-snap
       const snap = rect => DragDrop.snap(rect, GRID_SIZE);
       // perform drag operation
+      this.dragStarted = true;
       const dragRect = this.doDrag(this.dragRect, dx, dy, this.dragKind, this.dragFrom);
       //const dragRect = this.doDrag(snap(this.dragRect), dx, dy, this.dragKind, this.dragFrom);
       // install output rectangle
       this.setBoxStyle(this.target, snap(dragRect));
       // let the boxer adapt to the target end state
       requestAnimationFrame(() => this.target && this.setBoxStyle(this.boxer, this.getRect(this.target)));
       this.value = dragRect;
+      log('fire update-box', this.target.id, this.value);
       this.fire('update-box');
     }
   }
@@ -229,9 +238,13 @@ export class DesignerLayout extends DragDrop {
   }
   doUp() {
     this.dragRect = null;
-    if (this.target) {
+    if (this.target && this.dragStarted) {
+      this.dragStarted = false;
+      log('drag terminated');
       setTimeout(() => {
+        log('fire update-box', this.target.id);
         this.fire('update-box');
+        log('firePosition', this.target.id);
         this.firePosition(this.target);
       }, 100);
     }

pkg/Library/Fields/FieldNodes.js

@@ -4,6 +4,8 @@
  * Use of this source code is governed by a BSD-style
  * license that can be found in the LICENSE file.
  */
+export * from './MultilineTextFieldNode.js';
+
 export const TextFieldNode = {
   $meta: {
     id: 'Text',

pkg/Library/Fields/MultilineTextField.js

@@ -0,0 +1,67 @@
+/**
+ * @license
+ * Copyright (c) 2022 Google LLC All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+({
+update(inputs, state) {
+  let {value, connectedValue, connectedValue1} = inputs;
+  if (connectedValue1 && connectedValue1 !== state.lastInputs?.connectedValue1) {
+    value = connectedValue1;
+  }
+  if (connectedValue && connectedValue !== state.lastInputs?.connectedValue) {
+    value = connectedValue;
+  }
+  state.lastInputs = {...inputs};
+  state.value = value;
+  return {value};
+},
+render({label}, {value}) {
+  return {
+    label: label ?? '',
+    value: value ?? ''
+  };
+},
+onLabelChange({eventlet: {value}}) {
+  return {label: value};
+},
+onFieldChange({eventlet: {value}}, state) {
+  state.value = value;
+  return {value};
+},
+template: html`
+<style>
+  :host {
+    padding: 0 6px;
+    display: flex;
+  }
+  [label] {
+    background: inherit;
+    font-weight: bold;
+    font-size: 75%;
+    border: none;
+    text-align: right;
+    width: 8em;
+  }
+  [field] {
+    padding: 6px 9px;
+    border-radius: 4px;
+    border: 1px solid #88888888;
+    font-size: 1em;
+    font-family: 'Goole Sans', sans-serif;
+    width: 100%;
+    height: 100%;
+  }
+  [delim] {
+    padding-right: 12px;
+  }
+</style>
+
+<div flex bar>
+  <input label value="{{label}}" on-change="onLabelChange">
+  <span delim>:</span>
+  <textarea field value="{{value}}" on-change="onFieldChange"></textarea>
+</div>
+`
+});

pkg/Library/Fields/MultilineTextFieldNode.js

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright (c) 2022 Google LLC All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+export const MultilineTextFieldNode = {
+  $meta: {
+    id: 'Text',
+    category: 'Field'
+  },
+  $stores: {
+    label: {
+      $type: 'String',
+      $value: 'text field'
+    },
+    value: {
+      $type: 'String',
+      $value: 'value'
+    }
+  },
+  field: {
+    $kind: '$library/Fields/MultilineTextField',
+    $inputs: ['label', 'value'],
+    $outputs: ['label', 'value']
+  }
+};

pkg/Library/Fields/SelectField.js

@@ -31,6 +31,7 @@ template: html`
     font-size: 75%;
     border: none;
     text-align: right;
+    width: 8em;
   }
   [delim] {
     padding-right: 12px;

pkg/Library/Fields/TextField.js

@@ -27,14 +27,14 @@ template: html`
   :host {
     padding: 0 6px;
     height: 2em;
-    Xwidth: 24em;
   }
   [label] {
     background: inherit;
     font-weight: bold;
     font-size: 75%;
     border: none;
     text-align: right;
+    width: 8em;
   }
   [field] {
     padding: 6px 9px;

pkg/Library/GraphsNodes/ListenerNode.js

@@ -0,0 +1,51 @@
+/**
+ * @license
+ * Copyright (c) 2022 Google LLC All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+export const ListenerNode = {
+  $meta: {
+    id: 'ListenerNode',
+    displayName: 'Listener',
+    category: 'Media'
+  },
+  $stores: {
+    mediaDeviceState: {
+      $type: 'MedaDeviceState',
+      $value: {
+        isMicEnabled: false
+      },
+      noinspect: true
+    },
+    mediaDevices: {
+      $type: '[JSON]',
+      noinspect: true
+    },
+    transcript: {
+      $type: 'String',
+      $value: '',
+      noinspect: true,
+      nomonitor: true
+    }
+  },
+  SpeechRecognizer: {
+    $kind: '$library/NewMedia/SpeechRecognizer',
+    $inputs: ['mediaDeviceState'],
+    $outputs: ['transcript', 'mediaDeviceState'],
+    $slots: {
+      device: {
+        deviceUx: {
+          $kind: 'Media/DeviceUx',
+          $inputs: ['mediaDevices', 'mediaDeviceState'],
+          $outputs: ['mediaDeviceState']
+        },
+        defaultStream: {
+          $kind: 'Media/MediaStream',
+          $inputs: ['mediaDeviceState'],
+          $outputs: ['mediaDevices']
+        }
+      }
+    }
+  }
+};

pkg/Library/GraphsNodes/MultilineTextFieldNode.js

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright (c) 2022 Google LLC All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+export const MultilineTextFieldNode = {
+  $meta: {
+    id: 'MultilineTextFieldNode',
+    displayName: 'Multiline Text Field',
+    category: 'Fields'
+  },
+  $stores: {
+    label: {
+      $type: 'String',
+      $value: 'text field'
+    },
+    value: {
+      $type: 'String',
+      $value: 'value'
+    },
+    connectedValue: {
+      $type: 'String',
+      connection: true
+    },
+    outputValue: {
+      $type: 'String',
+      $value: ''
+    }
+  },
+  field: {
+    $kind: '$library/Fields/MultilineTextField',
+    $inputs: ['label', 'value', 'connectedValue'],
+    $outputs: ['label', {value: 'outputValue'}]
+  }
+};

pkg/Library/GraphsNodes/NodeTypes.js

@@ -11,13 +11,15 @@ import {DataNode, PersistedDataNode} from './DataNode.js';
 import {DisplayNode} from './DisplayNode.js';
 import {ImageNode} from './ImageNode.js';
 import {CameraNode} from './CameraNode.js';
+import {ListenerNode} from './ListenerNode.js';
 import {TextFieldNode} from './TextFieldNode.js';
+import {MultilineTextFieldNode} from './MultilineTextFieldNode.js';
 import {SelectFieldNode} from './SelectFieldNode.js';
 import {LibrarianNode} from '../Graphs/LibrarianNode.js';
 import {GraphRunnerNode} from '../Graphs/GraphRunnerNode.js';
 import {ArcNode} from '../App/ArcNode.js';
 
-import {AudioNode, ImageCompositeNode} from '../NewMedia/Nodes.js';
+import {ImageCompositeNode} from '../NewMedia/Nodes.js';
 
 export const NodeTypes = {
   JSONataNode,
@@ -26,10 +28,11 @@ export const NodeTypes = {
   DisplayNode,
   ImageNode,
   CameraNode,
-  AudioNode,
+  ListenerNode,
   ImageCompositeNode,
   ArcNode,
   TextFieldNode,
+  MultilineTextFieldNode,
   SelectFieldNode,
   LibrarianNode,
   GraphRunnerNode,

pkg/Library/Media/DeviceUx.js

@@ -10,6 +10,8 @@ shouldRender({mediaDevices}) {
 },
 render({mediaDevices, mediaDeviceState}) {
   const {isCameraEnabled, isMicEnabled, isAudioEnabled, videoDeviceId, audioInputDeviceId, audioOutputDeviceId} = mediaDeviceState;
+  const showCamera = String(isCameraEnabled !== undefined);
+  const showSpeaker = String(isAudioEnabled !== undefined);
   const cameraEnabled = Boolean(isCameraEnabled);
   const micEnabled = Boolean(isMicEnabled);
   const audioEnabled = Boolean(isAudioEnabled);
@@ -21,10 +23,12 @@ render({mediaDevices, mediaDeviceState}) {
     videoInputs,
     audioInputs,
     audioOutputs,
+    showCamera,
     cameraEnabled,
     cameraLigature: cameraEnabled ? `videocam` : `videocam_off`,
     micEnabled,
     micLigature: isMicEnabled ? `mic` : `mic_off`,
+    showSpeaker,
     audioEnabled,
     audioLigature: audioEnabled ? `volume_up` : `volume_off`,
   };
@@ -91,12 +95,12 @@ template: html`
 </style>
 
 <div scrub toolbar>
-  <icon on-click="onCameraClick">{{cameraLigature}}</icon>
-  <select repeat="option_t" on-change="onSelectChange" key="videoDeviceId">{{videoInputs}}</select>
+  <icon show$="{{showCamera}}" on-click="onCameraClick">{{cameraLigature}}</icon>
+  <select show$="{{showCamera}}" repeat="option_t" on-change="onSelectChange" key="videoDeviceId">{{videoInputs}}</select>
   <icon on-click="onMicClick">{{micLigature}}</icon>
   <select repeat="option_t" on-change="onSelectChange" key="audioInputDeviceId">{{audioInputs}}</select>
-  <icon on-click="onAudioClick">{{audioLigature}}</icon>
-  <select repeat="option_t" on-change="onSelectChange" key="audioOutputDeviceId">{{audioOutputs}}</select>
+  <icon show$="{{showSpeaker}}" on-click="onAudioClick">{{audioLigature}}</icon>
+  <select show$="{{showSpeaker}}" repeat="option_t" on-change="onSelectChange" key="audioOutputDeviceId">{{audioOutputs}}</select>
   <span flex></span>
 </div>
 

pkg/Library/NewMedia/CameraNode.js

@@ -47,7 +47,7 @@ export const CameraNode = {
     $outputs: ['stream', 'frame'],
     $slots: {
       device: {
-        deviceUx: DeviceUxRecipe.deviceUx,
+        deviceUx: DeviceUxRecipe.deviceUx
       },
       capture: {
         imageCapture: {