changes

src/css/draginput.css

@@ -110,7 +110,9 @@
   width: 145px;
 }
 
-
+.draginput.twocol {
+  width: 145px;
+}
 
 .draginput input, .draginput input:hover, .draginput input:active {  
     cursor: url(../images/drag.png), move;

src/css/method-draw.css

@@ -487,13 +487,12 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
   cursor: default;
 }
 
- .width_label {
+.width_label {
   padding-right: 5px;
 }
 
 #text {
   position: absolute;
-  left: -9999px;
 }
 
  #tool_bold span,  #tool_italic span { 

src/index.html

@@ -274,6 +274,10 @@
 
   <div id="text_panel" class="context_panel">
     <h4>Text</h4>
+    <label class="draginput twocol" data-title="Change Font Size">
+      <span>Content</span>
+      <input id="text" type="text"/>
+    </label>
     <label>
       <input id="text_x" class="attr_changer" data-title="Change text x coordinate" size="3" data-attr="x" pattern="[0-9]*" />
       <span>X</span>
@@ -298,8 +302,6 @@
       <input id="font_size" size="3" value="0" />
       <span id="font_sizeLabel" class="icon_label">Font Size</span>
     </label>
-    <!-- Not visible, but still used -->
-    <input id="text" type="text" size="35"/>
   </div>
 
   <!-- formerly gsvg_panel -->
@@ -691,6 +693,8 @@
   <script type="text/javascript" src="js/svgcanvas.js"></script>
   <script type="text/javascript" src="js/editor.js"></script>
   <script type="text/javascript" src="js/Canvas.js"></script>
+  <script type="text/javascript" src="js/Text.js"></script>
+  <script type="text/javascript" src="js/Pan.js"></script>
   <script type="text/javascript" src="js/Panel.js"></script>
   <script type="text/javascript" src="js/Rulers.js"></script>
   <script type="text/javascript" src="js/Toolbar.js"></script>
@@ -705,14 +709,12 @@
   <script type="text/javascript" src="js/dialog.js"></script>
   <script type="text/javascript" src="js/contextChanged.js"></script>
   <script type="text/javascript" src="js/exportHandler.js"></script>
-  <script type="text/javascript" src="js/elementChanged.js"></script>
   <script type="text/javascript" src="js/elementTransition.js"></script>
   <script type="text/javascript" src="js/bindCanvas.js"></script>
   <script type="text/javascript" src="js/lib/contextmenu.js"></script>
   <script type="text/javascript" src="js/lib/jpicker.min.js"></script>
   <script type="text/javascript" src="js/lib/mousewheel.js"></script>
   <script type="text/javascript" src="js/eyedropper.js"></script>
-
   <script type="text/javascript" src="js/grid.js"></script>
   <script type="text/javascript" src="js/lib/requestanimationframe.js"></script>
   <script type="text/javascript" src="js/lib/taphold.js"></script>

src/js/Canvas.js

@@ -31,7 +31,7 @@ MD.Canvas = function(){
     };
     
     // curConfig.canvas_expansion
-    var multi = 1;
+    var multi = 1.5;
     w = Math.max(w_orig, svgCanvas.contentW * zoom * multi);
     h = Math.max(h_orig, svgCanvas.contentH * zoom * multi);
     workarea.style.overflow = (w === w_orig && h === h_orig) ? 'hidden' : 'scroll';

src/js/Keyboard.js

