many changes

src/css/app.css

@@ -22,13 +22,15 @@
  #workarea {
   display: flex;
   position:absolute;
-  top: 30px;
+  top: var(--x8);
-  left: 50px;
+  left: var(--x12);
-  bottom: 40px;
+  bottom: var(--x10);
-  right: 175px;
+  right: calc(var(--panel-width) + var(--x4));
   background-color: var(--z2);
   overflow: auto;
   align-items: center;
   justify-content: center;
   transition: transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);
+  border-radius: var(--x2);
+  box-shadow: var(--x1) var(--x1) var(--x8) rgba(0,0,0,0.2);
 }

src/css/base.css

@@ -90,11 +90,13 @@
   --x13: 52px;
   --x14: 56px;
   --x15: 60px;
+  --x16: 64px;
 
   --mono-font: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
   --ui-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
   --transition-duration: 333ms;
   --transition-fast: 200ms;
+  --panel-width: calc(var(--x10)*2*2 + var(--x1));
 }
 
 a, a:link, a:active, a:visited {

src/css/color-tool.css

@@ -20,12 +20,12 @@
   content: '';
   position: absolute;
   display: block;
-  width: 8px;
+  left: var(--x1);
-  height: 8px;
+  right: var(--x1);
-  left: 8px;
+  top: var(--x1);
-  top: 8px;
+  bottom: var(--x1);
-  background: var(--z9);
+  background: var(--z1);
-  box-shadow: 0 0 0 1px var(--z0);
+  box-shadow: 0 0 0 1px var(--z13);
 }
 
 #tool_switch {
@@ -34,27 +34,27 @@
   height: 11px;
   position: absolute;
   top: -5px;
-  left: 30px;
+  right: var(--x3);
   cursor: nwse-resize
 }
 
 #tool_switch svg {
-  fill: var(--z10);
+  fill: var(--z6);
 }
 
 #tool_switch:hover svg {
     fill: var(--z15);
 }
 
-#tool_stroke:hover #stroke_color:after {
+#stroke_color:hover:after {
-  background: var(--z15);
+  box-shadow: 0 0 0 1px var(--z15);
 }
 
 .color_block {
-  width: 24px;
+  width: var(--x5);
-  height: 24px;
+  height: var(--x5);
   overflow: hidden;
-  border: solid #ccc 1px;
+  border: solid var(--z12) 1px;
 }
 
 .color_block:hover {

src/css/draginput.css

@@ -1,12 +1,18 @@
+.draginputs {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+}
+
 .draginput {
   background: var(--z2);
-  border-radius: 3px;
+  border-radius: var(--x1);
-  width: 70px;
+  width: calc(50% - var(--x2));
-  height: 70px;
+  height: calc(var(--x9) * 2);
   display: block;
   position: relative;
-  float: left;
+  margin: 0 var(--x2) var(--x2) 0;
-  margin: 0 5px 5px 0;
   overflow: hidden;
 }
 
@@ -73,11 +79,7 @@
 }
 
 .draginput.twocol {
-  width: 145px;
+  width: 100%;
-}
-
-.draginput.twocol {
-  width: 145px;
 }
 
 .draginput input, .draginput input:hover, .draginput input:active {  

src/css/menu.css

@@ -1,20 +1,8 @@
-#menu {
-  display: none;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 30px;
-  background: #000;
-  z-index: 10;
-  color: #fff;
-}
-
 #menu_bar {
   padding: 0 0 0 var(--x12);
-  background: var(--z1);
   position: relative;
   z-index: 2;
+  height: var(--x8);
 }
 
 #menu_bar.active .menu.open .menu_list {
@@ -31,42 +19,38 @@
 .menu_title {
   cursor: pointer;
   display: inline-block;
-  padding: 7px 10px;
   z-index: 10;
   color: var(--z15);
   position: relative;
-  height: 16px;
+  line-height: var(--x8);
+  padding: 0 var(--x3);
   vertical-align: top;
 }
 
 .menu .menu_title:hover {
-  background: rgba(255,255,255,0.1);
+  background: var(--z2);
 }
 
 .menu_list .separator {
-  margin: 5px 0;
+  margin: var(--x1) 0;
   border-top: solid var(--z14) 1px;
 }
 
 .menu_list {
   display: none;
   position: absolute;
-  top: 28px;
   left: 0;
+  top: var(--x8);
   white-space: nowrap;
   background: var(--z15);
-  padding: 7px 0;
+  padding: var(--x2) 0;
-  border-radius: 0 3px 3px 3px;
+  border-radius: 0 var(--x2) var(--x2) var(--x2);
-  box-shadow: 0 0 20px rgba(0,0,0,0.8);
+  box-shadow: var(--x1) var(--x1) var(--x8) rgba(0,0,0,0.4);
-}
-
-.touch  .menu_list {
-  top: 38px;
 }
 
 #menu_bar.active .menu.open .menu_title {
