3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-06 09:41:43 +02:00
Code Issues Projects Releases Packages Wiki Activity

🎉 Add comments to viewer.

Browse source
This commit is contained in:
Andrey Antukh 2020-11-18 17:36:14 +01:00 • committed by Alonso Torres
parent e1db6d3a37
commit 64a6ba1949
45 changed files with 1629 additions and 1074 deletions
Download patch file Download diff file Expand all files Collapse all files

175
frontend/src/app/main/ui/viewer/handoff/render.cljs
View file

@ -1,175 +0,0 @@
;; 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/.
;;
;; This Source Code Form is "Incompatible With Secondary Licenses", as
;; defined by the Mozilla Public License, v. 2.0.
;;
;; Copyright (c) 2020 UXBOX Labs SL
(ns app.main.ui.viewer.handoff.render
"The main container for a frame in handoff mode"
(:require
[rumext.alpha :as mf]
[app.util.object :as obj]
[app.util.dom :as dom]
[app.common.data :as d]
[app.common.pages :as cp]
[app.common.pages-helpers :as cph]
[app.common.geom.matrix :as gmt]
[app.common.geom.point :as gpt]
[app.common.geom.shapes :as geom]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.data.viewer :as dv]
[app.main.ui.shapes.filters :as filters]
[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.text :as text]
[app.main.ui.viewer.handoff.selection-feedback :refer [selection-feedback]]
[app.main.ui.shapes.shape :refer [shape-container]]))
(declare shape-container-factory)
(defn handle-hover-shape [{:keys [type id]} hover?]
#(when-not (#{:group :frame} type)
(do
(dom/prevent-default %)
(dom/stop-propagation %)
(st/emit! (dv/hover-shape id hover?)))))
(defn select-shape [{:keys [type id]}]
(fn [event]
(when-not (#{:group :frame} type)
(do
(dom/stop-propagation event)
(dom/prevent-default event)
(cond
(.-shiftKey event)
(st/emit! (dv/toggle-selection id))
:else
(st/emit! (dv/select-shape id)))))))
(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")]
[:> 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}]])))
(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}
[props]
(let [shape (unchecked-get props "shape")
childs (mapv #(get objects %) (:shapes shape))
shape (geom/transform-shape shape)
props (-> (obj/new)
(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/new)
(obj/merge! props)
(obj/merge! #js {:childs childs}))]
[:> group-wrapper props]))))
(defn shape-container-factory
[objects show-interactions?]
(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")
group-container (mf/use-memo
(mf/deps objects)
#(group-container-factory objects))]
(when (and shape (not (:hidden shape)))
(let [shape (geom/transform-shape frame shape)
opts #js {:shape shape
:frame frame}]
(case (:type shape)
:curve [:> path-wrapper 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])))))))
(defn adjust-frame-position [frame-id objects]
(let [frame (get objects frame-id)
modifier (-> (gpt/point (:x frame) (:y frame))
(gpt/negate)
(gmt/translate-matrix))
update-fn #(assoc-in %1 [%2 :modifiers :displacement] modifier)
modifier-ids (d/concat [frame-id] (cph/get-children frame-id objects))]
(reduce update-fn objects modifier-ids)))
(defn make-vbox [frame]
(str "0 0 " (:width frame 0) " " (:height frame 0)))
(mf/defc render-frame-svg
{::mf/wrap [mf/memo]}
[{:keys [objects frame-id zoom] :or {zoom 1} :as props}]
(let [objects (adjust-frame-position frame-id objects)
frame (get objects frame-id)
width (* (:width frame) zoom)
height (* (:height frame) zoom)
vbox (make-vbox frame)
render-frame (mf/use-memo
(mf/deps objects)
#(frame-container-factory objects))]
[:svg {:id "svg-frame"
:view-box vbox
:width width
:height height
:version "1.1"
:xmlnsXlink "http://www.w3.org/1999/xlink"
:xmlns "http://www.w3.org/2000/svg"}
[:& render-frame {:shape frame
:view-box vbox}]
[:& selection-feedback {:frame frame}]]))