From c9d83bc73c3107c1a38a0e34d6c95fcda67bb0f0 Mon Sep 17 00:00:00 2001
From: OVSharova <olga.sharova@onlyoffice.com>
Date: Mon, 5 Dec 2022 17:13:39 +0300
Subject: [PATCH] bug 58294

---
 .../resources/img/right-panels/arrows.svg     |  17 +--
 .../main/resources/img/toolbar/arrows.svg     | 129 ------------------
 .../main/app/view/ImageSettingsAdvanced.js    |  14 +-
 apps/documenteditor/main/index.html.deploy    |   1 +
 apps/documenteditor/main/index_loader.html    |   1 +
 .../main/index_loader.html.deploy             |   1 +
 .../main/app/view/ShapeSettingsAdvanced.js    |  51 ++++---
 apps/presentationeditor/main/index.html       |   1 +
 .../presentationeditor/main/index.html.deploy |   1 +
 .../presentationeditor/main/index_loader.html |   1 +
 .../main/index_loader.html.deploy             |   1 +
 .../main/app/view/ShapeSettingsAdvanced.js    |  51 ++++---
 apps/spreadsheeteditor/main/index.html        |   1 +
 apps/spreadsheeteditor/main/index.html.deploy |   1 +
 apps/spreadsheeteditor/main/index_loader.html |   1 +
 .../main/index_loader.html.deploy             |   1 +
 16 files changed, 80 insertions(+), 193 deletions(-)
 delete mode 100644 apps/common/main/resources/img/toolbar/arrows.svg

diff --git a/apps/common/main/resources/img/right-panels/arrows.svg b/apps/common/main/resources/img/right-panels/arrows.svg
index 597d116d5..416e24250 100644
--- a/apps/common/main/resources/img/right-panels/arrows.svg
+++ b/apps/common/main/resources/img/right-panels/arrows.svg
@@ -1,22 +1,7 @@
 <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <symbol id="no-arrow" viewBox="0 0 44 20">
+    <symbol id="no-arrow-5" viewBox="0 0 44 20">
         <rect x="11" y="8" width="22" height="3"/>
     </symbol>
-    <symbol id="arrow" viewBox="0 0 44 20">
-        <path d="M23 3.5V8H34V11H23V15.5L9 9.5L23 3.5Z"/>
-    </symbol>
-    <symbol id="open-arrow" viewBox="0 0 44 20">
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M8.37866 9.49999L15.6924 16.8137L17.8137 14.6924L14.1213 11H34V7.99999H14.1213L17.8137 4.3076L15.6924 2.18628L8.37866 9.49999Z"/>
-    </symbol>
-    <symbol id="stealth-arrow" viewBox="0 0 44 20">
-        <path d="M29 3L23 8.5H34V11.5H23L29 17L9 10L29 3Z"/>
-    </symbol>
-    <symbol id="dimond-arrow" viewBox="0 0 44 20">
-        <path d="M17.5 2L24 8H34V11H24L17.5 17L10 9.5L17.5 2Z"/>
-    </symbol>
-    <symbol id="oval-arrow" viewBox="0 0 44 20">
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8261 11C21.1489 13.8667 18.5736 16 15.5 16C11.9101 16 9 13.0899 9 9.5C9 5.91015 11.9101 3 15.5 3C18.5736 3 21.1489 5.1333 21.8261 8H34V11H21.8261Z"/>
-    </symbol>
     <symbol id="arrow-1" viewBox="0 0 44 20">
         <path d="M17 7V9H34V12H17V14L9 10.5L17 7Z"/>
     </symbol>
