🐛 Fix problem creating grid from elements

🐛 Fix problem when changing colors with multiple fonts

frontend/src/app/main/data/workspace/texts.cljs

@@ -554,7 +554,7 @@
        (when (features/active-feature? state "text-editor/v2")
          (let [instance (:workspace-editor state)
                styles   (some-> (editor.v2/getCurrentStyle instance)
-                                (styles/get-styles-from-style-declaration)
+                                (styles/get-styles-from-style-declaration :removed-mixed true)
                                 ((comp update-node-fn migrate-node))
                                 (styles/attrs->styles))]
            (editor.v2/applyStylesToSelection instance styles)))))))

frontend/src/app/main/data/workspace/transforms.cljs

@@ -238,12 +238,12 @@
                 :always
                 (ctm/resize scalev resize-origin shape-transform shape-transform-inverse)
 
-                (and (ctl/any-layout-immediate-child? objects shape)
+                (and (or (ctl/any-layout-immediate-child? objects shape) (ctl/any-layout? shape))
                      (not= (:layout-item-h-sizing shape) :fix)
                      ^boolean change-width?)
                 (ctm/change-property :layout-item-h-sizing :fix)
 
-                (and (ctl/any-layout-immediate-child? objects shape)
+                (and (or (ctl/any-layout-immediate-child? objects shape) (ctl/any-layout? shape))
                      (not= (:layout-item-v-sizing shape) :fix)
                      ^boolean change-height?)
                 (ctm/change-property :layout-item-v-sizing :fix)

frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs

@@ -307,7 +307,7 @@
             :title (tr "inspect.attributes.typography.font-family")
             :on-click #(reset! open-selector? true)}
       (cond
-        (= :multiple font-id)
+        (or (= :multiple font-id) (= "mixed" font-id))
         "--"
 
         (some? font)

frontend/src/app/render_wasm/api.cljs

@@ -758,13 +758,8 @@
   (h/call wasm/internal-module "_clear_shape_layout"))
 
 (defn- set-shape-layout
-  [shape objects]
+  [shape]
   (clear-layout)
-  (when (or (ctl/any-layout? shape)
-            (ctl/any-layout-immediate-child? objects shape)
-            (has-any-layout-prop? shape))
-    (set-layout-data shape))
-
   (when (ctl/flex-layout? shape)
     (set-flex-layout shape))
 
@@ -915,7 +910,7 @@
           (perf/end-measure "set-view-box::zoom")))))
 
 (defn set-object
-  [objects shape]
+  [shape]
   (perf/begin-measure "set-object")
   (let [shape        (svg-filters/apply-svg-derived shape)
         id           (dm/get-prop shape :id)
@@ -980,7 +975,7 @@
     (when (= type :text)
       (set-shape-grow-type grow-type))
 
-    (set-shape-layout shape objects)
+    (set-shape-layout shape)
     (set-shape-selrect selrect)
 
     (let [pending_thumbnails (into [] (concat
@@ -1034,7 +1029,7 @@
 
 (defn process-object
   [shape]
-  (let [{:keys [thumbnails full]} (set-object [] shape)]
+  (let [{:keys [thumbnails full]} (set-object shape)]
     (process-pending [shape] thumbnails full noop-fn)))
 
 (defn set-objects
@@ -1049,7 +1044,7 @@
          (loop [index 0 thumbnails-acc [] full-acc []]
            (if (< index total-shapes)
              (let [shape    (nth shapes index)
-                   {:keys [thumbnails full]} (set-object objects shape)]
+                   {:keys [thumbnails full]} (set-object shape)]
                (recur (inc index)
                       (into thumbnails-acc thumbnails)
                       (into full-acc full)))

frontend/src/app/render_wasm/shape.cljs

@@ -280,8 +280,18 @@
         :layout-grid-cells
         (api/set-grid-layout-cells v)
 
-        (:layout
-         :layout-flex-dir
+        :layout
+        (do
+          (api/clear-layout)
+          (cond
+            (ctl/grid-layout? shape)
+            (api/set-grid-layout shape)
+
+            (ctl/flex-layout? shape)
+            (api/set-flex-layout shape))
+          (api/set-layout-data shape))
+
+        (:layout-flex-dir
          :layout-gap-type
          :layout-gap
          :layout-align-items
@@ -291,15 +301,12 @@
          :layout-wrap-type
          :layout-padding-type
          :layout-padding)
-        (do
-          (api/clear-layout)
-          (cond
-            (ctl/grid-layout? shape)
-            (api/set-grid-layout-data shape)
+        (cond
+          (ctl/grid-layout? shape)
+          (api/set-grid-layout-data shape)
 
-            (ctl/flex-layout? shape)
-            (api/set-flex-layout shape))
-          (api/set-layout-data shape))
+          (ctl/flex-layout? shape)
+          (api/set-flex-layout shape))
 
         ;; Property not in WASM
         nil))))

frontend/src/app/util/text/content/styles.cljs

@@ -187,19 +187,23 @@
               style-value (normalize-style-value style-name v)]
           (assoc acc style-name style-value)))) {} style-defaults)))
 