-  background: white;
+  background: var(--z15);
-  color: #333;
+  color: var(--z1);
 }
 
 .menu .menu_list {
@@ -77,8 +61,8 @@
 .menu_list .menu_item {
   position: relative;
   overflow: hidden;
-  line-height: 22px;
+  line-height: var(--x6);
-  padding: 5px 69px 5px 25px;
+  padding: var(--x1) var(--x16) var(--x1) var(--x6);
   cursor: default;
   color: var(--z3);
 }
@@ -87,7 +71,7 @@
   background: transparent;
   border: none;
   margin: 0;
-  padding: 5px 55px 5px 25px;
+  padding: var(--x1) var(--x16) var(--x1) var(--x6);
   height: auto;
   width: auto;
 }
@@ -96,10 +80,8 @@
   content: '✔';
   position: absolute;
   display: block;
-  left: 7px;
+  left: 6px;
-  top: 3px;
+  top: var(--x1);
-  width: 20px;
-  height: 20px;
 }
 
 .menu_list .menu_item:hover,
@@ -126,14 +108,14 @@
   display: block;
   position: absolute;
   right: var(--x2);
-  padding: 0 var(--x1);
+  padding: 0 var(--x2);
   background: var(--z14);
   top: 50%;
   transform: translate(0, -50%);
   text-align: center;
-  font-size: 11px;
+  font-size: 12px;
   line-height: var(--x6);
-  border-radius: 2px;
+  border-radius: var(--x1);
   font-weight: 600;
 }
 

src/css/method-draw.css

@@ -24,9 +24,10 @@ html, body {
 }
 
 ::-webkit-scrollbar {
-    width: 5px;
+    width: var(--x1);
-    height: 5px;
+    height: var(--x1);
-    background: #444;
+    background: transparent;
+    position: absolute;
 }
 
 ::-webkit-scrollbar-track {
@@ -252,16 +253,11 @@ input[type=file] {
 
  #tools_bottom {
   position: absolute;
-  left: 50px;
+  left: var(--x12);
   right: 0;
   bottom: 0;
-  height: 40px;
+  height: var(--x10);
   overflow: visible;
-  background-color: var(--z1);
-}
-
-.toolset {
-  position: relative;
 }
 
 .draginput.text-input input, 
@@ -361,73 +357,6 @@ input[type=file] {
     clear:both;
 }
 
-#group_title {display: none;}
-
-#tool_font_family .caret {
-  right: 40px;
-  top: 55%;
-}
-
-#tool_font_family select {
-  width: 110px;
-}
-
-
- #tool_bold,   #tool_italic { 
-  font: bold 20px/35px serif;
-  text-align: center;
-  position: absolute;
-  padding: 0 0 0 0;
-  color: #ccc;
-  background: transparent;
-  border: none;
-  width: 35px;
-  height: 35px;
-  margin: 0;
-  top: 0;
-  right: 0;
-}
-
-#tool_italic {
-  border-top: solid var(--z1) 2px;
-  top: 35px;
-  font-weight: bold;
-  font-style: italic;
-  font-size: 24px;
-}
-
-
- #tool_bold:hover,   #tool_italic:hover {
-  color: #fff;
-}
-
- #tool_bold.active,   #tool_italic.active {
-  color: #50A0FF;
-}
-
-#preview_font {
-  font-size: 20px;
-  color: #fff;
-  height: 70px;
-  line-height: 75px;
-  padding: 0 0 0 10px;
-  white-space: nowrap;
-  width: 100px;
-  overflow: hidden;
-  border-right: solid var(--z1) 2px;
-  position: relative;
-}
-
-#preview_font:after {
-  content: '';
-  position: absolute;
-  right: 0;
-  top: 3px;
-  bottom: 3px;
-  width: 15px;
-  border-right: solid var(--z2) 10px;
-  background: linear-gradient(to right, rgba(0,0,0,0), var(--z2));
-}
 
 #zoom_label {
   height: 20px;
