@woosh/meep-engine 2.33.1 → 2.33.5

package/view/elements/progress/segmented/SegmentedResourceBarView.js

@@ -11,12 +11,12 @@ import ListView from "../../../common/ListView.js";
 export class SegmentedResourceBarView extends View {
     /**
      *
-     * @param {Vector1|ObservedInteger} value
-     * @param {Vector1|ObservedInteger} [max=1]
+     * @param {(Vector1|ObservedInteger)[]} value
+     * @param {Vector1|ObservedInteger|ReactiveExpression} [max=1]
      * @param {string[]} [classList]
      */
     constructor({
-                    value,
+                    values,
                     max = Vector1.one,
                     classList = []
                 }) {
@@ -24,10 +24,10 @@ export class SegmentedResourceBarView extends View {
 
         /**
          *
-         * @type {Vector1|ObservedInteger}
+         * @type {(Vector1|ObservedInteger)[]}
          * @private
          */
-        this.__value_current = value;
+        this.__values_current = values;
 
         /**
          *
@@ -52,9 +52,18 @@ export class SegmentedResourceBarView extends View {
 
 
         // build structure
-        this.__v__fill = new EmptyView({ classList: ['fill'] });
+        this.__v__fill = new EmptyView({ classList: ['fill-container'] });
         this.addChild(this.__v__fill);
 
+        this.__value_fills = [];
+
+        for (let i = 0; i < this.__values_current.length; i++) {
+            const v_value = new EmptyView({ classList: ['fill', `value-${i}`] });
+
+            this.__v__fill.addChild(v_value);
+            this.__value_fills[i] = v_value;
+        }
+
         this.__v__ghost = new EmptyView({ classList: ['ghost'] });
         this.addChild(this.__v__ghost);
 
@@ -62,7 +71,7 @@ export class SegmentedResourceBarView extends View {
         this.__v_segments = new CanvasView();
         this.__v_segments.addClass('notch-overlay');
 
-        this.__v__fill.addChild(this.__v_segments);
+        this.addChild(this.__v_segments);
 
 
         /**
@@ -74,12 +83,13 @@ export class SegmentedResourceBarView extends View {
             elementFactory: (interval) => {
                 const v = new EmptyView({ classList: ['highlight'] });
 
-                const valueCurrent = this.__value_current;
                 const valueMax = this.__value_max;
 
                 const update = () => {
-                    const v0 = interval.min / valueMax;
-                    const span = (interval.max - interval.min) / valueMax;
+                    const m = valueMax.getValue();
+
+                    const v0 = interval.min / m;
+                    const span = (interval.max - interval.min) / m;
 
                     const style = v.el.style;
 
@@ -89,7 +99,15 @@ export class SegmentedResourceBarView extends View {
                 };
 
                 v.bindSignal(interval.onChanged, update);
-                v.bindSignal(valueCurrent.onChanged, update);
+
+                const valuesCurrent = this.__values_current;
+
+                for (let i = 0; i < valuesCurrent.length; i++) {
+                    const valueCurrent = valuesCurrent[i];
+
+                    v.bindSignal(valueCurrent.onChanged, update);
+                }
+
                 v.bindSignal(valueMax.onChanged, update);
 
                 v.on.linked.add(update);
@@ -101,8 +119,10 @@ export class SegmentedResourceBarView extends View {
         this.addChild(this.highlightViews);
 
         // subscribe to changes
+        for (let i = 0; i < this.__values_current.length; i++) {
+            this.bindSignal(this.__values_current[i].onChanged, this.updateFill, this);
+        }
 
-        this.bindSignal(this.__value_current.onChanged, this.updateFill, this);
         this.bindSignal(this.__value_max.onChanged, this.handleMaxChange, this);
 
         /**
@@ -252,14 +272,29 @@ export class SegmentedResourceBarView extends View {
     }
 
     updateFill() {
-        const c = this.__value_current.getValue();
         const m = this.__value_max.getValue();
 
-        const f = clamp(c / m, 0, 1);
+        let total_current = 0;
+
+        for (let i = 0; i < this.__values_current.length; i++) {
+            const v = this.__values_current[i];
+
+            const value = v.getValue();
+
+            total_current += value;
+
+            const v_fraction = clamp(v / m, 0, 1);
+
+            const fill_view = this.__value_fills[i];
+
+            fill_view.el.style.width = `${v_fraction * 100}%`;
+        }
+
+
+        const f = clamp(total_current / m, 0, 1);
 
         const width = `${f * 100}%`;
 
-        this.__v__fill.el.style.width = width
         this.__v__ghost.el.style.width = width;
     }
 }