Skip to content

Click to place pasted #166

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dwwoelfel wants to merge 21 commits into
base: master
Choose a base branch
from
Open

Click to place pasted #166

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
29ef7cf
paste shapes at mouse point, click to place
dwwoelfel Jun 16, 2015
41045a0
add a 'clip' class to in-progress paste
dwwoelfel Jun 16, 2015
89bddc8
visual state for pasted shape
dannykingme Jun 17, 2015
bb328c4
apply visual state to pasting text also
dannykingme Jun 17, 2015
15ab69f
make sure that clicking from clipboard history works
dwwoelfel Jun 17, 2015
750c152
send important clips right away
dwwoelfel Jun 21, 2015
a1db60e
get scrolling working
dwwoelfel Jun 21, 2015
394fb91
preserve old clips when we get new clips
dwwoelfel Jun 24, 2015
c6c3ad5
get scrolling working
dwwoelfel Jun 24, 2015
a3b8d56
make dropping clips mostly work
dwwoelfel Jun 24, 2015
6a4660d
lazy-load clips
dwwoelfel Jun 24, 2015
769c1d6
move the cursor adjustment to normalize-layers
dwwoelfel Jun 24, 2015
c02d63b
snap to grid on clips
dwwoelfel Jun 24, 2015
cb1de7a
scroll clips with arrow keys
dwwoelfel Jun 24, 2015
8c701bd
don't prevent zooming when clips are open
dwwoelfel Jun 24, 2015
6294482
disable pointer-events when clip is in progress
dwwoelfel Jun 26, 2015
e72e2fe
don't mess with stroke-dasharray for in-progress
dwwoelfel Jun 26, 2015
24b8d1e
fix moving
dwwoelfel Jun 26, 2015
356a373
better way to handle mouse position
dwwoelfel Jun 30, 2015
e6a38a3
enable pasting without anything in clipboard
dwwoelfel Jun 30, 2015
cbc5935
avoid style conflicts with clips on canvas
dannykingme Jul 6, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 30 additions & 1 deletion resources/assets/css/components/canvas.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@
stroke: @color_select;
stroke-width: 2;
&.selection {
stroke: @white;
stroke: @gray_lighter;
stroke-width: 1;
}
}
Expand Down Expand Up @@ -400,3 +400,32 @@
#selected-arrow-point {
fill: @color_select;
}
.clips {
opacity: @opacity_darker_gray;
.shape-layer {
stroke: @white;
stroke-dasharray: 2, 3;
}
.text-layer {
fill: @white;
}
.active {
transition: all 400ms ease-in-out;
fill: @color_select;
.shape-layer {
stroke: @color_select;
}
.text-layer {
fill: @color_select;
}
}
.inactive {
transition: all 400ms ease-in-out;
}
}

.clip-in-progress {
.layer-handle {
pointer-events: none;
}
}
4 changes: 2 additions & 2 deletions resources/assets/css/components/menu.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -733,10 +733,10 @@
.slack-channel-remove {
margin-left: auto;
}
.clips {
.clips-list {
.flexy(wrap);
}
.clip {
.clip-item {
.flexy(center; center);
position: relative;
width: 50%;
Expand Down
6 changes: 2 additions & 4 deletions src-cljs/frontend/clipboard.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -282,7 +282,5 @@
;; element is selected (see components.canvas)
(or (= "_copy-hack" (.-id target))
(not (contains? #{"input" "textarea"} (str/lower-case (.-tagName js/document.activeElement))))))
(when-let [layer-data (some->> (.getData (.-clipboardData e) "text")
(parse-pasted))]
(let [canvas-size (utils/canvas-size)]
(put! (get-in app-state [:comms :controls]) [:layers-pasted (assoc layer-data :canvas-size canvas-size)])))))
(put! (get-in app-state [:comms :controls]) [:layers-pasted (some->> (.getData (.-clipboardData e) "text")
(parse-pasted))])))
5 changes: 4 additions & 1 deletion src-cljs/frontend/components/app.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,14 +85,17 @@
state/right-click-learned-path
[:drawing :in-progress?]
[:drawing :relation-in-progress?]
[:drawing :moving?]
[:drawing :clip?]
[:mouse-down]
[:layer-properties-menu]
[:radial]
[:client-id]
[:cust-data]
[:document/id]
[:keyboard]
[:keyboard-shortcuts]])
[:keyboard-shortcuts]
[:cust :cust/clips]])
{:react-key "canvas"})

(om/build chat/chat (select-in app [state/chat-opened-path
Expand Down
97 changes: 82 additions & 15 deletions src-cljs/frontend/components/canvas.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -477,6 +477,7 @@
(common/svg-icon icon
{:svg-props {:height 16 :width 16
:className "mouse-tool"
;; TODO: should subscriber mouse position be a map?
:x (- (first (:mouse-position subscriber)) (- 16))
:y (- (last (:mouse-position subscriber)) 8)
:key (:client-id subscriber)}
Expand All @@ -501,6 +502,7 @@
(common/svg-icon (subscriber-cursor-icon (:tool subscriber))
{:svg-props {:height 16 :width 16
:className "mouse-tool"
;; TODO: should subscriber mouse position be a map?
:x (- (first (:mouse-position subscriber)) 8)
:y (- (last (:mouse-position subscriber)) 8)
:key (:client-id subscriber)}
Expand Down Expand Up @@ -710,6 +712,58 @@
(.focus (om/get-node owner "target-input")))}
target))))))))))