@@ -455,6 +384,7 @@ input[type=file] {
 
 #logo svg {
   pointer-events: none;
+  margin-top: var(--x2);
 }
 
 #zoomLabel {
@@ -515,13 +445,13 @@ input[readonly=readonly]:focus {
 }
 
 #tool_angle_indicator {
-  width:         50px;
+  width:         var(--x12);
-  height:        50px;
+  height:        var(--x12);
-  border-radius: 50px;
+  border-radius: var(--x12);
-  background: rgba(255,255,255,0.05);
+  background: var(--z3);
   position: absolute;
-  bottom: 2px;
+  bottom: var(--x1);
-  left: 10px;
+  left: 12px;
 }
 
 #tool_angle_indicator_cursor {

src/css/panel.css

@@ -1,13 +1,12 @@
  #panels {
   position: absolute;
-  width: 160px;
+  box-sizing: border-box;
-  height: 100%;
+  width: var(--panel-width);
-  background: var(--z1);
+  right: var(--x1);
-  right: 0;
+  top: var(--x5);
-  top: 20px;
   border-bottom: none;
   overflow: visible;
-  padding: 0 0 0 15px;
+  padding: 0;
 }
 
 .context_panel {
@@ -27,7 +26,6 @@
   white-space: nowrap;
 }
 
-
 #align_tools {
   display: none;
 }

src/css/rulers.css

@@ -7,29 +7,30 @@
 }
 
 #rulers #ruler_corner {
-  top: 30px;
+  top: var(--x8);
   left: var(--x12);
   width: var(--x4);
   height: var(--x4);
   z-index: 2;
+  border-radius: var(--x2) 0 0 0;
 }
 
 #ruler_x {
   height: var(--x4);
-  top: 30px;
+  top: var(--x8);
   left: var(--x12);
-  margin-left: 2px;
+  right: calc(var(--panel-width) + var(--x4));;
-  right: 175px;
   overflow: hidden;
+  border-radius: var(--x2);
 }
 
 #ruler_y {
   width: var(--x4);
   top: var(--x8);
-  margin-top: -2px;
   left: var(--x12);
   bottom: var(--x10);
   overflow: hidden;
+  border-radius: var(--x2);
 }
 
 #ruler_x > div, 

src/css/select.css

@@ -1,9 +1,9 @@
-.select {
+.select-input {
   margin: var(--x2) 0;
   position: relative;
 }
 
-.select:after {
+.select-input:after {
   content: '↓';
   font-weight: bold;
   position: absolute;
@@ -13,7 +13,7 @@
   transform: translate(0, -50%);
 }
 
-.select select {
+.select-input select {
   -webkit-appearance: none;
   background-color: var(--z3);
   color: var(--z14);
@@ -25,7 +25,7 @@
   border-radius: var(--x1);
 }
 
-.select select:focus {
+.select-input select:focus {
   outline: none;
   box-shadow: 0 0 0 1px var(--d7);
 

src/css/text.css

@@ -0,0 +1,67 @@
+#group_title {display: none;}
+
+#tool_bold,   #tool_italic { 
+  font: bold 20px/35px serif;
+  text-align: center;
+  position: absolute;
+  padding: 0 0 0 0;
+  color: var(--z13);
+  background: transparent;
+  border: none;
+  margin: 0;
+  width: 50%;
+  top: var(--x8);
+  line-height: var(--x10);
+  bottom: 0;
+  border-top: solid var(--z1) 2px;
+}
+
+#tool_bold {
+  right: 0;
+}
+
+#tool_italic {
+  border-right: solid var(--z1) 2px;
+  line-height: var(--x9);
+  left: 0;
+  font-weight: bold;
+  font-style: italic;
+  font-size: 24px;
+}
+
+
+#tool_bold:hover,   #tool_italic:hover {
+  color: var(--z15);
+}
+
+#tool_bold.disabled,
+#tool_italic.disabled {
+  opacity: 1;
+  color: var(--z4);
+}
+
+#tool_bold.active,   #tool_italic.active {
+  color: #50A0FF;
+}
+
+#preview_font {
+  color: var(--z15);
+  font-size: 2em;
+  line-height: 80px;
+  padding: 0 var(--x2);
+}
+
+#preview_font + .caret {
+  right: var(--x2);
+}
+
+#preview_font:after {
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 3px;
+  bottom: 3px;
+  width: 15px;
+  border-right: solid var(--z2) 10px;
+  background: linear-gradient(to right, rgba(0,0,0,0), var(--z2));
+}

