Fix Space browsing/editing on touch devices such as iPad (#152)

* touch (tablet): fix deselect when tapping space; add edit text butto
* touch: fix media upload on iDevice
* touch: fix vector transforming (points of arrows, scribbles)

Co-authored-by: Lukas F. Hartmann <lukas@mntre.com>

locales/en.js

@@ -322,6 +322,7 @@
 	"follow_present": "Follow",
 	"mute_present": "Unfollow",
 	"follow_present_help": "If someone else is presenting this Space, the other members automatically follow the presentation. Switch following on or off with this button.",
-	"export": "export",
+	"export": "Export",
-	"media": "Media"
+	"media": "Media",
-}
+	"tool_edit_text": "Edit Text"
+}

public/javascripts/spacedeck_sections.js

@@ -1019,8 +1019,7 @@ var SpacedeckSections = {
       };
     },
 
-    update_selection_metrics: function(arts) {
+    update_selection_metrics: function(arts, temporary) {
-
       if (this.active_tool == "scribble") {
         this.selection_metrics.count = 1;
         return;
@@ -1053,8 +1052,6 @@ var SpacedeckSections = {
         // FIXME make sure that menus fit in window
         this.toolbar_props_x = pp.x+"px";
         this.toolbar_props_y = pp.y+"px";
-
-        //this.hide_toolbar_artifacts();
       }
 
       this.selection_metrics.x1 = sr.x1;
@@ -1069,24 +1066,26 @@ var SpacedeckSections = {
 
       if (!arts) arts = this.selected_artifacts();
 
-      this.first_selected_artifact = arts[0];
+      if (!temporary) {
-      this.selection_metrics.count=arts.length;
+        this.first_selected_artifact = arts[0];
-      this.selection_metrics.scribble_selection = false;
+        this.selection_metrics.count=arts.length;
-      if (arts.length == 1 && arts[0].mime == "x-spacedeck/vector") {
+        this.selection_metrics.scribble_selection = false;
-        if (arts[0].shape == "scribble") {
+        if (arts.length == 1 && arts[0].mime == "x-spacedeck/vector") {
-          this.selection_metrics.scribble_selection = true;
+          if (arts[0].shape == "scribble") {
+            this.selection_metrics.scribble_selection = true;
+          }
+          this.selection_metrics.vector_points = arts[0].control_points;
+          this.selection_metrics.vector_selection = true;
+        } else {
+          this.selection_metrics.vector_points = [{},{}];
+          this.selection_metrics.vector_selection = false;
+        }
+        this.selection_metrics.has_link=false;
+        this.insert_link_url="";
+        if (arts.length == 1 && arts[0].meta && arts[0].meta.link_uri && arts[0].meta.link_uri.length>0) {
+          this.selection_metrics.has_link=true;
+          this.insert_link_url = arts[0].meta.link_uri;
         }
-        this.selection_metrics.vector_points = arts[0].control_points;
-        this.selection_metrics.vector_selection = true;
-      } else {
-        this.selection_metrics.vector_points = [{},{}];
-        this.selection_metrics.vector_selection = false;
-      }
-      this.selection_metrics.has_link=false;
-      this.insert_link_url="";
-      if (arts.length == 1 && arts[0].meta && arts[0].meta.link_uri && arts[0].meta.link_uri.length>0) {
-        this.selection_metrics.has_link=true;
-        this.insert_link_url = arts[0].meta.link_uri;
       }
     },
 
@@ -1436,13 +1435,13 @@ var SpacedeckSections = {
       this.color_picker_rgb = rgb_to_hex(rgba.r,rgba.g,rgba.b);
     },
 
-    update_selected_artifacts: function(change_func, override_locked) {
+    update_selected_artifacts: function(change_func, override_locked, temporary) {
       var artifacts = this.selected_artifacts(!override_locked);
 
       if (!artifacts.length) return;
 
       this.update_artifacts(artifacts, change_func);
-      this.update_selection_metrics();
+      this.update_selection_metrics(null, temporary||false);
     },
 
     nudge_selected_artifacts: function(dx, dy, event) {
@@ -1923,10 +1922,7 @@ var SpacedeckSections = {
       }.bind(this));
     },
 
-    delayed_edit_artifact: function(evt) {
+    delayed_edit_artifact: function() {
-      evt.stopPropagation();
-      evt.preventDefault();
-
       var a = this.selected_artifacts()[0];
 
       var el = $("#ios-focuser-"+a._id);
@@ -2087,8 +2083,6 @@ var SpacedeckSections = {
           if (a.description!=dom.innerHTML) {
             a.description = dom.innerHTML;
 
-            console.log("new DOM:",dom.innerHTML);
-
             this.update_board_artifact_viewmodel(a);
             this.queue_artifact_for_save(a);
 

public/javascripts/spacedeck_whiteboard.js

@@ -6,7 +6,7 @@
 
 function setup_whiteboard_directives() {
   var mode_touch = false;
-  
+
   if ('ontouchstart' in window) {
     mode_touch = true;
     var edown = "touchstart";
@@ -38,7 +38,7 @@ function setup_whiteboard_directives() {
       $(el).bind("mousedown", this.handle_mouse_down_space.bind(this));
       $(el).bind("mousemove", this.handle_mouse_move.bind(this));
       $(el).bind("mouseup", this.handle_mouse_up_space.bind(this));
-      
+
       $(el).bind("wheel", this.handle_wheel_space.bind(this));
 
       $(document.body).bind("mouseleave", this.handle_mouse_leave.bind(this));
@@ -99,7 +99,7 @@ function setup_whiteboard_directives() {
         this.handle_mouse_down_space(evt);
         return;
       }
-      
+
       if ($scope.active_tool == "note") {
         this.handle_mouse_down_space(evt, true);
         return;
@@ -154,7 +154,7 @@ function setup_whiteboard_directives() {
 
       var a = $scope.find_artifact_by_id(evt.currentTarget.id.replace("artifact-",""));
       if (!a) return;
-      
+
       if (a.payload_uri) {
         $scope.download_selected_artifacts();
       }
@@ -200,10 +200,10 @@ function setup_whiteboard_directives() {
       var $scope = this.vm.$root;
 
       if (!evt.ctrlKey && !evt.shiftKey) return;
-      
+
       evt.preventDefault();
       evt.stopPropagation();
-      
+
       var amount = 1;
       var dy = evt.originalEvent.deltaY;
       if (dy>0) {
@@ -222,7 +222,7 @@ function setup_whiteboard_directives() {
       if (!force && evt.which != 2) {
         if (evt.target != evt.currentTarget && !_.include(["wrapper"],evt.target.className)) return;
       }
-      
+
       var $scope = this.vm.$root;
 
       $scope.opened_dialog="none";
@@ -234,7 +234,7 @@ function setup_whiteboard_directives() {
       if ((mode_touch && $scope.active_tool=="pointer") || evt.which == 2 || evt.buttons == 4) {
         $scope.active_tool = "pan";
       }
-      
+
       if ($scope.active_tool=="note") {
         this.deselect();
         this.mouse_state = "transform";
@@ -285,6 +285,7 @@ function setup_whiteboard_directives() {
         $scope.start_adding_placeholder(evt);
         return;
       } else if ($scope.active_tool=="pan") {
+        this.deselect();
         this.start_pan(evt);
         return;
       }
@@ -305,7 +306,7 @@ function setup_whiteboard_directives() {
         this.old_panx = el.scrollLeft;
         this.old_pany = el.scrollTop;
       }
-      
+
       var cursor = this.cursor_point_to_space(evt);
       $scope.mouse_ox = cursor.x;
       $scope.mouse_oy = cursor.y;
@@ -314,7 +315,7 @@ function setup_whiteboard_directives() {
 
     deselect: function() {
       var $scope = this.vm.$root;
-      
+
       $scope.deselect();
     },
 
@@ -342,7 +343,7 @@ function setup_whiteboard_directives() {
 
     rects_intersecting: function(r1,r2) {
       if (!r1 || !r2) return false;
-      
+
       if ( (r1.x+r1.w < r2.x)
         || (r1.x > r2.x+r2.w)
         || (r1.y+r1.h < r2.y)
@@ -352,7 +353,7 @@ function setup_whiteboard_directives() {
 
     artifacts_in_rect: function(rect) {
       if (!rect) return [];
-      
+
       var $scope = this.vm.$root;
 
       return _.filter($scope.active_space_artifacts, function(a) {
@@ -688,7 +689,7 @@ function setup_whiteboard_directives() {
       var $scope = this.vm.$root;
 
       evt.preventDefault();
-      
+
       if (this.mouse_state == "lasso") {
         var lasso_rect = this.abs_rect(this.lasso);
 
@@ -696,7 +697,7 @@ function setup_whiteboard_directives() {
           var arts = this.artifacts_in_rect(lasso_rect);
           this.multi_select(arts);
         } else {
-          
+
           if (this._no_artifact_toolbar_this_round) {
             this._no_artifact_toolbar_this_round = false;
           } else {
@@ -708,7 +709,7 @@ function setup_whiteboard_directives() {
       }
       else if (_.include(["transform","move","vector_transform","scribble"],this.mouse_state)) {
         var ars = $scope.selected_artifacts();
-        
+
         for (var i=0; i<ars.length; i++) {
 
           if (_.include(["text","placeholder"],$scope.artifact_major_type(ars[i]))) {
@@ -723,6 +724,9 @@ function setup_whiteboard_directives() {
 
           //save_artifact(ars[i], null, $scope.display_saving_error);
         }
+
+        // update vector handles
+        $scope.update_selection_metrics();
       }
 
       if (this.mouse_state == "text_editor") {
@@ -794,7 +798,7 @@ function setup_whiteboard_directives() {
 
         $scope.websocket_send(cursor_msg);
       }
-      
+
       // side effects ftw!
       $scope.snap_ruler_x = -1000;
       $scope.snap_ruler_y = -1000;
@@ -818,7 +822,7 @@ function setup_whiteboard_directives() {
 
       if (this.mouse_state == "move") {
         $scope.hide_toolbar_props();
-        
+
         var snap_dx = 0;
         var snap_dy = 0;
 
@@ -878,7 +882,7 @@ function setup_whiteboard_directives() {
         }
 
         $scope.hide_toolbar_props();
-        
+
         var ew = (edges.x2-edges.x1);
         var eh = (edges.y2-edges.y1);
 
@@ -924,7 +928,7 @@ function setup_whiteboard_directives() {
 
       } else if (this.mouse_state == "vector_transform") {
         $scope.hide_toolbar_props();
-        
+
         var _this = this;
         $scope.update_selected_artifacts(function(a) {
           var old_a = $scope.find_artifact_before_transaction(a);
@@ -941,18 +945,14 @@ function setup_whiteboard_directives() {
 
           // special case for arrow's 3rd point
           if (a.shape == "arrow" && $scope.selected_control_point_idx!=2) {
-            /*control_points[2].dx += dx/2;
-            control_points[2].dy += dy/2; */
-
             control_points[2].dx = (control_points[0].dx+control_points[1].dx)/2;
             control_points[2].dy = (control_points[0].dy+control_points[1].dy)/2;
           }
 
           return _this.normalize_control_points(control_points, old_a);
-        });
+        }, false, true); // override_locked: false, temporary: true
 
       } else if (this.mouse_state == "scribble") {
-
         $scope.update_selected_artifacts(function(a) {
           var old_a = a;
 

views/partials/space.html

@@ -85,13 +85,13 @@
          v-bind:class="{text-editing:(editing_artifact_id==a._id && (a.view.major_type=='text' || a.view.major_type=='shape'))}"
          id="artifact-{{a._id}}">
 
-
       <div v-if="a.view && a.view.major_type" style="height:100%; width:100%" v-bind:title="(a.editor_name || (a.user && a.user.nickname) || '')">
-          <span v-if="a.locked && is_selected(a)" class="link-wrapper">
+        <span v-if="a.locked && is_selected(a)" class="link-wrapper">
-            <span class="btn btn-sm btn-icon btn-round btn-primary">
+          <span class="btn btn-sm btn-icon btn-round btn-primary">
-              <span class="icon icon-lock-closed"></span>
+            <span class="icon icon-lock-closed"></span>
-            </span>
           </span>
+        </span>
+
         <!-- text -->
         <div v-if="a.view.major_type == 'text'" class="text" v-bind:style="a.view.inner_style">
           <div class="text-table">

views/partials/tool/image.html

@@ -4,7 +4,7 @@
   <div class="dialog-section">
     <label class="btn btn-xxl btn-transparent btn-icon">
       <span class="icon icon-picture-upload"></span>
-      <input type="file" accept="*/*" multiple v-on:change="handle_image_file_upload($event)" id="image_file_upload">
+      <input type="file" multiple v-on:change="handle_image_file_upload($event)" id="image_file_upload">
     </label>
     <p>Click to Upload<br/> or drag file(s) anywhere.</p>
   </div>

views/partials/tool/toolbar-elements.html

@@ -1,18 +1,18 @@
 <div class="toolbar toolbar-elements" v-bind:class="{in:toolbar_artifacts_in,out:!toolbar_artifacts_in}" v-show="!is_active_space_role('viewer') && active_space_loaded">
-  
+
   <div class="btn-group light vertical">
-    
+
     <a class="btn btn-icon btn-transparent"
        title="<%=__("home")%>" href="/spaces"
        v-if="(!active_space.parent_space_id && !guest_nickname && !embedded)">
       <span class="icon icon-folder"></span>
     </a>
-      
+
     <a class="btn btn-icon btn-dark"
        title="Parent Folder"
        href="/folders/{{active_space.parent_space_id}}"
        v-if="(active_space.parent_space_id && !guest_nickname && !embedded)">
-      
+
       <span class="icon icon-sd6 icon-svg"></span>
     </a>
 
@@ -35,15 +35,16 @@
       <span class="icon icon-tool-scribble"></span>
       <span class="icon-label"><%=__("tool_scribble")%></span>
     </button>
-    
+
     <button class="btn btn-icon-labeled btn-transparent" v-on:click="start_drawing_arrow()" v-bind:class="{active:active_tool=='arrow'}" title="<%=__("tool_arrow")%>">
       <span class="icon icon-tool-arrow"></span>
       <span class="icon-label"><%=__("tool_arrow")%></span>
     </button>
-    
+
     <div class="dropdown bottom light center">
       <div class="btn-collapse in">
-        <button class="btn btn-transparent btn-icon-labeled" v-on:click="handle_insert_image_url()" v-on:touchstart="handle_insert_image_url()" title="<%=__("media")%>">
+        <input type="file" multiple v-on:change="handle_image_file_upload($event)" id="image_file_upload" class="btn btn-transparent btn-icon-labeled" style="position: absolute; z-index: 1; opacity: 0;">
+        <button class="btn btn-transparent btn-icon-labeled" title="<%=__("media")%>">
           <span class="icon icon-upload"></span>
           <span class="icon-label" ><%=__("media")%></span>
         </button>
@@ -59,19 +60,6 @@
       </div>
     </div>
 
-    <div class="dropdown top left light">
-      <div class="btn-collapse">
-        <button class="btn btn-transparent btn-icon-labeled" v-bind:class="{open:opened_dialog=='image'}" v-on:click="open_dialog('image')" title="<%=__("image")%>">
-          <span class="icon icon-picture"></span>
-          <span class="icon-label"><%=__("image")%></span>
-        </button>
-      </div>
-
-      <div class="dialog">
-        <%- include("./image.html") %>
-      </div>
-    </div>
-
     <div class="dropdown top left light" v-bind:class="{open:opened_dialog=='zones'}">
       <div class="btn-collapse in">
         <button class="btn btn-transparent btn-icon-labeled" v-bind:class="{open:opened_dialog=='zones'}" v-on:click="open_dialog('zones')" title="<%=__("tool_zones")%>">
@@ -84,7 +72,7 @@
         <%- include("./zones.html") %>
       </div>
     </div>
-    
+
     <button class="btn btn-divider" v-show="logged_in"></button>
 
     <div class="dropdown top left center" v-show="logged_in" v-bind:class="{open:opened_dialog=='background'}">
@@ -107,8 +95,8 @@
       <span class="icon icon-share"></span>
       <span class="icon-label"><%= __('share') %></span>
     </button>
-    
+
-    <!--        
+    <!--
             <li v-on:click="edit_space_title()" v-if="logged_in">
               <span>
                 <span class="icon icon-sm icon-tag"></span>

views/partials/tool/toolbar-object.html

@@ -40,7 +40,7 @@
 
     <button class="btn btn-divider"></button>
     -->
-    
+
     <div class="dropdown top light right" v-bind:class="{open:opened_dialog=='text-styles'}">
       <div class="btn-collapse in">
         <button class="btn btn-transparent btn-icon-labeled" v-on:click="open_dialog('text-styles')" v-bind:class="{open : opened_dialog=='text-styles'}" title="<%=__("tool_styles")%>">
@@ -53,7 +53,7 @@
         <%- include("./text-styles.html") %>
       </div>
     </div>
-    
+
     <div class="dropdown top light right" v-bind:class="{open:opened_dialog=='type-align'}">
       <div class="btn-collapse" v-bind:class="{in:selection_metrics.contains_text}">
         <button class="btn btn-transparent btn-icon-labeled" v-on:click="open_dialog('type-align')" v-bind:class="{open : opened_dialog=='type-align'}" title="<%=__("tool_align")%>">
@@ -80,9 +80,9 @@
         <%- include("./layout.html") %>
       </div>
     </div>
-    
+
     <div class="dropdown top light right" v-bind:class="{open:opened_dialog=='text-settings'}">
-      
+
       <div class="btn-collapse in">
         <button class="btn btn-transparent btn-icon-labeled" v-on:click="open_dialog('text-settings')" v-bind:class="{open : opened_dialog=='text-settings'}" title="<%=__("tool_font")%>">
           <span class="icon icon-text-typeface"></span>
@@ -97,6 +97,17 @@
 
     <button class="btn btn-divider"></button>
 
+    <div class="dropdown bottom light center">
+      <div class="btn-collapse" v-bind:class="{in:selection_metrics.contains_text}">
+        <button
+          class="btn btn-icon-labeled btn-transparent"
+          v-on:click="delayed_edit_artifact()">
+          <span class="icon icon-pencil"></span>
+          <span class="icon-label"><%=__("tool_edit_text")%></span>
+        </button>
+      </div>
+    </div>
+
     <div class="dropdown top light right" v-bind:class="{open:opened_dialog=='object-options'}">
       <button class="btn btn-transparent btn-icon-labeled" v-on:click="open_dialog('object-options')" v-bind:class="{open : opened_dialog=='object-options'}">
         <span class="icon icon-cogwheel"></span>
@@ -107,6 +118,6 @@
         <%- include("./object-options.html") %>
       </div>
     </div>
-    
+
   </div>
 </div>