feat(ui): wip canvas nodes migration 3

invokeai/frontend/web/src/features/canvas/hooks/useGetCanvasNodeType.ts

@@ -1,30 +0,0 @@
-import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/store/storeHooks';
-import { canvasSelector } from '../store/canvasSelectors';
-import { useMemo } from 'react';
-import { getCanvasNodeType } from '../util/getCanvasNodeType';
-
-const selector = createSelector(canvasSelector, (canvas) => {
-  const {
-    layerState: { objects },
-    boundingBoxCoordinates,
-    boundingBoxDimensions,
-    stageScale,
-    isMaskEnabled,
-  } = canvas;
-  return {
-    objects,
-    boundingBoxCoordinates,
-    boundingBoxDimensions,
-    stageScale,
-    isMaskEnabled,
-  };
-});
-
-export const useGetCanvasNodeType = () => {
-  const data = useAppSelector(selector);
-
-  const nodeType = useMemo(() => getCanvasNodeType(data), [data]);
-
-  return nodeType;
-};

invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts

@@ -29,6 +29,7 @@ import {
   isCanvasBaseImage,
   isCanvasMaskLine,
 } from './canvasTypes';
+import { invocationComplete } from 'services/events/actions';
 
 export const initialLayerState: CanvasLayerState = {
   objects: [],
@@ -289,7 +290,7 @@ export const canvasSlice = createSlice({
       state,
       action: PayloadAction<{
         boundingBox: IRect;
-        image: InvokeAI._Image;
+        image: InvokeAI.Image;
       }>
     ) => {
       const { boundingBox, image } = action.payload;
@@ -815,6 +816,11 @@ export const canvasSlice = createSlice({
       state.isTransformingBoundingBox = false;
     },
   },
+  extraReducers(builder) {
+    builder.addCase(invocationComplete, (state, action) => {
+      //
+    });
+  },
 });
 
 export const {

invokeai/frontend/web/src/features/canvas/store/canvasTypes.ts

@@ -162,4 +162,5 @@ export interface CanvasState {
   stageDimensions: Dimensions;
   stageScale: number;
   tool: CanvasTool;
+  pendingBoundingBox?: IRect;
 }

invokeai/frontend/web/src/features/canvas/util/getCanvasData.ts

@@ -16,7 +16,7 @@ import { masks } from 'dateformat';
 
 const moduleLog = log.child({ namespace: 'getCanvasDataURLs' });
 
-export const getCanvasDataURLs = (state: RootState) => {
+export const getCanvasData = (state: RootState) => {
   const canvasBaseLayer = getCanvasBaseLayer();
   const canvasStage = getCanvasStage();
 
@@ -85,7 +85,6 @@ export const getCanvasDataURLs = (state: RootState) => {
   offscreenContainer.remove();
 
   if (!maskImageData) {
-    moduleLog.error('Unable to get mask stage context');
     return;
   }
 

invokeai/frontend/web/src/features/canvas/util/getCanvasNodeType.ts

@@ -1,102 +0,0 @@
-import { RootState } from 'app/store/store';
-import { getCanvasBaseLayer, getCanvasStage } from './konvaInstanceProvider';
-import {
-  CanvasObject,
-  Dimensions,
-  isCanvasMaskLine,
-} from '../store/canvasTypes';
-import { buildMaskStage, getStageImageData } from './generateMask';
-import { log } from 'app/logging/useLogger';
-import {
-  areAnyPixelsBlack,
-  getImageDataTransparency,
-} from 'common/util/arrayBuffer';
-import { getNodeType } from 'features/nodes/util/getNodeType';
-import { Vector2d } from 'konva/lib/types';
-
-const moduleLog = log.child({ namespace: 'getCanvasNodeTypes' });
-
-export type GetCanvasNodeTypeArg = {
-  objects: CanvasObject[];
-  boundingBoxCoordinates: Vector2d;
-  boundingBoxDimensions: Dimensions;
-  stageScale: number;
-  isMaskEnabled: boolean;
-};
-
-export const getCanvasNodeType = (arg: GetCanvasNodeTypeArg) => {
-  const canvasBaseLayer = getCanvasBaseLayer();
-  const canvasStage = getCanvasStage();
-
-  if (!canvasBaseLayer || !canvasStage) {
-    moduleLog.error('Unable to find canvas / stage');
-    return;
-  }
-
-  const {
-    objects,
-    boundingBoxCoordinates,
-    boundingBoxDimensions,
-    stageScale,
-    isMaskEnabled,
-  } = arg;
-
-  const boundingBox = {
-    ...boundingBoxCoordinates,
-    ...boundingBoxDimensions,
-  };
-
-  const tempScale = canvasBaseLayer.scale();
-
-  canvasBaseLayer.scale({
-    x: 1 / stageScale,
-    y: 1 / stageScale,
-  });
-
-  const absPos = canvasBaseLayer.getAbsolutePosition();
-
-  const scaledBoundingBox = {
-    x: boundingBox.x + absPos.x,
-    y: boundingBox.y + absPos.y,
-    width: boundingBox.width,
-    height: boundingBox.height,
-  };
-
-  const { stage: maskStage, offscreenContainer } = buildMaskStage(
-    isMaskEnabled ? objects.filter(isCanvasMaskLine) : [],
-    scaledBoundingBox
-  );
-
-  const maskImageData = getStageImageData(maskStage, scaledBoundingBox);
-
-  offscreenContainer.remove();
-
-  if (!maskImageData) {
-    moduleLog.error('Unable to get mask stage context');
-    return;
-  }
-
-  const ctx = canvasBaseLayer.getContext();
-
-  const baseImageData = ctx.getImageData(
-    boundingBox.x + absPos.x,
-    boundingBox.y + absPos.y,
-    boundingBox.width,
-    boundingBox.height
-  );
-
-  canvasBaseLayer.scale(tempScale);
-
-  const {
-    isPartiallyTransparent: baseIsPartiallyTransparent,
-    isFullyTransparent: baseIsFullyTransparent,
-  } = getImageDataTransparency(baseImageData);
-
-  const doesMaskHaveBlackPixels = areAnyPixelsBlack(maskImageData);
-
-  return getNodeType(
-    baseIsPartiallyTransparent,
-    baseIsFullyTransparent,
-    doesMaskHaveBlackPixels
-  );
-};