src/css/tools.css

@@ -2,10 +2,9 @@
   position: absolute;
   border-right: none;
   width: var(--x12);
-  top: 30px;
+  top: var(--x8);
   bottom: 0;
   left: 0;
-  background: var(--z1);
   z-index: 4;
 }
 

src/index.html

@@ -34,6 +34,7 @@
   <link rel="stylesheet" href="css/select.css" type="text/css"/>
   <link rel="stylesheet" href="css/panel.css" type="text/css"/>
   <link rel="stylesheet" href="css/align_buttons.css" type="text/css"/>
+  <link rel="stylesheet" href="css/text.css" type="text/css"/>
   <!-- endbuild -->
 </head>
 <body>
@@ -130,14 +131,16 @@
 
   <div id="canvas_panel" class="context_panel">
     
-    <h4 class="clearfix">Canvas</h4>
+    <h4>Canvas</h4>
 
-    <label data-title="Change canvas width">
+    <div class="draginputs">
+
+      <label data-title="Change canvas width" class="draginput">
         <input id="canvas_width" type="text" pattern="[0-9]*" value="800" />
         <span class="icon_label">Width</span>
       </label>
 
-    <label data-title="Change canvas height">
+      <label data-title="Change canvas height" class="draginput">
         <input id="canvas_height" type="text" pattern="[0-9]*" value="600" />
         <span class="icon_label">Height</span>
       </label>
@@ -219,29 +222,33 @@
       </div>
 
     </div>
+  </div>
   
   <div id="rect_panel" class="context_panel">
-    <h4 class="clearfix">Rectangle</h4>
+    <h4>Rectangle</h4>
-    <label>
+    <div class="draginputs">
+      <label class="draginput">
         <input id="rect_x" class="attr_changer" data-title="Change X coordinate" data-attr="x" pattern="[0-9]*" />
         <span>X</span> 
       </label>
-    <label>
+      <label class="draginput">
         <input id="rect_y" class="attr_changer" data-title="Change Y coordinate" data-attr="y" pattern="[0-9]*" />
         <span>Y</span> 
       </label>
-    <label id="rect_width_tool attr_changer" data-title="Change rectangle width">
+      <label  class="draginput" id="rect_width_tool attr_changer" data-title="Change rectangle width">
         <input id="rect_width" class="attr_changer" data-attr="width" type="text" pattern="[0-9]*" />
         <span class="icon_label">Width</span>
       </label>
-    <label id="rect_height_tool" data-title="Change rectangle height">
+      <label  class="draginput" id="rect_height_tool" data-title="Change rectangle height">
         <input id="rect_height" class="attr_changer" data-attr="height" type="text" pattern="[0-9]*" />
         <span class="icon_label">Height</span>
       </label>
     </div>
+  </div>
   
   <div id="path_panel" class="context_panel clearfix">
-    <h4 class="clearfix">Path</h4>
+      <h4>Path</h4>
+      <div class="draginputs">
         <label>
           <input id="path_x" class="attr_changer" data-title="Change ellipse's cx coordinate" data-attr="x" pattern="[0-9]*" />
           <span>X</span>
@@ -251,45 +258,51 @@
           <span>Y</span>
         </label>
     </div>
+  </div>
 
   <div id="image_panel" class="context_panel clearfix">
   <h4>Image</h4>
-    <label>
+    <div class="draginputs">
+      <label class="draginput">
         <input id="image_x" class="attr_changer" data-title="Change X coordinate" data-attr="x"  pattern="[0-9]*"/>
         <span>X</span> 
       </label>
-    <label>
+      <label class="draginput">
         <input id="image_y" class="attr_changer" data-title="Change Y coordinate" data-attr="y"  pattern="[0-9]*"/>
         <span>Y</span> 
       </label>
-    <label>
+      <label class="draginput">
         <input id="image_width" class="attr_changer" data-title="Change image width" data-attr="width" pattern="[0-9]*" />
         <span class="icon_label">Width</span>
       </label>
