diff --git a/frontend/playwright/data/workspace/get-file-fragment-fills-limit.json b/frontend/playwright/data/workspace/get-file-fragment-fills-limit.json new file mode 100644 index 0000000000..dc8f26c378 --- /dev/null +++ b/frontend/playwright/data/workspace/get-file-fragment-fills-limit.json @@ -0,0 +1,215 @@ +{ + "~:id": "~ub3e5731a-c295-801d-8006-3fc3517249cf", + "~:file-id": "~ub3e5731a-c295-801d-8006-3fc33c3b1b13", + "~:created-at": "~m1748353475008", + "~:data": { + "~:objects": { + "~u00000000-0000-0000-0000-000000000000": { + "~#shape": { + "~:y": 0, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:name": "Root Frame", + "~:width": 0.01, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 0.0, + "~:y": 0.0 + } + }, + { + "~#point": { + "~:x": 0.01, + "~:y": 0.0 + } + }, + { + "~#point": { + "~:x": 0.01, + "~:y": 0.01 + } + }, + { + "~#point": { + "~:x": 0.0, + "~:y": 0.01 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~u00000000-0000-0000-0000-000000000000", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 0, + "~:proportion": 1.0, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 0, + "~:y": 0, + "~:width": 0.01, + "~:height": 0.01, + "~:x1": 0, + "~:y1": 0, + "~:x2": 0.01, + "~:y2": 0.01 + } + }, + "~:fills": [ + { + "~:fill-color": "#FFFFFF", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 0.01, + "~:flip-y": null, + "~:shapes": [ + "~u893b7b23-26fe-80dd-8006-3fc33f3061f8" + ] + } + }, + "~u893b7b23-26fe-80dd-8006-3fc33f3061f8": { + "~#shape": { + "~:y": 307, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 141, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 673, + "~:y": 307 + } + }, + { + "~#point": { + "~:x": 814, + "~:y": 307 + } + }, + { + "~#point": { + "~:x": 814, + "~:y": 455 + } + }, + { + "~#point": { + "~:x": 673, + "~:y": 455 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~u893b7b23-26fe-80dd-8006-3fc33f3061f8", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 673, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 673, + "~:y": 307, + "~:width": 141, + "~:height": 148, + "~:x1": 673, + "~:y1": 307, + "~:x2": 814, + "~:y2": 455 + } + }, + "~:fills": [ + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + }, + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + }, + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + }, + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + }, + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + }, + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + }, + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 148, + "~:flip-y": null + } + } + }, + "~:id": "~ub3e5731a-c295-801d-8006-3fc33c3b1b14", + "~:name": "Page 1" + } +} \ No newline at end of file diff --git a/frontend/playwright/ui/specs/design-tab.spec.js b/frontend/playwright/ui/specs/design-tab.spec.js index ea73328de7..30f2d3a3f0 100644 --- a/frontend/playwright/ui/specs/design-tab.spec.js +++ b/frontend/playwright/ui/specs/design-tab.spec.js @@ -1,4 +1,4 @@ -import { test, expect } from "@playwright/test"; +import { test, expect, describe } from "@playwright/test"; import { WorkspacePage } from "../pages/WorkspacePage"; test.beforeEach(async ({ page }) => { @@ -38,7 +38,7 @@ const setupFileWithMultipeAttributes = async (workspace) => { ); }; -test.describe("Constraints", () => { +describe("Constraints", () => { test("Constraint dropdown shows 'Mixed' when multiple layers are selected with different constraints", async ({ page, }) => { @@ -66,7 +66,25 @@ test.describe("Constraints", () => { }); }); -test.describe("Multiple shapes attributes", () => { +describe("Shape attributes", () => { + test("Cannot add a new fill when the limit has been reached", async ({ + page, + }) => { + const workspace = new WorkspacePage(page); + await workspace.setupEmptyFile(); + + await workspace.goToWorkspace({ + fileId: "b3e5731a-c295-801d-8006-3fc33c3b1b13", + pageId: "b3e5731a-c295-801d-8006-3fc33c3b1b14", + }); + + await workspace.clickLeafLayer("Rectangle"); + + expect(false); + }); +}); + +describe("Multiple shapes attributes", () => { test("User selects multiple shapes with sames fills, strokes, shadows and blur", async ({ page, }) => { diff --git a/frontend/src/app/main/data/workspace/colors.cljs b/frontend/src/app/main/data/workspace/colors.cljs index 5b7a0ea0f5..4b624188b0 100644 --- a/frontend/src/app/main/data/workspace/colors.cljs +++ b/frontend/src/app/main/data/workspace/colors.cljs @@ -222,7 +222,6 @@ (update :fills #(into [attrs] %)))) undo-id (js/Symbol)] - (rx/concat (rx/of (dwu/start-undo-transaction undo-id)) (transform-fill state ids color change-fn options) diff --git a/frontend/src/app/main/ui/shapes/attrs.cljs b/frontend/src/app/main/ui/shapes/attrs.cljs index dfb6094843..70a7709e84 100644 --- a/frontend/src/app/main/ui/shapes/attrs.cljs +++ b/frontend/src/app/main/ui/shapes/attrs.cljs @@ -66,6 +66,8 @@ ([attrs fill-data render-id index type] (add-fill! attrs fill-data render-id index type "none")) ([attrs fill-data render-id index type fill-default] + ;; TODO: check for MAX-FILLS + (js/console.log "add_fill!" (clj->js fill-data)) (let [index (if (some? index) (dm/str "-" index) "")] (cond (contains? fill-data :fill-image) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs index 2026fa07d2..01d0dbf4e4 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs @@ -10,6 +10,7 @@ [app.common.colors :as clr] [app.common.data :as d] [app.common.types.color :as ctc] + [app.common.types.shape :as shp] [app.common.types.shape.attrs :refer [default-color]] [app.main.data.workspace.colors :as dc] [app.main.store :as st] @@ -54,7 +55,7 @@ values (d/without-nils values) fills (:fills values) has-fills? (or (= :multiple fills) (some? (seq fills))) - + can-add-fills? (and (not (= :multiple fills)) (< (count fills) shp/MAX-FILLS)) state* (mf/use-state has-fills?) open? (deref state*) @@ -73,12 +74,12 @@ (mf/use-fn (mf/deps ids fills) (fn [_] - (st/emit! (dc/add-fill ids {:color default-color - :opacity 1})) - - (when (or (= :multiple fills) - (not (some? (seq fills)))) - (open-content)))) + (when can-add-fills? + (st/emit! (dc/add-fill ids {:color default-color + :opacity 1})) + (when (or (= :multiple fills) + (not (some? (seq fills)))) + (open-content))))) on-change (fn [index] @@ -151,6 +152,7 @@ :aria-label (tr "workspace.options.fill.add-fill") :on-click on-add :data-testid "add-fill" + :disabled (not can-add-fills?) :icon "add"}])]] (when open?