Fix interactions issues.

frontend/src/uxbox/main/ui/shapes/circle.cljs

@@ -43,7 +43,9 @@
         xfmt (-> (gmt/matrix)
                  (gmt/rotate* rotation center))
 
-        props {:id (str id) :transform (str xfmt)}
+        props {:id (str "shape-" id)
+               :transform (str xfmt)}
+
         attrs (merge props
                      (attrs/extract-style-attrs shape)
                      (select-keys shape [:cx :cy :rx :ry]))]

frontend/src/uxbox/main/ui/shapes/group.cljs

@@ -69,7 +69,8 @@
   (let [xfmt (cond-> (or tmp-resize-xform (gmt/matrix))
                tmp-displacement (gmt/translate tmp-displacement))
 
-        attrs {:id (str id) :transform (str xfmt)}]
+        attrs {:id (str "shape-" id)
+               :transform (str xfmt)}]
     [:g attrs
      (for [item (reverse items)
            :let [key (str item)]]

frontend/src/uxbox/main/ui/shapes/icon.cljs

@@ -61,6 +61,6 @@
   [{:keys [content id metadata] :as shape}]
   (let [view-box (apply str (interpose " " (:view-box metadata)))
         props {:view-box view-box
-               :id (str id)
+               :id (str "shape-" id)
                :dangerouslySetInnerHTML {:__html content}}]
     [:svg props]))

frontend/src/uxbox/main/ui/shapes/image.cljs

@@ -61,7 +61,7 @@
                tmp-displacement (gmt/translate tmp-displacement))
 
         props {:x x1 :y y1
-               :id (str id)
+               :id (str "shape-" id)
                :preserve-aspect-ratio "none"
                :xlink-href (:url image)
                :transform (str xfmt)

frontend/src/uxbox/main/ui/shapes/rect.cljs

@@ -51,7 +51,8 @@
         xfmt (cond-> (gmt/matrix)
                (pos? rotation) (rotate shape))
 
-        props {:x x1 :y y1  :id id
+        props {:x x1 :y y1
+               :id (str "shape-" id)
                :width width
                :height height
                :transform (str xfmt)}

frontend/src/uxbox/main/ui/workspace/sidebar/options/interactions.cljs

@@ -521,7 +521,7 @@
         :gotourl (url-input form-ref)
         :gotopage (pages-input form-ref)
         :color (color-input form-ref)
-        :rotate (rotate-input form-ref)
+        ;; :rotate (rotate-input form-ref)
         :size (resize-input form-ref)
         :moveto (moveto-input form-ref)
         :moveby (moveby-input form-ref)

frontend/src/uxbox/view/ui/viewer/interactions.cljs

@@ -116,15 +116,14 @@
   [{:keys [x1 y1 rotation] :as shape}
    {:keys [resize-width resize-height easing
            element delay duration direction] :as opts}]
-  #_(if (= direction :reverse)
-    (let [end (geom/transformation-matrix shape)]
-      (animate :targets [(str "#shape-" element)]
-               :transform (str end)
-               :easing (translate-ease easing)
-               :delay delay
-               :duration duration
-               :loop false))
-    (let [dom (dom/get-element (str "shape-" element))]
+  (let [{:keys [width height]} (geom/size shape)
+        dom (dom/get-element (str "shape-" element))]
+    (if (= direction :reverse)
+      (animate* dom {:easing (translate-ease easing)
+                     :delay delay
+                     :duration duration
+                     :width width
+                     :height height})
       (animate* dom {:easing (translate-ease easing)
                      :delay delay
                      :duration duration
@@ -163,21 +162,23 @@
                      :fill fill-color
                      :stroke stroke-color}))))
 
-(defn- run-rotate-interaction
-  [{:keys [element rotation direction easing delay duration] :as opts}]
-  #_(let [shape (get-in @st/state [:shapes element])
-        dom (dom/get-element (str "shape-" element))
-        mtx1 (geom/transformation-matrix (update shape :rotation + rotation))
-        mtx2 (geom/transformation-matrix shape)]
-    (if (= direction :reverse)
-      (animate* dom {:easing (translate-ease easing)
-                     :delay delay
-                     :duration duration
-                     :transform (str mtx2)})
-      (animate* dom {:easing (translate-ease easing)
-                     :delay delay
-                     :duration duration
-                     :transform (str mtx1)}))))
+;; (defn- run-rotate-interaction
+;;   [{:keys [element rotation direction easing delay duration] :as opts}]
+;;   (let [shape (get-in @st/state [:shapes element])
+;;         {:keys [x1 y1 width height]} (geom/size shape)
+;;
+;;         dom (dom/get-element (str "shape-" element))
+;;         mtx1 (geom/transformation-matrix (update shape :rotation + rotation))
+;;         mtx2 (geom/transformation-matrix shape)]
+;;     (if (= direction :reverse)
+;;       (animate* dom {:easing (translate-ease easing)
+;;                      :delay delay
+;;                      :duration duration
+;;                      :transform (str mtx2)})
+;;       (animate* dom {:easing (translate-ease easing)
+;;                      :delay delay
+;;                      :duration duration
+;;                      :transform (str mtx1)}))))
 
 (defn- run-interaction
   "Given an interaction data structure return
@@ -190,7 +191,7 @@
     :size (run-size-interaction itx)
     :opacity (run-opacity-interaction itx)
     :color (run-color-interaction itx)
-    :rotate (run-rotate-interaction itx)
+    ;; :rotate (run-rotate-interaction itx)
     :gotourl (run-gotourl-interaction itx)
     :gotopage (run-gotopage-interaction itx)
     (throw (ex-info "undefined interaction" {:action action}))))