✨ Fix style for bool shapes

common/src/app/common/pages/changes_builder.cljc

@@ -7,6 +7,7 @@
 (ns app.common.pages.changes-builder
   (:require
    [app.common.data :as d]
+   [app.common.pages :as cp]
    [app.common.pages.helpers :as h]))
 
 ;; Auxiliary functions to help create a set of changes (undo + redo)
@@ -25,28 +26,34 @@
         (assoc ::objects objects))))
 
 (defn add-obj
-  [changes obj]
+  ([changes obj index]
-  (let [add-change
+   (add-obj changes (assoc obj ::index index)))
-        {:type      :add-obj
-         :id        (:id obj)
-         :page-id   (::page-id (meta changes))
-         :parent-id (:parent-id obj)
-         :frame-id  (:frame-id obj)
-         :index     (::index obj)
-         :obj       (dissoc obj ::index :parent-id)}
 
-        del-change
+  ([changes obj]
-        {:type :del-obj
+   (let [add-change
-         :id (:id obj)
+         {:type      :add-obj
-         :page-id (::page-id (meta changes))}]
+          :id        (:id obj)
+          :page-id   (::page-id (meta changes))
+          :parent-id (:parent-id obj)
+          :frame-id  (:frame-id obj)
+          :index     (::index obj)
+          :obj       (dissoc obj ::index :parent-id)}
 
-    (-> changes
+         del-change
-        (update :redo-changes conj add-change)
+         {:type :del-obj
-        (update :undo-changes d/preconj del-change))))
+          :id (:id obj)
+          :page-id (::page-id (meta changes))}]
+
+     (-> changes
+         (update :redo-changes conj add-change)
+         (update :undo-changes d/preconj del-change)))))
 
 (defn change-parent
   [changes parent-id shapes]
-  (let [set-parent-change
+  (assert (contains? (meta changes) ::objects) "Call (with-objects) first to use this function")
+
+  (let [objects (::objects (meta changes))
+        set-parent-change
         {:type :mov-objects
          :parent-id parent-id
          :page-id (::page-id (meta changes))
@@ -60,7 +67,7 @@
             :page-id (::page-id (meta changes))
             :parent-id (:parent-id shape)
             :shapes [(:id shape)]
-            :index (::index shape)}))]
+            :index (cp/position-on-parent (:id shape) objects)}))]
 
     (-> changes
         (update :redo-changes conj set-parent-change)

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

@@ -30,20 +30,20 @@
          (sort-by ::index))))
 
 (defn create-bool-data
-  [type name shapes objects]
+  [bool-type name shapes objects]
   (let [shapes (mapv #(stp/convert-to-path % objects) shapes)
-        head (first shapes)
+        head (if (= bool-type :difference) (first shapes) (last shapes))
         head-data (select-keys head stp/style-properties)]
-    (-> {:id (uuid/next)
+    [(-> {:id (uuid/next)
-         :type :bool
+          :type :bool
-         :bool-type type
+          :bool-type bool-type
-         :frame-id (:frame-id head)
+          :frame-id (:frame-id head)
-         :parent-id (:parent-id head)
+          :parent-id (:parent-id head)
-         :name name
+          :name name
-         ::index (::index head)
+          :shapes []}
-         :shapes []}
+         (merge head-data)
-        (merge head-data)
+         (gsh/update-bool-selrect shapes objects))
-        (gsh/update-bool-selrect shapes objects))))
+     (cp/position-on-parent (:id head) objects)]))
 
 (defn group->bool
   [group bool-type objects]
@@ -84,10 +84,11 @@
             shapes  (selected-shapes state)]
 
         (when-not (empty? shapes)
-          (let [boolean-data (create-bool-data bool-type name shapes objects)
+          (let [[boolean-data index] (create-bool-data bool-type name shapes objects)
                 shape-id (:id boolean-data)
                 changes (-> (cb/empty-changes it page-id)
-                            (cb/add-obj boolean-data)
+                            (cb/with-objects objects)
+                            (cb/add-obj boolean-data index)
                             (cb/change-parent shape-id shapes))]
             (rx/of (dch/commit-changes changes)
                    (dwc/select-shapes (d/ordered-set shape-id)))))))))

frontend/src/app/main/ui/shapes/bool.cljs

@@ -25,6 +25,23 @@
 
           childs (use-equal-memo childs)
 
+          ;;[content-a content-b]
+          ;;(mf/use-memo
+          ;; (mf/deps shape childs)
+          ;; (fn []
+          ;;   (let [childs (d/mapm #(gsh/transform-shape %2) childs)
+          ;;         [content-a content-b]
+          ;;         (->> (:shapes shape)
+          ;;              (map #(get childs %))
+          ;;              (filter #(not (:hidden %)))
+          ;;              (map #(stp/convert-to-path % childs))
+          ;;              (mapv :content)
+          ;;              (mapv pb/add-previous))]
+          ;;     (pb/content-intersect-split content-a content-b))))
+
+          ;;_ (.log js/console "content-a" (clj->js content-a))
+          ;;_ (.log js/console "content-b" (clj->js content-b))
+          
           bool-content
           (mf/use-memo
            (mf/deps shape childs)
@@ -35,9 +52,45 @@
                     (filter #(not (:hidden %)))
                     (map #(stp/convert-to-path % childs))
                     (mapv :content)
-                    (pb/content-bool (:bool-type shape))))))]
+                    (pb/content-bool (:bool-type shape))))))
+          ]
 
-      [:& shape-wrapper {:shape (-> shape
+      [:*
-                                    (assoc :type :path)
+       [:& shape-wrapper {:shape (-> shape
-                                    (assoc :content bool-content))
+                                     (assoc :type :path)
-                         :frame frame}])))
+                                     (assoc :content bool-content))
+                          :frame frame}]
+
+
+       #_[:*
+        [:g
+         [:& shape-wrapper {:shape (-> shape
+                                       (assoc :type :path)
+                                       (assoc :stroke-color "blue")
+                                       (assoc :stroke-opacity 1)
+                                       (assoc :stroke-width 0.5)
+                                       (assoc :stroke-style :solid)
+                                       (dissoc :fill-color :fill-opacity)
+                                       (assoc :content content-b))
+                            :frame frame}]
+         (for [{:keys [x y]} (app.common.geom.shapes.path/content->points content-b)]
+           [:circle {:cx x
+                     :cy y
+                     :r 2.5
+                     :style {:fill "blue"}}])]
+        
+        [:g
+         [:& shape-wrapper {:shape (-> shape
+                                       (assoc :type :path)
+                                       (assoc :stroke-color "red")
+                                       (assoc :stroke-opacity 1)
+                                       (assoc :stroke-width 0.5)
+                                       (assoc :stroke-style :solid)
+                                       (dissoc :fill-color :fill-opacity)
+                                       (assoc :content content-a))
+                            :frame frame}]
+         (for [{:keys [x y]} (app.common.geom.shapes.path/content->points content-a)]
+           [:circle {:cx x
+                     :cy y
+                     :r 1.25
+                     :style {:fill "red"}}])]]])))