[bug] fix change frame width in component arena

Change-Id: I83a90e7a89ef97f81bed4a2a02c39129fe5d426f GitOrigin-RevId: 07f5ba85df2ed214d74ed49bf565c55fc4b2088b
plasmicapp · Jan 29, 2024 · 9dda6ef · 9dda6ef
1 parent a92348a
commit 9dda6ef
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/platform/wab/src/wab/client/FreestyleManipulator.tsx b/platform/wab/src/wab/client/FreestyleManipulator.tsx
@@ -37,6 +37,7 @@ import {
 } from "@/wab/geom";
 import { Selectable } from "@/wab/selection";
 import {
+  ensureActivatedScreenVariantsForFrameByWidth,
   getFrameHeight,
   isComponentArena,
   isPositionManagedFrame,
@@ -167,6 +168,13 @@ export function mkFreestyleManipForFocusedFrame(
             if (isComponentArena(arena)) {
               // screen variants are explicitly managed in component arenas
               focusedFrame[prop] = parsedVal;
+              if (arena._focusedFrame === focusedFrame) {
+                // We only want to activate screen variants in focus mode
+                ensureActivatedScreenVariantsForFrameByWidth(
+                  sc.site,
+                  focusedFrame
+                );
+              }
             } else if (vc && (prop === "width" || prop === "height")) {
               vc.studioCtx.changeFrameSize({ dim: prop, amount: parsedVal });
             } else {

diff --git a/platform/wab/src/wab/client/studio-ctx/StudioCtx.tsx b/platform/wab/src/wab/client/studio-ctx/StudioCtx.tsx
@@ -1041,7 +1041,7 @@ export class StudioCtx extends WithDbCtx {
     frame[dim] = amount;
 
     if (dim === "width") {
-      if (isComponentArena(this.currentArena)) {
+      if (isComponentArena(this.currentArena) && !this.focusedMode) {
         ensureActivatedScreenVariantsForComponentArenaFrame(
           this.site,
           this.currentArena,
@@ -1979,7 +1979,11 @@ export class StudioCtx extends WithDbCtx {
               ? !!prevArena._focusedFrame
               : this.focusPreference.get() ?? this.siteInfo.hasAppAuth;
             if (focusedMode) {
-              setFocusedFrame(this.site, arena);
+              const newFocusedFrame = setFocusedFrame(this.site, arena);
+              ensureActivatedScreenVariantsForFrameByWidth(
+                this.site,
+                newFocusedFrame
+              );
             }
           }
 
@@ -2628,6 +2632,7 @@ export class StudioCtx extends WithDbCtx {
       currentArena,
       this.focusedContentFrame()
     );
+    ensureActivatedScreenVariantsForFrameByWidth(this.site, newFocusedFrame);
     this.setStudioFocusOnFrame({ frame: newFocusedFrame, autoZoom: false });
     setTimeout(() => {
       this.tryZoomToFitArena();