(defn pasted [{:keys [clips]} owner]
(reify
om/IDisplayName (display-name [_] "Pasted Layers")
om/IRender
(render [_]
(let [drawing (cursors/observe-drawing owner)
camera (cursors/observe-camera owner)
normalized-layer-datas (map layers/normalize-pasted-layer-data (concat (when (:layers drawing)
[drawing])
(map :layer-data (filter :clip/important? clips))))
scrolled-layer-index (:scrolled-layer drawing)
clip-scroll (layers/clip-scroll normalized-layer-datas scrolled-layer-index)
[mouse-x mouse-y] (cameras/snap-to-grid camera
(:rx (:current-mouse-position drawing))
(:ry (:current-mouse-position drawing)))]
(apply dom/g #js {:className "layers clips"
:transform (str "translate(" mouse-x "," mouse-y ")")}
(map-indexed (fn [i layer-data]
(let [active? (= i scrolled-layer-index)
scale (if active?
1
(layers/pasted-inactive-scale layer-data))
translate-x (- (layers/clip-offset normalized-layer-datas scrolled-layer-index i)
(* scale (:min-x layer-data)))
translate-y (* scale
(- (+ (/ (:height layer-data) 2)
(:min-y layer-data))))
[translate-x translate-y] (cameras/snap-to-grid camera translate-x translate-y)
]
(apply dom/g #js {:className (if active?
"active"
"inactive")
:transform (str "translate("
translate-x
","
translate-y
") "
"scale(" scale ")")
:key i}
(map (fn [layer]
(let [layer (if (:force-even? layer)
(layers/force-even layer)
layer)
layer (merge layer
{:layer/current-x (:layer/end-x layer)
:layer/current-y (:layer/end-y layer)
:className "layer-in-progress"})]
(svg-element (assoc layer :key (str (:db/id layer) "-clip")
:vectorEffect "non-scaling-stroke"))))
(:layers layer-data)))))
normalized-layer-datas))))))

(defn in-progress [{:keys [mouse-down]} owner]
(reify
om/IDisplayName (display-name [_] "In Progress Layers")
Expand Down Expand Up @@ -992,6 +1046,7 @@
camera (cursors/observe-camera owner)
in-progress? (settings/drawing-in-progress? app)
relation-in-progress? (get-in app [:drawing :relation-in-progress?])
clip? (get-in app [:drawing :clip?])
tool (get-in app state/current-tool-path)
mouse-down? (get-in app [:mouse-down])
right-click-learned? (get-in app state/right-click-learned-path)]
Expand All @@ -1016,7 +1071,9 @@
" relation-in-progress ")

(when-not right-click-learned?
"radial-not-learned"))
"radial-not-learned ")

(when clip? "clip-in-progress "))
:onTouchStart (fn [event]
(let [touches (.-touches event)]
(cond
Expand Down Expand Up @@ -1092,18 +1149,21 @@
(.stopPropagation event))
:onWheel (fn [event]
(let [dx (- (aget event "deltaX"))
dy (aget event "deltaY")]
(om/transact! camera (fn [c]
(if (or (aget event "altKey")
;; http://stackoverflow.com/questions/15416851/catching-mac-trackpad-zoom
;; ctrl means pinch-to-zoom
(aget event "ctrlKey"))
(cameras/set-zoom c (cameras/screen-event-coords event)
(partial + (* -0.002
dy
;; pinch-to-zoom needs a boost to feel natural
(if (.-ctrlKey event) 10 1))))
(cameras/move-camera c dx (- dy))))))
dy (aget event "deltaY")
zoom? (or (aget event "altKey")
;; http://stackoverflow.com/questions/15416851/catching-mac-trackpad-zoom
;; ctrl means pinch-to-zoom
(aget event "ctrlKey"))]
(if (and clip? (not zoom?))
(cast! :clip-scrolled {:dx dx :dy dy})
(om/transact! camera (fn [c]
(if zoom?
(cameras/set-zoom c (cameras/screen-event-coords event)
(partial + (* -0.002
dy
;; pinch-to-zoom needs a boost to feel natural
(if (.-ctrlKey event) 10 1))))
(cameras/move-camera c dx (- dy)))))))
(utils/stop-event event))}
(defs camera)

Expand Down Expand Up @@ -1132,8 +1192,15 @@
{:react-key "subscribers-layers"})

(om/build arrows app {:react-key "arrows"})

(om/build in-progress (select-keys app [:mouse-down]) {:react-key "in-progress"})))))))
(cond
(or (get-in app [:drawing :in-progress?])
(get-in app [:drawing :moving?]))
(om/build in-progress (select-keys app [:mouse-down]) {:react-key "in-progress"})

(get-in app [:drawing :clip?])
(om/build pasted
{:clips (get-in app [:cust :cust/clips])}
{:react-key "pasted"}))))))))

(defn needs-copy-paste-hack? []
(not (ua-browser/isChrome)))
Expand Down
4 changes: 2 additions & 2 deletions src-cljs/frontend/components/clip_viewer.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,10 +52,10 @@
"Cmd+C."
"Ctrl+C.")
" Star clips to pin them to the top. "]
[:div.clips
[:div.clips-list
(for [clip clips]
(html
[:div.clip.make
[:div.clip-item.make
[:a.clip-preview {:role "button"
:on-click #(cast! :clip-pasted clip)}
[:img.clip-thumbnail {:src (:clip/s3-url clip)}]]
Expand Down
Loading