diff --git a/frontend/src/uxbox/main/ui/shapes/circle.cljs b/frontend/src/uxbox/main/ui/shapes/circle.cljs index 37e086062..a7dbc6076 100644 --- a/frontend/src/uxbox/main/ui/shapes/circle.cljs +++ b/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]))] diff --git a/frontend/src/uxbox/main/ui/shapes/group.cljs b/frontend/src/uxbox/main/ui/shapes/group.cljs index 466e920a1..5a5e358bc 100644 --- a/frontend/src/uxbox/main/ui/shapes/group.cljs +++ b/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)]] diff --git a/frontend/src/uxbox/main/ui/shapes/icon.cljs b/frontend/src/uxbox/main/ui/shapes/icon.cljs index 7f6170dd6..12affa59f 100644 --- a/frontend/src/uxbox/main/ui/shapes/icon.cljs +++ b/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])) diff --git a/frontend/src/uxbox/main/ui/shapes/image.cljs b/frontend/src/uxbox/main/ui/shapes/image.cljs index 9478d5498..4df379e4b 100644 --- a/frontend/src/uxbox/main/ui/shapes/image.cljs +++ b/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) diff --git a/frontend/src/uxbox/main/ui/shapes/rect.cljs b/frontend/src/uxbox/main/ui/shapes/rect.cljs index b3f1e727a..cd52717a4 100644 --- a/frontend/src/uxbox/main/ui/shapes/rect.cljs +++ b/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)} diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/interactions.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/interactions.cljs index 0337c0ecd..87b290441 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/interactions.cljs +++ b/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) diff --git a/frontend/src/uxbox/view/ui/viewer/interactions.cljs b/frontend/src/uxbox/view/ui/viewer/interactions.cljs index 2cfa213f7..fcff123a6 100644 --- a/frontend/src/uxbox/view/ui/viewer/interactions.cljs +++ b/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}))))