EJ2-63693-javascript Free hand

scripts/dropdowndatasource.js

@@ -96,7 +96,8 @@ var DropDownDataSources = (function () {
         var drawConnectorsList = [
             { iconCss: 'sf-icon-StraightLine', text: 'Straight Line' },
             { iconCss: 'sf-icon-ConnectorMode', text: 'Orthogonal Line' },
-            { iconCss: 'sf-icon-BeizerLine', text: 'Bezier' }
+            { iconCss: 'sf-icon-BeizerLine', text: 'Bezier' },
+            { iconCss: 'sf-icon-free_hand', text: 'FreeHand' }
         ];
         return drawConnectorsList;
     };

src/assets/db-icons1/style.css

@@ -10,7 +10,7 @@ font-style: normal;
 }
 
 [class^="sf-icon-"], [class*=" sf-icon-"] {
- font-family: 'Final diagram icons copy' !important;
+ font-family: 'Final diagram icons copy' ,'Free_hand' !important;
 speak: none;
 font-size: 55px;
 font-style: normal;
@@ -21,7 +21,14 @@ line-height: 1;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 }
-
+@font-face {
+    font-family: 'Free_hand';
+    src:
+    url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj99TAIAAAEoAAAAVmNtYXDpIOllAAABiAAAADZnbHlm7B9B8AAAAcgAAAGIaGVhZCHDrNAAAADQAAAANmhoZWEIVAQDAAAArAAAACRobXR4CAAAAAAAAYAAAAAIbG9jYQDEAAAAAAHAAAAABm1heHABDwCvAAABCAAAACBuYW1lnsC49wAAA1AAAAI9cG9zdCrrx94AAAWQAAAAMwABAAAEAAAAAFwEAAAAAAAD9wABAAAAAAAAAAAAAAAAAAAAAgABAAAAAQAAgO9Bp18PPPUACwQAAAAAAN9XNAwAAAAA31c0DAAAAAAD9wO7AAAACAACAAAAAAAAAAEAAAACAKMAAwAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA6RDpEAQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAAAAACAAAAAwAAABQAAwABAAAAFAAEACIAAAAEAAQAAQAA6RD//wAA6RD//wAAAAEABAAAAAEAAAAAAAAAxAAAAAMAAAAAA/cDuwCMAJEAogAAAQ8KFR8KPwczHxA/Bg8CIy8VKwEPAz8JNS8HKwEPAiMvCx8OBRc3Eyc3Bxc/ATUvBiMPAgEsFCkUChIJCQgIBwEBAgMEBQYGBwcHCAgHG08nFBMTExMSEhIRBwcGLg0ODxARERESEhERERAQDxUWFRUUFBMJEwkIBwcLHA0ICA8PEBEREhITExMSEyUjKBkNCwsDAgIBAQEEAwMECAkJCAcbFRYWFRYVFRQVFBQTExMSDQ4PEBARERMTExQUFRYWAZA2XYmSNSKTIQEBAgMDBARqBwcFBAFvDxsPBxEJCQsLDAkIBwcGBgQEBAICAQEBAQYUCQMCAQIEBQcKBgUHNgwKCAYFBAIBAQIDBQUGCAQCAQIEBQQKBgYHBxAqEQgJCwoJBwUEAwIBAgYHIBcMDQ0FBQYGBgcGCgQDAwQDAQYDAQIDBAYGCAkJCwsMDA8PDg4NDAsLCQkHBgUDAo1dNgIBKMZ9J3wFBAUEAwMDARwCBQYAAAAAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAJAAEAAQAAAAAAAgAHAAoAAQAAAAAAAwAJABEAAQAAAAAABAAJABoAAQAAAAAABQALACMAAQAAAAAABgAJAC4AAQAAAAAACgAsADcAAQAAAAAACwASAGMAAwABBAkAAAACAHUAAwABBAkAAQASAHcAAwABBAkAAgAOAIkAAwABBAkAAwASAJcAAwABBAkABAASAKkAAwABBAkABQAWALsAAwABBAkABgASANEAAwABBAkACgBYAOMAAwABBAkACwAkATsgRnJlZV9oYW5kUmVndWxhckZyZWVfaGFuZEZyZWVfaGFuZFZlcnNpb24gMS4wRnJlZV9oYW5kRm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABGAHIAZQBlAF8AaABhAG4AZABSAGUAZwB1AGwAYQByAEYAcgBlAGUAXwBoAGEAbgBkAEYAcgBlAGUAXwBoAGEAbgBkAFYAZQByAHMAaQBvAG4AIAAxAC4AMABGAHIAZQBlAF8AaABhAG4AZABGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAQIBAwAJZnJlZV9oYW5kAAAA) format('truetype');
+    font-weight: normal;
+    font-style: normal;
+    }
+.sf-icon-free_hand:before { content: "\e910"; }
 .sf-icon-Underline:before { content: "\e700"; }
 .sf-icon-InsertImage:before { content: "\e701"; }
 .sf-icon-Search:before { content: "\e703"; }

src/home/home.html

@@ -367,6 +367,10 @@
                                     <input id="lineJumpSize" type="text" />
                             </div>
                         </div>
+                        <div class="row db-prop-row">
+                            <input id="SegmentEditing" type="checkbox" change="SegmentEditing"/>
+
+                        </div>
                         <div class="row db-prop-row">
                             <div class="col-xs-2 db-col-right db-prop-text-style" style="padding-top: 6px">
                                 <span class="db-prop-text-style">Opacity</span>

src/home/home.js

@@ -259,7 +259,7 @@ window.home = function () {
         getConnectorDefaults: function (connector, diagram) {
             var connector1 = {
                 annotations: [
-                    { content: '', style: { fill: '#ffffff' } }
+                    { content: '', style: { fill: 'transparent' } }
                 ],
                 style: { strokeWidth: 2 }
             };
@@ -721,6 +721,27 @@ window.home = function () {
     lineJumpSize.appendTo('#lineJumpSize');
     selectedItem.connectorProperties.lineJumpSize = lineJumpSize;
 
+    var SegmentEditing = new ej.buttons.CheckBox({ label: 'Segment Editing',
+    change: function(args) {
+        if(diagram.selectedItems.connectors){
+            if(args.checked == true){
+                for(i=0;i<diagram.selectedItems.connectors.length;i++){
+                    diagram.selectedItems.connectors[i].constraints = ej.diagrams.ConnectorConstraints.Default | ej.diagrams.ConnectorConstraints.DragSegmentThumb;
+                }
+            }
+            else{
+                for(i=0;i<diagram.selectedItems.connectors.length;i++){
+                diagram.selectedItems.connectors[i].constraints = ej.diagrams.ConnectorConstraints.Default & ~(ej.diagrams.ConnectorConstraints.DragSegmentThumb);
+                }
+            }
+            diagram.dataBind();
+        }
+
+       }
+    });
+    SegmentEditing.appendTo('#SegmentEditing');
+    selectedItem.connectorProperties.SegmentEditing = SegmentEditing; 
+
     var default1 = new ej.inputs.Slider({
         min: 0,
         max: 100,
@@ -2046,6 +2067,9 @@ function drawConnectorChange (args) {
     } else if (args.item.text === 'Bezier') {
         diagram.drawingObject = { type: 'Bezier', style: { strokeWidth: 2 } };
     }
+    else if(args.item.text === 'FreeHand'){
+        diagram.drawingObject = { type: 'Freehand', style: { strokeWidth: 2 } };
+    }
     diagram.tool = ej.diagrams.DiagramTools.ContinuousDraw;
     diagram.clearSelection();
     removeSelectedToolbarItem();