mirror of
https://github.com/penpot/penpot.git
synced 2025-03-18 10:41:29 -05:00
Fix interactions issues.
This commit is contained in:
parent
20e7afeee5
commit
80ebc17a26
7 changed files with 36 additions and 31 deletions
|
@ -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]))]
|
||||
|
|
|
@ -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)]]
|
||||
|
|
|
@ -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]))
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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)}
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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}))))
|
||||
|
|
Loading…
Add table
Reference in a new issue