Fix bug with selecting/showing result of the items with wrapped text

Rakefile

@@ -38,6 +38,9 @@ task :package do
   }.each do |file|
     copy_file_or_directory(File.join(build_dir, file), dist_dir)
   end
+  FileUtils.rm_rf(File.join(dist_dir, "resources/public/out"))
+  FileUtils.rm_rf(File.join(dist_dir, "resources/public/tixi.js"))
+  FileUtils.rm_rf(File.join(dist_dir, "resources/public/index.html"))
   FileUtils.mv(File.join(dist_dir, "index_prod.html"), File.join(dist_dir, "index.html"))
 end
 

TODO

@@ -1,4 +1,3 @@
-* Fix the bug with selecting items via the text when the text is wrapped
 * Add way to specify text alignment (horizontal and vertical)
 * Correct text items sizes after resize
 * Add possibility to group/ungroup items

resources/public/js/drawer.js

@@ -282,8 +282,9 @@ goog.provide("tixi.drawer");
                 var pos;
                 var line;
                 if (text) {
-                    var textArray = text.split("\n");
+                    var textArray;
                     if (item.type === "text") {
+                        var textArray = text.split("\n");
                         for (j = 0; j < textArray.length; j += 1) {
                             line = textArray[j];
                             pos = (startY + j) * (width + 1) + startX;
@@ -292,6 +293,17 @@ goog.provide("tixi.drawer");
                                 data.substr(pos + line.length, data.length - (pos + line.length));
                         }
                     } else {
+                        textArray = [];
+                        text.split("\n").forEach(function (line) {
+                            if (line.length === 0) {
+                                textArray.push("");
+                            } else {
+                                for (var k = 0; k < line.length; k += widthItem - 1) {
+                                    textArray.push(line.substr(k, widthItem - 1));
+                                }
+                            }
+                        });
+                        console.log(textArray);
                         var widthText = Math.max.apply(null, textArray.map(stringLength));
                         var heightText = textArray.length;
                         var startXText = Math.ceil(widthCenterItem - widthText / 2);

src/tixi/position.cljs

@@ -44,7 +44,15 @@
 (defn- item-text-has-point? [id item point]
   (let [text (:text item)
         center (g/center (:input item))
-        lines (clojure.string/split text "\n")
+        lines (if (i/text? item)
+                (clojure.string/split text "\n")
+                (flatten
+                  (map
+                    (fn [line]
+                      (if (empty? line)
+                        line
+                        (map string/join (partition-all (dec (:width (i/dimensions item))) line))))
+                    (clojure.string/split text "\n"))))
         max-width (apply max (map count lines))
         center-char-num (/ max-width 2)
         center-line-num (/ (count lines) 2)

src/tixi/view.cljs

@@ -80,12 +80,13 @@
   (str (:height (p/letter-size)) "px " (:width (p/letter-size)) "px"))
 
 (defn- draw-line-on-canvas [context rect]
-  (.beginPath context)
   (set! (.-lineWidth context) 1)
-  (.moveTo context (-> rect :start :x) (-> rect :start :y))
-  (.lineTo context (-> rect :end :x) (-> rect :end :y))
   (set! (.-strokeStyle context) "#ececec")
-  (.stroke context))
+  (doto context
+    (.beginPath)
+    (.moveTo (-> rect :start :x) (-> rect :start :y))
+    (.lineTo (-> rect :end :x) (-> rect :end :y))
+    (.stroke)))
 
 (q/defcomponent Text
   [{:keys [id item edit-text-id]} channel]
@@ -186,11 +187,6 @@
   (let [rect (g/normalize (d/current-selection data))]
     (dom/div {:className "current-selection" :style (selection-position rect)})))
 
-(q/defcomponent Tool
-  "Displays the currently selected tool"
-  [data]
-  (dom/div {:className "tool"} (str (:tool data))))
-
 (q/defcomponent Grid [show-grid?]
   (q/on-render
     (dom/canvas {:className (str "grid" (when show-grid? " is-visible"))})
@@ -207,8 +203,8 @@
         (dotimes [i (.floor js/Math (/ width letter-width))]
           (draw-line-on-canvas
             context
-            (g/build-rect (* i letter-width) 0
-                          (* i letter-width) height)))
+            (g/build-rect (dec (* i letter-width)) 0
+                          (dec (* i letter-width)) height)))
         (dotimes [i (.floor js/Math (/ height letter-height))]
           (draw-line-on-canvas
             context
@@ -232,8 +228,7 @@
       (when (and (not-empty selected-ids) (not (d/edit-text-id)))
         (Selection data channel))
       (when (and current-selection (> (g/width current-selection) 0) (> (g/height current-selection) 0))
-        (CurrentSelection data channel))
-      (Tool data))))
+        (CurrentSelection data channel)))))
 
 (q/defcomponent Sidebar
   [tool channel]