add request color

Author: alisonjlai

src/client/initialize.ts

@@ -37,6 +37,11 @@ export function initialize<T = {}>(): PluginInstance<T> {
     emit('config', pluginConfig.config ?? {});
   });
 
+  on('wb:plugin:style:update', (styleColors: any) => {
+    pluginConfig.styleColors = styleColors;
+    emit('style', styleColors);
+  });
+
   // send initialize event
   void execPromise(
     'wb:plugin:init',
@@ -223,6 +228,33 @@ export function initialize<T = {}>(): PluginInstance<T> {
         void execPromise('wb:plugin:element:fetch-more', configId);
       },
     },
+
+    // Style management functions for hooks
+    style: {
+      /**
+       * Subscribe to style updates
+       * @param callback Function to call when style updates
+       * @returns Unsubscriber function
+       */
+      subscribe(callback: (style: any) => void) {
+        on('style', callback);
+        return () => off('style', callback);
+      },
+
+      /**
+       * Request current style from workbook
+       * @returns Promise with current style
+       */
+      async getStyle() {
+        try {
+          return await execPromise('wb:plugin:style:get');
+        } catch (error) {
+          // Return default style if request fails
+          return { backgroundColor: 'transparent' };
+        }
+      },
+    },
+
     destroy() {
       Object.keys(listeners).forEach(event => delete listeners[event]);
       window.removeEventListener('message', listener, false);

src/react/hooks.ts

@@ -249,13 +249,20 @@ export function useActionEffect(configId: string, effect: () => void) {
 }
 
 /**
- * React hook for accessing plugin style properties
- * @returns {PluginStyle} Style properties
+ * React hook for accessing plugin style with live updates via PostMessage
+ * @returns {PluginStyle | undefined} Style properties from the workbook if available
  */
-export function usePluginStyle(): PluginStyle {
-  const client = useConfig();
+export function usePluginStyle(): PluginStyle | undefined {
+  const client = usePlugin();
+  const [style, setStyle] = useState<PluginStyle | undefined>(undefined);
+
+  useEffect(() => {
+    const unsubscribe = client.style.subscribe(setStyle);
+    // Request initial style data on mount
+    void client.style.getStyle().then(setStyle);
+
+    return unsubscribe;
+  }, [client]);
 
-  return {
-    backgroundColor: client?.backgroundColor,
-  };
+  return style;
 }

src/types.ts

@@ -27,9 +27,19 @@ export interface PluginConfig<T> {
   id: string;
   config: T;
   screenshot: boolean;
+  // styleColors: PluginStyle;
   [key: string]: any;
 }
 
+// /**
+//  * Style colors available to plugins
+//  * @typedef {object} PluginStyle
+//  * @property {string} backgroundColor Background color set from workbook
+//  */
+// export interface PluginStyle {
+//   backgroundColor: string;
+// }
+
 /**
  * @typedef {object} WorkbookVariable
  * @property {string} name Name of control variable within workbook
@@ -196,6 +206,19 @@ export type CustomPluginConfigOptions =
 export interface PluginInstance<T = any> {
   sigmaEnv: 'author' | 'viewer' | 'explorer';
 
+  // /**
+  //  * Plugin style colors from the workbook
+  //  * @returns {PluginStyle | undefined} Style colors if available
+  //  */
+  // styleColors?: PluginStyle | undefined;
+
+  // /**
+  //  * Listen to style color changes
+  //  * @param {Function} callback Function to call when style colors change
+  //  * @returns {Function} Unsubscriber function
+  //  */
+  // onStyleChange(callback: (styleColors: PluginStyle) => void): () => void;
+
   config: {
     /**
      * Getter for entire Plugin Config
@@ -355,6 +378,24 @@ export interface PluginInstance<T = any> {
     fetchMoreElementData(configId: string): void;
   };
 
+  /**
+   * Style management for plugins
+   */
+  style: {
+    /**
+     * Subscribe to style updates
+     * @param callback Function to call when style updates
+     * @returns Unsubscriber function
+     */
+    subscribe(callback: (style: PluginStyle) => void): () => void;
+
+    /**
+     * Request current style from workbook
+     * @returns Promise with current style
+     */
+    getStyle(): Promise<PluginStyle>;
+  };
+
   /**
    * Destroys plugin instance and removes all subscribers
    */