mirror of
https://github.com/penpot/penpot.git
synced 2025-03-18 02:32:13 -05:00
⬆️ Update to the latest version of rumext.
This commit is contained in:
Andrey Antukh
parent
2796f9d9c1
commit
2009545d6a
33 changed files with 186 additions and 508 deletions
|
|
@ -16,7 +16,7 @@
|
|||
funcool/lentes {:mvn/version "1.4.0-SNAPSHOT"}
|
||||
funcool/potok {:mvn/version "2.8.0-SNAPSHOT"}
|
||||
funcool/promesa {:mvn/version "5.0.0"}
|
||||
funcool/rumext {:mvn/version "2020.03.23-1"}
|
||||
funcool/rumext {:mvn/version "2020.03.24-1"}
|
||||
}
|
||||
:paths ["src" "vendor" "resources" "../common"]
|
||||
:aliases
|
||||
|
|
|
|||
|
|
@ -10,10 +10,8 @@
|
|||
<body>
|
||||
{{& ic }}
|
||||
<section id="app" tabindex="1"></section>
|
||||
<section id="lightbox"></section>
|
||||
<section id="loader"></section>
|
||||
<section id="modal"></section>
|
||||
|
||||
<script>
|
||||
window.uxboxConfig = JSON.parse({{& config }});
|
||||
window.uxboxTranslations = JSON.parse({{& translations }});
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@
|
|||
[uxbox.main.data.users :as udu]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.ui :as ui]
|
||||
[uxbox.main.ui.lightbox :refer [lightbox]]
|
||||
[uxbox.main.ui.modal :refer [modal]]
|
||||
[uxbox.main.ui.loader :refer [loader]]
|
||||
[uxbox.util.dom :as dom]
|
||||
|
|
@ -58,7 +57,6 @@
|
|||
(st/emit! udu/fetch-profile))
|
||||
|
||||
(mf/mount (mf/element ui/app) (dom/get-element "app"))
|
||||
(mf/mount (lightbox) (dom/get-element "lightbox"))
|
||||
(mf/mount (mf/element modal) (dom/get-element "modal"))
|
||||
(mf/mount (mf/element loader) (dom/get-element "loader"))
|
||||
|
||||
|
|
@ -78,7 +76,7 @@
|
|||
[]
|
||||
(remove-watch html-history/path ::main)
|
||||
(mf/unmount (dom/get-element "app"))
|
||||
(mf/unmount (dom/get-element "lightbox"))
|
||||
(mf/unmount (dom/get-element "modal"))
|
||||
(mf/unmount (dom/get-element "loader"))
|
||||
(init-ui))
|
||||
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@
|
|||
:version "1.1"
|
||||
:xmlnsXlink "http://www.w3.org/1999/xlink"
|
||||
:xmlns "http://www.w3.org/2000/svg"}
|
||||
(background)
|
||||
[:& background]
|
||||
[:*
|
||||
(for [item frame]
|
||||
[:& shape-wrapper {:shape item :key (:id item)}])
|
||||
|
|
|
|||
|
|
@ -39,6 +39,6 @@
|
|||
|
||||
(let [initial (mf/use-memo initial-state)
|
||||
state (mf/use-state initial)]
|
||||
(mf/use-effect {:deps true :fn #(after-render state)})
|
||||
(mf/use-effect nil #(after-render state))
|
||||
(for [item (:current @state)]
|
||||
(children item)))))
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
(events/unlistenByKey lkey1)
|
||||
(events/unlistenByKey lkey2))))]
|
||||
|
||||
(mf/use-effect {:fn on-mount})
|
||||
(mf/use-effect on-mount)
|
||||
children))
|
||||
|
||||
(mf/defc dropdown
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
is-editing (or edit (:editing @state))
|
||||
start-editing (fn []
|
||||
(swap! state assoc :editing true)
|
||||
(timers/schedule 100 #(dom/focus! (mf/ref-node input))))
|
||||
(timers/schedule 100 #(dom/focus! (mf/ref-val input))))
|
||||
stop-editing (fn [] (swap! state assoc :editing false))
|
||||
cancel-editing (fn []
|
||||
(stop-editing)
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
(let [edit? (mf/use-state false)
|
||||
input (mf/use-ref nil)]
|
||||
(letfn [(save []
|
||||
(let [new-value (-> (mf/ref-node input)
|
||||
(let [new-value (-> (mf/ref-val input)
|
||||
(dom/get-inner-text)
|
||||
(str/trim))]
|
||||
(on-change new-value)
|
||||
|
|
|
|||
|
|
@ -1,203 +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/.
|
||||
;;
|
||||
;; Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
|
||||
;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
(ns uxbox.main.ui.dashboard.elements
|
||||
(:require [potok.core :as ptk]
|
||||
[uxbox.main.data.dashboard :as dd]
|
||||
[uxbox.main.data.lightbox :as udl]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.main.ui.lightbox :as lbx]
|
||||
#_[uxbox.main.ui.dashboard.header :refer (header)]
|
||||
[uxbox.util.dom :as dom]))
|
||||
|
||||
;; --- Page Title
|
||||
|
||||
;; (defn page-title-render
|
||||
;; []
|
||||
;; (html
|
||||
;; [:div.dashboard-title
|
||||
;; [:h2 "Element library name"]
|
||||
;; [:div.edition
|
||||
;; [:span i/pencil]
|
||||
;; [:span i/trash]]]))
|
||||
|
||||
;; (def ^:private page-title
|
||||
;; (mx/component
|
||||
;; {:render page-title-render
|
||||
;; :name "page-title"
|
||||
;; :mixins [mx/static]}))
|
||||
|
||||
;; ;; --- Grid
|
||||
|
||||
;; (defn grid-render
|
||||
;; [own]
|
||||
;; (html
|
||||
;; [:div.dashboard-grid-content
|
||||
;; [:div.dashboard-grid-row
|
||||
;; [:div.grid-item.add-project
|
||||
;; {on-click #(udl/open! :new-element)}
|
||||
;; [:span "+ New element"]]
|
||||
;; [:div.grid-item.project-th
|
||||
;; [:span.grid-item-image i/image]
|
||||
;; [:h3 "Custom element"]
|
||||
;; [:div.project-th-actions
|
||||
;; [:div.project-th-icon.edit i/pencil]
|
||||
;; [:div.project-th-icon.delete i/trash]]]
|
||||
;; [:div.grid-item.project-th
|
||||
;; [:span.grid-item-image i/image]
|
||||
;; [:h3 "Custom element"]
|
||||
;; [:div.project-th-actions
|
||||
;; [:div.project-th-icon.edit i/pencil]
|
||||
;; [:div.project-th-icon.delete i/trash]]]
|
||||
;; [:div.grid-item.project-th
|
||||
;; [:span.grid-item-image i/image]
|
||||
;; [:h3 "Custom element"]
|
||||
;; [:div.project-th-actions
|
||||
;; [:div.project-th-icon.edit i/pencil]
|
||||
;; [:div.project-th-icon.delete i/trash]]]
|
||||
;; [:div.grid-item.project-th
|
||||
;; [:span.grid-item-image i/image]
|
||||
;; [:h3 "Custom element"]
|
||||
;; [:div.project-th-actions
|
||||
;; [:div.project-th-icon.edit i/pencil]
|
||||
;; [:div.project-th-icon.delete i/trash]]]
|
||||
;; [:div.grid-item.project-th
|
||||
;; [:span.grid-item-image i/image]
|
||||
;; [:h3 "Custom element"]
|
||||
;; [:div.project-th-actions
|
||||
;; [:div.project-th-icon.edit i/pencil]
|
||||
;; [:div.project-th-icon.delete i/trash]]]
|
||||
;; [:div.grid-item.project-th
|
||||
;; [:span.grid-item-image i/image]
|
||||
;; [:h3 "Custom element"]
|
||||
;; [:div.project-th-actions
|
||||
;; [:div.project-th-icon.edit i/pencil]
|
||||
;; [:div.project-th-icon.delete i/trash]]]
|
||||
;; [:div.grid-item.project-th
|
||||
;; [:span.grid-item-image i/image]
|
||||
;; [:h3 "Custom element"]
|
||||
;; [:div.project-th-actions
|
||||
;; [:div.project-th-icon.edit i/pencil]
|
||||
;; [:div.project-th-icon.delete i/trash]]]
|
||||
;; [:div.grid-item.project-th
|
||||
;; [:span.grid-item-image i/image]
|
||||
;; [:h3 "Custom element"]
|
||||
;; [:div.project-th-actions
|
||||
;; [:div.project-th-icon.edit i/pencil]
|
||||
;; [:div.project-th-icon.delete i/trash]]]
|
||||
;; [:div.grid-item.project-th
|
||||
;; [:span.grid-item-image i/image]
|
||||
;; [:h3 "Custom element"]
|
||||
;; [:div.project-th-actions
|
||||
;; [:div.project-th-icon.edit i/pencil]
|
||||
;; [:div.project-th-icon.delete i/trash]]]
|
||||
;; [:div.grid-item.project-th
|
||||
;; [:span.grid-item-image i/image]
|
||||
;; [:h3 "Custom element"]
|
||||
;; [:div.project-th-actions
|
||||
;; [:div.project-th-icon.edit i/pencil]
|
||||
;; [:div.project-th-icon.delete i/trash]]]
|
||||
;; [:div.grid-item.project-th
|
||||
;; [:span.grid-item-image i/image]
|
||||
;; [:h3 "Custom element"]
|
||||
;; [:div.project-th-actions
|
||||
;; [:div.project-th-icon.edit i/pencil]
|
||||
;; [:div.project-th-icon.delete i/trash]]]
|
||||
;; [:div.grid-item.project-th
|
||||
;; [:span.grid-item-image i/image]
|
||||
;; [:h3 "Custom element"]
|
||||
;; [:div.project-th-actions
|
||||
;; [:div.project-th-icon.edit i/pencil]
|
||||
;; [:div.project-th-icon.delete i/trash]]]
|
||||
;; [:div.grid-item.project-th
|
||||
;; [:span.grid-item-image i/image]
|
||||
;; [:h3 "Custom element"]
|
||||
;; [:div.project-th-actions
|
||||
;; [:div.project-th-icon.edit i/pencil]
|
||||
;; [:div.project-th-icon.delete i/trash]]]]]))
|
||||
|
||||
;; (def ^:private grid
|
||||
;; (mx/component
|
||||
;; {:render grid-render
|
||||
;; :name "grid"
|
||||
;; :mixins [mx/static]}))
|
||||
|
||||
;; --- Elements Page
|
||||
|
||||
;; (defn elements-page-render
|
||||
;; [own]
|
||||
;; (html
|
||||
;; [:main.dashboard-main
|
||||
;; (header)
|
||||
;; [:section.dashboard-content
|
||||
;; (ui.library-bar/library-bar)
|
||||
;; [:section.dashboard-grid.library
|
||||
;; (page-title)
|
||||
;; (grid)]]]))
|
||||
|
||||
;; (defn elements-page-init
|
||||
;; [own]
|
||||
;; (st/emit! (dd/initialize :dashboard/elements))
|
||||
;; own)
|
||||
|
||||
;; (def elements-page
|
||||
;; (mx/component
|
||||
;; {:render elements-page-render
|
||||
;; :init elements-page-init
|
||||
;; :name "elements-page"
|
||||
;; :mixins [mx/static]}))
|
||||
|
||||
;; --- New Element Lightbox (TODO)
|
||||
|
||||
;; (defn- new-element-lightbox-render
|
||||
;; [own]
|
||||
;; (html
|
||||
;; ;;------Element lightbox
|
||||
|
||||
;; ;;[:div.lightbox-body
|
||||
;; ;;[:h3 "New element"]
|
||||
;; ;;[:div.row-flex
|
||||
;; ;;[:div.lightbox-big-btn
|
||||
;; ;;[:span.big-svg i/shapes]
|
||||
;; ;;[:span.text "Go to workspace"]]
|
||||
;; ;;[:div.lightbox-big-btn
|
||||
;; ;;[:span.big-svg.upload i/exit]
|
||||
;; ;;[:span.text "Upload file"]]]
|
||||
;; ;;[:a.close {:href "#"
|
||||
;; ;;:on-click #(do (dom/prevent-default %)
|
||||
;; ;;(udl/close!))}
|
||||
;; ;;i/close]]
|
||||
|
||||
;; ;;------Upload image lightbox
|
||||
|
||||
;; ;;[:div.lightbox-body
|
||||
;; ;;[:h3 "Import image"]
|
||||
;; ;;[:div.row-flex
|
||||
;; ;;[:div.lightbox-big-btn
|
||||
;; ;;[:span.big-svg i/image]
|
||||
;; ;;[:span.text "Select from library"]]
|
||||
;; ;;[:div.lightbox-big-btn
|
||||
;; ;;[:span.big-svg.upload i/exit]
|
||||
;; ;;[:span.text "Upload file"]]]
|
||||
;; ;;[:a.close {:href "#"
|
||||
;; ;;:on-click #(do (dom/prevent-default %)
|
||||
;; ;;(udl/close!))}
|
||||
;; ;;i/close]]
|
||||
|
||||
;; ;;------Upload image library lightbox
|
||||
|
||||
;; ))
|
||||
|
||||
;; (def ^:private new-element-lightbox
|
||||
;; (mx/component
|
||||
;; {:render new-element-lightbox-render
|
||||
;; :name "new-element-lightbox"}))
|
||||
|
||||
;; (defmethod lbx/render-lightbox :new-element
|
||||
;; [_]
|
||||
;; (new-element-lightbox))
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
[:& colorpicker {:value (:current-color @state)
|
||||
:colors (into-array @most-used-colors)
|
||||
:on-change #(swap! state assoc :current-color %)}]
|
||||
|
||||
|
||||
[:input.btn-primary {:type "button"
|
||||
:value (tr "ds.button.save")
|
||||
:on-click accept}]
|
||||
|
|
@ -205,9 +205,9 @@
|
|||
[:div.library-card-image
|
||||
[:svg {:view-box (->> metadata :view-box (str/join " "))
|
||||
:width (:width metadata)
|
||||
:height (:height metadata)
|
||||
:height (:height metadata)
|
||||
:dangerouslySetInnerHTML {:__html content}}]]
|
||||
|
||||
|
||||
[:div.library-card-footer
|
||||
[:div.library-card-footer-name name]
|
||||
[:div.library-card-footer-timestamp time]
|
||||
|
|
@ -321,22 +321,26 @@
|
|||
last-deleted-library (mf/deref last-deleted-library-ref)
|
||||
selected-library (first (filter #(= (:id %) library-id) libraries))]
|
||||
|
||||
(mf/use-effect {:fn #(if (and (nil? library-id) (> (count libraries) 0))
|
||||
(let [path (keyword (str "dashboard-library-" (name section)))]
|
||||
(st/emit! (rt/nav path {:team-id team-id :library-id (:id (first libraries))}))))
|
||||
:deps (mf/deps libraries)})
|
||||
(mf/use-effect
|
||||
(mf/deps libraries)
|
||||
#(if (and (nil? library-id) (> (count libraries) 0))
|
||||
(let [path (keyword (str "dashboard-library-" (name section)))]
|
||||
(st/emit! (rt/nav path {:team-id team-id :library-id (:id (first libraries))})))))
|
||||
|
||||
(mf/use-effect {:fn #(if (and library-id (not (some (fn [{id :id}] (= library-id id)) libraries)))
|
||||
(let [path (keyword (str "dashboard-library-" (name section) "-index"))]
|
||||
(st/emit! (rt/nav path {:team-id team-id}))))
|
||||
:deps (mf/deps libraries)})
|
||||
(mf/use-effect
|
||||
(mf/deps libraries)
|
||||
#(if (and library-id (not (some (fn [{id :id}] (= library-id id)) libraries)))
|
||||
(let [path (keyword (str "dashboard-library-" (name section) "-index"))]
|
||||
(st/emit! (rt/nav path {:team-id team-id})))))
|
||||
|
||||
(mf/use-effect {:fn #(st/emit! (dlib/retrieve-libraries section team-id))
|
||||
:deps (mf/deps section team-id)})
|
||||
(mf/use-effect
|
||||
(mf/deps section team-id)
|
||||
#(st/emit! (dlib/retrieve-libraries section team-id)))
|
||||
|
||||
(mf/use-effect {:fn #(when (and library-id (not= last-deleted-library library-id))
|
||||
(st/emit! (dlib/retrieve-library-data section library-id)))
|
||||
:deps (mf/deps library-id last-deleted-library)})
|
||||
(mf/use-effect
|
||||
(mf/deps library-id last-deleted-library)
|
||||
#(when (and library-id (not= last-deleted-library library-id))
|
||||
(st/emit! (dlib/retrieve-library-data section library-id))))
|
||||
|
||||
[:div.library-page
|
||||
[:& library-header {:section section :team-id team-id}]
|
||||
|
|
|
|||
|
|
@ -82,8 +82,8 @@
|
|||
(sort-by :modified-at)
|
||||
(reverse))]
|
||||
(mf/use-effect
|
||||
{:fn #(st/emit! (dsh/initialize-project team-id project-id))
|
||||
:deps (mf/deps section team-id project-id)})
|
||||
(mf/deps section team-id project-id)
|
||||
#(st/emit! (dsh/initialize-project team-id project-id)))
|
||||
|
||||
[:*
|
||||
[:& project-header {:team-id team-id :project-id project-id}]
|
||||
|
|
|
|||
|
|
@ -70,16 +70,17 @@
|
|||
|
||||
(mf/defc recent-files-page
|
||||
[{:keys [team-id] :as props}]
|
||||
(mf/use-effect
|
||||
{:fn #(st/emit! (dsh/initialize-recent team-id))
|
||||
:deps (mf/deps team-id)})
|
||||
(let [projects (->> (mf/deref projects-ref)
|
||||
(vals)
|
||||
(sort-by :modified-at)
|
||||
(reverse))
|
||||
files (mf/deref files-ref)
|
||||
recent-file-ids (mf/deref recent-file-ids-ref)
|
||||
locale (i18n/use-locale)]
|
||||
locale (i18n/use-locale)
|
||||
setup #(st/emit! (dsh/initialize-recent team-id))]
|
||||
|
||||
(-> (mf/deps team-id)
|
||||
(mf/use-effect #(st/emit! (dsh/initialize-recent team-id))))
|
||||
|
||||
(when (and projects recent-file-ids)
|
||||
[:*
|
||||
|
|
|
|||
|
|
@ -28,8 +28,9 @@
|
|||
(let [search-result (mf/deref search-result-ref)
|
||||
locale (i18n/use-locale)]
|
||||
(mf/use-effect
|
||||
{:fn #(st/emit! (dsh/initialize-search team-id search-term))
|
||||
:deps (mf/deps search-term)})
|
||||
(mf/deps search-term)
|
||||
#(st/emit! (dsh/initialize-search team-id search-term)))
|
||||
|
||||
[:section.search-page
|
||||
[:section.dashboard-grid
|
||||
[:div.dashboard-grid-content
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@
|
|||
(fn [e]
|
||||
(= (.-keyCode e) keycode)))
|
||||
|
||||
(defn ctrl?
|
||||
(defn ^boolean ctrl?
|
||||
[event]
|
||||
(.-ctrlKey event))
|
||||
|
||||
(defn shift?
|
||||
(defn ^boolean shift?
|
||||
[event]
|
||||
(.-shiftKey event))
|
||||
|
||||
|
|
|
|||
|
|
@ -1,63 +0,0 @@
|
|||
(ns uxbox.main.ui.lightbox
|
||||
"DEPRECATED: should be replaced by uxbox.main.ui.modal"
|
||||
(:require
|
||||
[goog.events :as events]
|
||||
[lentes.core :as l]
|
||||
[rumext.core :as mx]
|
||||
[rumext.alpha :as mf]
|
||||
[uxbox.main.data.lightbox :as udl]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.ui.keyboard :as k]
|
||||
[uxbox.util.data :refer [classnames]]
|
||||
[uxbox.util.dom :as dom])
|
||||
(:import goog.events.EventType))
|
||||
|
||||
;; --- Refs
|
||||
|
||||
(def ^:private lightbox-ref
|
||||
(-> (l/key :lightbox)
|
||||
(l/derive st/state)))
|
||||
|
||||
;; --- Lightbox (Component)
|
||||
|
||||
(defmulti render-lightbox :name)
|
||||
(defmethod render-lightbox :default [_] nil)
|
||||
|
||||
(defn- on-esc-clicked
|
||||
[event]
|
||||
(when (k/esc? event)
|
||||
(udl/close!)
|
||||
(dom/stop-propagation event)))
|
||||
|
||||
(defn- on-out-clicked
|
||||
[own event]
|
||||
(let [parent (mf/ref-node (::parent own))
|
||||
current (dom/get-target event)]
|
||||
(when (dom/equals? parent current)
|
||||
(st/emit! (udl/hide-lightbox)))))
|
||||
|
||||
(mf/def lightbox
|
||||
:mixins #{mf/reactive}
|
||||
|
||||
:init
|
||||
(fn [own props]
|
||||
(let [key (events/listen js/document EventType.KEYDOWN on-esc-clicked)]
|
||||
(assoc own
|
||||
::key-listener key
|
||||
::parent (mf/create-ref))))
|
||||
|
||||
:will-unmount
|
||||
(fn [own]
|
||||
(events/unlistenByKey (::key-listener own))
|
||||
(dissoc own ::key-listener))
|
||||
|
||||
:render
|
||||
(fn [own props]
|
||||
(let [data (mf/react lightbox-ref)
|
||||
classes (classnames
|
||||
:hide (nil? data)
|
||||
:transparent (:transparent? data))]
|
||||
[:div.lightbox {:class classes
|
||||
:ref (::parent own)
|
||||
:on-click (partial on-out-clicked own)}
|
||||
(render-lightbox data)])))
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
|
||||
(defn- on-parent-clicked
|
||||
[event parent-ref]
|
||||
(let [parent (mf/ref-node parent-ref)
|
||||
(let [parent (mf/ref-val parent-ref)
|
||||
current (dom/get-target event)]
|
||||
(when (dom/equals? parent current)
|
||||
(reset! state nil)
|
||||
|
|
|
|||
|
|
@ -115,6 +115,6 @@
|
|||
[props]
|
||||
[:div.login
|
||||
[:div.login-body
|
||||
(messages-widget)
|
||||
[:& messages-widget]
|
||||
[:a i/logo]
|
||||
[:& register-form]]])
|
||||
|
|
|
|||
|
|
@ -62,8 +62,6 @@
|
|||
(declare frame-shape)
|
||||
(declare translate-to-frame)
|
||||
|
||||
(def kaka [1 2 3])
|
||||
|
||||
(defn wrap-memo-frame
|
||||
([component]
|
||||
(js/React.memo
|
||||
|
|
@ -90,9 +88,8 @@
|
|||
{:wrap [wrap-memo-frame]}
|
||||
[{:keys [shape objects] :as props}]
|
||||
(when (and shape (not (:hidden shape)))
|
||||
(let [selected-iref (mf/use-memo
|
||||
{:fn #(refs/make-selected (:id shape))
|
||||
:deps (mf/deps (:id shape))})
|
||||
(let [selected-iref (-> (mf/deps (:id shape))
|
||||
(mf/use-memo #(refs/make-selected (:id shape))))
|
||||
selected? (mf/deref selected-iref)
|
||||
on-mouse-down #(common/on-mouse-down % shape)
|
||||
on-context-menu #(common/on-context-menu % shape)
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
(ns uxbox.main.ui.shapes.group
|
||||
#_(:require
|
||||
[lentes.core :as l]
|
||||
[rumext.core :as mx]
|
||||
[uxbox.main.geom :as geom]
|
||||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.store :as st]
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
[goog.events :as events]
|
||||
[goog.object :as gobj]
|
||||
[lentes.core :as l]
|
||||
[rumext.core :as mx]
|
||||
[rumext.alpha :as mf]
|
||||
[uxbox.main.data.workspace :as dw]
|
||||
[uxbox.main.geom :as geom]
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
[event frame]
|
||||
(when (kbd/ctrl? event)
|
||||
(let [prev-zoom @refs/selected-zoom
|
||||
dom (mf/ref-node frame)
|
||||
dom (mf/ref-val frame)
|
||||
scroll-position (scroll/get-current-position-absolute dom)
|
||||
mouse-point @ms/mouse-position]
|
||||
(dom/prevent-default event)
|
||||
|
|
@ -102,26 +102,26 @@
|
|||
|
||||
(mf/defc workspace
|
||||
[{:keys [file-id page-id] :as props}]
|
||||
(mf/use-effect
|
||||
{:deps (mf/deps file-id page-id)
|
||||
:fn (fn []
|
||||
(st/emit! (dw/initialize file-id page-id))
|
||||
#(st/emit! (dw/finalize file-id page-id)))})
|
||||
|
||||
(mf/use-effect
|
||||
{:deps (mf/deps file-id)
|
||||
:fn (fn []
|
||||
(st/emit! (dw/initialize-ws file-id))
|
||||
#(st/emit! (dw/finalize-ws file-id)))})
|
||||
(-> (mf/deps file-id page-id)
|
||||
(mf/use-effect
|
||||
(fn []
|
||||
(st/emit! (dw/initialize file-id page-id))
|
||||
#(st/emit! (dw/finalize file-id page-id)))))
|
||||
|
||||
(mf/use-effect
|
||||
{:fn #(st/emit! dw/initialize-layout)})
|
||||
(-> (mf/deps file-id)
|
||||
(mf/use-effect
|
||||
(fn []
|
||||
(st/emit! (dw/initialize-ws file-id))
|
||||
#(st/emit! (dw/finalize-ws file-id)))))
|
||||
|
||||
(mf/use-effect
|
||||
{:deps (mf/deps file-id)
|
||||
:fn (fn []
|
||||
(st/emit! dw/initialize-shortcuts)
|
||||
#(st/emit! ::dw/finalize-shortcuts))})
|
||||
(-> (mf/deps file-id)
|
||||
(mf/use-effect
|
||||
(fn []
|
||||
(st/emit! dw/initialize-shortcuts)
|
||||
#(st/emit! ::dw/finalize-shortcuts))))
|
||||
|
||||
(mf/use-effect #(st/emit! dw/initialize-layout))
|
||||
|
||||
(let [file (mf/deref refs/workspace-file)
|
||||
page (mf/deref refs/workspace-page)
|
||||
|
|
|
|||
|
|
@ -1,48 +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/.
|
||||
;;
|
||||
;; Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
|
||||
;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
(ns uxbox.main.ui.workspace.clipboard
|
||||
(:require
|
||||
[lentes.core :as l]
|
||||
[potok.core :as ptk]
|
||||
[rumext.alpha :as mf]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.main.data.lightbox :as udl]
|
||||
[uxbox.main.data.workspace :as udw]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.ui.lightbox :as lbx]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.time :as dt]))
|
||||
|
||||
(mf/def clipboard-dialog
|
||||
:mixins [mf/reactive]
|
||||
:init
|
||||
(fn [own props]
|
||||
(assoc own ::clipboard (-> (l/key :clipboard)
|
||||
(l/derive st/state))))
|
||||
|
||||
:render
|
||||
(fn [own props]
|
||||
[]
|
||||
(letfn [(on-paste [item]
|
||||
#_(st/emit! (udw/paste-from-clipboard (:id item)))
|
||||
(udl/close!))
|
||||
(on-close [event]
|
||||
(dom/prevent-default event)
|
||||
(udl/close!))]
|
||||
[:div.lightbox-body.clipboard
|
||||
[:div.clipboard-list
|
||||
(for [item (mf/react (::clipboard own))]
|
||||
[:div.clipboard-item {:key (str (:id item))
|
||||
:on-click (partial on-paste item)}
|
||||
[:span.clipboard-icon i/box]
|
||||
[:span (str "Copied (" (dt/timeago (:created-at item)) ")")]])]
|
||||
[:a.close {:href "#" :on-click on-close} i/close]])))
|
||||
|
||||
(defmethod lbx/render-lightbox :clipboard
|
||||
[_]
|
||||
(clipboard-dialog))
|
||||
|
|
@ -73,13 +73,13 @@
|
|||
on-left-arrow-click
|
||||
(fn [event]
|
||||
(when (> offset 0)
|
||||
(let [element (mf/ref-node container-child)]
|
||||
(let [element (mf/ref-val container-child)]
|
||||
(swap! local update :offset dec))))
|
||||
|
||||
on-right-arrow-click
|
||||
(fn [event]
|
||||
(when (< offset invisible)
|
||||
(let [element (mf/ref-node container-child)]
|
||||
(let [element (mf/ref-val container-child)]
|
||||
(swap! local update :offset inc))))
|
||||
|
||||
on-scroll
|
||||
|
|
@ -90,12 +90,12 @@
|
|||
|
||||
after-render
|
||||
(fn []
|
||||
(let [dom (mf/ref-node container)
|
||||
(let [dom (mf/ref-val container)
|
||||
width (.-clientWidth dom)]
|
||||
(when (not= (:width @local) width)
|
||||
(swap! local assoc :width width))))]
|
||||
|
||||
(mf/use-effect {:deps true :fn after-render})
|
||||
(mf/use-effect nil after-render)
|
||||
|
||||
[:div.color-palette
|
||||
[:div.color-palette-actions
|
||||
|
|
|
|||
|
|
@ -6,17 +6,15 @@
|
|||
;; Copyright (c) 2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
(ns uxbox.main.ui.workspace.download
|
||||
(:require [cuerdas.core :as str]
|
||||
#_(:require [cuerdas.core :as str]
|
||||
[beicon.core :as rx]
|
||||
[potok.core :as ptk]
|
||||
[lentes.core :as l]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.data.lightbox :as udl]
|
||||
;; [uxbox.main.exports :as exports]
|
||||
[uxbox.main.ui.lightbox :as lbx]
|
||||
[uxbox.util.blob :as blob]
|
||||
[uxbox.util.data :refer (read-string)]
|
||||
[uxbox.util.time :as dt]
|
||||
|
|
@ -25,119 +23,119 @@
|
|||
|
||||
;; --- Refs
|
||||
|
||||
(defn- resolve-pages
|
||||
[state]
|
||||
(let [project (get-in state [:workspace :project])]
|
||||
(->> (vals (:pages state))
|
||||
(filter #(= project (:project %)))
|
||||
(sort-by :created-at))))
|
||||
;; (defn- resolve-pages
|
||||
;; [state]
|
||||
;; (let [project (get-in state [:workspace :project])]
|
||||
;; (->> (vals (:pages state))
|
||||
;; (filter #(= project (:project %)))
|
||||
;; (sort-by :created-at))))
|
||||
|
||||
(def pages-ref
|
||||
(-> (l/lens resolve-pages)
|
||||
(l/derive st/state)))
|
||||
;; (def pages-ref
|
||||
;; (-> (l/lens resolve-pages)
|
||||
;; (l/derive st/state)))
|
||||
|
||||
(def current-page-ref
|
||||
(-> (l/in [:workspace :page])
|
||||
(l/derive st/state)))
|
||||
;; (def current-page-ref
|
||||
;; (-> (l/in [:workspace :page])
|
||||
;; (l/derive st/state)))
|
||||
|
||||
;; --- Download Lightbox (Component)
|
||||
;; ;; --- Download Lightbox (Component)
|
||||
|
||||
(defn- download-page-svg
|
||||
[{:keys [name id] :as page}]
|
||||
(let [content (or #_(exports/render-page id) "")
|
||||
blob (blob/create content "image/svg+xml")
|
||||
uri (blob/create-uri blob)
|
||||
link (.createElement js/document "a")
|
||||
event (js/MouseEvent. "click")
|
||||
now (dt/now)]
|
||||
;; (defn- download-page-svg
|
||||
;; [{:keys [name id] :as page}]
|
||||
;; (let [content (or #_(exports/render-page id) "")
|
||||
;; blob (blob/create content "image/svg+xml")
|
||||
;; uri (blob/create-uri blob)
|
||||
;; link (.createElement js/document "a")
|
||||
;; event (js/MouseEvent. "click")
|
||||
;; now (dt/now)]
|
||||
|
||||
(.setAttribute link "href" uri)
|
||||
(.setAttribute link "download" (str (str/uslug name) "_"
|
||||
(dt/format now :unix)
|
||||
".svg"))
|
||||
;; (.setAttribute link "href" uri)
|
||||
;; (.setAttribute link "download" (str (str/uslug name) "_"
|
||||
;; (dt/format now :unix)
|
||||
;; ".svg"))
|
||||
|
||||
(.appendChild (.-body js/document) link)
|
||||
(.dispatchEvent link event)
|
||||
(blob/revoke-uri uri)
|
||||
(.removeChild (.-body js/document) link)))
|
||||
;; (.appendChild (.-body js/document) link)
|
||||
;; (.dispatchEvent link event)
|
||||
;; (blob/revoke-uri uri)
|
||||
;; (.removeChild (.-body js/document) link)))
|
||||
|
||||
(defn- generate-files
|
||||
[pages]
|
||||
(reduce (fn [acc {:keys [id name]}]
|
||||
(let [content (or #_(exports/render-page id) "")]
|
||||
(conj acc [(str (str/uslug name) ".svg")
|
||||
(blob/create content "image/svg+xml")])))
|
||||
[]
|
||||
pages))
|
||||
;; (defn- generate-files
|
||||
;; [pages]
|
||||
;; (reduce (fn [acc {:keys [id name]}]
|
||||
;; (let [content (or #_(exports/render-page id) "")]
|
||||
;; (conj acc [(str (str/uslug name) ".svg")
|
||||
;; (blob/create content "image/svg+xml")])))
|
||||
;; []
|
||||
;; pages))
|
||||
|
||||
(defn- download-project-zip
|
||||
[{:keys [name] :as project} pages]
|
||||
(let [event (js/MouseEvent. "click")
|
||||
link (.createElement js/document "a")
|
||||
now (dt/now)
|
||||
stream (->> (rx/from (generate-files pages))
|
||||
(rx/reduce conj [])
|
||||
(rx/mapcat zip/build)
|
||||
(rx/map blob/create-uri)
|
||||
(rx/take 1))
|
||||
download (str (str/uslug name) "_" (dt/format now :unix) ".zip")]
|
||||
(rx/subscribe stream (fn [uri]
|
||||
(.setAttribute link "download" download)
|
||||
(.setAttribute link "href" uri)
|
||||
(.appendChild (.-body js/document) link)
|
||||
(.dispatchEvent link event)
|
||||
(blob/revoke-uri uri)
|
||||
(.removeChild (.-body js/document) link)))))
|
||||
;; (defn- download-project-zip
|
||||
;; [{:keys [name] :as project} pages]
|
||||
;; (let [event (js/MouseEvent. "click")
|
||||
;; link (.createElement js/document "a")
|
||||
;; now (dt/now)
|
||||
;; stream (->> (rx/from (generate-files pages))
|
||||
;; (rx/reduce conj [])
|
||||
;; (rx/mapcat zip/build)
|
||||
;; (rx/map blob/create-uri)
|
||||
;; (rx/take 1))
|
||||
;; download (str (str/uslug name) "_" (dt/format now :unix) ".zip")]
|
||||
;; (rx/subscribe stream (fn [uri]
|
||||
;; (.setAttribute link "download" download)
|
||||
;; (.setAttribute link "href" uri)
|
||||
;; (.appendChild (.-body js/document) link)
|
||||
;; (.dispatchEvent link event)
|
||||
;; (blob/revoke-uri uri)
|
||||
;; (.removeChild (.-body js/document) link)))))
|
||||
|
||||
(mx/defcs download-dialog
|
||||
{:mixins [mx/static mx/reactive]}
|
||||
[own]
|
||||
#_(let [project (mx/react refs/selected-project)
|
||||
pages (mx/react pages-ref)
|
||||
current (mx/react current-page-ref)]
|
||||
(letfn [(on-close [event]
|
||||
(dom/prevent-default event)
|
||||
(udl/close!))
|
||||
(download-page [event]
|
||||
(dom/prevent-default event)
|
||||
(let [id (-> (mx/ref-node own "page")
|
||||
(dom/get-value)
|
||||
(read-string))
|
||||
page (->> pages
|
||||
(filter #(= id (:id %)))
|
||||
(first))]
|
||||
(download-page-svg page)
|
||||
(udl/close!)))
|
||||
(download-zip [event]
|
||||
(dom/prevent-default event)
|
||||
(download-project-zip project pages)
|
||||
(udl/close!))
|
||||
(download-html [event]
|
||||
(dom/prevent-default event))]
|
||||
[:div.lightbox-body.export-dialog {}
|
||||
[:h3 {} "Download options"]
|
||||
[:div.row-flex {}
|
||||
[:div.content-col {}
|
||||
[:span.icon {} i/file-svg]
|
||||
[:span.title {} "Download page"]
|
||||
[:p.info {} "Download a single page of your project in SVG."]
|
||||
[:select.input-select {:ref "page" :default-value (pr-str current)}
|
||||
(for [{:keys [id name]} pages]
|
||||
[:option {:value (pr-str id) :key (pr-str id)} name])]
|
||||
[:a.btn-primary {:href "#" :on-click download-page} "Download page"]]
|
||||
[:div.content-col {}
|
||||
[:span.icon {} i/folder-zip]
|
||||
[:span.title {} "Download project"]
|
||||
[:p.info {} "Download all pages as svg in a zip file."]
|
||||
[:a.btn-primary {:href "#" :on-click download-zip} "Download project"]]
|
||||
; [:div.content-col
|
||||
; [:span.icon i/file-html]
|
||||
; [:span.title "Download as HTML"]
|
||||
; [:p.info "Download your project as HTML files."]
|
||||
; [:a.btn-primary {:href "#" :on-click download-html} "Download HTML"]]
|
||||
]
|
||||
[:a.close {:href "#" :on-click on-close} i/close]])))
|
||||
;; (mx/defcs download-dialog
|
||||
;; {:mixins [mx/static mx/reactive]}
|
||||
;; [own]
|
||||
;; #_(let [project (mx/react refs/selected-project)
|
||||
;; pages (mx/react pages-ref)
|
||||
;; current (mx/react current-page-ref)]
|
||||
;; (letfn [(on-close [event]
|
||||
;; (dom/prevent-default event)
|
||||
;; (udl/close!))
|
||||
;; (download-page [event]
|
||||
;; (dom/prevent-default event)
|
||||
;; (let [id (-> (mx/ref-node own "page")
|
||||
;; (dom/get-value)
|
||||
;; (read-string))
|
||||
;; page (->> pages
|
||||
;; (filter #(= id (:id %)))
|
||||
;; (first))]
|
||||
;; (download-page-svg page)
|
||||
;; (udl/close!)))
|
||||
;; (download-zip [event]
|
||||
;; (dom/prevent-default event)
|
||||
;; (download-project-zip project pages)
|
||||
;; (udl/close!))
|
||||
;; (download-html [event]
|
||||
;; (dom/prevent-default event))]
|
||||
;; [:div.lightbox-body.export-dialog {}
|
||||
;; [:h3 {} "Download options"]
|
||||
;; [:div.row-flex {}
|
||||
;; [:div.content-col {}
|
||||
;; [:span.icon {} i/file-svg]
|
||||
;; [:span.title {} "Download page"]
|
||||
;; [:p.info {} "Download a single page of your project in SVG."]
|
||||
;; [:select.input-select {:ref "page" :default-value (pr-str current)}
|
||||
;; (for [{:keys [id name]} pages]
|
||||
;; [:option {:value (pr-str id) :key (pr-str id)} name])]
|
||||
;; [:a.btn-primary {:href "#" :on-click download-page} "Download page"]]
|
||||
;; [:div.content-col {}
|
||||
;; [:span.icon {} i/folder-zip]
|
||||
;; [:span.title {} "Download project"]
|
||||
;; [:p.info {} "Download all pages as svg in a zip file."]
|
||||
;; [:a.btn-primary {:href "#" :on-click download-zip} "Download project"]]
|
||||
;; ; [:div.content-col
|
||||
;; ; [:span.icon i/file-html]
|
||||
;; ; [:span.title "Download as HTML"]
|
||||
;; ; [:p.info "Download your project as HTML files."]
|
||||
;; ; [:a.btn-primary {:href "#" :on-click download-html} "Download HTML"]]
|
||||
;; ]
|
||||
;; [:a.close {:href "#" :on-click on-close} i/close]])))
|
||||
|
||||
(defmethod lbx/render-lightbox :download
|
||||
[_]
|
||||
(download-dialog))
|
||||
;; (defmethod lbx/render-lightbox :download
|
||||
;; [_]
|
||||
;; (download-dialog))
|
||||
|
|
|
|||
|
|
@ -197,6 +197,7 @@
|
|||
(rx/map second))
|
||||
|
||||
counter (rx/merge (rx/scan #(inc %) 1 points) (rx/of 1))
|
||||
|
||||
stream' (->> mouse
|
||||
(rx/with-latest vector ms/mouse-position-ctrl)
|
||||
(rx/with-latest vector counter)
|
||||
|
|
@ -220,7 +221,7 @@
|
|||
|
||||
(->> points
|
||||
(rx/take-until stoper)
|
||||
(rx/map (fn [pt]#(insert-point-segment % pt))))
|
||||
(rx/map (fn [pt] #(insert-point-segment % pt))))
|
||||
|
||||
(rx/concat
|
||||
(->> stream'
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
(:require
|
||||
[lentes.core :as l]
|
||||
[rumext.alpha :as mf]
|
||||
[rumext.core :as mx]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.common.data :as d]
|
||||
[uxbox.main.data.images :as udi]
|
||||
|
|
@ -49,7 +48,7 @@
|
|||
(let [input (mf/use-ref nil)
|
||||
uploading? (mf/deref uploading-iref)
|
||||
|
||||
on-upload-click #(dom/click (mf/ref-node input))
|
||||
on-upload-click #(dom/click (mf/ref-val input))
|
||||
|
||||
on-uploaded
|
||||
(fn [{:keys [id name] :as image}]
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
(:require [beicon.core :as rx]
|
||||
[potok.core :as ptk]
|
||||
[uxbox.main.refs :as refs]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.geom.point :as gpt]))
|
||||
|
||||
|
|
|
|||
|
|
@ -41,10 +41,10 @@
|
|||
|
||||
(mf/defc shape-options-wrapper
|
||||
[{:keys [shape-id page-id] :as props}]
|
||||
(let [shape-iref (mf/use-memo
|
||||
{:deps (mf/deps shape-id page-id)
|
||||
:fn #(-> (l/in [:workspace-data page-id :objects shape-id])
|
||||
(l/derive st/state))})
|
||||
(let [shape-iref (-> (mf/deps shape-id page-id)
|
||||
(mf/use-memo
|
||||
#(-> (l/in [:workspace-data page-id :objects shape-id])
|
||||
(l/derive st/state))))
|
||||
shape (mf/deref shape-iref)]
|
||||
[:& shape-options {:shape shape}]))
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@
|
|||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.ui.colorpicker :as cp]
|
||||
[uxbox.main.ui.lightbox :as lbx]
|
||||
[uxbox.util.data :refer [read-string]]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.i18n :refer [tr]]))
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
|
||||
(ns uxbox.main.ui.workspace.sidebar.options.text
|
||||
(:require
|
||||
[rumext.core :as mx]
|
||||
[rumext.alpha :as mf]
|
||||
[potok.core :as ptk]
|
||||
[uxbox.common.data :as d]
|
||||
|
|
|
|||
|
|
@ -101,8 +101,8 @@
|
|||
|
||||
(mf/defc page-item-wrapper
|
||||
[{:keys [page-id index deletable? selected?] :as props}]
|
||||
(let [page-ref (mf/use-memo {:deps (mf/deps page-id)
|
||||
:fn #(make-page-ref page-id)})
|
||||
(let [page-ref (-> (mf/deps page-id)
|
||||
(mf/use-memo #(make-page-ref page-id)))
|
||||
page (mf/deref page-ref)]
|
||||
[:& page-item {:page page
|
||||
:index index
|
||||
|
|
|
|||
|
|
@ -112,9 +112,9 @@
|
|||
[props]
|
||||
(let [page (gobj/get props "page")
|
||||
page-id (:id page)
|
||||
data-ref (mf/use-memo {:fn #(-> (l/in [:workspace-data page-id])
|
||||
(l/derive st/state))
|
||||
:deps (mf/deps page-id)})
|
||||
data-ref (-> (mf/deps page-id)
|
||||
(mf/use-memo #(-> (l/in [:workspace-data page-id])
|
||||
(l/derive st/state))))
|
||||
data (mf/deref data-ref)]
|
||||
[:& frames {:data data}]))
|
||||
|
||||
|
|
@ -226,7 +226,7 @@
|
|||
|
||||
translate-point-to-viewport
|
||||
(fn [pt]
|
||||
(let [viewport (mf/ref-node viewport-ref)
|
||||
(let [viewport (mf/ref-val viewport-ref)
|
||||
brect (.getBoundingClientRect viewport)
|
||||
brect (gpt/point (d/parse-integer (.-left brect))
|
||||
(d/parse-integer (.-top brect)))]
|
||||
|
|
|
|||
|
|
@ -38,6 +38,6 @@
|
|||
|
||||
(let [initial (mf/use-memo initial-state)
|
||||
state (mf/use-state initial)]
|
||||
(mf/use-effect {:deps true :fn #(after-render state)})
|
||||
(mf/use-effect nil #(after-render state))
|
||||
(for [item (:current @state)]
|
||||
(children item)))))
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue