feat(ui): display message when no layers are added

Author: psychedelicious

invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx

@@ -55,6 +55,7 @@ const useStageRenderer = (
   const selectedLayerIdColor = useAppSelector(selectSelectedLayerColor);
   const selectedLayerType = useAppSelector(selectSelectedLayerType);
   const layerIds = useMemo(() => state.layers.map((l) => l.id), [state.layers]);
+  const layerCount = useMemo(() => state.layers.length, [state.layers]);
   const renderers = useMemo(() => (asPreview ? debouncedRenderers : normalRenderers), [asPreview]);
   const dpr = useDevicePixelRatio({ round: false });
 
@@ -200,6 +201,15 @@ const useStageRenderer = (
     renderers.arrangeLayers(stage, layerIds);
   }, [stage, layerIds, renderers]);
 
+  useLayoutEffect(() => {
+    log.trace('Rendering no layers message');
+    if (asPreview) {
+      // The preview should not display the no layers message
+      return;
+    }
+    renderers.renderNoLayersMessage(stage, layerCount, state.size.width, state.size.height);
+  }, [stage, layerCount, renderers, asPreview, state.size.width, state.size.height]);
+
   useLayoutEffect(() => {
     Konva.pixelRatio = dpr;
   }, [dpr]);

invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts

@@ -597,6 +597,7 @@ export const TOOL_PREVIEW_BRUSH_BORDER_OUTER_ID = 'tool_preview_layer.brush_bord
 export const TOOL_PREVIEW_RECT_ID = 'tool_preview_layer.rect';
 export const BACKGROUND_LAYER_ID = 'background_layer';
 export const BACKGROUND_RECT_ID = 'background_layer.rect';
+export const NO_LAYERS_MESSAGE_LAYER_ID = 'no_layers_message';
 
 // Names (aka classes) for Konva layers and objects
 export const CONTROLNET_LAYER_NAME = 'control_adapter_layer';

invokeai/frontend/web/src/features/controlLayers/util/renderers.ts

@@ -14,6 +14,7 @@ import {
   isRegionalGuidanceLayer,
   isRenderableLayer,
   LAYER_BBOX_NAME,
+  NO_LAYERS_MESSAGE_LAYER_ID,
   regional_guidance_layer_LINE_NAME,
   regional_guidance_layer_NAME,
   regional_guidance_layer_OBJECT_GROUP_NAME,
@@ -702,11 +703,47 @@ const arrangeLayers = (stage: Konva.Stage, layerIds: string[]): void => {
   stage.findOne<Konva.Layer>(`#${TOOL_PREVIEW_LAYER_ID}`)?.zIndex(nextZIndex++);
 };
 
+const createNoLayersMessageLayer = (stage: Konva.Stage): Konva.Layer => {
+  const noLayersMessageLayer = new Konva.Layer({
+    id: NO_LAYERS_MESSAGE_LAYER_ID,
+    opacity: 0.7,
+    listening: false,
+  });
+  const text = new Konva.Text({
+    x: 0,
+    y: 0,
+    align: 'center',
+    verticalAlign: 'middle',
+    text: 'No Layers Added',
+    fontFamily: '"Inter Variable", sans-serif',
+    fontStyle: '600',
+    fill: 'white',
+  });
+  noLayersMessageLayer.add(text);
+  stage.add(noLayersMessageLayer);
+  return noLayersMessageLayer;
+};
+
+const renderNoLayersMessage = (stage: Konva.Stage, layerCount: number, width: number, height: number) => {
+  const noLayersMessageLayer =
+    stage.findOne<Konva.Layer>(`#${NO_LAYERS_MESSAGE_LAYER_ID}`) ?? createNoLayersMessageLayer(stage);
+  if (layerCount === 0) {
+    noLayersMessageLayer.findOne<Konva.Text>('Text')?.setAttrs({
+      width,
+      height,
+      fontSize: 32 / stage.scaleX(),
+    });
+  } else {
+    noLayersMessageLayer?.destroy();
+  }
+};
+
 export const renderers = {
   renderToolPreview,
   renderLayers,
   renderBbox,
   renderBackground,
+  renderNoLayersMessage,
   arrangeLayers,
 };
 
@@ -717,6 +754,7 @@ export const debouncedRenderers = {
   renderLayers: debounce(renderLayers, DEBOUNCE_MS),
   renderBbox: debounce(renderBbox, DEBOUNCE_MS),
   renderBackground: debounce(renderBackground, DEBOUNCE_MS),
+  renderNoLayersMessage: debounce(renderNoLayersMessage, DEBOUNCE_MS),
   arrangeLayers: debounce(arrangeLayers, DEBOUNCE_MS),
 };