Merge branch 'master' into alyssa-starter

1 files changed, 12 insertions, 9 deletions

diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.tsx b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
index 0e4288574..cb0c4d188 100644
--- a/src/client/views/nodes/FontIconBox/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
@@ -266,28 +266,31 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() {
         // Colors
         const color = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color) as string;
         const items = DocListCast(this.dataDoc.data);
-        const multiDoc = this.Document;
-        const selectedItem = StrCast(items.find(itemDoc => ScriptCast(itemDoc.onClick).script.run({ this: itemDoc, value: undefined, _readOnly_: true }).result)?.toolType ?? StrCast(multiDoc.toolType));
-        console.log(selectedItem);
+        const selectedItems = items.filter(itemDoc => ScriptCast(itemDoc.onClick).script.run({ this: itemDoc, value: undefined, _readOnly_: true }).result).map(item => StrCast(item.toolType));
         return (
             <MultiToggle
                 tooltip={`Toggle ${tooltip}`}
                 type={Type.PRIM}
                 color={color}
-                onPointerDown={e => script && !toggleStatus && setupMoveUpEvents(this, e, returnFalse, emptyFunction, () => script.run({ this: multiDoc, value: undefined, _readOnly_: false }))}
+                multiSelect={true}
+                onPointerDown={e => script && !toggleStatus && setupMoveUpEvents(this, e, returnFalse, emptyFunction, () => script.run({ this: this.Document, value: undefined, _readOnly_: false }))}
                 isToggle={script ? true : false}
                 toggleStatus={toggleStatus}
                 //background={SnappingManager.userBackgroundColor}
                 label={this.label}
-                items={DocListCast(this.dataDoc.data).map(item => ({
+                items={items.map(item => ({
                     icon: <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={StrCast(item.icon) as IconProp} color={color} />,
                     tooltip: StrCast(item.toolTip),
                     val: StrCast(item.toolType),
                 }))}
-                selectedVal={selectedItem}
-                setSelectedVal={(val: string | number) => {
-                    const itemDoc = items.find(item => item.toolType === val);
-                    itemDoc && ScriptCast(itemDoc.onClick).script.run({ this: itemDoc, value: val, _readOnly_: false });
+                selectedItems={selectedItems}
+                onSelectionChange={(val: (string | number) | (string | number)[], added: boolean) => {
+                    // note: the multitoggle is telling us whether the selection was toggled on or off, but we ignore this since we know the state of all the buttons
+                    //   and control it through the selectedItems prop.  Therefore, the callback script will have to re-determine the toggle information.
+                    //   it would be better to pas the 'added' flag to the callback script, but our script generator from currentUserUtils makes it hard to define
+                    //   arbitrary parameter variables (but it could be done as a special case or with additional effort when creating the sript)
+                    const itemsChanged = items.filter(item => (val instanceof Array ? val.includes(item.toolType as string | number) : item.toolType === val));
+                    itemsChanged.forEach(itemDoc => ScriptCast(itemDoc.onClick).script.run({ this: itemDoc, _added_: added, itemDoc, _readOnly_: false }));
                 }}
             />
         );