Skip to content

Commit

Permalink
Allow users to manually crop uploaded token images. (#160)
Browse files Browse the repository at this point in the history
  • Loading branch information
@samcf
samcf authored Sep 20, 2024
1 parent b84ef7d commit c1e47c4
Show file tree
Hide file tree
Showing 17 changed files with 1,011 additions and 395 deletions.
27 changes: 17 additions & 10 deletions src/main/ogres/app/component.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,10 +45,11 @@
:value 1
:on-change (fn [page] ...)})
```"
[{:keys [name pages value on-change]
[{:keys [class-name name pages value on-change]
:or {pages 10 value 1 on-change identity}}]
($ :nav {:role "navigation"}
($ :ol.pagination
{:class (if class-name (str "pagination-" class-name))}
($ :li
($ :button
{:aria-disabled (= value 1)
Expand Down Expand Up @@ -78,14 +79,20 @@
($ icon {:name "chevron-right" :size 16}))))))

(defui image
"Renders the image identified by the given checksum. Must be passed a
render function as its sole child which receives a map as its only
argument containing a `:data-url` string of the resource.
"Renders the image identified by the given hash. Accepts a
render function as its children which is passed a URL that
references the image resource.
```
($ image {:checksum 'fa7b887b1ce364732beb9ac70892775a'}
(fn [{:keys [data-url]}]
($ :img {:src data-url})))
($ image {:hash 'fa7b887b1ce364732beb9ac70892775a'}
(fn [url]
($ :img {:src url})))
```"
[{:keys [checksum children]}]
(let [data-url (use-image checksum)]
(children {:data-url data-url})))
[{:keys [hash children]}]
(let [url (use-image hash)]
(children url)))

(defui modal-fullscreen [props]
($ :.modal-fullscreen {:tab-index -1 :role "dialog"}
($ :.modal-fullscreen-dialog {:role "document"}
($ :.modal-fullscreen-content
(:children props)))))
22 changes: 12 additions & 10 deletions src/main/ogres/app/component/panel_initiative.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,9 @@
:initiative/suffix
:initiative/health
:camera/_selected
{:token/image [:image/checksum]}]}]}]}])
{:token/image
[{:image/thumbnail
[:image/hash]}]}]}]}]}])

(def ^:private query-footer
[{:user/camera
Expand Down Expand Up @@ -116,11 +118,11 @@
rnds :initiative/rounds
went :initiative/played}
:camera/scene} :user/camera} context
{id :db/id
label :token/label
flags :token/flags
suffix :initiative/suffix
{checksum :image/checksum} :token/image} entity
{id :db/id
label :token/label
flags :token/flags
suffix :initiative/suffix
{{hash :image/hash} :image/thumbnail} :token/image} entity
playing (= (:db/id curr) (:db/id entity))
played (boolean (some #{{:db/id id}} went))
hidden (and (= type :conn)
Expand Down Expand Up @@ -149,11 +151,11 @@
:data-player (contains? flags :player)
:data-hidden hidden}
(cond hidden \?
(some? checksum)
($ image {:checksum checksum}
(fn [{:keys [data-url]}]
(some? hash)
($ image {:hash hash}
(fn [url]
($ :.initiative-token-image
{:style {:background-image (str "url(" data-url ")")}})))
{:style {:background-image (str "url(" url ")")}})))
:else
($ :.initiative-token-pattern
($ icon {:name "dnd" :size 36}))))
Expand Down
61 changes: 35 additions & 26 deletions src/main/ogres/app/component/panel_scene.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
(:require [clojure.string :refer [replace]]
[ogres.app.component :refer [icon pagination image]]
[ogres.app.hooks :refer [use-dispatch use-image-uploader use-query]]
[ogres.app.util :refer [display-size]]
[uix.core :as uix :refer [defui $ use-ref use-state]]
[uix.dom :refer [create-portal]]))

Expand All @@ -16,11 +17,6 @@

(def ^:private filename-re #"\d+x\d+|[^\w ]|.[^.]+$")

(defn ^:private render-filesize [bytes]
(let [i (js/Math.floor (/ (js/Math.log bytes) (js/Math.log 1024)))
s ["B" "KB" "MB" "GB" "TB" "PB" "EB" "ZB" "YB"]]
(str (* (.toFixed (/ bytes (js/Math.pow 1024, i)) 2) 1) (s i))))

(defn ^:private render-scene-name [camera]
(if-let [label (:camera/label camera)]
label
Expand All @@ -30,7 +26,11 @@

(def ^:private query
[{:root/scene-images
[:image/checksum :image/name :image/size]}
[:image/hash
:image/name
:image/size
{:image/thumbnail
[:image/hash]}]}
{:root/user
[{:user/camera
[:db/id
Expand All @@ -42,12 +42,16 @@
[:scene/grid-align :default false]
[:scene/dark-mode :default false]
[:scene/lighting :default :revealed]
{:scene/image [:image/checksum :image/name]}]}]}]}])
{:scene/image
[:image/hash
:image/name
{:image/thumbnail
[:image/hash]}]}]}]}]}])

(defui form []
(let [[preview set-preview] (use-state nil)
dispatch (use-dispatch)
uploader (use-image-uploader {:type :scene})
upload (use-image-uploader {:type :scene})
input (use-ref)
data (use-query query [:db/ident :root])
{{{scene :camera/scene} :user/camera
Expand Down Expand Up @@ -81,18 +85,20 @@
($ :fieldset.fieldset
($ :legend "Background image")
($ :.scene-gallery
(for [[idx data] pag :let [selected (= (:image/checksum data) (:image/checksum (:scene/image scene)))]]
(if-let [checksum (:image/checksum data)]
($ image {:key idx :checksum checksum}
(fn [{:keys [data-url]}]
(for [[idx data] pag
:let [hash (:image/hash data)
curr (:image/hash (:scene/image scene))]]
(if-let [thumbnail (:image/hash (:image/thumbnail data))]
($ image {:key idx :hash thumbnail}
(fn [url]
($ :fieldset.scene-gallery-thumbnail
{:data-type "image" :style {:background-image (str "url(" data-url ")")}}
{:data-type "image" :style {:background-image (str "url(" url ")")}}
($ :label {:aria-label (:image/name data)}
($ :input
{:type "radio"
:name "background-image"
:value checksum
:checked selected
:value hash
:checked (= hash curr)
:on-change
(fn [event]
(let [value (.. event -target -value)]
Expand All @@ -104,7 +110,7 @@
:on-click
(fn [event]
(.stopPropagation event)
(set-preview checksum))}
(set-preview hash))}
($ icon {:name "zoom-in" :size 18}))
($ :button.button.button-danger
{:type "button"
Expand All @@ -113,7 +119,7 @@
:on-click
(fn [event]
(.stopPropagation event)
(dispatch :scene-images/remove checksum))}
(dispatch :scene-images/remove hash thumbnail))}
($ icon {:name "trash3-fill" :size 18}))
(if (> (:image/size data) filesize-limit)
($ :button.button.button-warning
Expand All @@ -124,7 +130,7 @@
:on-click
(fn [event]
(.stopPropagation event)
(set-preview checksum))}
(set-preview hash))}
($ icon {:name "exclamation-triangle-fill" :size 18}))))))
($ :.scene-gallery-thumbnail {:key idx :data-type "placeholder"}))))
($ :fieldset.scene-gallery-form
Expand All @@ -138,8 +144,7 @@
:multiple true
:on-change
(fn [event]
(doseq [file (.. event -target -files)]
(uploader file))
(upload (.. event -target -files))
(set! (.. event -target -value) ""))})
($ icon {:name "camera-fill" :size 16}) "Upload images")
(if (> pgs 1)
Expand All @@ -150,19 +155,19 @@
:on-change set-page})))
(if (some? preview)
(let [node (js/document.querySelector "#root")
data (first (filter (comp #{preview} :image/checksum) (:root/scene-images data)))]
data (first (filter (comp #{preview} :image/hash) (:root/scene-images data)))]
(create-portal
($ :.scene-gallery-modal
($ :.scene-gallery-modal-container
($ image {:checksum preview}
(fn [{:keys [data-url]}]
($ image {:hash preview}
(fn [url]
($ :figure.scene-gallery-modal-preview
{:style {:background-image (str "url(" data-url ")")}}
{:style {:background-image (str "url(" url ")")}}
($ :dl
($ :dt "Filename")
($ :dd (:image/name data))
($ :dt "Size")
($ :dd (render-filesize (:image/size data)))
($ :dd (display-size (:image/size data)))
(if (> (:image/size data) filesize-limit)
($ :<>
($ :dt ($ icon {:name "exclamation-triangle-fill" :size 12}) "Warning")
Expand All @@ -174,7 +179,11 @@
($ :.scene-gallery-modal-footer
($ :button.button.button-danger
{:style {:margin-right "auto"}
:on-click (fn [] (set-preview nil) (dispatch :scene-images/remove preview))}
:on-click
(fn []
(let [thumbnail (:image/hash (:image/thumbnail data))]
(set-preview nil)
(dispatch :scene-images/remove preview thumbnail)))}
($ icon {:name "trash3-fill" :size 16}))
($ :button.button.button-neutral
{:on-click #(set-preview nil)}
Expand Down
2 changes: 1 addition & 1 deletion src/main/ogres/app/component/panel_scene.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@
display: flex;
inset: 0 auto 0 0;
justify-content: center;
padding: 5vw;
padding: 2vw;
position: absolute;
width: 100%;
z-index: 1;
Expand Down
Loading

0 comments on commit c1e47c4

Please sign in to comment.