added key events to canvas

src/canvas/activeWidgetContext.js

@@ -0,0 +1,61 @@
+import React, { createContext, Component, useContext, useState, createRef, useMemo } from 'react'
+
+
+
+// NOTE: using this context provider causes many re-rendering when the canvas is panned the toolbar updates unnecessarily
+
+
+// Create the Context
+export const ActiveWidgetContext = createContext()
+
+// Create the Provider component
+export class ActiveWidgetProvider extends Component {
+    state = {
+        activeWidgetId: null,
+        activeWidgetAttrs: {}
+    }
+
+    updateActiveWidget = (widget) => {
+        this.setState({ activeWidgetId: widget })
+    }
+
+    updateToolAttrs = (widgetAttrs) => {
+        this.setState({activeWidgetAttrs: widgetAttrs})
+    }
+
+    render() {
+        return (
+            <ActiveWidgetContext.Provider
+                value={{ ...this.state, updateActiveWidget: this.updateActiveWidget, updateToolAttrs: this.updateToolAttrs }}
+            >
+                {this.props.children}
+            </ActiveWidgetContext.Provider>
+        );
+    }
+}
+
+// Custom hook for function components
+export const useActiveWidget = () => {
+    const context = useContext(ActiveWidgetContext)
+    if (context === undefined) {
+        throw new Error('useActiveWidget must be used within an ActiveWidgetProvider')
+    }
+    return useMemo(() => context, [context.activeWidgetId, context.activeWidgetAttrs, context.updateToolAttrs, context.updateActiveWidget])
+}
+
+// Higher-Order Component for class-based components
+export const withActiveWidget = (WrappedComponent) => {
+    return class extends Component {
+
+        render() {
+            return (
+                <ActiveWidgetContext.Consumer>
+                    {context => <WrappedComponent {...this.props} {...context} />}
+                </ActiveWidgetContext.Consumer>
+            )
+        }
+    }
+}
+
+
+