diff --git a/apps/common/main/resources/img/toolbar/arrows.svg b/apps/common/main/resources/img/toolbar/arrows.svg
deleted file mode 100644
index b26de68b4..000000000
--- a/apps/common/main/resources/img/toolbar/arrows.svg
+++ /dev/null
@@ -1,129 +0,0 @@
-<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
-	<symbol id="arrow" viewBox="0 0 44 20" >
-		<path d="M23 3.5V8H34V11H23V15.5L9 9.5L23 3.5Z"/>
-	</symbol>
-	<symbol id="arrow" viewBox="0 0 44 20">
-		<path d="M23 3.5V8H34V11H23V15.5L9 9.5L23 3.5Z"/>
-	</symbol>
-	<symbol id="open-arrow" viewBox="0 0 44 20">
-		<path fill-rule="evenodd" clip-rule="evenodd" d="M8.37866 9.49999L15.6924 16.8137L17.8137 14.6924L14.1213 11H34V7.99999H14.1213L17.8137 4.3076L15.6924 2.18628L8.37866 9.49999Z"/>
-	</symbol>
-	<symbol id="stealth-arrow" viewBox="0 0 44 20">
-		<path d="M29 3L23 8.5H34V11.5H23L29 17L9 10L29 3Z"/>
-	</symbol>
-	<symbol id="dimond-arrow" viewBox="0 0 44 20">
-		<path d="M17.5 2L24 8H34V11H24L17.5 17L10 9.5L17.5 2Z"/>
-	</symbol>
-	<symbol id="oval-arrow" viewBox="0 0 44 20">
-		<path fill-rule="evenodd" clip-rule="evenodd" d="M21.8261 11C21.1489 13.8667 18.5736 16 15.5 16C11.9101 16 9 13.0899 9 9.5C9 5.91015 11.9101 3 15.5 3C18.5736 3 21.1489 5.1333 21.8261 8H34V11H21.8261Z"/>
-	</symbol>
-	<symbol id="Arrow-1" viewBox="0 0 44 20">
-		<path d="M17 7V9H34V12H17V14L9 10.5L17 7Z"/>
-	</symbol>
-	<symbol id="Arrow-2" viewBox="0 0 44 20">
-		<path d="M21 7V9H34V12H21V14L9 10.5L21 7Z"/>
-	</symbol>
-	<symbol id="Arrow-3" viewBox="0 0 44 20">
-		<path d="M28 7V9H34V12H28V14L9 10.5L28 7Z"/>
-	</symbol>
-	<symbol id="Arrow-4" viewBox="0 0 44 20">
-		<path d="M17 5V8H34V11H17V14L9 9.5L17 5Z"/>
-	</symbol>
-	<symbol id="Arrow-5" viewBox="0 0 44 20">
-		<path d="M23 5V8H34V11H23V14L9 9.5L23 5Z"/>
-	</symbol>
-	<symbol id="Arrow-8" viewBox="0 0 44 20">
-		<path d="M22 3V8H34V11H22V16L9 9.5L22 3Z"/>
-	</symbol>
-	<symbol id="Arrow-9" viewBox="0 0 44 20">
-		<path d="M30 3V8H34V11H30V16L9 9.5L30 3Z"/>
-	</symbol>
-	<symbol id="Dimond-Arrow-1" viewBox="0 0 44 20">
-		<path d="M16.5 5L19.5 8H34V11H19.5L16.5 14L12 9.5L16.5 5Z"/>
-	</symbol>
-	<symbol id="Dimond-Arrow-2" viewBox="0 0 44 20">
-		<path d="M16.5 5L21.5 8H34V11H21.5L16.5 14L10 9.5L16.5 5Z"/>
-	</symbol>
-	<symbol id="Dimond-Arrow-3" viewBox="0 0 44 20">
-		<path d="M16.5 5L23.5 8H34V11H23.5L16.5 14L8 9.5L16.5 5Z"/>
-	</symbol>
-	<symbol id="Dimond-Arrow-4" viewBox="0 0 44 20">
-		<path d="M17.5 4L19.5 8H34V11H19.5L17.5 15L14.5 9.5L17.5 4Z"/>
-	</symbol>
-	<symbol id="Dimond-Arrow-5" viewBox="0 0 44 20">
-		<path d="M17.5 4L21.5 8H34V11H21.5L17.5 15L12.5 9.5L17.5 4Z"/>
-	</symbol>
-	<symbol id="Dimond-Arrow-6" viewBox="0 0 44 20">
-		<path d="M17.5 4L23.5 8H34V11H23.5L17.5 15L10 9.5L17.5 4Z"/>
-	</symbol>
-	<symbol id="Dimond-Arrow-7" viewBox="0 0 44 20">
-		<path d="M17.5 3L20 8H34V11H20L17.5 16L14 9.5L17.5 3Z"/>
-	</symbol>
-	<symbol id="Dimond-Arrow-8" viewBox="0 0 44 20">
-		<path d="M17.5 3L21 8H34V11H21L17.5 16L13 9.5L17.5 3Z"/>
-	</symbol>
-	<symbol id="Dimond-Arrow-9" viewBox="0 0 44 20">
-		<path d="M17.5 3L22.5 8H34V11H22.5L17.5 16L11 9.5L17.5 3Z"/>
-	</symbol>
-	<symbol id="Open-Arrow-1" viewBox="0 0 44 20">
-		<path d="M13.1693 4.78973L8.41882 9.54019L13.1693 14.2906L15.2906 12.1693L14.1213 11H34V8.00002H14.2016L15.2906 6.91105L13.1693 4.78973Z"/>
-	</symbol>
-	<symbol id="Open-Arrow-2" viewBox="0 0 44 20">
-		<path d="M18.8988 4.62573L7.75769 9.49998L18.8988 14.3742L20.1013 11.6257L18.671 11H34V7.99998H18.6709L20.1013 7.3742L18.8988 4.62573Z"/>
-	</symbol>
-	<symbol id="Open-Arrow-3" viewBox="0 0 44 20">
-		<path d="M25.0739 4.06183L6.71997 9.50003L25.0739 14.9382L25.9261 12.0618L22.3426 11H34V8.00003H22.3426L25.9261 6.93822L25.0739 4.06183Z"/>
-	</symbol>
-	<symbol id="Open-Arrow-4" viewBox="0 0 44 20">
-		<path d="M13.997 3.88458L7.80774 9.44993L13.9871 15.1064L16.0128 12.8935L13.9442 11H34V7.99998H13.907L16.0029 6.11536L13.997 3.88458Z"/>
-	</symbol>
-	<symbol id="Open-Arrow-5" viewBox="0 0 44 20">
-		<path d="M19.3316 3.65717L7.698 9.44792L19.322 15.338L20.678 12.662L17.3981 11H34V7.99998H17.3392L20.6684 6.34285L19.3316 3.65717Z"/>
-	</symbol>
-	<symbol id="Open-Arrow-6" viewBox="0 0 44 20">
-		<path d="M24.5435 3.57117L6.151 9.44716L24.536 15.4265L25.4639 12.5736L20.6256 11H34V8.00001H20.5386L25.4564 6.42887L24.5435 3.57117Z"/>
-	</symbol>
-	<symbol id="Open-Arrow-7" viewBox="0 0 44 20">
-		<path d="M14.9864 2.89429L7.78015 9.50002L14.9864 16.1057L17.0136 13.8943L13.8562 11H34V8.00002H13.8562L17.0136 5.10575L14.9864 2.89429Z"/>
-	</symbol>
-	<symbol id="Open-Arrow-8" viewBox="0 0 44 20">
-		<path d="M18.7178 2.72009L7.62341 9.50002L18.7178 16.2799L20.2822 13.7201L15.8311 11H34V8.00002H15.8311L20.2822 5.27994L18.7178 2.72009Z"/>
-	</symbol>
-	<symbol id="Open-Arrow-9" viewBox="0 0 44 20">
-		<path d="M25.9837 2.59167L7.14282 9.49999L25.9837 16.4083L27.0164 13.5917L19.9482 11H34V7.99999H19.9482L27.0164 5.4083L25.9837 2.59167Z"/>
-	</symbol>
-	<symbol id="Oval-Arrow-1" viewBox="0 0 44 20">
-		<path d="M19.6632 11C19.1015 12.1825 17.8962 13 16.5 13C14.567 13 13 11.433 13 9.5C13 7.567 14.567 6 16.5 6C17.8962 6 19.1015 6.81753 19.6632 8H34V11H19.6632Z"/>
-	</symbol>
-	<symbol id="Oval-Arrow-2" viewBox="0 0 44 20">
-		<path d="M21.4707 11C20.588 12.1825 18.694 13 16.5 13C13.4624 13 11 11.433 11 9.5C11 7.567 13.4624 6 16.5 6C18.694 6 20.588 6.81753 21.4707 8H34V11H21.4707Z"/>
-	</symbol>
-	<symbol id="Oval-Arrow-3" viewBox="0 0 44 20">
-		<path d="M22.3745 11C21.3313 12.1825 19.0929 13 16.5 13C12.9101 13 10 11.433 10 9.5C10 7.567 12.9101 6 16.5 6C19.0929 6 21.3313 6.81753 22.3745 8H34V11H22.3745Z"/>
-	</symbol>
-	<symbol id="Oval-Arrow-4" viewBox="0 0 44 20">
-		<path d="M20.8008 11C20.3204 12.7478 19.0239 14 17.5 14C15.567 14 14 11.9853 14 9.5C14 7.01472 15.567 5 17.5 5C19.0239 5 20.3204 6.25221 20.8008 8H34V11H20.8008Z"/>
-	</symbol>
-	<symbol id="Oval-Arrow-5" viewBox="0 0 44 20">
-		<path d="M21.7439 11C21.1262 12.7478 19.4593 14 17.5 14C15.0147 14 13 11.9853 13 9.5C13 7.01472 15.0147 5 17.5 5C19.4593 5 21.1262 6.25221 21.7439 8H34V11H21.7439Z"/>
-	</symbol>
-	<symbol id="Oval-Arrow-6" viewBox="0 0 44 20">
-		<path d="M23.5732 11C22.5436 12.7478 19.7655 14 16.5 14C12.3579 14 9 11.9853 9 9.5C9 7.01472 12.3579 5 16.5 5C19.7655 5 22.5436 6.25221 23.5732 8H34V11H23.5732Z"/>
-	</symbol>
-	<symbol id="Oval-Arrow-7" viewBox="0 0 44 20">
-		<path d="M20.8683 11C20.4528 13.3085 19.1021 15 17.5 15C15.567 15 14 12.5376 14 9.5C14 6.46243 15.567 4 17.5 4C19.1021 4 20.4528 5.69149 20.8683 8H34V11H20.8683Z"/>
-	</symbol >
-	<symbol id="Oval-Arrow-8" viewBox="0 0 44 20">
-		<path d="M21.8306 11C21.2964 13.3085 19.5598 15 17.5 15C15.0147 15 13 12.5376 13 9.5C13 6.46243 15.0147 4 17.5 4C19.5598 4 21.2964 5.69149 21.8306 8H34V11H21.8306Z"/>
-	</symbol>
-	<symbol id="Oval-Arrow-9" viewBox="0 0 44 20">
-		<path d="M22.793 11C22.14 13.3085 20.0176 15 17.5 15C14.4624 15 12 12.5376 12 9.5C12 6.46243 14.4624 4 17.5 4C20.0176 4 22.14 5.69149 22.793 8H34V11H22.793Z"/>
-	</symbol>
-	<symbol id="Stealth-Arrow-1" viewBox="0 0 44 20">
-		<path d="M17 6L16 8H34V11H16L17 13L9 9.5L17 6Z"/>
-	</symbol>
-	<symbol id="Stealth-Arrow-2" viewBox="0 0 44 20">
-		<path d="M21 6L19 8H34V11H19L21 13L9 9.5L21 6Z"/>
-	</symbol>
-
-</svg>
\ No newline at end of file
diff --git a/apps/documenteditor/main/app/view/ImageSettingsAdvanced.js b/apps/documenteditor/main/app/view/ImageSettingsAdvanced.js
index 8567ede08..f5c155ba4 100644
--- a/apps/documenteditor/main/app/view/ImageSettingsAdvanced.js
+++ b/apps/documenteditor/main/app/view/ImageSettingsAdvanced.js
@@ -1016,7 +1016,7 @@ define([    'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
                 template: _.template([
                     '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style"  data-toggle="dropdown">',
                         '<div class="form-control" style="width: 100px;">',
-                            '<i class="img-arrows"><svg><use xlink:href="#no-arrow"></use> </svg></i>',
+                            '<i class="img-arrows"><svg><use xlink:href="#no-arrow-5"></use></svg></i>',
                         '</div>',
                         '<div style="display: table-cell;"></div>',
                         '<button type="button" class="btn btn-default">',
@@ -1038,8 +1038,7 @@ define([    'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
                 parentMenu: this.btnBeginStyleMenu,
                 store: new Common.UI.DataViewStore(_arrStyles),
                 itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows">' +
-                    '<svg class="icon"><use xlink:href= "#<%= idsvg %>arrow"></use></svg>' +
-                    '</div>')
+                    '<svg><use xlink:href= "#<%= idsvg %>arrow-5"></use></svg></div>')
             });
             this.mnuBeginStylePicker.on('item:click', _.bind(this.onSelectBeginStyle, this));
             this._selectStyleItem(this.btnBeginStyle, null);
@@ -1049,7 +1048,7 @@ define([    'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
                 template: _.template([
                     '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style"  data-toggle="dropdown">',
                         '<div class="form-control" style="width: 100px;">',
-                            '<i class="img-arrows"><svg><use xlink:href="#no-arrow"></use> </svg></i>',
+                            '<i class="img-arrows"><svg><use xlink:href=""></use></svg></i>',
                         '</div>',
                         '<div style="display: table-cell;"></div>',
                         '<button type="button" class="btn btn-default">',
@@ -1081,7 +1080,7 @@ define([    'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
                 template: _.template([
                     '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style"  data-toggle="dropdown">',
                         '<div class="form-control" style="width: 100px;">',
-                            '<i class="img-arrows"><svg class ="svg-mirror"><use xlink:href="#no-arrow"></use></svg></i>',
+                            '<i class="img-arrows"><svg class ="svg-mirror"><use xlink:href="#no-arrow-5"></use></svg></i>',
                         '</div>',
                         '<div style="display: table-cell;"></div>',
                         '<button type="button" class="btn btn-default">',
@@ -1103,7 +1102,7 @@ define([    'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
                 parentMenu: this.btnEndStyleMenu,
                 store: new Common.UI.DataViewStore(_arrStyles),
                 itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows">' +
-                    '<svg class ="svg-mirror"><use xlink:href="#<%= idsvg %>arrow"></use></svg></div>')
+                    '<svg class ="svg-mirror"><use xlink:href="#<%= idsvg %>arrow-5"></use></svg></div>')
             });
             this.mnuEndStylePicker.on('item:click', _.bind(this.onSelectEndStyle, this));
             this._selectStyleItem(this.btnEndStyle, null);
@@ -2091,12 +2090,11 @@ define([    'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
 
         _selectStyleItem: function(combo, record) {
             var formcontrol = $(combo.el).find('.form-control > .img-arrows use');
-
             if(formcontrol.length) {
                 var str = '';
                 if(record){
                     var styleId  = record.get('idsvg');
-                    str = (styleId !== undefined) ? styleId + 'arrow' : record.get('typearrow') + 'arrow-' + (record.get('value')+1);
+                    str = (styleId !== undefined) ? styleId + 'arrow-5' : record.get('typearrow') + 'arrow-' + (record.get('value')+1);
                 }
                 formcontrol[0].setAttribute('xlink:href', '#' + str);
             }
diff --git a/apps/documenteditor/main/index.html.deploy b/apps/documenteditor/main/index.html.deploy
index 422e95115..a3393f560 100644
--- a/apps/documenteditor/main/index.html.deploy
+++ b/apps/documenteditor/main/index.html.deploy
@@ -322,6 +322,7 @@
     <inline src="../../common/main/resources/img/toolbar/shapetypes.svg" />
     <inline src="../../common/main/resources/img/toolbar/charttypes.svg" />
     <inline src="../../common/main/resources/img/toolbar/equationicons.svg" />
+    <inline src="../../common/main/resources/img/right-panels/arrows.svg" />
     <script src="../../../../../../sdkjs/common/device_scale.js?__inline=true"></script>
     <script data-main="app" src="../../../vendor/requirejs/require.js"></script>
 
diff --git a/apps/documenteditor/main/index_loader.html b/apps/documenteditor/main/index_loader.html
index 80c10c94a..1e5070650 100644
--- a/apps/documenteditor/main/index_loader.html
+++ b/apps/documenteditor/main/index_loader.html
@@ -272,6 +272,7 @@
 <img class="inline-svg" src="../../common/main/resources/img/toolbar/shapetypes.svg">
 <img class="inline-svg" src="../../common/main/resources/img/toolbar/charttypes.svg">
 <img class="inline-svg" src="../../common/main/resources/img/toolbar/equationicons.svg">
+<img class="inline-svg" src="../../common/main/resources/img/right-panels/arrows.svg">
 <script>
     var svgpoints = document.querySelectorAll('img.inline-svg');
     SVGInjector(svgpoints);
diff --git a/apps/documenteditor/main/index_loader.html.deploy b/apps/documenteditor/main/index_loader.html.deploy
index d9234fc45..0fe69de7a 100644
--- a/apps/documenteditor/main/index_loader.html.deploy
+++ b/apps/documenteditor/main/index_loader.html.deploy
@@ -321,6 +321,7 @@
     <inline src="../../common/main/resources/img/toolbar/shapetypes.svg" />
     <inline src="../../common/main/resources/img/toolbar/charttypes.svg" />
     <inline src="../../common/main/resources/img/toolbar/equationicons.svg" />
+    <inline src="../../common/main/resources/img/right-panels/arrows.svg" />
 
     <div id="viewport"></div>
     <script data-main="app" src="../../../vendor/requirejs/require.js"></script>
diff --git a/apps/presentationeditor/main/app/view/ShapeSettingsAdvanced.js b/apps/presentationeditor/main/app/view/ShapeSettingsAdvanced.js
index cad1f7e97..148355ab1 100644
--- a/apps/presentationeditor/main/app/view/ShapeSettingsAdvanced.js
+++ b/apps/presentationeditor/main/app/view/ShapeSettingsAdvanced.js
@@ -378,18 +378,18 @@ define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
 
 
             var _arrStyles = [], _arrSize = [];
-            for ( var i=0; i<6; i++ )
-                _arrStyles.push({value: i, offsetx: 80*i+10, offsety: 0});
+            _arrStyles.push({type: Asc.c_oAscLineBeginType.None, idsvg: 'no-'});
+            _arrStyles.push({type: Asc.c_oAscLineBeginType.Triangle, idsvg: ''});
+            _arrStyles.push({type: Asc.c_oAscLineBeginType.Arrow, idsvg: 'open-'});
+            _arrStyles.push({type: Asc.c_oAscLineBeginType.Stealth, idsvg: 'stealth-'});
+            _arrStyles.push({type: Asc.c_oAscLineBeginType.Diamond, idsvg: 'dimond-'});
+            _arrStyles.push({type: Asc.c_oAscLineBeginType.Oval, idsvg: 'oval-'});
 
-            _arrStyles[0].type = Asc.c_oAscLineBeginType.None;
-            _arrStyles[1].type = Asc.c_oAscLineBeginType.Triangle;
-            _arrStyles[2].type = Asc.c_oAscLineBeginType.Arrow;
-            _arrStyles[3].type = Asc.c_oAscLineBeginType.Stealth;
-            _arrStyles[4].type = Asc.c_oAscLineBeginType.Diamond;
-            _arrStyles[5].type = Asc.c_oAscLineBeginType.Oval;
+            for ( var i=0; i<6; i++ )
+                _arrStyles[i].value = i;
 
             for ( i=0; i<9; i++ )
-                _arrSize.push({value: i, offsetx: 80+10, offsety: 20*(i+1)});
+                _arrSize.push({value: i, typearrow:''});
 
             _arrSize[0].type = Asc.c_oAscLineBeginSize.small_small;
             _arrSize[1].type = Asc.c_oAscLineBeginSize.small_mid;
@@ -407,7 +407,7 @@ define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
                 template: _.template([
                     '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style"  data-toggle="dropdown">',
                     '<div class="form-control" style="width: 100px;">',
-                        '<i class="image img-arrows"></i>',
+                        '<i class="img-arrows"><svg><use xlink:href="#no-arrow-5"></use></svg></i>',
                     '</div>',
                     '<div style="display: table-cell;"></div>',
                     '<button type="button" class="btn btn-default"><span class="caret"></span></button>',
@@ -426,7 +426,8 @@ define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
                 el: $('#shape-advanced-menu-begin-style'),
                 parentMenu: this.btnBeginStyleMenu,
                 store: new Common.UI.DataViewStore(_arrStyles),
-                itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
+                itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows">' +
+                    '<svg><use xlink:href= "#<%= idsvg %>arrow-5"></use></svg></div>')
             });
             this.mnuBeginStylePicker.on('item:click', _.bind(this.onSelectBeginStyle, this));
             this._selectStyleItem(this.btnBeginStyle, null);
@@ -436,7 +437,7 @@ define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
                 template: _.template([
                     '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style"  data-toggle="dropdown">',
                     '<div class="form-control" style="width: 100px;">',
-                        '<i class="image img-arrows"></i>',
+                        '<i class="img-arrows"><svg><use xlink:href=""></use></svg></i>',
                     '</div>',
                     '<div style="display: table-cell;"></div>',
                     '<button type="button" class="btn btn-default"><span class="caret"></span></button>',
@@ -455,7 +456,8 @@ define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
                 el: $('#shape-advanced-menu-begin-size'),
                 parentMenu: this.btnBeginSizeMenu,
                 store: new Common.UI.DataViewStore(_arrSize),
-                itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
+                itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows">' +
+                    '<svg><use xlink:href="#<%= typearrow %>arrow-<%= (value+1) %>"></use></svg></div>')
             });
             this.mnuBeginSizePicker.on('item:click', _.bind(this.onSelectBeginSize, this));
             this._selectStyleItem(this.btnBeginSize, null);
@@ -471,7 +473,7 @@ define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
                 template: _.template([
                     '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style"  data-toggle="dropdown">',
                     '<div class="form-control" style="width: 100px;">',
-                        '<i class="image img-arrows"></i>',
+                        '<i class="img-arrows"><svg class ="svg-mirror"><use xlink:href="#no-arrow-5"></use></svg></i>',
                     '</div>',
                     '<div style="display: table-cell;"></div>',
                     '<button type="button" class="btn btn-default"><span class="caret"></span></button>',
@@ -490,7 +492,8 @@ define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
                 el: $('#shape-advanced-menu-end-style'),
                 parentMenu: this.btnEndStyleMenu,
                 store: new Common.UI.DataViewStore(_arrStyles),
-                itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
+                itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows">' +
+                    '<svg class ="svg-mirror"><use xlink:href="#<%= idsvg %>arrow-5"></use></svg></div>')
             });
             this.mnuEndStylePicker.on('item:click', _.bind(this.onSelectEndStyle, this));
             this._selectStyleItem(this.btnEndStyle, null);
@@ -500,7 +503,7 @@ define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
                 template: _.template([
                     '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style"  data-toggle="dropdown">',
                     '<div class="form-control" style="width: 100px;">',
-                        '<i class="image img-arrows"></i>',
+                        '<i class="img-arrows"><svg class ="svg-mirror"><use xlink:href=""></use></svg></i>',
                     '</div>',
                     '<div style="display: table-cell;"></div>',
                     '<button type="button" class="btn btn-default"><span class="caret"></span></button>',
@@ -519,7 +522,8 @@ define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
                 el: $('#shape-advanced-menu-end-size'),
                 parentMenu: this.btnEndSizeMenu,
                 store: new Common.UI.DataViewStore(_arrSize),
-                itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
+                itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows">' +
+                    '<svg class ="svg-mirror"><use xlink:href="#<%= typearrow %>arrow-<%= (value + 1) %>"></use></svg></div>')
             });
             this.mnuEndSizePicker.on('item:click', _.bind(this.onSelectEndSize, this));
             this._selectStyleItem(this.btnEndSize, null);
@@ -850,7 +854,7 @@ define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
         _updateSizeArr: function(combo, picker, record, sizeidx) {
             if (record.get('value')>0) {
                 picker.store.each( function(rec){
-                    rec.set({offsetx: record.get('value')*80 + 10});
+                    rec.set({typearrow: record.get('idsvg')});
                 }, this);
                 combo.setDisabled(false);
                 if (sizeidx !== null) {
@@ -865,8 +869,15 @@ define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
         },
 
         _selectStyleItem: function(combo, record) {
-            var formcontrol = $(combo.el).find('.form-control > .image');
-            formcontrol.css('background-position', ((record) ? (-record.get('offsetx')+20) + 'px' : '0') + ' ' + ((record) ? '-' + record.get('offsety') + 'px' : '-30px'));
+            var formcontrol = $(combo.el).find('.form-control > .img-arrows use');
+            if(formcontrol.length) {
+                var str = '';
+                if(record){
+                    var styleId  = record.get('idsvg');
+                    str = (styleId !== undefined) ? styleId + 'arrow-5' : record.get('typearrow') + 'arrow-' + (record.get('value')+1);
+                }
+                formcontrol[0].setAttribute('xlink:href', '#' + str);
+            }
         },
 
         onSelectBeginStyle: function(picker, view, record){
diff --git a/apps/presentationeditor/main/index.html b/apps/presentationeditor/main/index.html
index e3d73ea32..73e1eb6f1 100644
--- a/apps/presentationeditor/main/index.html
+++ b/apps/presentationeditor/main/index.html
@@ -346,6 +346,7 @@
     <img class="inline-svg" src="../../common/main/resources/img/toolbar/shapetypes.svg">
     <img class="inline-svg" src="../../common/main/resources/img/toolbar/charttypes.svg">
     <img class="inline-svg" src="../../common/main/resources/img/toolbar/equationicons.svg">
+    <img class="inline-svg" src="../../common/main/resources/img/right-panels/arrows.svg">
     <script>
         var svgpoints = document.querySelectorAll('img.inline-svg');
         SVGInjector(svgpoints);
diff --git a/apps/presentationeditor/main/index.html.deploy b/apps/presentationeditor/main/index.html.deploy
index 8c31f7ee1..b6a71f872 100644
--- a/apps/presentationeditor/main/index.html.deploy
+++ b/apps/presentationeditor/main/index.html.deploy
@@ -366,6 +366,7 @@
     <inline src="../../common/main/resources/img/toolbar/shapetypes.svg" />
     <inline src="../../common/main/resources/img/toolbar/charttypes.svg" />
     <inline src="../../common/main/resources/img/toolbar/equationicons.svg" />
+    <inline src="../../common/main/resources/img/right-panels/arrows.svg" />
 
     <script src="../../../../../../sdkjs/common/device_scale.js?__inline=true"></script>
     <script data-main="app" src="../../../vendor/requirejs/require.js"></script>
diff --git a/apps/presentationeditor/main/index_loader.html b/apps/presentationeditor/main/index_loader.html
index 1aa3a4f03..ff89165c9 100644
--- a/apps/presentationeditor/main/index_loader.html
+++ b/apps/presentationeditor/main/index_loader.html
@@ -262,6 +262,7 @@
 <img class="inline-svg" src="../../common/main/resources/img/toolbar/shapetypes.svg">
 <img class="inline-svg" src="../../common/main/resources/img/toolbar/charttypes.svg">
 <img class="inline-svg" src="../../common/main/resources/img/toolbar/equationicons.svg">
+<img class="inline-svg" src="../../common/main/resources/img/right-panels/arrows.svg">
 <script>
     var svgpoints = document.querySelectorAll('img.inline-svg');
     SVGInjector(svgpoints);
diff --git a/apps/presentationeditor/main/index_loader.html.deploy b/apps/presentationeditor/main/index_loader.html.deploy
index 05dbbf797..493ec1d4f 100644
--- a/apps/presentationeditor/main/index_loader.html.deploy
+++ b/apps/presentationeditor/main/index_loader.html.deploy
@@ -322,6 +322,7 @@
     <inline src="../../common/main/resources/img/toolbar/shapetypes.svg" />
     <inline src="../../common/main/resources/img/toolbar/charttypes.svg" />
     <inline src="../../common/main/resources/img/toolbar/equationicons.svg" />
+    <inline src="../../common/main/resources/img/right-panels/arrows.svg" />
 
     <div id="viewport"></div>
 
diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettingsAdvanced.js b/apps/spreadsheeteditor/main/app/view/ShapeSettingsAdvanced.js
index 5646a2e75..07e0fb1aa 100644
--- a/apps/spreadsheeteditor/main/app/view/ShapeSettingsAdvanced.js
+++ b/apps/spreadsheeteditor/main/app/view/ShapeSettingsAdvanced.js
@@ -348,18 +348,18 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
 
 
             var _arrStyles = [], _arrSize = [];
-            for ( var i=0; i<6; i++ )
-                _arrStyles.push({value: i, offsetx: 80*i+10, offsety: 0});
+            _arrStyles.push({type: Asc.c_oAscLineBeginType.None, idsvg: 'no-'});
+            _arrStyles.push({type: Asc.c_oAscLineBeginType.Triangle, idsvg: ''});
+            _arrStyles.push({type: Asc.c_oAscLineBeginType.Arrow, idsvg: 'open-'});
+            _arrStyles.push({type: Asc.c_oAscLineBeginType.Stealth, idsvg: 'stealth-'});
+            _arrStyles.push({type: Asc.c_oAscLineBeginType.Diamond, idsvg: 'dimond-'});
+            _arrStyles.push({type: Asc.c_oAscLineBeginType.Oval, idsvg: 'oval-'});
 
-            _arrStyles[0].type = Asc.c_oAscLineBeginType.None;
-            _arrStyles[1].type = Asc.c_oAscLineBeginType.Triangle;
-            _arrStyles[2].type = Asc.c_oAscLineBeginType.Arrow;
-            _arrStyles[3].type = Asc.c_oAscLineBeginType.Stealth;
-            _arrStyles[4].type = Asc.c_oAscLineBeginType.Diamond;
-            _arrStyles[5].type = Asc.c_oAscLineBeginType.Oval;
+            for ( var i=0; i<6; i++ )
+                _arrStyles[i].value = i;
 
             for ( i=0; i<9; i++ )
-                _arrSize.push({value: i, offsetx: 80+10, offsety: 20*(i+1)});
+                _arrSize.push({value: i, typearrow:''});
 
             _arrSize[0].type = Asc.c_oAscLineBeginSize.small_small;
             _arrSize[1].type = Asc.c_oAscLineBeginSize.small_mid;
@@ -377,7 +377,7 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
                 template: _.template([
                     '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style"  data-toggle="dropdown">',
                     '<div class="form-control" style="width: 100px;">',
-                        '<i class="image img-arrows"></i>',
+                        '<i class="img-arrows"><svg><use xlink:href="#no-arrow-5"></use></svg></i>',
                     '</div>',
                     '<div style="display: table-cell;"></div>',
                     '<button type="button" class="btn btn-default"><span class="caret"></span></button>',
@@ -396,7 +396,8 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
                 el: $('#shape-advanced-menu-begin-style'),
                 parentMenu: this.btnBeginStyleMenu,
                 store: new Common.UI.DataViewStore(_arrStyles),
-                itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
+                itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows">' +
+                    '<svg><use xlink:href= "#<%= idsvg %>arrow-5"></use></svg></div>')
             });
             this.mnuBeginStylePicker.on('item:click', _.bind(this.onSelectBeginStyle, this));
             this._selectStyleItem(this.btnBeginStyle, null);
@@ -406,7 +407,7 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
                 template: _.template([
                     '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style"  data-toggle="dropdown">',
                     '<div class="form-control" style="width: 100px;">',
-                        '<i class="image img-arrows"></i>',
+                        '<i class="img-arrows"><svg><use xlink:href=""></use></svg></i>',
                     '</div>',
                     '<div style="display: table-cell;"></div>',
                     '<button type="button" class="btn btn-default"><span class="caret"></span></button>',
@@ -425,7 +426,8 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
                 el: $('#shape-advanced-menu-begin-size'),
                 parentMenu: this.btnBeginSizeMenu,
                 store: new Common.UI.DataViewStore(_arrSize),
-                itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
+                itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows">' +
+                    '<svg><use xlink:href="#<%= typearrow %>arrow-<%= (value+1) %>"></use></svg></div>')
             });
             this.mnuBeginSizePicker.on('item:click', _.bind(this.onSelectBeginSize, this));
             this._selectStyleItem(this.btnBeginSize, null);
@@ -441,7 +443,7 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
                 template: _.template([
                     '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style"  data-toggle="dropdown">',
                     '<div class="form-control" style="width: 100px;">',
-                        '<i class="image img-arrows"></i>',
+                        '<i class="img-arrows"><svg class ="svg-mirror"><use xlink:href="#no-arrow-5"></use></svg></i>',
                     '</div>',
                     '<div style="display: table-cell;"></div>',
                     '<button type="button" class="btn btn-default"><span class="caret"></span></button>',
@@ -460,7 +462,8 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
                 el: $('#shape-advanced-menu-end-style'),
                 parentMenu: this.btnEndStyleMenu,
                 store: new Common.UI.DataViewStore(_arrStyles),
-                itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
+                itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows">' +
+                    '<svg class ="svg-mirror"><use xlink:href="#<%= idsvg %>arrow-5"></use></svg></div>')
             });
             this.mnuEndStylePicker.on('item:click', _.bind(this.onSelectEndStyle, this));
             this._selectStyleItem(this.btnEndStyle, null);
@@ -470,7 +473,7 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
                 template: _.template([
                     '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style"  data-toggle="dropdown">',
                     '<div class="form-control" style="width: 100px;">',
-                        '<i class="image img-arrows"></i>',
+                        '<i class="img-arrows"><svg class ="svg-mirror"><use xlink:href=""></use></svg></i>',
                     '</div>',
                     '<div style="display: table-cell;"></div>',
                     '<button type="button" class="btn btn-default"><span class="caret"></span></button>',
@@ -489,7 +492,8 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
                 el: $('#shape-advanced-menu-end-size'),
                 parentMenu: this.btnEndSizeMenu,
                 store: new Common.UI.DataViewStore(_arrSize),
-                itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
+                itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows">' +
+                    '<svg class ="svg-mirror"><use xlink:href="#<%= typearrow %>arrow-<%= (value + 1) %>"></use></svg></div>')
             });
             this.mnuEndSizePicker.on('item:click', _.bind(this.onSelectEndSize, this));
             this._selectStyleItem(this.btnEndSize, null);
@@ -828,7 +832,7 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
         _updateSizeArr: function(combo, picker, record, sizeidx) {
             if (record.get('value')>0) {
                 picker.store.each( function(rec){
-                    rec.set({offsetx: record.get('value')*80 + 10});
+                    rec.set({typearrow: record.get('idsvg')});
                 }, this);
                 combo.setDisabled(false);
                 if (sizeidx !== null) {
@@ -843,8 +847,15 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
         },
 
         _selectStyleItem: function(combo, record) {
-            var formcontrol = $(combo.el).find('.form-control > .image');
-            formcontrol.css('background-position', ((record) ? (-record.get('offsetx')+20) + 'px' : '0') + ' ' + ((record) ? '-' + record.get('offsety') + 'px' : '-30px'));
+            var formcontrol = $(combo.el).find('.form-control > .img-arrows use');
+            if(formcontrol.length) {
+                var str = '';
+                if(record){
+                    var styleId  = record.get('idsvg');
+                    str = (styleId !== undefined) ? styleId + 'arrow-5' : record.get('typearrow') + 'arrow-' + (record.get('value')+1);
+                }
+                formcontrol[0].setAttribute('xlink:href', '#' + str);
+            }
         },
 
         onSelectBeginStyle: function(picker, view, record){
diff --git a/apps/spreadsheeteditor/main/index.html b/apps/spreadsheeteditor/main/index.html
index 746eaa2a6..35450088f 100644
--- a/apps/spreadsheeteditor/main/index.html
+++ b/apps/spreadsheeteditor/main/index.html
@@ -369,6 +369,7 @@
     <img class="inline-svg" src="../../common/main/resources/img/toolbar/charttypes.svg">
     <img class="inline-svg" src="resources/img/cf-icons.svg">
     <img class="inline-svg" src="../../common/main/resources/img/toolbar/equationicons.svg">
+    <img class="inline-svg" src="../../common/main/resources/img/right-panels/arrows.svg">
     <script>
         var svgpoints = document.querySelectorAll('img.inline-svg');
         SVGInjector(svgpoints);
diff --git a/apps/spreadsheeteditor/main/index.html.deploy b/apps/spreadsheeteditor/main/index.html.deploy
index 664c3a46d..3180efc21 100644
--- a/apps/spreadsheeteditor/main/index.html.deploy
+++ b/apps/spreadsheeteditor/main/index.html.deploy
@@ -380,6 +380,7 @@
     <inline src="../../common/main/resources/img/toolbar/shapetypes.svg" />
     <inline src="../../common/main/resources/img/toolbar/charttypes.svg" />
     <inline src="../../common/main/resources/img/toolbar/equationicons.svg" />
+    <inline src="../../common/main/resources/img/right-panels/arrows.svg" />
     <inline src="resources/img/cf-icons.svg" />
 
     <script src="../../../../../../sdkjs/common/device_scale.js?__inline=true"></script>
diff --git a/apps/spreadsheeteditor/main/index_loader.html b/apps/spreadsheeteditor/main/index_loader.html
index fb64a5780..48eba69e1 100644
--- a/apps/spreadsheeteditor/main/index_loader.html
+++ b/apps/spreadsheeteditor/main/index_loader.html
@@ -263,6 +263,7 @@
 <img class="inline-svg" src="../../common/main/resources/img/toolbar/shapetypes.svg">
 <img class="inline-svg" src="../../common/main/resources/img/toolbar/charttypes.svg">
 <img class="inline-svg" src="../../common/main/resources/img/toolbar/equationicons.svg">
+<img class="inline-svg" src="../../common/main/resources/img/right-panels/arrows.svg">
 <img class="inline-svg" src="resources/img/cf-icons.svg">
 <script>
     var svgpoints = document.querySelectorAll('img.inline-svg');
diff --git a/apps/spreadsheeteditor/main/index_loader.html.deploy b/apps/spreadsheeteditor/main/index_loader.html.deploy
index c89ad66b1..2eee9453e 100644
--- a/apps/spreadsheeteditor/main/index_loader.html.deploy
+++ b/apps/spreadsheeteditor/main/index_loader.html.deploy
@@ -321,6 +321,7 @@
     <inline src="../../common/main/resources/img/toolbar/shapetypes.svg" />
     <inline src="../../common/main/resources/img/toolbar/charttypes.svg" />
     <inline src="../../common/main/resources/img/toolbar/equationicons.svg" />
+    <inline src="../../common/main/resources/img/right-panels/arrows.svg" />
     <inline src="resources/img/cf-icons.svg" />
 
     <div id="viewport"></div>