From 94470dd1fe66b8bf9b7c876b52f50630645fe67d Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Wed, 23 Sep 2020 16:36:02 +0200 Subject: [PATCH] :bug: Fixed image upload problems --- common/app/common/geom/shapes.cljc | 7 ++ frontend/src/app/main/data/workspace.cljs | 81 ++++++++----------- .../app/main/ui/workspace/colorpicker.cljs | 1 + .../app/main/ui/workspace/left_toolbar.cljs | 4 +- .../src/app/main/ui/workspace/viewport.cljs | 79 +++++++++--------- 5 files changed, 87 insertions(+), 85 deletions(-) diff --git a/common/app/common/geom/shapes.cljc b/common/app/common/geom/shapes.cljc index 399999cefb..83fbd97911 100644 --- a/common/app/common/geom/shapes.cljc +++ b/common/app/common/geom/shapes.cljc @@ -939,3 +939,10 @@ (cleanup combined))) + +(defn setup-selrect [{:keys [x y width height] :as shape}] + (-> shape + (assoc :selrect {:x x :y y + :width width :height height + :x1 x :y1 y + :x2 (+ x width) :y2 (+ y height)}))) diff --git a/frontend/src/app/main/data/workspace.cljs b/frontend/src/app/main/data/workspace.cljs index 8a4f382832..48a73d2b5d 100644 --- a/frontend/src/app/main/data/workspace.cljs +++ b/frontend/src/app/main/data/workspace.cljs @@ -578,39 +578,26 @@ (->> (rx/of (start-edition-mode id)) (rx/observe-on :async)))))))) -(defn- calculate-centered-box - [state aspect-ratio] - (if (>= aspect-ratio 1) - (let [vbox (get-in state [:workspace-local :vbox]) - width (/ (:width vbox) 2) - height (/ width aspect-ratio) - - x (+ (:x vbox) (/ width 2)) - y (+ (:y vbox) (/ (- (:height vbox) height) 2))] - - [width height x y]) - - (let [vbox (get-in state [:workspace-local :vbox]) - height (/ (:height vbox) 2) - width (* height aspect-ratio) - - y (+ (:y vbox) (/ height 2)) - x (+ (:x vbox) (/ (- (:width vbox) width) 2))] - - [width height x y]))) +(defn- viewport-center + [state] + (let [{:keys [x y width height]} (get-in state [:workspace-local :vbox])] + [(+ x (/ width 2)) (+ y (/ height 2))])) (defn create-and-add-shape - [type data aspect-ratio] + [type data] (ptk/reify ::create-and-add-shape ptk/WatchEvent (watch [_ state stream] - (let [[width height x y] (calculate-centered-box state aspect-ratio) + (let [{:keys [width height]} data + [vbc-x vbc-y] (viewport-center state) + + x (:x data (- vbc-x (/ width 2))) + y (:y data (- vbc-y (/ height 2))) + shape (-> (cp/make-minimal-shape type) (merge data) - (geom/resize width height) - (geom/absolute-move (gpt/point x y)) - (geom/transform-shape))] - + (merge {:x x :y y}) + (geom/setup-selrect))] (rx/of (add-shape shape)))))) ;; --- Update Shape Attrs @@ -1243,13 +1230,18 @@ (defn- image-uploaded [image] - (let [shape {:name (:name image) - :metadata {:width (:width image) - :height (:height image) + (let [{:keys [x y]} @ms/mouse-position + {:keys [width height]} image + shape {:name (:name image) + :width width + :height height + :x (- x (/ width 2)) + :y (- y (/ height 2)) + :metadata {:width width + :height height :id (:id image) - :path (:path image)}} - aspect-ratio (/ (:width image) (:height image))] - (st/emit! (create-and-add-shape :image shape aspect-ratio)))) + :path (:path image)}}] + (st/emit! (create-and-add-shape :image shape)))) (defn- paste-image-impl [image] @@ -1318,21 +1310,16 @@ {:keys [x y]} @ms/mouse-position width (min (* 7 (count text)) 700) height 16 - shape {:id id - :type :text - :name "Text" - :x x - :y y - :selrect {:x1 x :y1 y - :x2 (+ x width) - :y2 (+ y height) - :x x :y y - :width width - :height height} - :width width - :height height - :grow-type (if (> (count text) 100) :auto-height :auto-width) - :content (as-content text)}] + shape (geom/setup-selrect + {:id id + :type :text + :name "Text" + :x x + :y y + :width width + :height height + :grow-type (if (> (count text) 100) :auto-height :auto-width) + :content (as-content text)})] (rx/of dwc/start-undo-transaction dws/deselect-all (add-shape shape) diff --git a/frontend/src/app/main/ui/workspace/colorpicker.cljs b/frontend/src/app/main/ui/workspace/colorpicker.cljs index 2607b6599c..a92ed60639 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker.cljs @@ -194,6 +194,7 @@ :r r :g g :b b :h h :s s :v v :hex hex) + (reset! value-ref hex) (when picked-color-select (on-change hex (:alpha @current-color) nil nil picked-shift?)))))) diff --git a/frontend/src/app/main/ui/workspace/left_toolbar.cljs b/frontend/src/app/main/ui/workspace/left_toolbar.cljs index 1b71041746..21c6efc8eb 100644 --- a/frontend/src/app/main/ui/workspace/left_toolbar.cljs +++ b/frontend/src/app/main/ui/workspace/left_toolbar.cljs @@ -35,12 +35,14 @@ on-uploaded (fn [{:keys [id name] :as image}] (let [shape {:name name + :width (:width image) + :height (:height image) :metadata {:width (:width image) :height (:height image) :id (:id image) :path (:path image)}} aspect-ratio (/ (:width image) (:height image))] - (st/emit! (dw/create-and-add-shape :image shape aspect-ratio)))) + (st/emit! (dw/create-and-add-shape :image shape)))) on-files-selected (fn [js-files] diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index 0a49936238..3d59e7b398 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/frontend/src/app/main/ui/workspace/viewport.cljs @@ -475,56 +475,61 @@ ;; TODO: seems duplicated callback is the same as one located ;; in left_toolbar on-uploaded - (fn [{:keys [id name] :as image}] + (fn [{:keys [id name] :as image} {:keys [x y]}] (let [shape {:name name + :width (:width image) + :height (:height image) + :x (- x (/ (:width image) 2)) + :y (- y (/ (:height image) 2)) :metadata {:width (:width image) :height (:height image) :id (:id image) :path (:path image)}} aspect-ratio (/ (:width image) (:height image))] - (st/emit! (dw/create-and-add-shape :image shape aspect-ratio)))) + (st/emit! (dw/create-and-add-shape :image shape)))) on-drop (fn [event] (dom/prevent-default event) - (cond - (dnd/has-type? event "app/shape") - (let [shape (dnd/get-data event "app/shape") - point (gpt/point (.-clientX event) (.-clientY event)) - viewport-coord (translate-point-to-viewport point) - final-x (- (:x viewport-coord) (/ (:width shape) 2)) - final-y (- (:y viewport-coord) (/ (:height shape) 2))] - (st/emit! (dw/add-shape (-> shape - (assoc :x final-x) - (assoc :y final-y))))) + (let [point (gpt/point (.-clientX event) (.-clientY event)) + viewport-coord (translate-point-to-viewport point)] + (cond + (dnd/has-type? event "app/shape") + (let [shape (dnd/get-data event "app/shape") + final-x (- (:x viewport-coord) (/ (:width shape) 2)) + final-y (- (:y viewport-coord) (/ (:height shape) 2))] + (st/emit! (dw/add-shape (-> shape + (assoc :x final-x) + (assoc :y final-y))))) - (dnd/has-type? event "app/component") - (let [{:keys [component-id file-id]} (dnd/get-data event "app/component")] - (st/emit! (dwl/instantiate-component file-id component-id))) + (dnd/has-type? event "app/component") + (let [{:keys [component-id file-id]} (dnd/get-data event "app/component")] + (st/emit! (dwl/instantiate-component file-id component-id))) - (dnd/has-type? event "text/uri-list") - (let [data (dnd/get-data event "text/uri-list") - lines (str/lines data) - urls (filter #(and (not (str/blank? %)) - (not (str/starts-with? % "#"))) - lines)] - (->> urls - (map (fn [uri] - (with-meta {:file-id (:id file) - :local? true - :uri uri} - {:on-success on-uploaded}))) - (map dw/upload-media-objects) - (apply st/emit!))) + (dnd/has-type? event "text/uri-list") + (let [data (dnd/get-data event "text/uri-list") + lines (str/lines data) + urls (filter #(and (not (str/blank? %)) + (not (str/starts-with? % "#"))) + lines)] + (->> urls + (map (fn [uri] + (with-meta {:file-id (:id file) + :local? true + :uri uri} + {:on-success #(on-uploaded % viewport-coord)}))) + (map dw/upload-media-objects) + (apply st/emit!))) - :else - (let [js-files (dnd/get-files event) - params {:file-id (:id file) - :local? true - :js-files js-files}] - (st/emit! (dw/upload-media-objects - (with-meta params - {:on-success on-uploaded})))))) + :else + (let [js-files (dnd/get-files event) + params {:file-id (:id file) + :local? true + :js-files js-files + }] + (st/emit! (dw/upload-media-objects + (with-meta params + {:on-success #(on-uploaded % viewport-coord)}))))))) on-resize (fn [event]