v1.2.0 Side Bar & Menu rework (#189)

* Basic side tool bar skeleton + Theme toggle (#164)

* Side bar skeleton

* Fix grid layout

* nit

* Add theme toggle logic

* Change primevue color theme to blue to match beta menu UI

* Add litegraph canvas splitter overlay (#177)

* Add vue wrapper

* Splitter overlay

* Move teleport to side bar comp

* Toolbar placeholder

* Move settings button from top menu to side bar (#178)

* Reverse relationship between splitter overlay and sidebar component (#180)

* Reverse relationship between splitter overlay and sidebar component

* nit

* Remove border on splitter

* Fix canvas shift (#186)

* Move queue/history display to side bar (#185)

* Side bar placeholder

* Pinia store for queue items

* Flatten task item

* Fix schema

* computed

* Switch running / pending order

* Use class-transformer

* nit

* Show display status

* Add tag severity style

* Add execution time

* nit

* Rename to execution success

* Add time display

* Sort queue desc order

* nit

* Add remove item feature

* Load workflow

* Add confirmation popup

* Add empty table placeholder

* Remove beta menu UI's queue button/list

* Add tests on litegraph widget text truncate (#191)

* Add tests on litegraph widget text truncate

* Updated screenshots

* Revert port change

* Remove screenshots

* Update test expectations [skip ci]

* Add back menu.settingsGroup for compatibility (#192)

* Close side bar on menu location set as disabled (#194)

* Remove placeholder side bar tabs (#196)

---------

Co-authored-by: bymyself <abolkonsky.rem@gmail.com>
Co-authored-by: github-actions <github-actions@github.com>

browser_tests/ComfyPage.ts

@@ -8,6 +8,11 @@ interface Position {
   y: number;
 }
 
+interface Size {
+  width: number;
+  height: number;
+}
+
 class ComfyNodeSearchBox {
   public readonly input: Locator;
   public readonly dropdown: Locator;
@@ -214,6 +219,65 @@ export class ComfyPage {
     await this.page.keyboard.up("Control");
     await this.nextFrame();
   }
+
+  async closeMenu() {
+    await this.page.click("button.comfy-close-menu-btn");
+    await this.nextFrame();
+  }
+
+  async resizeNode(nodePos: Position, nodeSize: Size, ratioX: number, ratioY: number, revertAfter: boolean = false) {
+    const bottomRight = {
+      x: nodePos.x + nodeSize.width,
+      y: nodePos.y + nodeSize.height,
+    }
+    const target = {
+      x: nodePos.x + nodeSize.width * ratioX,
+      y: nodePos.y + nodeSize.height * ratioY,
+    }
+    await this.dragAndDrop(bottomRight, target);
+    await this.nextFrame();
+    if (revertAfter) {
+      await this.dragAndDrop(target, bottomRight);
+      await this.nextFrame();
+    }
+  }
+
+  async resizeKsamplerNode(percentX: number, percentY: number, revertAfter: boolean = false) {
+    const ksamplerPos = {
+      x: 864,
+      y: 157
+    }
+    const ksamplerSize = {
+      width: 315,
+      height: 292,
+    }
+    this.resizeNode(ksamplerPos, ksamplerSize, percentX, percentY, revertAfter);
+  }
+  
+  async resizeLoadCheckpointNode(percentX: number, percentY: number, revertAfter: boolean = false) {
+    const loadCheckpointPos = {
+      x: 25,
+      y: 440,
+    }
+    const loadCheckpointSize = {
+      width: 320,
+      height: 120,
+    }
+    this.resizeNode(loadCheckpointPos, loadCheckpointSize, percentX, percentY, revertAfter);
+  }
+  
+  async resizeEmptyLatentNode(percentX: number, percentY: number, revertAfter: boolean = false) {
+    const emptyLatentPos = {
+      x: 475,
+      y: 580,
+    }
+    const emptyLatentSize = {
+      width: 303,
+      height: 132,
+    }
+    this.resizeNode(emptyLatentPos, emptyLatentSize, percentX, percentY, revertAfter);
+  }
+
 }
 
 export const comfyPageFixture = base.extend<{ comfyPage: ComfyPage }>({

browser_tests/textWidgetTruncate.spec.ts

@@ -0,0 +1,28 @@
+import { expect } from "@playwright/test";
+import { comfyPageFixture as test } from "./ComfyPage";
+
+test.describe("Combo text widget", () => {
+  test("Truncates text when resized", async ({ comfyPage }) => {
+    await comfyPage.resizeLoadCheckpointNode(0.2, 1);
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      "load-checkpoint-resized-min-width.png"
+    );
+    await comfyPage.closeMenu();
+    await comfyPage.resizeKsamplerNode(0.2, 1);
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      `ksampler-resized-min-width.png`
+    );
+  });
+
+  test("Doesn't truncate when space still available", async ({ comfyPage }) => {
+    await comfyPage.resizeEmptyLatentNode(0.8, 0.8);
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      "empty-latent-resized-80-percent.png"
+    );
+  });
+
+  test("Can revert to full text", async ({ comfyPage }) => {
+    await comfyPage.resizeLoadCheckpointNode(0.8, 1, true);
+    await expect(comfyPage.canvas).toHaveScreenshot("resized-to-original.png");
+  });
+});