mirror of
https://github.com/penpot/penpot.git
synced 2025-05-08 12:05:54 +02:00
216 lines
7.7 KiB
Clojure
216 lines
7.7 KiB
Clojure
;; This Source Code Form is subject to the terms of the Mozilla Public
|
|
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
;;
|
|
;; Copyright (c) UXBOX Labs SL
|
|
|
|
(ns app.main.ui.viewer.handoff.render
|
|
"The main container for a frame in handoff mode"
|
|
(:require
|
|
[app.common.geom.shapes :as gsh]
|
|
[app.common.pages.helpers :as cph]
|
|
[app.main.data.viewer :as dv]
|
|
[app.main.store :as st]
|
|
[app.main.ui.shapes.bool :as bool]
|
|
[app.main.ui.shapes.circle :as circle]
|
|
[app.main.ui.shapes.frame :as frame]
|
|
[app.main.ui.shapes.group :as group]
|
|
[app.main.ui.shapes.image :as image]
|
|
[app.main.ui.shapes.path :as path]
|
|
[app.main.ui.shapes.rect :as rect]
|
|
[app.main.ui.shapes.shape :refer [shape-container]]
|
|
[app.main.ui.shapes.svg-raw :as svg-raw]
|
|
[app.main.ui.shapes.text :as text]
|
|
[app.main.ui.viewer.handoff.selection-feedback :refer [selection-feedback]]
|
|
[app.main.ui.viewer.interactions :refer [prepare-objects]]
|
|
[app.util.dom :as dom]
|
|
[app.util.object :as obj]
|
|
[rumext.alpha :as mf]))
|
|
|
|
(declare shape-container-factory)
|
|
|
|
(defn handle-hover-shape
|
|
[shape hover?]
|
|
(fn [event]
|
|
(when-not (or (cph/group-shape? shape)
|
|
(cph/root-frame? shape))
|
|
(dom/prevent-default event)
|
|
(dom/stop-propagation event)
|
|
(st/emit! (dv/hover-shape (:id shape) hover?)))))
|
|
|
|
(defn select-shape [shape]
|
|
(fn [event]
|
|
(when-not (or (cph/group-shape? shape)
|
|
(cph/root-frame? shape))
|
|
(dom/stop-propagation event)
|
|
(dom/prevent-default event)
|
|
(cond
|
|
(.-shiftKey ^js event)
|
|
(st/emit! (dv/toggle-selection (:id shape)))
|
|
|
|
:else
|
|
(st/emit! (dv/select-shape (:id shape)))))))
|
|
|
|
(defn shape-wrapper-factory
|
|
[component]
|
|
(mf/fnc shape-wrapper
|
|
{::mf/wrap-props false}
|
|
[props]
|
|
(let [shape (unchecked-get props "shape")
|
|
childs (unchecked-get props "childs")
|
|
frame (unchecked-get props "frame")
|
|
render-wrapper? (or (not= :svg-raw (:type shape))
|
|
(svg-raw/graphic-element? (get-in shape [:content :tag])))]
|
|
|
|
(if render-wrapper?
|
|
[:> shape-container {:shape shape
|
|
:on-mouse-enter (handle-hover-shape shape true)
|
|
:on-mouse-leave (handle-hover-shape shape false)
|
|
:on-click (select-shape shape)}
|
|
[:& component {:shape shape
|
|
:frame frame
|
|
:childs childs
|
|
:is-child-selected? true}]]
|
|
|
|
;; Don't wrap svg elements inside a <g> otherwise some can break
|
|
[:& component {:shape shape
|
|
:frame frame
|
|
:childs childs}]))))
|
|
|
|
(defn frame-container-factory
|
|
[objects]
|
|
(let [shape-container (shape-container-factory objects)
|
|
frame-shape (frame/frame-shape shape-container)
|
|
frame-wrapper (shape-wrapper-factory frame-shape)]
|
|
(mf/fnc frame-container
|
|
{::mf/wrap-props false
|
|
::mf/wrap [mf/memo]}
|
|
[props]
|
|
(let [shape (unchecked-get props "shape")
|
|
childs (mapv #(get objects %) (:shapes shape))
|
|
shape (gsh/transform-shape shape)
|
|
|
|
props (-> (obj/create)
|
|
(obj/merge! props)
|
|
(obj/merge! #js {:shape shape
|
|
:childs childs}))]
|
|
[:> frame-wrapper props]))))
|
|
|
|
(defn group-container-factory
|
|
[objects]
|
|
(let [shape-container (shape-container-factory objects)
|
|
group-shape (group/group-shape shape-container)
|
|
group-wrapper (shape-wrapper-factory group-shape)]
|
|
(mf/fnc group-container
|
|
{::mf/wrap-props false}
|
|
[props]
|
|
(let [shape (unchecked-get props "shape")
|
|
childs (mapv #(get objects %) (:shapes shape))
|
|
props (-> (obj/create)
|
|
(obj/merge! props)
|
|
(obj/merge! #js {:childs childs}))]
|
|
[:> group-wrapper props]))))
|
|
|
|
(defn bool-container-factory
|
|
[objects]
|
|
(let [shape-container (shape-container-factory objects)
|
|
bool-shape (bool/bool-shape shape-container)
|
|
bool-wrapper (shape-wrapper-factory bool-shape)]
|
|
(mf/fnc bool-container
|
|
{::mf/wrap-props false}
|
|
[props]
|
|
(let [shape (unchecked-get props "shape")
|
|
children (->> (cph/get-children-ids objects (:id shape))
|
|
(select-keys objects))
|
|
props (-> (obj/create)
|
|
(obj/merge! props)
|
|
(obj/merge! #js {:childs children}))]
|
|
[:> bool-wrapper props]))))
|
|
|
|
(defn svg-raw-container-factory
|
|
[objects]
|
|
(let [shape-container (shape-container-factory objects)
|
|
svg-raw-shape (svg-raw/svg-raw-shape shape-container)
|
|
svg-raw-wrapper (shape-wrapper-factory svg-raw-shape)]
|
|
(mf/fnc group-container
|
|
{::mf/wrap-props false}
|
|
[props]
|
|
(let [shape (unchecked-get props "shape")
|
|
childs (mapv #(get objects %) (:shapes shape))
|
|
props (-> (obj/create)
|
|
(obj/merge! props)
|
|
(obj/merge! #js {:childs childs}))]
|
|
[:> svg-raw-wrapper props]))))
|
|
|
|
(defn shape-container-factory
|
|
[objects]
|
|
(let [path-wrapper (shape-wrapper-factory path/path-shape)
|
|
text-wrapper (shape-wrapper-factory text/text-shape)
|
|
rect-wrapper (shape-wrapper-factory rect/rect-shape)
|
|
image-wrapper (shape-wrapper-factory image/image-shape)
|
|
circle-wrapper (shape-wrapper-factory circle/circle-shape)]
|
|
(mf/fnc shape-container
|
|
{::mf/wrap-props false}
|
|
[props]
|
|
(let [shape (unchecked-get props "shape")
|
|
frame (unchecked-get props "frame")
|
|
|
|
frame-container
|
|
(mf/use-memo (mf/deps objects)
|
|
#(frame-container-factory objects))
|
|
|
|
group-container
|
|
(mf/use-memo (mf/deps objects)
|
|
#(group-container-factory objects))
|
|
|
|
bool-container
|
|
(mf/use-memo (mf/deps objects)
|
|
#(bool-container-factory objects))
|
|
|
|
svg-raw-container
|
|
(mf/use-memo (mf/deps objects)
|
|
#(svg-raw-container-factory objects))]
|
|
(when (and shape (not (:hidden shape)))
|
|
(let [shape (-> (gsh/transform-shape shape)
|
|
(gsh/translate-to-frame frame))
|
|
opts #js {:shape shape
|
|
:frame frame}]
|
|
(case (:type shape)
|
|
:frame [:> frame-container opts]
|
|
:text [:> text-wrapper opts]
|
|
:rect [:> rect-wrapper opts]
|
|
:path [:> path-wrapper opts]
|
|
:image [:> image-wrapper opts]
|
|
:circle [:> circle-wrapper opts]
|
|
:group [:> group-container opts]
|
|
:bool [:> bool-container opts]
|
|
:svg-raw [:> svg-raw-container opts])))))))
|
|
|
|
(mf/defc render-frame-svg
|
|
[{:keys [page frame local size]}]
|
|
(let [objects (mf/with-memo [page frame size]
|
|
(prepare-objects page frame size))
|
|
|
|
;; Retrieve frame again with correct modifier
|
|
frame (get objects (:id frame))
|
|
render (mf/use-memo
|
|
(mf/deps objects)
|
|
#(frame-container-factory objects))]
|
|
|
|
[:svg
|
|
{:id "svg-frame"
|
|
:view-box (:vbox size)
|
|
:width (:width size)
|
|
:height (:height size)
|
|
:version "1.1"
|
|
:xmlnsXlink "http://www.w3.org/1999/xlink"
|
|
:xmlns "http://www.w3.org/2000/svg"
|
|
:fill "none"}
|
|
|
|
[:& render {:shape frame :view-box (:vbox size)}]
|
|
[:& selection-feedback
|
|
{:frame frame
|
|
:objects objects
|
|
:local local
|
|
:size size}]]))
|
|
|