width markers

src/allplatforms/classes/WidthMarkers.js

@@ -5,7 +5,7 @@ SC.loadPackage({ 'WidthMarkers': {
 
     sharedProperties: {
 
-        markerContainers:   { initValue: '<div id="sg-editing-width-marker-left"></div><div id="sg-editing-width-marker-right"></div>' }
+        markerContainers:   { initValue: '<div id="sg-editing-width-marker-left"><div class="sg-editing-width-marker-left-triangle"></div></div><div id="sg-editing-width-marker-right"><div class="sg-editing-width-marker-right-triangle"></div></div>' }
 
     },
 
@@ -72,6 +72,10 @@ SC.loadPackage({ 'WidthMarkers': {
                             self.get('markerLeft').classList.add('sg-editing-width-marker-left-visible');
                             self.get('markerRight').classList.add('sg-editing-width-marker-right-visible');
                         }
+
+                        self.get('markerLeft').querySelector('.sg-editing-width-marker-left-triangle').style.top = evt.pageY;
+                        self.get('markerRight').querySelector('.sg-editing-width-marker-right-triangle').style.top = evt.pageY;
+                        
                     },
                     onMouseOut = function(evt){
                         if(!self.get('visible')){
@@ -164,6 +168,9 @@ SC.loadPackage({ 'WidthMarkers': {
                             }});
                         }
 
+                        self.get('markerLeft').querySelector('.sg-editing-width-marker-left-triangle').style.top = evt.pageY;
+                        self.get('markerRight').querySelector('.sg-editing-width-marker-right-triangle').style.top = evt.pageY;
+
                         evt.stopPropagation();
                         evt.preventDefault();
                     };

src/allplatforms/css/WidthMarkers.css

@@ -10,6 +10,15 @@
 	min-height: 	150px;
 }
 
+#sg-editing-width-marker-left .sg-editing-width-marker-left-triangle {
+	position: absolute;
+	left: 2px;
+	width: 40px;
+	height: 40px;
+	background-color: #00ff00;
+	display: none;
+}
+
 #sg-editing-width-marker-right {
 	position: 		absolute;
 	pointer-events: all;
@@ -20,12 +29,27 @@
 	min-height: 	150px;
 }
 
-
+#sg-editing-width-marker-right .sg-editing-width-marker-right-triangle {
+	position: absolute;
+	right: 2px;
+	width: 40px;
+	height: 40px;
+	background-color: #00ff00;
+	display: none;
+}
 
 .sg-editing-width-marker-left-visible {
 	border-right: 2px dashed rgb(255, 41, 61);
 }
 
+.sg-editing-width-marker-left-visible .sg-editing-width-marker-left-triangle {
+	display: block;
+}
+
 .sg-editing-width-marker-right-visible {
 	border-left: 2px dashed rgb(255, 41, 61);
+}
+
+.sg-editing-width-marker-right-visible .sg-editing-width-marker-right-triangle {
+	display: block;
 }