-    <label>
+      <label class="draginput">
         <input id="image_height" class="attr_changer" data-title="Change image height" data-attr="height" pattern="[0-9]*" />
         <span class="icon_label">Height</span>
       </label>
     </div>
+  </div>
   
   <div id="circle_panel" class="context_panel">
     <h4>Circle</h4>
-    <label id="tool_circle_cx">
+    <div class="draginputs">
+      <label id="tool_circle_cx" class="draginput">
         <span>Center X</span>
         <input id="circle_cx" class="attr_changer" title="Change circle's cx coordinate" data-attr="cx"/>
       </label>
-    <label id="tool_circle_cy">
+      <label id="tool_circle_cy" class="draginput">
         <span>Center Y</span>
         <input id="circle_cy" class="attr_changer" title="Change circle's cy coordinate" data-attr="cy"/>
       </label>
-    <label id="tool_circle_r">
+      <label id="tool_circle_r" class="draginput">
         <span>Radius</span>
         <input id="circle_r" class="attr_changer" title="Change circle's radius" data-attr="r"/>
       </label>
     </div>
+  </div>
 
-  <div id="ellipse_panel" class="context_panel clearfix">
+  <div id="ellipse_panel" class="context_panel">
       <h4>Ellipse</h4>
+      <div class="draginputs">
       <label id="tool_ellipse_cx">
         <input id="ellipse_cx" class="attr_changer" data-title="Change ellipse's cx coordinate" data-attr="cx" pattern="[0-9]*" />
         <span>X</span>
@@ -307,9 +320,11 @@
         <span>Radius Y</span>
       </label>
     </div>
+  </div>
 
   <div id="line_panel" class="context_panel clearfix">
     <h4>Line</h4>
+    <div class="draginputs">
       <label id="tool_line_x1">
         <input id="line_x1" class="attr_changer" data-title="Change line's starting x coordinate" data-attr="x1" pattern="[0-9]*" />
         <span>Start X</span>
@@ -327,9 +342,11 @@
         <span>End Y</span>
       </label>
     </div>
+  </div>
 
   <div id="text_panel" class="context_panel">
     <h4>Text</h4>
+    <div class="draginputs">
       <label class="draginput twocol textcontent" data-title="Change Content">
         <span>Content</span>
         <input id="text" type="text"/>
@@ -350,26 +367,30 @@
         <input id="font_family" data-title="Change Font Family" size="12" type="hidden" />
         <select id="font_family_dropdown">
         </select>
+      </div>
+      <div class="draginput">
+          <span>Font Style</span>
           <div id="tool_bold" data-title="Bold Text [B]">B</div>
           <div id="tool_italic" data-title="Italic Text [I]">i</div>
         </div>
-
       <label id="tool_font_size" data-title="Change Font Size">
         <input id="font_size" value="0" />
         <span id="font_sizeLabel" class="icon_label">Font Size</span>
       </label>
     </div>
+  </div>
 
   <!-- formerly gsvg_panel -->
   <div id="container_panel" class="context_panel clearfix">
   </div>
   
   <div id="use_panel" class="context_panel clearfix">
-    <div class="button" id="tool_unlink_use" data-title="Break link to reference element (make unique)">Break link reference</div>
+    <div class="button" id="tool_unlink_use" data-title="Break link">Break link reference</div>
   </div>
   
   <div id="g_panel" class="context_panel clearfix">
       <h4>Group</h4>
+      <div class="draginput">
       <label>
         <input id="g_x" class="attr_changer" data-title="Change groups's x coordinate" data-attr="x" pattern="[0-9]*" />
         <span>X</span>
@@ -379,10 +400,12 @@
         <span>Y</span>
       </label>
     </div>
+  </div>
   
   <div id="path_node_panel" class="context_panel clearfix">
     <h4>Edit Path</h4>
 
+    <div class="draginputs">
       <label id="tool_node_x">
         <input id="path_node_x" class="attr_changer" data-title="Change node's x coordinate" data-attr="x" />
         <span>X</span>
@@ -402,6 +425,8 @@
         <label id="seg_type_label">Straight</label>
       </div>
 
+    </div>
+    
     <div class="button-container clearfix">
       <div class="button full" id="tool_node_clone" title="Adds a node">Add Node</div>
       <div class="button full" id="tool_node_delete" title="Delete Node">Delete Node</div>
