WIP MNT design/UX cleanup

public/javascripts/spacedeck_sections.js

@@ -63,8 +63,8 @@ var SpacedeckSections = {
     active_style: {
       border_radius: 0,
       stroke: 0,
-      font_family: "Avenir W01",
-      font_size: 18,
+      font_family: "Inter",
+      font_size: 36,
       line_height: 1.5,
       letter_spacing: 0,
 
@@ -136,18 +136,8 @@ var SpacedeckSections = {
     ],
 
     fonts: [
-      "Arial",
-      "Courier",
-      "Georgia",
-      "Verdana",
-      "Comic Sans MS",
-      "Montserrat",
-      "Lato",
-      "Roboto",
-      "Crimson Text",
-      "EB Garamond",
-      "Vollkorn",
-      "Avenir W01"
+      "Inter",
+      "Courier"
     ],
 
     detected_text_formats: {},
@@ -180,7 +170,7 @@ var SpacedeckSections = {
     toolbar_props_in: false,
     toolbar_artifacts_x: "-1000px",
     toolbar_artifacts_y: "-1000px",
-    toolbar_artifacts_in: false
+    toolbar_artifacts_in: true
   },
 
   methods: {
@@ -1057,7 +1047,7 @@ var SpacedeckSections = {
         this.toolbar_props_x = pp.x+"px";
         this.toolbar_props_y = pp.y+"px";
           
-        this.hide_toolbar_artifacts();
+        //this.hide_toolbar_artifacts();
       }
 
       this.selection_metrics.x1 = sr.x1;
@@ -1125,9 +1115,12 @@ var SpacedeckSections = {
       var er = this.enclosing_rect(this.active_space_artifacts);
       if (!er) return;
 
-      this.active_space.width =Math.max(er.x2+100, window.innerWidth);
-      this.active_space.height=Math.max(er.y2+100, window.innerHeight);
+      // resize space
+      this.active_space.width =Math.max((parseInt(er.x2/window.innerWidth)+2)*window.innerWidth, window.innerWidth);
+      this.active_space.height=Math.max((parseInt(er.y2/window.innerHeight)+2)*window.innerHeight, window.innerHeight);
 
+      console.log("bounds: ",this.active_space.width,this.active_space.height);
+      
       if (this._last_bounds_width != this.active_space.width ||
         this._last_bounds_height != this.active_space.height) {
         this._last_bounds_width = this.active_space.width;
@@ -1544,7 +1537,7 @@ var SpacedeckSections = {
     add_artifact: function (space, item_type, url, evt) {
       this.active_tool = "pointer";
       this.mouse_state = "idle";
-      this.hide_toolbar_artifacts();
+      //this.hide_toolbar_artifacts();
       
       if (!url && (item_type == 'image' || item_type == 'video' || item_type == 'embed')) {
         url = prompt("URL?");
@@ -1788,9 +1781,7 @@ var SpacedeckSections = {
       if (this.active_space_role=="viewer") {
         return false;
       }
-      
-      this.hide_toolbar_artifacts();
-      
+            
       // 1. create placeholder artifact
       var w=300,h=150;
       var fill="transparent";
@@ -2578,12 +2569,11 @@ var SpacedeckSections = {
     },
     
     hide_toolbar_props: function() {
-      this.toolbar_props_in = false;
+      // FIXME test
+      //this.toolbar_props_in = false;
     },
     
     show_toolbar_artifacts: function(x,y) {
-      this.toolbar_artifacts_x = (x-175)+"px";
-      this.toolbar_artifacts_y = y+"px";
       this.toolbar_artifacts_in = true;
     },
     
@@ -2593,29 +2583,19 @@ var SpacedeckSections = {
 
     start_adding_artifact: function(evt) {
       evt = fixup_touches(evt);
-      
-      // toggle
-      if (this.toolbar_artifacts_in) {
-        this.hide_toolbar_artifacts();
-        return;
-      }
-      this.show_toolbar_artifacts(evt.pageX,evt.pageY);
     },
 
     start_drawing_scribble: function(evt) {
-      this.hide_toolbar_artifacts();
       this.active_tool = "scribble";
       this.opened_dialog = "none";
     },
 
     start_drawing_arrow: function(evt) {
-      this.hide_toolbar_artifacts();
       this.active_tool = "arrow";
       this.opened_dialog = "none";
     },
 
     start_drawing_line: function(evt) {
-      this.hide_toolbar_artifacts();
       this.active_tool = "line";
       this.opened_dialog = "none";
     },

public/javascripts/spacedeck_spaces.js

@@ -273,9 +273,9 @@ var SpacedeckSpaces = {
 
               this.discover_zones();
 
-              //window.setTimeout(function() {
-              //  this.zoom_to_fit();
-              //}.bind(this),10);
+              window.setTimeout(function() {
+                this.zoom_to_fit();
+              }.bind(this),10);
 
               if (on_success) {
                 on_success();
@@ -876,10 +876,6 @@ var SpacedeckSpaces = {
       }.bind(this));
     },
     
-    emojified_comment: function(comment) {
-      return twemoji.parse(comment);
-    },
-
     set_folder_sorting: function(key,reverse) {
       this.folder_sorting = key;
       this.folder_reverse = reverse?-1:1;

public/javascripts/spacedeck_whiteboard.js

@@ -80,10 +80,16 @@ function setup_whiteboard_directives() {
         evt.stopPropagation();
       }
 
-      var a = $scope.find_artifact_by_id(evt.currentTarget.id.replace("artifact-",""));
-
       if ($scope.active_tool == "zoom") return;
 
+      if (evt.which == 2) {
+        // middle mouse button
+        this.handle_mouse_down_space(evt);
+        return;
+      }
+      
+      var a = $scope.find_artifact_by_id(evt.currentTarget.id.replace("artifact-",""));
+
       if ($scope.active_tool == "eyedrop") {
         var arts = $scope.selected_artifacts();
         if (!$scope.is_selected(a) && arts.length > 0) {
@@ -196,8 +202,10 @@ function setup_whiteboard_directives() {
     },
 
     handle_mouse_down_space: function(evt) {
-      if (evt.target != evt.currentTarget && !_.include(["wrapper"],evt.target.className)) return;
-
+      if (evt.which != 2) {
+        if (evt.target != evt.currentTarget && !_.include(["wrapper"],evt.target.className)) return;
+      }
+      
       var $scope = this.vm.$root;
 
       $scope.opened_dialog="none";
@@ -214,7 +222,7 @@ function setup_whiteboard_directives() {
         this.deselect();
         this.mouse_state = "transform";
         $scope.mouse_state = this.mouse_state;
-        this.start_adding_note(evt);
+        this.start_drawing_note(evt);
         return;
 
       } else if ($scope.active_tool=="arrow") {
@@ -492,6 +500,7 @@ function setup_whiteboard_directives() {
       if (!xdists[0] || xdists[0][0]>TOL) {
         results.snapx = [0,x];  // distance, coordinate
       } else {
+        // FIXME snap rulers are broken
         //$scope.snap_ruler_x = xdists[0][1];
       }
       if (!ydists[0] || ydists[0][0]>TOL) {
@@ -516,6 +525,41 @@ function setup_whiteboard_directives() {
       return point;
     },
 
+    start_drawing_note: function(evt) {
+      evt.preventDefault();
+      evt.stopPropagation();
+
+      var $scope = this.vm.$root;
+      var point = this.cursor_point_to_space(evt);
+      this.offset_point_in_wrapper(point);
+      var z = $scope.highest_z()+1;
+
+      var a = {
+        space_id: $scope.active_space._id,
+        mime: "text/html",
+        description: "<p>Text</p>",
+        x: point.x,
+        y: point.y,
+        z: z,
+        w: 64,
+        h: 64,
+        align: "center",
+        valign: "middle",
+        stroke_color: "#000000",
+        fill_color: "rgb(241, 196, 15)",
+        stroke: 0
+      };
+
+      $scope.save_artifact(a, function(saved_a) {
+        $scope.update_board_artifact_viewmodel(saved_a);
+        $scope.active_space_artifacts.push(saved_a);
+        $scope.select(evt,a);
+        $scope.transform_ox = 0;
+        $scope.transform_oy = 0;
+        $scope.begin_transaction();
+      }.bind(this));
+    },
+
     start_drawing_scribble: function(evt) {
       evt.preventDefault();
       evt.stopPropagation();
@@ -851,7 +895,7 @@ function setup_whiteboard_directives() {
 
         var scale_x = lead_x ? (moved_x)/lead_x : 1;
         var scale_y = lead_y ? (moved_y)/lead_y : 1;
-        if (!$scope.transform_lock) scale_y = scale_x;
+        if ($scope.transform_lock) scale_y = scale_x;
 
         $scope.update_selected_artifacts(function(a) {
           var old_a = $scope.find_artifact_before_transaction(a);