У нас есть трогательный код clojurescript , но когда изображение меняется при нажатии на миниатюру, выбранное изображение нужно рендерить с увеличением.
Мы начинаем щелкать по миниатюре, это меняет атом с выбранным изображением и переходит к коду увеличения:
(r/with-let [selected (r/atom (-> images first))]
[:img.mx-auto.d-block.img-thumbnail {
:src thumbnail_small
:on-click #(reset! selected img)}]
[:div.col-sm-10
[zoomer selected]
]
]])
Чтобы смонтировать компонент с URL-адресом изображения. Пропускает URL-адрес исходного размера изображения zoomer [image]
при рендеринге component-did-mount (первый раз) работает [:img {:src image
, но при щелчке на другом изображении атом реагирует, но не "перерисовывает" ":
(defn zoomer [image]
(let [!hammer-manager (atom nil)
!zoom (atom {:x 0 :y 0 :scale 1})
!start-zoom (atom {:x 0 :y 0 :scale 1})]
(r/create-class
{:component-did-mount
(fn [this]
(let [mc (new js/Hammer.Manager (r/dom-node this))]
(println this.add)
;; Pinch
(js-invoke mc "add" (new js/Hammer.Pinch))
(js-invoke mc "on" "pinchstart" #(do (reset! !start-zoom @!zoom)
(.preventDefault %)))
(js-invoke mc "on" "pinchmove" #(let [{:keys [x y scale]} @!start-zoom]
(reset! !zoom {:x (+ x (.-deltaX %))
:y (+ y (.-deltaY %))
:scale (* scale (.-scale %))})
(.preventDefault %)))
(reset! !hammer-manager mc)
))
:reagent-render
(fn [_]
[:div.zoomer
[:img {:src image
:style (transform @!zoom)}]])
:component-will-unmount
(fn [_]
(when-let [mc @!hammer-manager]
(js-invoke mc "destroy")))})))
Я видел этот пример Использование Stateful JS Компоненты с G Maps.