+(def mixed-values #{:mixed :multiple "mixed" "multiple"})
+
 (defn get-styles-from-style-declaration
   "Returns a ClojureScript object compatible with text nodes"
-  [style-declaration]
+  [style-declaration & {:keys [removed-mixed] :or {removed-mixed false}}]
   (reduce
    (fn [acc k]
      (if (contains? mapping k)
        (let [style-name (get-style-name-as-css-variable k)
              [_ style-decode] (get mapping k)
              style-value (.getPropertyValue style-declaration style-name)]
-         (assoc acc k (style-decode style-value)))
+         (when (or (not removed-mixed) (not (contains? mixed-values style-value)))
+           (assoc acc k (style-decode style-value))))
        (let [style-name (get-style-name k)
              style-value (normalize-attr-value k (.getPropertyValue style-declaration style-name))]
-         (assoc acc k style-value)))) {} txt/text-style-attrs))
+         (when (or (not removed-mixed) (not (contains? mixed-values style-value)))
+           (assoc acc k style-value))))) {} txt/text-style-attrs))
 
 (defn get-styles-from-event
   "Returns a ClojureScript object compatible with text nodes"

library/CHANGES.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+
+## 1.2.0-RC1
+
+- Add the ability to add relations (with `addRelation` method)
+
+
 ## 1.1.0
 
 - Same as 1.1.0-RC2

library/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@penpot/library",
-  "version": "1.1.0",
+  "version": "1.2.0-RC1",
   "license": "MPL-2.0",
   "author": "Kaleidos INC",
-  "packageManager": "yarn@4.11.0+sha512.4e54aeace9141df2f0177c266b05ec50dc044638157dae128c471ba65994ac802122d7ab35bcd9e81641228b7dcf24867d28e750e0bcae8a05277d600008ad54",
+  "packageManager": "yarn@4.12.0+sha512.f45ab632439a67f8bc759bf32ead036a1f413287b9042726b7cc4818b7b49e14e9423ba49b18f9e06ea4941c1ad062385b1d8760a8d5091a1a31e5f6219afca8",
   "type": "module",
   "repository": {
     "type": "git",

library/playground/sample-relations.js

@@ -0,0 +1,30 @@
+import * as penpot from "#self";
+import { writeFile, readFile } from "fs/promises";
+
+(async function () {
+  const context = penpot.createBuildContext();
+
+  {
+    const file1 = context.addFile({ name: "Test File 1" });
+    const file2 = context.addFile({ name: "Test File 1" });
+
+    context.addRelation(file1, file2);
+  }
+
+  {
+    let result = await penpot.exportAsBytes(context);
+    await writeFile("sample-relations.zip", result);
+  }
+})()
+  .catch((cause) => {
+    console.error(cause);
+
+    const innerCause = cause.cause;
+    if (innerCause) {
+      console.error("Inner cause:", innerCause);
+    }
+    process.exit(-1);
+  })
+  .finally(() => {
+    process.exit(0);
+  });

library/src/lib/builder.cljs

@@ -87,7 +87,8 @@
       (try
         (let [params (-> params decode-params fb/decode-file)]
           (-> (swap! state fb/add-file params)
-              (get ::fb/current-file-id)))
+              (get ::fb/current-file-id)
+              (dm/str)))
         (catch :default cause
           (handle-exception cause))))
 
@@ -273,6 +274,16 @@
         (catch :default cause
           (handle-exception cause))))
 
+    :addRelation
+    (fn [file-id library-id]
+      (let [file-id    (uuid/parse file-id)
+            library-id (uuid/parse library-id)]
+        (if (and file-id library-id)
+          (do
+            (swap! state update :relations assoc file-id library-id)
+            true)
+          false)))
+
     :genId
     (fn []
       (dm/str (uuid/next)))

library/src/lib/export.cljs

@@ -194,7 +194,8 @@
                 :generated-by "penpot-library/%version%"
                 :referer (get opts :referer)
                 :files files
-                :relations []}
+                :relations (->> (:relations state)
+                                (mapv vec))}
         params (d/without-nils params)]
 
     ["manifest.json"

library/test/builder.test.js

@@ -54,6 +54,33 @@ test("create context with two file", () => {
   assert.equal(file.data.pages.length, 0)
 });
 
+test("create context with two file and relation between", () => {
+  const context = penpot.createBuildContext();
+
+  const fileId_1 = context.addFile({name: "sample 1"});
+  const fileId_2 = context.addFile({name: "sample 2"});
+
+  context.addRelation(fileId_1, fileId_2);
+
+  const internalState = context.getInternalState();
+
+  assert.ok(internalState.files[fileId_1]);
+  assert.ok(internalState.files[fileId_2]);
+  assert.equal(internalState.files[fileId_1].name, "sample 1");
+  assert.equal(internalState.files[fileId_2].name, "sample 2");
+
+  assert.ok(internalState.relations[fileId_1]);
+  assert.equal(internalState.relations[fileId_1], fileId_2);
+
+  const file = internalState.files[fileId_2];
+
+  assert.ok(file.data);
+  assert.ok(file.data.pages);
+  assert.ok(file.data.pagesIndex);
+  assert.equal(file.data.pages.length, 0)
+});
+
+
 test("create context with file and page", () => {
   const context = penpot.createBuildContext();