feat(ui): add log debug button

invokeai/frontend/web/public/locales/en.json

@@ -1726,6 +1726,7 @@
         "hidingType": "Hiding {{type}}",
         "showingType": "Showing {{type}}",
         "dynamicGrid": "Dynamic Grid",
+        "logDebugInfo": "Log Debug Info",
         "fill": {
             "fillStyle": "Fill Style",
             "solid": "Solid",

invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsLogDebugInfo.tsx

@@ -0,0 +1,19 @@
+import { Button } from '@invoke-ai/ui-library';
+import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const CanvasSettingsLogDebugInfoButton = memo(() => {
+  const { t } = useTranslation();
+  const canvasManager = useCanvasManager();
+  const onClick = useCallback(() => {
+    canvasManager.logDebugInfo();
+  }, [canvasManager]);
+  return (
+    <Button onClick={onClick} size="sm">
+      {t('controlLayers.logDebugInfo')}
+    </Button>
+  );
+});
+
+CanvasSettingsLogDebugInfoButton.displayName = 'CanvasSettingsLogDebugInfoButton';

invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsPopover.tsx

@@ -14,6 +14,7 @@ import { CanvasSettingsClearCachesButton } from 'features/controlLayers/componen
 import { CanvasSettingsClipToBboxCheckbox } from 'features/controlLayers/components/Settings/CanvasSettingsClipToBboxCheckbox';
 import { CanvasSettingsDynamicGridSwitch } from 'features/controlLayers/components/Settings/CanvasSettingsDynamicGridSwitch';
 import { CanvasSettingsInvertScrollCheckbox } from 'features/controlLayers/components/Settings/CanvasSettingsInvertScrollCheckbox';
+import { CanvasSettingsLogDebugInfoButton } from 'features/controlLayers/components/Settings/CanvasSettingsLogDebugInfo';
 import { CanvasSettingsRecalculateRectsButton } from 'features/controlLayers/components/Settings/CanvasSettingsRecalculateRectsButton';
 import { CanvasSettingsResetButton } from 'features/controlLayers/components/Settings/CanvasSettingsResetButton';
 import { memo } from 'react';
@@ -58,6 +59,7 @@ const DebugSettings = () => {
       <Divider />
       <CanvasSettingsClearCachesButton />
       <CanvasSettingsRecalculateRectsButton />
+      <CanvasSettingsLogDebugInfoButton />
     </>
   );
 };

invokeai/frontend/web/src/features/controlLayers/konva/CanvasManager.ts

@@ -152,10 +152,10 @@ export class CanvasManager {
 
   logDebugInfo() {
     // eslint-disable-next-line no-console
-    console.log(this);
+    console.log('Canvas manager', this);
     for (const adapter of this.adapters.getAll()) {
       // eslint-disable-next-line no-console
-      console.log(adapter);
+      console.log(adapter.id, adapter);
     }
   }