@@ -1,12 +1,10 @@
 MD.Keyboard = function(){
-
   document.addEventListener("keydown", function(e){
     const modKey = !svgedit.browser.isMac() ? "ctrlKey" : "metaKey";
     const cmd = e[modKey] ? "cmd_" : "";
-    const shift = e.shiftKey ? "shift_" : "";;
+    const shift = e.shiftKey ? "shift_" : "";
     const key = cmd + shift + e.key.toLowerCase();
     const canvasMode = state.get("canvasMode");
-    console.log(key)
     const keys = {
       v: ()=> state.set("canvasMode", "select"),
       q: ()=> state.set("canvasMode", "fhpath"),
@@ -27,6 +25,8 @@ MD.Keyboard = function(){
       "cmd_x": ()=> editor.cut(),
       "cmd_v": ()=> editor.paste(),
       "cmd_a": ()=> svgCanvas.selectAllInCurrentLayer(),
+      "cmd_b": ()=> editor.text.setBold(),
+      "cmd_i": ()=> editor.text.setItalic(),
       "backspace": () => editor.deleteSelected(),
       "ctrl_arrowleft": () => editor.rotateSelected(0,1),
       "ctrl_arrowright": () => editor.rotateSelected(1,1),
@@ -45,7 +45,8 @@ MD.Keyboard = function(){
       "shift_arrowright": () => editor.moveSelected(state.get("canvasSnapStep") * 1, 0),
       "shift_arrowup":    () => editor.moveSelected(0, state.get("canvasSnapStep") * -1),
       "shift_arrowdown":  () => editor.moveSelected(0, state.get("canvasSnapStep") * 1),
-      "escape": () => editor.escapeMode()
+      "escape": () => editor.escapeMode(),
+      " ": ()=> editor.pan.startPan(),
     };
 
     // keyboard shortcut exists
@@ -61,6 +62,7 @@ MD.Keyboard = function(){
     const key = e.key.toLowerCase();
     const keys = {
     "alt":     ()=> $("#workarea").removeClass("out"),
+    " ": ()=> editor.pan.stopPan(),
     }
     if (keys[key]) {
       e.preventDefault();

src/js/PaintBox.js

@@ -91,7 +91,8 @@ MD.PaintBox = function(container, type){
   };  
   
   this.update = function(apply) {
-    if(!selectedElement) return;
+    const selectedElement = editor.selected[0];
+    if(!editor.selected) return;
     var type = this.type;
     switch ( selectedElement.tagName ) {
     case 'use':
@@ -140,7 +141,7 @@ MD.PaintBox = function(container, type){
 
     paintOpacity *= 100;          
     
-    var paint = getPaint(paintColor, paintOpacity, type);
+    var paint = this.getPaint(paintColor, paintOpacity, type);
     // update the rect inside #fill_color/#stroke_color
     this.setPaint(paint);
   }

src/js/Pan.js

@@ -0,0 +1,40 @@
+MD.Pan = function(){
+  const workarea = document.getElementById("workarea");
+
+  let panning = false;
+  let last_x = null;
+  let last_y = null;
+
+  function startPan(){
+    panning = true;
+    svgCanvas.spaceKey = true;
+    document.body.classList.add("dragging");
+  }
+
+  function stopPan(){
+    panning = false;
+    svgCanvas.spaceKey = false;
+    document.body.classList.remove("dragging");
+  }
+  
+  var move_pan = function(evt) {    
+    if(!panning) return;
+    workarea.scrollLeft -= (evt.clientX - last_x);
+    workarea.scrollTop -= (evt.clientY - last_y);
+    last_x = evt.clientX;
+    last_y = evt.clientY;
+  }
+  
+  var start_pan = function(evt) {
+    if(!panning) return;
+    last_x = evt.clientX;
+    last_y = evt.clientY;
+  }
+  
+  $('#svgcanvas')
+    .on('mousemove', move_pan)
+    .on("mousedown", start_pan)
+
+  this.startPan = startPan;
+  this.stopPan = stopPan;
+}

src/js/Panel.js

@@ -40,9 +40,14 @@ MD.Panel = function(){
     $('#blur')         .dragInput({ min: 0,    max: 10,    step: .1,  callback: editor.changeBlur,          cursor: true,  start: 0               });
     
     $('#position_opts .draginput_cell').on("click", function(){
+        $('#align_relative_to').val()
         svgCanvas.alignSelectedElements(this.getAttribute("data-align")[0], 'page');
     });
 
+    $('.align_buttons .draginput_cell').on("click", function(){
+        svgCanvas.alignSelectedElements(this.getAttribute("data-align")[0],  $('#align_relative_to').val());
+    });
+
     $('#stroke_style').change(function(){
       svgCanvas.setStrokeAttr('stroke-dasharray', $(this).val());
       $("#stroke_style_label").html(this.options[this.selectedIndex].text);
@@ -67,7 +72,8 @@ MD.Panel = function(){
     }
 
     function updateContextPanel(elems) {
-     var elem = elems[0];
+     if (!elems) elems = editor.selected;
+     var elem = elems[0] || editor.selected[0];
      const isNode = svgCanvas.pathActions.getNodePoint()
      // If element has just been deleted, consider it null
      if(!elem || !elem.parentNode) elem = null;
@@ -76,7 +82,6 @@ MD.Panel = function(){
      
      var currentLayerName = svgCanvas.getCurrentDrawing().getCurrentLayerName();
      var currentMode = svgCanvas.getMode();
-     
      if (currentMode === 'pathedit') {
        $('.context_panel').hide();
        $('#path_node_panel').show();
@@ -84,11 +89,11 @@ MD.Panel = function(){
        var point = svgCanvas.pathActions.getNodePoint();
        $('#tool_add_subpath').removeClass('push_button_pressed').addClass('tool_button');
        $('#tool_node_delete').toggleClass('disabled', !svgCanvas.pathActions.canDeleteNodes);
-               
        if(point) {
          var seg_type = $('#seg_type');
          point.x = svgedit.units.convertUnit(point.x);
          point.y = svgedit.units.convertUnit(point.y);
+         console.log(point)
          $('#path_node_x').val(Math.round(point.x));
          $('#path_node_y').val(Math.round(point.y));
          if(point.type) {
@@ -109,7 +114,6 @@ MD.Panel = function(){
      $('.menu_item', '#edit_menu').addClass('disabled');
      $('.menu_item', '#object_menu').addClass('disabled');
      
-     
      //hack to show the proper multialign box
      if (multiselected) {
        const multi = elems.filter(Boolean);
@@ -143,7 +147,6 @@ MD.Panel = function(){
              y = bb.y;
            }
          }
-
          x = svgedit.units.convertUnit(x);
          y = svgedit.units.convertUnit(y);
          $("#" + elname +"_x").val(Math.round(x))

src/js/Shapelib.js

@@ -120,7 +120,6 @@ MD.Shapelib = function(){
         title: id
       });
       
-      
       // Store for later use
       cur_lib.buttons.push(icon_btn[0]);
     }

src/js/Text.js

@@ -0,0 +1,63 @@
+MD.Text = function(){
+
+  function setBold(){
+    svgCanvas.setBold( !svgCanvas.getBold() );
+    editor.panel.updateContextPanel();
+  }
+
+  function setItalic(){
+    svgCanvas.setItalic( !svgCanvas.getItalic() );
+    editor.panel.updateContextPanel();
+  }
+
+  $('#font_family').change(function() {
+    svgCanvas.setFontFamily(this.value);
+  });
+
+  $('#font_family_dropdown').change(function() {
+    var fam = this.options[this.selectedIndex].value;
+    const isSystemFont = fam === "sans-serif" || fam === "serif" || fam === "monospace";
+    const font = isSystemFont ? {Bold: true, Italic: true, "BoldItalic": true} : fonts[fam];
+    if (!isSystemFont) fam = `'${fam}'`;
+    
+    svgCanvas.setBold(false);
+    svgCanvas.setItalic(false);
+    
+    $("#tool_bold")
+      .removeClass("active")
+      .toggleClass("disabled", !font.Bold);
+
+    $("#tool_italic")
+      .removeClass("active")
+      .toggleClass("disabled", !font.Italic);
+    
+    var fam_display = this.options[this.selectedIndex].text;
+    $('#preview_font').html(fam_display).css("font-family", fam);
+    $('#font_family').val(fam).change();
+    // todo should depend on actual load
+    document.fonts.onloadingdone = function (fontFaceSetEvent) {
+    const els = svgCanvas.getSelectedElems();
+      els.forEach(el => {
+          var selector = svgCanvas.selectorManager.requestSelector(el);
+          selector.resize();
+      })
+     };
+    
+  });
+
+  $('#text')
+    .keydown(function(e){
+      e.stopPropagation();
+    })
+    .keyup(function(e){
+      e.stopPropagation();
+      if (e.key === "Escape") {
+        return svgCanvas.textActions.toSelectMode()
+      }
+      svgCanvas.setTextContent(this.value);
+    });
+
+  this.setBold = setBold;
+  this.setItalic = setItalic;
+
+}

src/js/Toolbar.js

@@ -1,21 +1,22 @@
 MD.Toolbar = function(){
 
-    // tools left
-    $("#tools_left .tool_button").on("click", function(){ 
-      const mode = this.getAttribute("data-mode");
-      state.set("canvasMode", mode)
-      if (mode === "shapelib") showShapeLib()
-    });
+  // tools left
+  $("#tools_left .tool_button").on("click", function(){ 
+    const mode = this.getAttribute("data-mode");
+    state.set("canvasMode", mode)
+    if (mode === "shapelib") showShapeLib()
+  });
 
-    function setMode(mode) {
-      $(".tool_button").removeClass("current");
-      $("#tool_" + mode).addClass("current");
-      svgCanvas.setMode(mode);
-    }
+  function setMode(mode) {
+    $(".tool_button").removeClass("current");
+    $("#tool_" + mode).addClass("current");
+    svgCanvas.setMode(mode);
+  }
 
-    function showShapeLib(){
-      $("#tools_shapelib").show();
-    }
+  function showShapeLib(){
+    $("#tools_shapelib").show();
+    $(window).one("mousedown", function(){$('#tools_shapelib').hide()})
+  }
 
-    this.setMode = setMode;
+  this.setMode = setMode;
 }

src/js/bindCanvas.js

@@ -1,8 +1,9 @@
 // bind the selected event to our function that handles updates to the UI
 svgCanvas.bind("selected", editor.selectedChanged);
 svgCanvas.bind("transition", editor.elementTransition);
-//svgCanvas.bind("changed", elementChanged);
+svgCanvas.bind("changed", editor.elementChanged);
 svgCanvas.bind("exported", exportHandler);
 svgCanvas.bind("zoomed", editor.zoom.changed);
 svgCanvas.bind("contextset", contextChanged);
+svgCanvas.bind("extension_added", editor.extensionAdded);
 svgCanvas.textActions.setInputElem($("#text")[0]);

src/js/editor.js

@@ -101,6 +101,10 @@ MD.Editor = function(){
     editor.paintBox.stroke.setPaint(fill, true);
   };
 
+  function escapeMode(){
+    svgCanvas.setMode("select")
+  }
+
   // called when we've selected a different element
   function selectedChanged(window,elems) {  
     const mode = svgCanvas.getMode();
@@ -109,6 +113,26 @@ MD.Editor = function(){
     editor.panel.updateContextPanel(_self.selected);
   };
 
+  function elementChanged(window,elems){
+    
+    const mode = svgCanvas.getMode();
+
+    // if the element changed was the svg, then it could be a resolution change
+    if (elems[0].tagName === "svg") canvas.update();
+
+    editor.panel.updateContextPanel(elems);
+    
+    // In the event a gradient was flipped:
+    if(_self.selected && mode === "select") {
+      editor.paintBox.fill.update();
+      editor.paintBox.stroke.update();
+    }
+    
+    svgCanvas.runExtensions("elementChanged", {
+      elems: elems
+    });
+  }
+
   function changeAttribute(attr, value, completed) {
     if (completed) {
       svgCanvas.changeSelectedAttribute(attr, value);
@@ -133,7 +157,23 @@ MD.Editor = function(){
     svgCanvas.moveSelectedElements(dx,dy);
   };
 
+  function extensionAdded(){
+    console.log("master", args);
+  }
+
+  function changeBlur(ctl, completed){
+    // todo not receiving ctl
+    const val = $('#blur').val();
+    if (completed) {
+      svgCanvas.setBlur(val, true);
+    }
+    else {
+      svgCanvas.setBlurNoUndo(val);
+    }
+  }
+
   this.selectedChanged = selectedChanged;
+  this.elementChanged = elementChanged;
   this.changeAttribute = changeAttribute;
   this.elementTransition = elementTransition;
   this.switchPaint = switchPaint;
@@ -151,4 +191,7 @@ MD.Editor = function(){
   this.moveSelected = moveSelected;
   this.convertToPath = convertToPath;
   this.reorientPath = reorientPath;
+  this.escapeMode = escapeMode;
+  this.extensionAdded = extensionAdded;
+  this.changeBlur = changeBlur;
 }

src/js/elementChanged.js

@@ -1,43 +0,0 @@
- 
-    // called when any element has changed
-    var elementChanged = function(window,elems) {
-      var mode = svgCanvas.getMode();
-      if(mode === "select") {
-        setSelectMode();
-      }
-      
-      for (var i = 0; i < elems.length; ++i) {
-        var elem = elems[i];
-        
-        // if the element changed was the svg, then it could be a resolution change
-        if (elem && elem.tagName === "svg") {
-          //populateLayers();
-          updateCanvas();
-        } 
-        // Update selectedElement if element is no longer part of the image.
-        // This occurs for the text elements in Firefox
-        else if(elem && selectedElement && selectedElement.parentNode == null) {
-//            || elem && elem.tagName == "path" && !multiselected) { // This was added in r1430, but not sure why
-          selectedElement = elem;
-        }
-      }
-        
-      // we update the contextual panel with potentially new
-      // positional/sizing information (we DON'T want to update the
-      // toolbar here as that creates an infinite loop)
-      // also this updates the history buttons
-  
-      // we tell it to skip focusing the text control if the
-      // text element was previously in focus
-      updateContextPanel();
-      
-      // In the event a gradient was flipped:
-      if(selectedElement && mode === "select") {
-        Editor.paintBox.fill.update();
-        Editor.paintBox.stroke.update();
-      }
-      
-      svgCanvas.runExtensions("elementChanged", {
-        elems: elems
-      });
-    };

src/js/start.js

@@ -7,6 +7,7 @@ editor.rulers = new MD.Rulers();
 editor.canvas = new MD.Canvas();
 editor.panel = new MD.Panel();
 editor.zoom = new MD.Zoom();
+editor.text = new MD.Text();
 editor.paintBox = {
   fill: new MD.PaintBox('#fill_color', 'fill'),
   stroke: new MD.PaintBox('#stroke_color', 'stroke'),
@@ -14,10 +15,11 @@ editor.paintBox = {
 };
 editor.palette = new MD.Palette();
 editor.keyboard = new MD.Keyboard();
+editor.pan = new MD.Pan();
 
 svgCanvas.addExtension.apply(this, ["shapes", MD.Shapelib])
 
-
+editor.rulers.update();
 const state = new State();
 state.set("canvasId", t("Untitled"));
 state.set("canvasMode", state.get("canvasMode"));

src/js/svgcanvas.js

@@ -49,6 +49,7 @@ var curConfig = {
   initFill: {color: 'fff', opacity: 1},
   initStroke: {width: 1, color: '000', opacity: 1},
   imgPath: 'images/',
+  baseUnit: 'px'
 };
 
 // Update config with new one if given
@@ -352,15 +353,6 @@ var ref_attrs = ["clip-path", "fill", "filter", "marker-end", "marker-mid", "mar
 
 var elData = $.data;
 
-// Animation element to change the opacity of any newly created element
-var opac_ani = false; //document.createElementNS(svgns, 'animate');
-//$(opac_ani).attr({
-//  attributeName: 'opacity',
-//  begin: 'indefinite',
-//  dur: 0,
-//  fill: 'freeze'
-//}).appendTo(svgroot);
-
 var restoreRefElems = function(elem) {
   // Look for missing reference elements, restore any found
   var attrs = $(elem).attr(ref_attrs);
@@ -2579,7 +2571,6 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
         started = true;
         // we are starting an undoable change (a drag-rotation)
         canvas.undoMgr.beginUndoableChange("transform", selectedElements);
-        document.getElementById("workarea").className = "rotate";
         break;
       default:
         // This could occur in an extension
@@ -2599,8 +2590,8 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
       }
     });
     if (current_mode) {
-      document.getElementById("workarea").className = 
-        (current_mode == "resize")
+      container.parentNode.className = 
+        (current_mode === "resize")
         ? evt.target.style.cursor
         : current_mode
       }
@@ -3361,21 +3352,6 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
       
       if(useUnit) svgedit.units.convertAttrs(element);
       
-      var ani_dur = .2, c_ani;
-      if(opac_ani.beginElement && element.getAttribute('opacity') != cur_shape.opacity) {
-        c_ani = $(opac_ani).clone().attr({
-          to: cur_shape.opacity,
-          dur: ani_dur
-        }).appendTo(element);
-        try {
-          // Fails in FF4 on foreignObject
-          c_ani[0].beginElement();
-        } catch(e){}
-      } else {
-        ani_dur = 0;
-      }
-      
-      if(c_ani) c_ani.remove();
       element.setAttribute("opacity", cur_shape.opacity);
       element.setAttribute("style", "pointer-events:inherit");
       cleanupElement(element);

src/js/units.js

@@ -137,33 +137,6 @@ svgedit.units.setUnitAttr = function(elem, attr, val) {
   if(!isNaN(val)) {
     // New value is a number, so check currently used unit
     var old_val = elem.getAttribute(attr);
-    
-    // Enable this for alternate mode
-//    if(old_val !== null && (isNaN(old_val) || elementContainer_.getBaseUnit() !== 'px')) {
-//      // Old value was a number, so get unit, then convert
-//      var unit;
-//      if(old_val.substr(-1) === '%') {
-//        var res = getResolution();
-//        unit = '%';
-//        val *= 100;
-//        if(w_attrs.indexOf(attr) >= 0) {
-//          val = val / res.w;
-//        } else if(h_attrs.indexOf(attr) >= 0) {
-//          val = val / res.h;
-//        } else {
-//          return val / Math.sqrt((res.w*res.w) + (res.h*res.h))/Math.sqrt(2);
-//        }
-//      } else {
-//        if(elementContainer_.getBaseUnit() !== 'px') {
-//          unit = elementContainer_.getBaseUnit();
-//        } else {
-//          unit = old_val.substr(-2);
-//        }
-//        val = val / typeMap_[unit];
-//      }
-//    
-//    val += unit;
-//    }
   }
   elem.setAttribute(attr, val);
 };