@@ -411,7 +436,7 @@
   
   <!-- Buttons when a single element is selected -->
   <div id="selected_panel" class="context_panel">
-
+    <div class="draginputs">
       <label id="tool_angle" data-title="Change rotation angle" class="draginput">
         <input id="angle" class="attr_changer" size="2" value="0" data-attr="transform" data-min="-180" data-max="180" type="text"/>
         <span class="icon_label">Rotation</span>
@@ -420,24 +445,24 @@
         </div>
       </label>
       
-      <label class="toolset" id="tool_opacity" data-title="Change selected item opacity">
+      <label id="tool_opacity" data-title="Change selected item opacity">
         <input id="group_opacity" class="attr_changer" data-attr="opacity" value="100" step="5" min="0" max="100" />
         <span id="group_opacityLabel" class="icon_label">Opacity</span>
       </label>
       
-    <div class="toolset" id="tool_blur" data-title="Change gaussian blur value">
+      <label id="tool_blur" data-title="Change gaussian blur value">
-      <label>
           <input id="blur" size="2" value="0" step=".1"  min="0" max="10" />
           <span class="icon_label">Blur</span>
       </label>
-    </div>
       
       <label id="cornerRadiusLabel" data-title="Change Rectangle Corner Radius">
         <input id="rect_rx" value="0" data-attr="rx" class="attr_changer" type="text" pattern="[0-9]*" />
         <span class="icon_label">Roundness</span>
       </label>
 
-    <div class="clearfix"></div>
+    </div>
+    
+    
     <div id="align_tools">
       <h4>Align</h4>
       <div class="toolset align_buttons" id="tool_position">
@@ -485,7 +510,7 @@
     
     <div class="toolset align_buttons">
       <label id="tool_align_relative">
-        <div class="select">
+        <div class="select-input">
           <select id="align_relative_to" title="Align relative to ..." class="select_tool">
           <option id="selected_objects" value="selected">Align to objects</option>
           <option id="page" value="page">Align to page</option>
@@ -529,15 +554,13 @@
 
   </div>
   
-  <div id="stroke_panel" class="context_panel clearfix">
+  <div id="stroke_panel" class="context_panel">
-    <div class="clearfix"></div>
     <h4>Stroke</h4>
-    <div class="toolset" data-title="Change stroke">
+    <div class="draginputs">
-      <label>
+      <label class="draginput" data-title="Change stroke">
         <input id="stroke_width" size="2" value="1" data-attr="stroke-width" min="0" max="99" step="1" />
         <span class="icon_label">Width</span>
       </label>
-    </div>
       <div class="stroke_tool draginput"> 
         <span>Dash</span>
         <select id="stroke_style" data-title="Change stroke dash style">
@@ -558,6 +581,8 @@
       <label  style="display: none;">
         <span class="icon_label">Stroke Cap</span>
       </label>
+
+    </div>
   </div>
 
 </div> <!-- tools_top -->

src/js/Import.js

@@ -56,7 +56,7 @@ MD.Import = function(){
           svgCanvas.selectOnly([newImage])
           svgCanvas.alignSelectedElements("m", "page")
           svgCanvas.alignSelectedElements("c", "page")
-          updateContextPanel();
+          editor.panel.updateContextPanel();
         }
         // put a placeholder img so we know the default dimensions
         var img_width = 100;

src/js/Panel.js

@@ -248,7 +248,10 @@ MD.Panel = function(){
            $('#preview_font').text(cleanFontFamily).css('font-family', font_family);
          } // text
          else if(el_name === 'image') {
-           setImageURL(svgCanvas.getHref(elem));
+            const url = svgCanvas.getHref(elem)
+            if(!url) url = default_img_url;
+            svgCanvas.setImageURL(url);
+            $('#image_url').val(url);
          } // image
          else if(el_name === 'g' || el_name === 'use') {
            $('#container_panel').show();

src/js/Text.js

@@ -1,11 +1,13 @@
 MD.Text = function(){
 
   function setBold(){
+    if ($(this).hasClass("disabled")) return;
     svgCanvas.setBold( !svgCanvas.getBold() );
     editor.panel.updateContextPanel();
   }
 
   function setItalic(){
+    if ($(this).hasClass("disabled")) return;
     svgCanvas.setItalic( !svgCanvas.getItalic() );
     editor.panel.updateContextPanel();
   }