1
0
Форкнуть 0

Feature(EJ2-64889): Floor planner showcase sample.

This commit is contained in:
sivaranjith 2022-12-19 13:55:36 +05:30
Родитель 212db9a1b2
Коммит fc1598244a
48 изменённых файлов: 13365 добавлений и 0 удалений

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Разница между файлами не показана из-за своего большого размера Загрузить разницу

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Двоичный файл не отображается.

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

После

Ширина:  |  Высота:  |  Размер: 642 KiB

Двоичный файл не отображается.

Двоичный файл не отображается.

Разница между файлами не показана из-за своего большого размера Загрузить разницу

Просмотреть файл

@ -0,0 +1,115 @@
@font-face {
font-family: 'Diagram_Builder_Icon';
src:
url('Fonts/Diagram_Builder_Icon.ttf') format('truetype'),
url('Fonts/Diagram_Builder_Icon.woff') format('woff'),
url('Fonts/Diagram_Builder_Icon.eot') format('eot'),
url('Fonts/Diagram_Builder_Icon.svg?#Diagram_Builder_Icon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="sf-icon-"], [class*=" sf-icon-"] {
font-family: 'Diagram_Builder_Icon' !important;
speak: none;
font-size: 55px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.sf-icon-new:before { content: "\e700"; }
.sf-icon-open:before { content: "\e701"; }
.sf-icon-save:before { content: "\e702"; }
.sf-icon-save-as:before { content: "\e703"; }
.sf-icon-export:before { content: "\e704"; }
.sf-icon-print:before { content: "\e705"; }
.sf-icon-undo:before { content: "\e706"; }
.sf-icon-redo:before { content: "\e707"; }
.sf-icon-cut:before { content: "\e708"; }
.sf-icon-copy:before { content: "\e709"; }
.sf-icon-paste:before { content: "\e70a"; }
.sf-icon-delete:before { content: "\e70b"; }
.sf-icon-zoom-in:before { content: "\e70c"; }
.sf-icon-zoom-out:before { content: "\e70d"; }
.sf-icon-layers:before { content: "\e70e"; }
.sf-icon-send-to-back:before { content: "\e70f"; }
.sf-icon-bring-to-front:before { content: "\e710"; }
.sf-icon-send-backward:before { content: "\e711"; }
.sf-icon-bring-forward:before { content: "\e712"; }
.sf-icon-pan:before { content: "\e713"; }
.sf-icon-pointer:before { content: "\e714"; }
.sf-icon-draw_shapes:before { content: "\e715"; }
.sf-icon-rectangle:before { content: "\e716"; }
.sf-icon-elipse:before { content: "\e717"; }
.sf-icon-polygon:before { content: "\e718"; }
.sf-icon-straight_line:before { content: "\e719"; }
.sf-icon-orthogonal_line:before { content: "\e71a"; }
.sf-icon-bezier:before { content: "\e71b"; }
.sf-icon-free_hand:before { content: "\e71c"; }
.sf-icon-fil_colour:before { content: "\e71d"; }
.sf-icon-border_colour:before { content: "\e71e"; }
.sf-icon-group:before { content: "\e71f"; }
.sf-icon-ungroup:before { content: "\e720"; }
.sf-icon-rotate:before { content: "\e721"; }
.sf-icon-insert_link:before { content: "\e722"; }
.sf-icon-insert_image:before { content: "\e723"; }
.sf-icon-align_left:before { content: "\e724"; }
.sf-icon-align_center:before { content: "\e725"; }
.sf-icon-align_right:before { content: "\e726"; }
.sf-icon-align_top:before { content: "\e727"; }
.sf-icon-align_middle:before { content: "\e728"; }
.sf-icon-align_bottom:before { content: "\e729"; }
.sf-icon-distribute_vertical:before { content: "\e72a"; }
.sf-icon-distribute_horizontal:before { content: "\e72b"; }
.sf-icon-lock:before { content: "\e72c"; }
.sf-icon-unlock:before { content: "\e72d"; }
.sf-icon-text:before { content: "\e72e"; }
.sf-icon-globe:before { content: "\e72f"; }
.sf-icon-visible:before { content: "\e730"; }
.sf-icon-underline:before { content: "\e731"; }
.sf-icon-bold:before { content: "\e732"; }
.sf-icon-chevron-down-fill:before { content: "\e733"; }
.sf-icon-chevron-up-fill:before { content: "\e734"; }
.sf-icon-chevron-down:before { content: "\e735"; }
.sf-icon-chevron-up:before { content: "\e736"; }
.sf-icon-flip-vertical:before { content: "\e737"; }
.sf-icon-flip-horizontal:before { content: "\e738"; }
.sf-icon-rotate-counter-clockwise:before { content: "\e739"; }
.sf-icon-rotate-clockwise:before { content: "\e73a"; }
.sf-icon-align-left:before { content: "\e73f"; }
.sf-icon-align-center:before { content: "\e740"; }
.sf-icon-align-right:before { content: "\e741"; }
.sf-icon-italic:before { content: "\e742"; }
.sf-icon-check-tick:before { content: "\e743"; }
.sf-icon-order:before { content: "\e744"; }
.sf-icon-page_orientation:before { content: "\e745"; }
.sf-icon-add-child:before { content: "\e746"; }
.sf-icon-add-sibling:before { content: "\e747"; }
.sf-icon-font-color:before { content: "\e748"; }
.sf-icon-multiple-child:before { content: "\e749"; }
.sf-icon-landscape:before { content: "\e74a"; }
.sf-icon-portrait:before { content: "\e74b"; }
.sf-icon-light:before { content: "\e74c"; }
.sf-icon-dark:before { content: "\e74d"; }
.sf-icon-properties:before { content: "\e74e"; }
.sf-icon-hide:before { content: "\e74f"; }
.sf-icon-left-right:before { content: "\e750"; }
.sf-icon-right-left:before { content: "\e751"; }
.sf-icon-bottom-top:before { content: "\e752"; }
.sf-icon-top-bottom:before { content: "\e753"; }
.sf-icon-graphic_view:before { content: "\e754"; }
.sf-icon-text-view:before { content: "\e755"; }
.sf-icon-page-break:before { content: "\e756"; }
.sf-icon-align-text-left:before { content: "\e757"; }
.sf-icon-align-text-rignt:before { content: "\e758"; }
.sf-icon-align-text-top:before { content: "\e759"; }
.sf-icon-align-text-bottom:before { content: "\e75a"; }
.sf-icon-align-text-horizontal-center:before { content: "\e75b"; }
.sf-icon-align-text-vertical-center:before { content: "\e75c"; }
.sf-icon-close:before { content: "\e75d"; }
.sf-icon-gradient-alignment:before { content: "\e75e"; }

Двоичные данные
assets/db-icons1/Fonts/All icons Metrop.eot Normal file

Двоичный файл не отображается.

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

После

Ширина:  |  Высота:  |  Размер: 267 KiB

Двоичные данные
assets/db-icons1/Fonts/All icons Metrop.ttf Normal file

Двоичный файл не отображается.

Двоичные данные
assets/db-icons1/Fonts/All icons Metrop.woff Normal file

Двоичный файл не отображается.

Двоичные данные
assets/db-icons1/Fonts/Diagram_Builder_Icon.eot Normal file

Двоичный файл не отображается.

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

После

Ширина:  |  Высота:  |  Размер: 642 KiB

Двоичные данные
assets/db-icons1/Fonts/Diagram_Builder_Icon.ttf Normal file

Двоичный файл не отображается.

Двоичные данные
assets/db-icons1/Fonts/Diagram_Builder_Icon.woff Normal file

Двоичный файл не отображается.

Двоичные данные
assets/db-icons1/Fonts/Final diagram icons copy.eot Normal file

Двоичный файл не отображается.

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

После

Ширина:  |  Высота:  |  Размер: 264 KiB

Двоичные данные
assets/db-icons1/Fonts/Final diagram icons copy.ttf Normal file

Двоичный файл не отображается.

Двоичные данные
assets/db-icons1/Fonts/Final diagram icons copy.woff Normal file

Двоичный файл не отображается.

Двоичные данные
assets/db-icons1/Fonts/New_DiagramBuilder_Font.eot Normal file

Двоичный файл не отображается.

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

После

Ширина:  |  Высота:  |  Размер: 209 KiB

Двоичные данные
assets/db-icons1/Fonts/New_DiagramBuilder_Font.ttf Normal file

Двоичный файл не отображается.

Двоичные данные
assets/db-icons1/Fonts/New_DiagramBuilder_Font.woff Normal file

Двоичный файл не отображается.

232
assets/db-icons1/style.css Normal file
Просмотреть файл

@ -0,0 +1,232 @@
@font-face {
font-family: 'Final diagram icons copy';
src:
url('Fonts/Final diagram icons copy.ttf') format('truetype'),
url('Fonts/Final diagram icons copy.woff') format('woff'),
url('Fonts/Final diagram icons copy.eot') format('eot'),
url('Fonts/Final diagram icons copy.svg?#Final diagram icons copy') format('svg');
font-weight: normal;
font-style: normal;
}
/* [class^="sf-icon-"], [class*=" sf-icon-"] {
font-family: 'Final diagram icons copy' ,'Free_hand', 'Diagram_Builder_Icon'!important;
speak: none;
font-size: 55px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} */
@font-face {
font-family: 'e-ddb-icons2';
src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj1tSfIAAAEoAAAAVmNtYXDnEOdVAAABiAAAADZnbHlmdC1P4gAAAcgAAAAwaGVhZBJhohMAAADQAAAANmhoZWEIVQQDAAAArAAAACRobXR4CAAAAAAAAYAAAAAIbG9jYQAYAAAAAAHAAAAABm1heHABDgAUAAABCAAAACBuYW1lm+wy9gAAAfgAAAK1cG9zdLnsYngAAASwAAAAMAABAAAEAAAAAFwEAAAAAAAD+AABAAAAAAAAAAAAAAAAAAAAAgABAAAAAQAAgNcenF8PPPUACwQAAAAAANelrs4AAAAA16WuzgAAAAAD+AN6AAAACAACAAAAAAAAAAEAAAACAAgAAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAAQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAAAAACAAAAAwAAABQAAwABAAAAFAAEACIAAAAEAAQAAQAA5wD//wAA5wD//wAAAAEABAAAAAEAAAAAAAAAGAAAAAIAAAAAA/gDegACAAcAACUhCQEhATUhAQQC9P6G/YoBMQFF/YqGAjf+hgH0QwAAAAAAEgDeAAEAAAAAAAAAAQAAAAEAAAAAAAEAEwABAAEAAAAAAAIABwAUAAEAAAAAAAMAEwAbAAEAAAAAAAQAEwAuAAEAAAAAAAUACwBBAAEAAAAAAAYAEwBMAAEAAAAAAAoALABfAAEAAAAAAAsAEgCLAAMAAQQJAAAAAgCdAAMAAQQJAAEAJgCfAAMAAQQJAAIADgDFAAMAAQQJAAMAJgDTAAMAAQQJAAQAJgD5AAMAAQQJAAUAFgEfAAMAAQQJAAYAJgE1AAMAAQQJAAoAWAFbAAMAAQQJAAsAJAGzIERpYWdyYW1fU2hhcGVzX0ZPTlRSZWd1bGFyRGlhZ3JhbV9TaGFwZXNfRk9OVERpYWdyYW1fU2hhcGVzX0ZPTlRWZXJzaW9uIDEuMERpYWdyYW1fU2hhcGVzX0ZPTlRGb250IGdlbmVyYXRlZCB1c2luZyBTeW5jZnVzaW9uIE1ldHJvIFN0dWRpb3d3dy5zeW5jZnVzaW9uLmNvbQAgAEQAaQBhAGcAcgBhAG0AXwBTAGgAYQBwAGUAcwBfAEYATwBOAFQAUgBlAGcAdQBsAGEAcgBEAGkAYQBnAHIAYQBtAF8AUwBoAGEAcABlAHMAXwBGAE8ATgBUAEQAaQBhAGcAcgBhAG0AXwBTAGgAYQBwAGUAcwBfAEYATwBOAFQAVgBlAHIAcwBpAG8AbgAgADEALgAwAEQAaQBhAGcAcgBhAG0AXwBTAGgAYQBwAGUAcwBfAEYATwBOAFQARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAdQBzAGkAbgBnACAAUwB5AG4AYwBmAHUAcwBpAG8AbgAgAE0AZQB0AHIAbwAgAFMAdAB1AGQAaQBvAHcAdwB3AC4AcwB5AG4AYwBmAHUAcwBpAG8AbgAuAGMAbwBtAAAAAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgECAQMABlNoYXBlcwAA) format('truetype');
font-weight: normal;
font-style: normal;
}
@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;
}
@font-face {
font-family: 'Diagram_Builder_Icon';
src:
url('Fonts/Diagram_Builder_Icon.ttf') format('truetype'),
url('Fonts/Diagram_Builder_Icon.woff') format('woff'),
url('Fonts/Diagram_Builder_Icon.eot') format('eot'),
url('Fonts/Diagram_Builder_Icon.svg?#Diagram_Builder_Icon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="sf-icon-"], [class*=" sf-icon-"] {
font-family: 'Diagram_Builder_Icon' !important;
speak: none;
font-size: 55px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.sf-icon-new:before { content: "\e700"; }
.sf-icon-open:before { content: "\e701"; }
.sf-icon-save:before { content: "\e702"; }
.sf-icon-save-as:before { content: "\e703"; }
.sf-icon-export:before { content: "\e704"; }
.sf-icon-print:before { content: "\e705"; }
.sf-icon-undo:before { content: "\e706"; }
.sf-icon-redo:before { content: "\e707"; }
.sf-icon-cut:before { content: "\e708"; }
.sf-icon-copy:before { content: "\e709"; }
.sf-icon-paste:before { content: "\e70a"; }
.sf-icon-delete:before { content: "\e70b"; }
.sf-icon-zoom-in:before { content: "\e70c"; }
.sf-icon-zoom-out:before { content: "\e70d"; }
.sf-icon-layers:before { content: "\e70e"; }
.sf-icon-send-to-back:before { content: "\e70f"; }
.sf-icon-bring-to-front:before { content: "\e710"; }
.sf-icon-send-backward:before { content: "\e711"; }
.sf-icon-bring-forward:before { content: "\e712"; }
.sf-icon-pan:before { content: "\e713"; }
.sf-icon-pointer:before { content: "\e714"; }
.sf-icon-draw_shapes:before { content: "\e715"; }
.sf-icon-rectangle:before { content: "\e716"; }
.sf-icon-elipse:before { content: "\e717"; }
.sf-icon-polygon:before { content: "\e718"; }
.sf-icon-straight_line:before { content: "\e719"; }
.sf-icon-orthogonal_line:before { content: "\e71a"; }
.sf-icon-bezier:before { content: "\e71b"; }
.sf-icon-free_hand:before { content: "\e71c"; }
.sf-icon-fil_colour:before { content: "\e71d"; }
.sf-icon-border_colour:before { content: "\e71e"; }
.sf-icon-group:before { content: "\e71f"; }
.sf-icon-ungroup:before { content: "\e720"; }
.sf-icon-rotate:before { content: "\e721"; }
.sf-icon-insert_link:before { content: "\e722"; }
.sf-icon-insert_image:before { content: "\e723"; }
.sf-icon-align_left:before { content: "\e724"; }
.sf-icon-align_center:before { content: "\e725"; }
.sf-icon-align_right:before { content: "\e726"; }
.sf-icon-align_top:before { content: "\e727"; }
.sf-icon-align_middle:before { content: "\e728"; }
.sf-icon-align_bottom:before { content: "\e729"; }
.sf-icon-distribute_vertical:before { content: "\e72a"; }
.sf-icon-distribute_horizontal:before { content: "\e72b"; }
.sf-icon-lock:before { content: "\e72c"; }
.sf-icon-unlock:before { content: "\e72d"; }
.sf-icon-text:before { content: "\e72e"; }
.sf-icon-globe:before { content: "\e72f"; }
.sf-icon-visible:before { content: "\e730"; }
.sf-icon-underline:before { content: "\e731"; }
.sf-icon-bold:before { content: "\e732"; }
.sf-icon-chevron-down-fill:before { content: "\e733"; }
.sf-icon-chevron-up-fill:before { content: "\e734"; }
.sf-icon-chevron-down:before { content: "\e735"; }
.sf-icon-chevron-up:before { content: "\e736"; }
.sf-icon-flip-vertical:before { content: "\e737"; }
.sf-icon-flip-horizontal:before { content: "\e738"; }
.sf-icon-rotate-counter-clockwise:before { content: "\e739"; }
.sf-icon-rotate-clockwise:before { content: "\e73a"; }
.sf-icon-align-left:before { content: "\e73f"; }
.sf-icon-align-center:before { content: "\e740"; }
.sf-icon-align-right:before { content: "\e741"; }
.sf-icon-italic:before { content: "\e742"; }
.sf-icon-check-tick:before { content: "\e743"; }
.sf-icon-order:before { content: "\e744"; }
.sf-icon-page_orientation:before { content: "\e745"; }
.sf-icon-add-child:before { content: "\e746"; }
.sf-icon-add-sibling:before { content: "\e747"; }
.sf-icon-font-color:before { content: "\e748"; }
.sf-icon-multiple-child:before { content: "\e749"; }
.sf-icon-landscape:before { content: "\e74a"; }
.sf-icon-portrait:before { content: "\e74b"; }
.sf-icon-light:before { content: "\e74c"; }
.sf-icon-dark:before { content: "\e74d"; }
.sf-icon-properties:before { content: "\e74e"; }
.sf-icon-hide:before { content: "\e74f"; }
.sf-icon-left-right:before { content: "\e750"; }
.sf-icon-right-left:before { content: "\e751"; }
.sf-icon-bottom-top:before { content: "\e752"; }
.sf-icon-top-bottom:before { content: "\e753"; }
.sf-icon-graphic_view:before { content: "\e754"; }
.sf-icon-text-view:before { content: "\e755"; }
.sf-icon-page-break:before { content: "\e756"; }
.sf-icon-align-text-left:before { content: "\e757"; }
.sf-icon-align-text-rignt:before { content: "\e758"; }
.sf-icon-align-text-top:before { content: "\e759"; }
.sf-icon-align-text-bottom:before { content: "\e75a"; }
.sf-icon-align-text-horizontal-center:before { content: "\e75b"; }
.sf-icon-align-text-vertical-center:before { content: "\e75c"; }
.sf-icon-close:before { content: "\e75d"; }
.sf-icon-gradient-alignment:before { content: "\e75e"; }
.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"; }
.sf-icon-BringForward:before { content: "\e704"; }
.sf-icon-ConnectorMode:before { content: "\e705"; }
.sf-icon-Bold:before { content: "\e706"; }
.sf-icon-Sendback:before { content: "\e707"; }
.sf-icon-ZoomOut:before { content: "\e708"; }
.sf-icon-Redo:before { content: "\e709"; }
.sf-icon-Unlock1:before { content: "\e70a"; }
.sf-icon-AilgnTop:before { content: "\e70b"; }
.sf-icon-Copy:before { content: "\e70c"; }
.sf-icon-Square:before { content: "\e70d"; }
.sf-icon-Print:before { content: "\e70e"; }
.sf-icon-DistributeVertical:before { content: "\e70f"; }
.sf-icon-AlignHorizontally:before { content: "\e710"; }
.sf-icon-BringFront:before { content: "\e711"; }
.sf-icon-Delete:before { content: "\e712"; }
.sf-icon-Unlock:before { content: "\e713"; }
.sf-icon-Ungroup:before { content: "\e714"; }
.sf-icon-Selection:before { content: "\e715"; }
.sf-icon-Ellipse:before { content: "\e716"; }
.sf-icon-TextHorizontalCenter:before { content: "\e717"; }
.sf-icon-ColorPickers:before { content: "\e718"; }
.sf-icon-Expander:before { content: "\e719"; }
.sf-icon-DownArrow:before { content: "\e71b"; }
.sf-icon-ZoomIn:before { content: "\e71c"; }
.sf-icon-Shape_Rectangle:before { content: "\e71d"; }
.sf-icon-SendBackward:before { content: "\e71e"; }
.sf-icon-ColorFormat:before { content: "\e71f"; }
.sf-icon-Triangle:before { content: "\e720"; }
.sf-icon-Up:before { content: "\e721"; }
.sf-icon-Group:before { content: "\e722"; }
.sf-icon-AlignBottom:before { content: "\e723"; }
.sf-icon-InsertText:before { content: "\e726"; }
.sf-icon-RoundedSquare:before { content: "\e727"; }
.sf-icon-Collapse1:before { content: "\e728"; }
.sf-icon-DistributeHorizontal:before { content: "\e729"; }
.sf-icon-Invisible:before { content: "\e72a"; }
.sf-icon-Shape_Circle:before { content: "\e72b"; }
.sf-icon-Down:before { content: "\e72c"; }
.sf-icon-AlignLeft:before { content: "\e72d"; }
.sf-icon-Paste:before { content: "\e72e"; }
.sf-icon-AlignRight:before { content: "\e72f"; }
.sf-icon-AlignVertically:before { content: "\e730"; }
.sf-icon-ParaAlignCenter:before { content: "\e731"; }
.sf-icon-Plus:before { content: "\e732"; }
.sf-icon-View:before { content: "\e733"; }
.sf-icon-Export:before { content: "\e734"; }
.sf-icon-StraightLine:before { content: "\e735"; }
.sf-icon-Shape_Square:before { content: "\e736"; }
.sf-icon-Duplicate:before { content: "\e737"; }
.sf-icon-Close:before { content: "\e738"; }
.sf-icon-Collapse:before { content: "\e739"; }
.sf-icon-Rotate1:before { content: "\e73a"; }
.sf-icon-Pan:before { content: "\e73b"; }
.sf-icon-ParaAlignLeft:before { content: "\e73d"; }
.sf-icon-ParaAlignRight:before { content: "\e73e"; }
.sf-icon-TextInput:before { content: "\e73f"; }
.sf-icon-Pickers:before { content: "\e740"; }
.sf-icon-TextVerticalCenter:before { content: "\e741"; }
.sf-icon-InsertLink:before { content: "\e742"; }
.sf-icon-Undo:before { content: "\e743"; }
.sf-icon-Cut:before { content: "\e744"; }
.sf-icon-Save:before { content: "\e745"; }
.sf-icon-DrawingMode:before { content: "\e746"; }
.sf-icon-Rotate:before { content: "\e747"; }
.sf-icon-Layers:before { content: "\e748"; }
.sf-icon-BeizerLine:before { content: "\e749"; }
.sf-icon-Order:before { content: "\e74a"; }
.sf-icon-Selector:before { content: "\e74b"; }
.sf-icon-TextLeft:before { content: "\e74c"; }
.sf-icon-TextBottom:before { content: "\e74d"; }
.sf-icon-TextCenterVertical:before { content: "\e74e"; }
.sf-icon-TextHorizondalCenter:before { content: "\e74f"; }
.sf-icon-TextTop:before { content: "\e750"; }
.sf-icon-TextRight:before { content: "\e751"; }
.sf-icon-FillColor:before { content: "\e752"; }
.sf-icon-Italic:before { content: "\e753"; }
.sf-icon-DownArrow2:before { content: "\e754"; }
.sf-icon-Lock:before { content: "\e755"; }

Просмотреть файл

@ -0,0 +1,29 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<style type="text/css">
.st0{fill:#6CA4D9;}
.st1{fill:#FFFFFF;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
.st2{fill:#626262;}
.st3{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
.st4{fill:#FFFFFF;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
.st5{fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
.st6{fill:#C0C0C0;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
.st7{fill:none;stroke:#171B1F;stroke-width:3;stroke-miterlimit:10;}
.st8{fill:none;stroke:#6CA4D9;stroke-width:2;stroke-miterlimit:10;}
.st9{fill:none;stroke:#6CA4D9;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
.st10{fill-rule:evenodd;clip-rule:evenodd;fill:#4A4A4A;}
.st11{fill:#FFFFFF;}
.st12{fill:#C0C0C0;}
.st13{fill:#171B1F;}
</style>
<g>
<g>
<path class="st0" d="M13,23V9l14,7L13,23z M15,12.2v7.5l7.5-3.8L15,12.2z"/>
</g>
<g>
<rect x="5" y="15" class="st0" width="9" height="2"/>
</g>
</g>
</svg>

После

Ширина:  |  Высота:  |  Размер: 1.3 KiB

Просмотреть файл

@ -0,0 +1,33 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<style type="text/css">
.st0{fill:#6CA4D9;}
.st1{fill:#FFFFFF;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
.st2{fill:#626262;}
.st3{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
.st4{fill:#FFFFFF;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
.st5{fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
.st6{fill:#C0C0C0;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
.st7{fill:none;stroke:#171B1F;stroke-width:3;stroke-miterlimit:10;}
.st8{fill:none;stroke:#6CA4D9;stroke-width:2;stroke-miterlimit:10;}
.st9{fill:none;stroke:#6CA4D9;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
.st10{fill-rule:evenodd;clip-rule:evenodd;fill:#4A4A4A;}
.st11{fill:#FFFFFF;}
.st12{fill:#C0C0C0;}
.st13{fill:#171B1F;}
</style>
<g>
<g>
<rect x="5" y="15" class="st0" width="10" height="2"/>
</g>
<g>
<polygon class="st0" points="18,22 13,16 18,10 20.8,14 19.1,15.1 17.9,13.3 15.6,16 17.9,18.7 19.1,16.9 20.8,18 "/>
</g>
<g>
<path class="st0" d="M23,21.3c-2.3,0-4-2.3-4-5.3s1.8-5.3,4-5.3c2.3,0,4,2.3,4,5.3S25.2,21.3,23,21.3z M23,12.7
c-1.1,0-2,1.6-2,3.3s0.9,3.3,2,3.3s2-1.6,2-3.3S24.1,12.7,23,12.7z"/>
</g>
</g>
</svg>

После

Ширина:  |  Высота:  |  Размер: 1.6 KiB

Просмотреть файл

@ -0,0 +1,30 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<style type="text/css">
.st0{fill:#6CA4D9;}
.st1{fill:#FFFFFF;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
.st2{fill:#626262;}
.st3{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
.st4{fill:#FFFFFF;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
.st5{fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
.st6{fill:#C0C0C0;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
.st7{fill:none;stroke:#171B1F;stroke-width:3;stroke-miterlimit:10;}
.st8{fill:none;stroke:#6CA4D9;stroke-width:2;stroke-miterlimit:10;}
.st9{fill:none;stroke:#6CA4D9;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
.st10{fill-rule:evenodd;clip-rule:evenodd;fill:#4A4A4A;}
.st11{fill:#FFFFFF;}
.st12{fill:#C0C0C0;}
.st13{fill:#171B1F;}
</style>
<g>
<g>
<rect x="5" y="15" class="st0" width="11" height="2"/>
</g>
<g>
<path class="st0" d="M21,22c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S24.3,22,21,22z M21,12c-2.2,0-4,1.8-4,4s1.8,4,4,4s4-1.8,4-4
S23.2,12,21,12z"/>
</g>
</g>
</svg>

После

Ширина:  |  Высота:  |  Размер: 1.4 KiB

Просмотреть файл

@ -0,0 +1,29 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<style type="text/css">
.st0{fill:#6CA4D9;}
.st1{fill:#FFFFFF;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
.st2{fill:#626262;}
.st3{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
.st4{fill:#FFFFFF;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
.st5{fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
.st6{fill:#C0C0C0;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
.st7{fill:none;stroke:#171B1F;stroke-width:3;stroke-miterlimit:10;}
.st8{fill:none;stroke:#6CA4D9;stroke-width:2;stroke-miterlimit:10;}
.st9{fill:none;stroke:#6CA4D9;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
.st10{fill-rule:evenodd;clip-rule:evenodd;fill:#4A4A4A;}
.st11{fill:#FFFFFF;}
.st12{fill:#C0C0C0;}
.st13{fill:#171B1F;}
</style>
<g>
<g>
<rect x="5" y="15" class="st0" width="11" height="2"/>
</g>
<g>
<circle class="st0" cx="21" cy="16" r="6"/>
</g>
</g>
</svg>

После

Ширина:  |  Высота:  |  Размер: 1.3 KiB

Просмотреть файл

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="17px" height="16px" viewBox="0 0 17 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<title>Overview - Normal</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M13.3076923,9.07692308 C13.3076923,7.29567308 11.8581731,5.84615385 10.0769231,5.84615385 C8.29567308,5.84615385 6.84615385,7.29567308 6.84615385,9.07692308 C6.84615385,10.8581731 8.29567308,12.3076923 10.0769231,12.3076923 C11.8581731,12.3076923 13.3076923,10.8581731 13.3076923,9.07692308 Z M2.98505665,14 L5,14 L5,16 L2.98505665,16 L0.985056648,16 L0.985056648,0 L2.98505665,0 L17,1.46957616e-15 L17,2 L17,4 L15,4 L15,2 L2.98505665,2 L2.98505665,14 Z M17,15.0769231 C17,15.5817308 16.5817308,16 16.0769231,16 C15.8317308,16 15.59375,15.8990385 15.4278846,15.7259615 L12.9543269,13.2596154 C12.1105769,13.84375 11.1009615,14.1538462 10.0769231,14.1538462 C7.27163462,14.1538462 5,11.8822115 5,9.07692308 C5,6.27163462 7.27163462,4 10.0769231,4 C12.8822115,4 15.1538462,6.27163462 15.1538462,9.07692308 C15.1538462,10.1009615 14.84375,11.1105769 14.2596154,11.9543269 L16.7331731,14.4278846 C16.8990385,14.59375 17,14.8317308 17,15.0769231 Z" id="Overview---Normal" fill="#4A4A4A"></path>
</g>
</svg>

После

Ширина:  |  Высота:  |  Размер: 1.4 KiB

Просмотреть файл

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="18px" height="16px" viewBox="0 0 18 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<title>Overview</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M13.315164,9.07692308 C13.315164,7.29567308 11.8656448,5.84615385 10.0843948,5.84615385 C8.30314475,5.84615385 6.85362552,7.29567308 6.85362552,9.07692308 C6.85362552,10.8581731 8.30314475,12.3076923 10.0843948,12.3076923 C11.8656448,12.3076923 13.315164,10.8581731 13.315164,9.07692308 Z M2.99252832,14 L5.00747168,14 L5.00747168,16 L2.99252832,16 L0.992528324,16 L0.992528324,0 L2.99252832,0 L17.0074717,1.46957616e-15 L17.0074717,2 L17.0074717,4 L15.0074717,4 L15.0074717,2 L2.99252832,2 L2.99252832,14 Z M17.0074717,15.0769231 C17.0074717,15.5817308 16.5892024,16 16.0843948,16 C15.8392024,16 15.6012217,15.8990385 15.4353563,15.7259615 L12.9617986,13.2596154 C12.1180486,13.84375 11.1084332,14.1538462 10.0843948,14.1538462 C7.27910629,14.1538462 5.00747168,11.8822115 5.00747168,9.07692308 C5.00747168,6.27163462 7.27910629,4 10.0843948,4 C12.8896832,4 15.1613178,6.27163462 15.1613178,9.07692308 C15.1613178,10.1009615 14.8512217,11.1105769 14.2670871,11.9543269 L16.7406448,14.4278846 C16.9065101,14.59375 17.0074717,14.8317308 17.0074717,15.0769231 Z" id="Overview" fill="#046AE5"></path>
</g>
</svg>

После

Ширина:  |  Высота:  |  Размер: 1.5 KiB

Просмотреть файл

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50 (54983) - http://www.bohemiancoding.com/sketch -->
<title>Combined Shape</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Create-new-Diagram" transform="translate(-260.000000, -325.000000)" fill="#4A4A4A">
<g id="Group-2" transform="translate(32.000000, 225.000000)">
<g id="Group" transform="translate(228.000000, 100.000000)">
<path d="M11,9 L20,9 L20,11 L11,11 L11,20 L9,20 L9,11 L0,11 L0,9 L9,9 L9,0 L11,0 L11,9 Z" id="Combined-Shape"></path>
</g>
</g>
</g>
</g>
</svg>

После

Ширина:  |  Высота:  |  Размер: 907 B

Просмотреть файл

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="135px" height="125px" viewBox="0 0 135 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<title>blank_diagram_mind</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="blank_diagram_mind" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle" stroke="#A4E1F5" fill="#DAF6FF" x="46.2277392" y="55.4923239" width="42.5445216" height="14.0153523" rx="3"></rect>
<path d="M50.2460938,65.5 L50.2460938,59.71875 L51.3828125,59.71875 L52.984375,64.1914062 L54.6328125,59.71875 L55.6484375,59.71875 L55.6484375,65.5 L54.8828125,65.5 L54.8828125,60.796875 L53.2890625,65.1132812 L52.4960938,65.1132812 L50.9492188,60.7851562 L50.9492188,65.5 L50.2460938,65.5 Z M57.1599963,65.5 L57.1599963,61.2578125 L57.9295275,61.2578125 L57.9295275,65.5 L57.1599963,65.5 Z M57.1599963,60.4882812 L57.1599963,59.71875 L57.9295275,59.71875 L57.9295275,60.4882812 L57.1599963,60.4882812 Z M59.4723363,65.5 L59.4723363,61.2578125 L60.2418675,61.2578125 L60.2418675,62.0546875 C60.6481195,61.4609345 61.1455104,61.1640625 61.734055,61.1640625 C62.1012443,61.1640625 62.3942102,61.2805978 62.6129613,61.5136719 C62.8317123,61.746746 62.9410863,62.0598939 62.9410863,62.453125 L62.9410863,65.5 L62.171555,65.5 L62.171555,62.703125 C62.171555,62.3880193 62.1253315,62.1634121 62.0328831,62.0292969 C61.9404347,61.8951816 61.7874415,61.828125 61.5738988,61.828125 C61.1025422,61.828125 60.6585363,62.1367157 60.2418675,62.7539062 L60.2418675,65.5 L59.4723363,65.5 Z M67.1596763,65.5 L67.1596763,64.703125 C66.8471747,65.2994821 66.3758252,65.5976562 65.7456138,65.5976562 C65.2351945,65.5976562 64.8335058,65.4114602 64.5405356,65.0390625 C64.2475654,64.6666648 64.1010825,64.1575553 64.1010825,63.5117187 C64.1010825,62.8059861 64.2670965,62.2382834 64.5991294,61.8085937 C64.9311623,61.3789041 65.3680069,61.1640625 65.9096763,61.1640625 C66.4122829,61.1640625 66.8289454,61.3567689 67.1596763,61.7421875 L67.1596763,59.3320312 L67.9331138,59.3320312 L67.9331138,65.5 L67.1596763,65.5 Z M67.1596763,62.2695312 C66.7612368,61.917967 66.3836364,61.7421875 66.0268638,61.7421875 C65.2898809,61.7421875 64.921395,62.3059839 64.921395,63.4335937 C64.921395,64.4257862 65.2495167,64.921875 65.90577,64.921875 C66.3328555,64.921875 66.75082,64.6888044 67.1596763,64.2226562 L67.1596763,62.2695312 Z M69.4485788,65.5 L69.4485788,59.71875 L70.5852975,59.71875 L72.18686,64.1914062 L73.8352975,59.71875 L74.8509225,59.71875 L74.8509225,65.5 L74.0852975,65.5 L74.0852975,60.796875 L72.4915475,65.1132812 L71.6985788,65.1132812 L70.1517038,60.7851562 L70.1517038,65.5 L69.4485788,65.5 Z M78.5499813,64.9609375 C78.0890414,65.3854188 77.6450355,65.5976562 77.21795,65.5976562 C76.8663857,65.5976562 76.574722,65.4876313 76.34295,65.2675781 C76.111178,65.0475249 75.9952938,64.7695329 75.9952938,64.4335937 C75.9952938,63.9700498 76.1899533,63.6139335 76.5792781,63.3652344 C76.968603,63.1165352 77.5265401,62.9921875 78.2531063,62.9921875 L78.4367,62.9921875 L78.4367,62.4804687 C78.4367,61.9882788 78.1840984,61.7421875 77.6788875,61.7421875 C77.2726355,61.7421875 76.8338378,61.8671862 76.3624813,62.1171875 L76.3624813,61.4804687 C76.880713,61.2695302 77.3663852,61.1640625 77.8195125,61.1640625 C78.2934732,61.1640625 78.6430791,61.2708323 78.8683406,61.484375 C79.0936022,61.6979177 79.2062313,62.0299457 79.2062313,62.4804687 L79.2062313,64.4023437 C79.2062313,64.8424501 79.3416466,65.0625 79.6124813,65.0625 C79.6463356,65.0625 79.6958143,65.0572917 79.7609188,65.046875 L79.8156063,65.4726562 C79.6411262,65.55599 79.4484198,65.5976562 79.2374813,65.5976562 C78.8781045,65.5976562 78.6489401,65.3854188 78.5499813,64.9609375 Z M78.4367,64.5429687 L78.4367,63.4453125 L78.1788875,63.4375 C77.7570104,63.4375 77.415868,63.5175773 77.15545,63.6777344 C76.895032,63.8378914 76.764825,64.0481758 76.764825,64.3085937 C76.764825,64.4934905 76.8299285,64.6497389 76.9601375,64.7773437 C77.0903465,64.9049486 77.2491991,64.96875 77.4367,64.96875 C77.7570141,64.96875 78.0903441,64.8268243 78.4367,64.5429687 Z M80.78029,67.0429687 L80.78029,61.2578125 L81.5498213,61.2578125 L81.5498213,62.0546875 C81.864927,61.4609345 82.3375785,61.1640625 82.96779,61.1640625 C83.4782092,61.1640625 83.8798979,61.3502586 84.1728681,61.7226562 C84.4658383,62.0950539 84.6123213,62.6041634 84.6123213,63.25 C84.6123213,63.9531285 84.4463073,64.5201801 84.1142744,64.9511719 C83.7822415,65.3821636 83.3453969,65.5976562 82.8037275,65.5976562 C82.3011208,65.5976562 81.8831563,65.4049498 81.5498213,65.0195312 L81.5498213,67.0429687 L80.78029,67.0429687 Z M81.5498213,64.4882812 C81.9456566,64.8424497 82.323257,65.0195312 82.6826338,65.0195312 C83.4222208,65.0195312 83.7920088,64.4557348 83.7920088,63.328125 C83.7920088,62.3333284 83.463887,61.8359375 82.8076338,61.8359375 C82.3779441,61.8359375 81.9586775,62.0690081 81.5498213,62.5351562 L81.5498213,64.4882812 Z" id="MindMap" fill="#000000"></path>
</g>
</svg>

После

Ширина:  |  Высота:  |  Размер: 5.0 KiB

Просмотреть файл

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="135px" height="125px" viewBox="0 0 135 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<title>blank_diagram_org</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="blank_diagram_org" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle" stroke="#89BEB3" fill="#B8F4E8" x="46.2277392" y="55.4923239" width="42.5445216" height="14.0153523" rx="3"></rect>
<path d="M57.1194606,65.5 L57.1194606,59.71875 L57.9241481,59.71875 L60.8343044,64.1835937 L60.8343044,59.71875 L61.5374294,59.71875 L61.5374294,65.5 L60.7366481,65.5 L57.8225856,61.0351562 L57.8225856,65.5 L57.1194606,65.5 Z M65.2403944,64.9609375 C64.7794546,65.3854188 64.3354486,65.5976562 63.9083631,65.5976562 C63.5567989,65.5976562 63.2651351,65.4876313 63.0333631,65.2675781 C62.8015911,65.0475249 62.6857069,64.7695329 62.6857069,64.4335937 C62.6857069,63.9700498 62.8803664,63.6139335 63.2696912,63.3652344 C63.6590161,63.1165352 64.2169532,62.9921875 64.9435194,62.9921875 L65.1271131,62.9921875 L65.1271131,62.4804687 C65.1271131,61.9882788 64.8745115,61.7421875 64.3693006,61.7421875 C63.9630486,61.7421875 63.5242509,61.8671862 63.0528944,62.1171875 L63.0528944,61.4804687 C63.5711261,61.2695302 64.0567984,61.1640625 64.5099256,61.1640625 C64.9838863,61.1640625 65.3334922,61.2708323 65.5587537,61.484375 C65.7840153,61.6979177 65.8966444,62.0299457 65.8966444,62.4804687 L65.8966444,64.4023437 C65.8966444,64.8424501 66.0320597,65.0625 66.3028944,65.0625 C66.3367487,65.0625 66.3862274,65.0572917 66.4513319,65.046875 L66.5060194,65.4726562 C66.3315393,65.55599 66.1388329,65.5976562 65.9278944,65.5976562 C65.5685176,65.5976562 65.3393532,65.3854188 65.2403944,64.9609375 Z M65.1271131,64.5429687 L65.1271131,63.4453125 L64.8693006,63.4375 C64.4474235,63.4375 64.1062811,63.5175773 63.8458631,63.6777344 C63.5854452,63.8378914 63.4552381,64.0481758 63.4552381,64.3085937 C63.4552381,64.4934905 63.5203416,64.6497389 63.6505506,64.7773437 C63.7807596,64.9049486 63.9396122,64.96875 64.1271131,64.96875 C64.4474272,64.96875 64.7807572,64.8268243 65.1271131,64.5429687 Z M67.4707031,65.5 L67.4707031,61.2578125 L68.2402344,61.2578125 L68.2402344,62.0546875 C68.6152362,61.4609345 69.0970023,61.1640625 69.6855469,61.1640625 C70.253258,61.1640625 70.6399729,61.4609345 70.8457031,62.0546875 C71.2102883,61.4583304 71.6842419,61.1601562 72.2675781,61.1601562 C72.64258,61.1601562 72.9329417,61.2701812 73.1386719,61.4902344 C73.3444021,61.7102876 73.4472656,62.0182272 73.4472656,62.4140625 L73.4472656,65.5 L72.6738281,65.5 L72.6738281,62.5351562 C72.6738281,62.0507788 72.4824238,61.8085937 72.0996094,61.8085937 C71.7011699,61.8085937 71.2832053,62.091143 70.8457031,62.65625 L70.8457031,65.5 L70.0722656,65.5 L70.0722656,62.5351562 C70.0722656,62.0481746 69.8769551,61.8046875 69.4863281,61.8046875 C69.0983054,61.8046875 68.6829449,62.0885388 68.2402344,62.65625 L68.2402344,65.5 L67.4707031,65.5 Z M78.0486681,65.3632812 C77.5330405,65.519532 77.0916387,65.5976562 76.7244494,65.5976562 C76.0994463,65.5976562 75.5896857,65.389976 75.1951525,64.9746094 C74.8006193,64.5592427 74.6033556,64.0208366 74.6033556,63.359375 C74.6033556,62.7161426 74.777182,62.1888041 75.12484,61.7773437 C75.472498,61.3658834 75.917155,61.1601562 76.4588244,61.1601562 C76.9718478,61.1601562 77.3683282,61.3424461 77.6482775,61.7070312 C77.9282268,62.0716164 78.0681994,62.5898404 78.0681994,63.2617187 L78.0642931,63.5 L75.3885119,63.5 C75.5004916,64.5078175 75.9939763,65.0117187 76.8689806,65.0117187 C77.1892947,65.0117187 77.58252,64.9257821 78.0486681,64.7539062 L78.0486681,65.3632812 Z M75.4236681,62.921875 L77.2947619,62.921875 C77.2947619,62.1328086 77.000494,61.7382812 76.4119494,61.7382812 C75.8208006,61.7382812 75.4913768,62.1328086 75.4236681,62.921875 Z" id="Name" fill="#000000"></path>
</g>
</svg>

После

Ширина:  |  Высота:  |  Размер: 3.9 KiB

Просмотреть файл

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="141px" height="3px" viewBox="0 0 141 3" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<title>0,0</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon id="0,0" fill="#979797" fill-rule="nonzero" points="0.5 2.5 0.5 0.5 140.5 0.5 140.5 2.5"></polygon>
</g>
</svg>

После

Ширина:  |  Высота:  |  Размер: 570 B

Просмотреть файл

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="139px" height="3px" viewBox="0 0 139 3" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<title>1,2</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M0.5,2.84651275 L0.5,0.846512754 L2.5,0.846512754 L2.5,2.84651275 L0.5,2.84651275 Z M4.5,2.84651275 L4.5,0.846512754 L6.5,0.846512754 L6.5,2.84651275 L4.5,2.84651275 Z M8.5,2.84651275 L8.5,0.846512754 L10.5,0.846512754 L10.5,2.84651275 L8.5,2.84651275 Z M12.5,2.84651275 L12.5,0.846512754 L14.5,0.846512754 L14.5,2.84651275 L12.5,2.84651275 Z M16.5,2.84651275 L16.5,0.846512754 L18.5,0.846512754 L18.5,2.84651275 L16.5,2.84651275 Z M20.5,2.84651275 L20.5,0.846512754 L22.5,0.846512754 L22.5,2.84651275 L20.5,2.84651275 Z M24.5,2.84651275 L24.5,0.846512754 L26.5,0.846512754 L26.5,2.84651275 L24.5,2.84651275 Z M28.5,2.84651275 L28.5,0.846512754 L30.5,0.846512754 L30.5,2.84651275 L28.5,2.84651275 Z M32.5,2.84651275 L32.5,0.846512754 L34.5,0.846512754 L34.5,2.84651275 L32.5,2.84651275 Z M36.5,2.84651275 L36.5,0.846512754 L38.5,0.846512754 L38.5,2.84651275 L36.5,2.84651275 Z M40.5,2.84651275 L40.5,0.846512754 L42.5,0.846512754 L42.5,2.84651275 L40.5,2.84651275 Z M44.5,2.84651275 L44.5,0.846512754 L46.5,0.846512754 L46.5,2.84651275 L44.5,2.84651275 Z M48.5,2.84651275 L48.5,0.846512754 L50.5,0.846512754 L50.5,2.84651275 L48.5,2.84651275 Z M52.5,2.84651275 L52.5,0.846512754 L54.5,0.846512754 L54.5,2.84651275 L52.5,2.84651275 Z M56.5,2.84651275 L56.5,0.846512754 L58.5,0.846512754 L58.5,2.84651275 L56.5,2.84651275 Z M60.5,2.84651275 L60.5,0.846512754 L62.5,0.846512754 L62.5,2.84651275 L60.5,2.84651275 Z M64.5,2.84651275 L64.5,0.846512754 L66.5,0.846512754 L66.5,2.84651275 L64.5,2.84651275 Z M68.5,2.84651275 L68.5,0.846512754 L70.5,0.846512754 L70.5,2.84651275 L68.5,2.84651275 Z M72.5,2.84651275 L72.5,0.846512754 L74.5,0.846512754 L74.5,2.84651275 L72.5,2.84651275 Z M76.5,2.84651275 L76.5,0.846512754 L78.5,0.846512754 L78.5,2.84651275 L76.5,2.84651275 Z M80.5,2.84651275 L80.5,0.846512754 L82.5,0.846512754 L82.5,2.84651275 L80.5,2.84651275 Z M84.5,2.84651275 L84.5,0.846512754 L86.5,0.846512754 L86.5,2.84651275 L84.5,2.84651275 Z M88.5,2.84651275 L88.5,0.846512754 L90.5,0.846512754 L90.5,2.84651275 L88.5,2.84651275 Z M92.5,2.84651275 L92.5,0.846512754 L94.5,0.846512754 L94.5,2.84651275 L92.5,2.84651275 Z M96.5,2.84651275 L96.5,0.846512754 L98.5,0.846512754 L98.5,2.84651275 L96.5,2.84651275 Z M100.5,2.84651275 L100.5,0.846512754 L102.5,0.846512754 L102.5,2.84651275 L100.5,2.84651275 Z M104.5,2.84651275 L104.5,0.846512754 L106.5,0.846512754 L106.5,2.84651275 L104.5,2.84651275 Z M108.5,2.84651275 L108.5,0.846512754 L110.5,0.846512754 L110.5,2.84651275 L108.5,2.84651275 Z M112.5,2.84651275 L112.5,0.846512754 L114.5,0.846512754 L114.5,2.84651275 L112.5,2.84651275 Z M116.5,2.84651275 L116.5,0.846512754 L118.5,0.846512754 L118.5,2.84651275 L116.5,2.84651275 Z M120.5,2.84651275 L120.5,0.846512754 L122.5,0.846512754 L122.5,2.84651275 L120.5,2.84651275 Z M124.5,2.84651275 L124.5,0.846512754 L126.5,0.846512754 L126.5,2.84651275 L124.5,2.84651275 Z M128.5,2.84651275 L128.5,0.846512754 L130.5,0.846512754 L130.5,2.84651275 L128.5,2.84651275 Z M132.5,2.84651275 L132.5,0.846512754 L134.5,0.846512754 L134.5,2.84651275 L132.5,2.84651275 Z M136.5,2.84651275 L136.5,0.846512754 L138.5,0.846512754 L138.5,2.84651275 L136.5,2.84651275 Z" id="1,2" fill="#979797" fill-rule="nonzero"></path>
</g>
</svg>

После

Ширина:  |  Высота:  |  Размер: 3.6 KiB

Просмотреть файл

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="141px" height="3px" viewBox="0 0 141 3" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<title>3,3</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M0.5,2.84651275 L0.5,0.846512754 L4.5,0.846512754 L4.5,2.84651275 L0.5,2.84651275 Z M8.5,2.84651275 L8.5,0.846512754 L12.5,0.846512754 L12.5,2.84651275 L8.5,2.84651275 Z M16.5,2.84651275 L16.5,0.846512754 L20.5,0.846512754 L20.5,2.84651275 L16.5,2.84651275 Z M24.5,2.84651275 L24.5,0.846512754 L28.5,0.846512754 L28.5,2.84651275 L24.5,2.84651275 Z M32.5,2.84651275 L32.5,0.846512754 L36.5,0.846512754 L36.5,2.84651275 L32.5,2.84651275 Z M40.5,2.84651275 L40.5,0.846512754 L44.5,0.846512754 L44.5,2.84651275 L40.5,2.84651275 Z M48.5,2.84651275 L48.5,0.846512754 L52.5,0.846512754 L52.5,2.84651275 L48.5,2.84651275 Z M56.5,2.84651275 L56.5,0.846512754 L60.5,0.846512754 L60.5,2.84651275 L56.5,2.84651275 Z M64.5,2.84651275 L64.5,0.846512754 L68.5,0.846512754 L68.5,2.84651275 L64.5,2.84651275 Z M72.5,2.84651275 L72.5,0.846512754 L76.5,0.846512754 L76.5,2.84651275 L72.5,2.84651275 Z M80.5,2.84651275 L80.5,0.846512754 L84.5,0.846512754 L84.5,2.84651275 L80.5,2.84651275 Z M88.5,2.84651275 L88.5,0.846512754 L92.5,0.846512754 L92.5,2.84651275 L88.5,2.84651275 Z M96.5,2.84651275 L96.5,0.846512754 L100.5,0.846512754 L100.5,2.84651275 L96.5,2.84651275 Z M104.5,2.84651275 L104.5,0.846512754 L108.5,0.846512754 L108.5,2.84651275 L104.5,2.84651275 Z M112.5,2.84651275 L112.5,0.846512754 L116.5,0.846512754 L116.5,2.84651275 L112.5,2.84651275 Z M120.5,2.84651275 L120.5,0.846512754 L124.5,0.846512754 L124.5,2.84651275 L120.5,2.84651275 Z M128.5,2.84651275 L128.5,0.846512754 L132.5,0.846512754 L132.5,2.84651275 L128.5,2.84651275 Z M136.5,2.84651275 L136.5,0.846512754 L140.5,0.846512754 L140.5,2.84651275 L136.5,2.84651275 Z" id="3,3" fill="#979797" fill-rule="nonzero"></path>
</g>
</svg>

После

Ширина:  |  Высота:  |  Размер: 2.1 KiB

Просмотреть файл

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="139px" height="2px" viewBox="0 0 139 2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<title>4,4,1</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M0.5,2 L0.5,0 L10.5,0 L10.5,2 L0.5,2 Z M12.5,2 L12.5,0 L14.5,0 L14.5,2 L12.5,2 Z M16.5,2 L16.5,0 L26.5,0 L26.5,2 L16.5,2 Z M28.5,2 L28.5,0 L30.5,0 L30.5,2 L28.5,2 Z M32.5,2 L32.5,0 L42.5,0 L42.5,2 L32.5,2 Z M44.5,2 L44.5,0 L46.5,0 L46.5,2 L44.5,2 Z M48.5,2 L48.5,0 L58.5,0 L58.5,2 L48.5,2 Z M60.5,2 L60.5,0 L62.5,0 L62.5,2 L60.5,2 Z M64.5,2 L64.5,0 L74.5,0 L74.5,2 L64.5,2 Z M76.5,2 L76.5,0 L78.5,0 L78.5,2 L76.5,2 Z M80.5,2 L80.5,0 L90.5,0 L90.5,2 L80.5,2 Z M92.5,2 L92.5,0 L94.5,0 L94.5,2 L92.5,2 Z M96.5,2 L96.5,0 L106.5,0 L106.5,2 L96.5,2 Z M108.5,2 L108.5,0 L110.5,0 L110.5,2 L108.5,2 Z M112.5,2 L112.5,0 L122.5,0 L122.5,2 L112.5,2 Z M124.5,2 L124.5,0 L126.5,0 L126.5,2 L124.5,2 Z M128.5,2 L128.5,0 L138.5,0 L138.5,2 L128.5,2 Z" id="4,4,1" fill="#979797" fill-rule="nonzero"></path>
</g>
</svg>

После

Ширина:  |  Высота:  |  Размер: 1.2 KiB

Просмотреть файл

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="141px" height="3px" viewBox="0 0 141 3" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<title>5,3</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M0.5,2.84651275 L0.5,0.846512754 L10.5,0.846512754 L10.5,2.84651275 L0.5,2.84651275 Z M13.5,2.84651275 L13.5,0.846512754 L23.5,0.846512754 L23.5,2.84651275 L13.5,2.84651275 Z M26.5,2.84651275 L26.5,0.846512754 L36.5,0.846512754 L36.5,2.84651275 L26.5,2.84651275 Z M39.5,2.84651275 L39.5,0.846512754 L49.5,0.846512754 L49.5,2.84651275 L39.5,2.84651275 Z M52.5,2.84651275 L52.5,0.846512754 L62.5,0.846512754 L62.5,2.84651275 L52.5,2.84651275 Z M65.5,2.84651275 L65.5,0.846512754 L75.5,0.846512754 L75.5,2.84651275 L65.5,2.84651275 Z M78.5,2.84651275 L78.5,0.846512754 L88.5,0.846512754 L88.5,2.84651275 L78.5,2.84651275 Z M91.5,2.84651275 L91.5,0.846512754 L101.5,0.846512754 L101.5,2.84651275 L91.5,2.84651275 Z M104.5,2.84651275 L104.5,0.846512754 L114.5,0.846512754 L114.5,2.84651275 L104.5,2.84651275 Z M117.5,2.84651275 L117.5,0.846512754 L127.5,0.846512754 L127.5,2.84651275 L117.5,2.84651275 Z M130.5,2.84651275 L130.5,0.846512754 L140.5,0.846512754 L140.5,2.84651275 L130.5,2.84651275 Z" id="5,3" fill="#979797" fill-rule="nonzero"></path>
</g>
</svg>

После

Ширина:  |  Высота:  |  Размер: 1.5 KiB

Разница между файлами не показана из-за своего большого размера Загрузить разницу

335
assets/index.css Normal file

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

441
index.html Normal file
Просмотреть файл

@ -0,0 +1,441 @@
<!DOCTYPE html>
<head>
<script src="https://cdn.syncfusion.com/ej2/20.3.47/dist/ej2.min.js" type="text/javascript"></script>
<link href="https://cdn.syncfusion.com/ej2/20.3.47/fluent.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/ej2-buttons/styles/fluent.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/20.3.47/ej2-base/styles/fluent.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/20.3.47/ej2-popups/styles/fluent.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/20.3.47/ej2-splitbuttons/styles/fluent.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/20.3.47/ej2-navigations/styles/fluent.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/20.3.47/ej2-inputs/styles/fluent.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/20.3.47/ej2-dropdowns/styles/fluent.css" rel="stylesheet">
<link href="./assets/Diagram_Builder_icon_v4/Diagram_Builder_Icon/style.css" rel="stylesheet">
<link href="./assets/index.css" rel="stylesheet">
<link href="./assets/dbstyle/diagrambuilder.css" rel="stylesheet"/>
</head>
<body>
<style>.e-file-select-wrap {
display: none;
}
#designContextMenu{
width: 50px;
}
.db-toolbar-container{
width: 100% !important;
}
#js-licensing{
display: none;
}
</style>
<!-- <div class="sb-content-overlay">
<div class="sb-loading">
<svg class="circular" height="40" width="40">
<circle class="loadingPath" cx="25" cy="25" r="20" fill="none" stroke-width="6" stroke-miterlimit="10"></circle>
</svg>
</div>
</div>
<div id="content-area" style="height: 100%">
</div> -->
<input type="file" id="fileupload" name="UploadFiles">
<ul id = "designContextMenu"></ul>
<div class='diagrambuilder-container' >
<div class='header navbar'>
<div class="db-header-container">
<div class="db-diagram-name-container">
<span id='diagramName' style="width:250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" class="db-diagram-name" onclick="renameDiagram(event)">Untitled Diagram</span>
<input id='diagramEditable' type="text" class="db-diagram-name" onkeydown="diagramNameKeyDown(event)" onfocusout= "diagramNameChange(event)"/>
<span id='diagramreport' class="db-diagram-name db-save-text"></span>
</div>
<div class='db-menu-container'>
<div class="db-menu-style">
<button id="btnFileMenu"></button>
</div>
<div class="db-menu-style">
<button id="btnEditMenu"></button>
</div>
<div class="db-menu-style">
<button id="btnInsertMenu"></button>
</div>
<div class="db-menu-style">
<button id="btnDesignMenu"></button>
</div>
<div class="db-menu-style">
<button id="btnViewMenu"></button>
</div>
</div>
</div>
<div class='db-toolbar-editor' >
<div class='db-toolbar-container'>
<div id="toolbarEditor" >
</div>
</div>
</div>
</div>
<div class='row content'>
<div class='sidebar show-overview'>
<div class="db-palette-parent">
<div id="symbolpalette"></div>
</div>
</div>
<div class='main-content' role='main'>
<div class="db-diagram-container">
<div id="diagramContainerDiv" class='db-current-diagram-container'>
<div id="diagram"></div>
</div>
</div>
<div class='db-property-editor-container' style="overflow:auto;">
<div id="generalDiagramContainer" class="db-general-diagram-prop-container">
<div id='diagramPropertyContainer' class="db-diagram-prop-container">
<div class="row db-prop-header-text">
Page Settings
<button class="close" onclick="UtilityMethods.prototype.hideElements('hide-properties',diagram)"><i style="width: 20px;height: 20px;font-size:20px" class="sf-icon-close"></i></button>
</div>
<div class="db-prop-separator" style="background-color: #b5b5b5;margin-bottom: 10px;">
</div>
<div class="row db-prop-row">
<div class="col-xs-12 db-col-left">
<span class="db-prop-text-style">Format</span>
<input type="text" id='pageSettingsList' />
</div>
</div>
<div class="row" id="pageOrientation" style="margin-top: 10px;">
<div class="row db-prop-row">
<div class="col-xs-6 db-col-right" >
<span class="db-prop-text-style">Orientation</span>
</div>
</div>
<div class="col-xs-6 db-col-left">
<button style="font-size: 10px;" id="pagePortrait">Portrait</button>
</div>
<div class="col-xs-6 db-col-right" >
<button style="font-size: 10px;" id="pageLandscape">LandScape</button>
</div>
</div>
<div class="row db-prop-row" id='pageDimension' style="display:none">
<div class="col-xs-6 db-col-left">
<div class="db-text-container">
<div class="db-text">
<span>W</span>
</div>
<div class="db-text-input">
<input id="pageWidth" type="text" />
</div>
</div>
</div>
<div class="col-xs-6 db-col-right">
<div class="db-text-container">
<div class="db-text">
<span>H</span>
</div>
<div class="db-text-input">
<input id="pageHeight" type="text" />
</div>
</div>
</div>
</div>
<div class="row db-prop-row" style="margin-top: 10px;">
<div class="col-xs-6 db-col-left">
<span class="db-prop-text-style">Background</span>
</div>
</div>
<div class="row">
<div class="col-xs-6 db-col-left">
<div class="db-color-container">
<div class="db-color-input">
<input id="pageBgColor" type="color">
</div>
</div>
</div>
</div>
<div class="row db-prop-row" style="margin-top: 10px;">
<input id="showPageBreaks" type="checkbox" />
</div>
</div>
<div id='nodePropertyContainer' class="db-node-prop-container" style="display:none">
<div class="db-node-behaviour-prop" id="dimen">
<div class="row db-prop-header-text">
Properties
<button class="close" onclick="UtilityMethods.prototype.hideElements('hide-properties',diagram)"><i style="width: 20px;height: 20px;font-size:20px" class="sf-icon-close"></i></button>
</div>
<div class="db-prop-separator" style="background-color: #b5b5b5;margin-bottom: 10px;">
</div>
<div class="row db-prop-row">
<div class="col-xs-6 db-col-right" >
<span class="db-prop-text-style">Dimensions</span>
</div>
</div>
<div class="row db-prop-row">
<div class="col-xs-6 db-col-left" style="width: 97px;" >
<div class="db-text-container">
<div class="db-text">
<span>X</span>
</div>
<div class="db-text-input">
<input style="width: 72px;" id="nodeOffsetX" type="text" />
</div>
</div>
</div>
<div class="col-xs-6 db-col-right" style="width: 97px;">
<div class="db-text-container">
<div class="db-text">
<span>Y</span>
</div>
<div class="db-text-input">
<input style="width: 72px;" id="nodeOffsetY" type="text" />
</div>
</div>
</div>
</div>
<div class="row db-prop-row">
<div class="col-xs-6 db-col-left" style="width: 97px;">
<div class="db-text-container">
<div class="db-text">
<span>W</span>
</div>
<div class="db-text-input">
<input style="width: 72px;" id="nodeWidth" type="text" />
</div>
</div>
</div>
<div class="col-xs-6 db-col-right" style="width: 97px;">
<div class="db-text-container">
<div class="db-text">
<span>H</span>
</div>
<div class="db-text-input">
<input style="width: 72px;" id="nodeHeight" type="text" />
</div>
</div>
</div>
<div class="col-xs-2 db-col-left" style="width: 20px;padding-left:7px">
<button style="height: 26px; background-color: #ffff;" id="aspectRatioBtn"></button>
</div>
</div>
<div class="row db-prop-row">
<div class="col-xs-6 db-col-left" style="width: 97px;">
<div class="db-text-container">
<div class="db-text">
<button style="margin: -5px 0px 0px 0px;" id="rotateIconBtn"></button>
</div>
<div class="db-text-input">
<input style="width: 72px;" id="nodeRotateAngle" type="text" />
</div>
</div>
</div>
</div>
<div class="db-prop-separator" style="background-color: #b5b5b5;margin-bottom: 15px;">
</div>
<div class="row db-prop-row">
<div class="col-xs-6 db-col-left">
<button style="font-size: 10px;" id="insertlink">Insert link</button>
</div>
<div class="col-xs-6 db-col-left">
<button style="font-size: 10px;margin-left: 5px;" id="insertimage">Insert image</button>
</div>
</div>
<div class="db-prop-separator" style="background-color: #b5b5b5;">
</div>
</div>
<div id='nodeStyleProperties' class="db-node-style-prop">
<div class="row db-background-style">
<div class="col-xs-6 db-col-right" style="margin-bottom: 3px;">
<span class="db-prop-text-style">Background color</span>
</div>
<div class="row db-prop-row">
</div>
<div class="col-xs-6 db-col-left">
<div class="db-color-container">
<div class="db-color-input">
<input id="nodeFillColor" type="color">
</div>
</div>
</div>
</div>
<div class="row db-border-style">
<div class="row db-prop-header-text db-border-style-header">
Border/Line Styles
</div>
<div class="row db-prop-row">
<div class="col-xs-6 db-col-right" >
<span class="db-prop-text-style">Border Type</span>
</div>
<div class="col-xs-2 db-col-left" style="margin-left: -6px;">
<span class="db-prop-text-style">Color</span>
</div>
<div class="col-xs-2 db-col-center" style="margin-left: 6px;">
<span class="db-prop-text-style">Thickness</span>
</div>
</div>
<div class="row">
<div class="col-xs-6 db-col-right" style="width: 77px;margin-right: 0px;">
<input type="text" id='nodeBorderStyle' />
</div>
<div class="col-xs-2 db-col-center" >
<div class="db-color-container" style="width: 60px;margin-left: 2px;">
<div class="db-color-input">
<input id="nodeStrokeColor" type="color">
</div>
</div>
</div>
<div class="col-xs-2 db-col-right" style="width: 73px;margin-left: 32px;">
<div class="db-text-container">
<div class="db-text-input" >
<input style="width: 68px;" id="nodeStrokeWidth" type="text" /></div>
</div>
</div>
</div>
<div class="row db-prop-row">
<div class="col-xs-2 db-col-right db-prop-text-style" style="margin-right: 5px;padding-top: 6px">
<span class="db-prop-text-style">Opacity</span>
</div>
<div class="col-xs-8 db-col-left" style="width: 120px;padding-right: 10px;margin-left: 10px;">
<div id='nodeOpacitySlider'></div>
</div>
<div class="col-xs-2 db-col-right" style="width: 50px;">
<input id="nodeOpacitySliderText" type="text" value= '100%' readOnly="true" class="db-readonly-input" />
</div>
</div>
</div>
</div>
</div>
<div id='connectorPropertyContainer' class="db-connector-prop-container" style="display:none">
<div class="row db-prop-header-text">
Connector Properties
</div>
<div class="db-prop-separator" style="background-color: #b5b5b5;"></div>
<div class="row db-prop-row">
<!-- <div class="col-xs-6 db-col-left db-prop-text-style">
<span class="db-prop-text-style">Connector Type</span>
</div> -->
<div class="col-xs-6 db-col-left db-prop-text-style">
<span class="db-prop-text-style">Line color</span>
</div>
<div class="col-xs-4 db-col-right db-prop-text-style" style="margin-left: 18px;">
<span class="db-prop-text-style">Thickness</span>
</div>
</div>
<div class="row">
<!-- <div class="col-xs-6 db-col-left">
<input type="text" id='lineTypeDropdown' />
</div> -->
<div class="col-xs-6 db-col-left">
<div class="db-color-container">
<div class="db-color-input">
<input id="lineColor" type="color">
</div>
<!-- <div class="db-color-btn">
<button id="lineColorIconBtn"></button>
</div> -->
</div>
</div>
<div class="col-xs-6 db-col-right">
<div class="db-text-container" style="width: 77px; margin-left: 20px;">
<div class="db-text-input">
<input style="width: 74px;" id="lineWidth" type="text" />
</div>
</div>
</div>
</div>
<!-- <div class="row db-prop-row">
</div> -->
<!-- <div class="row">
<div class="col-xs-4 db-col-right">
<input id="lineWidth" type="text" />
</div>
</div> -->
<div class="row db-prop-row">
<div class="col-xs-2 db-col-right db-prop-text-style" style="margin-right: 3px;padding-top: 6px">
<span class="db-prop-text-style">Opacity</span>
</div>
<div class="col-xs-8 db-col-left" style="width: 120px;padding-right:10px;margin-left: 10px;">
<div id='default1'></div>
</div>
<div class="col-xs-2 db-col-left" style="width:50px">
<input type="text" id="connectorOpacitySliderText" value= '100%' readonly="true" class="db-readonly-input" />
</div>
</div>
</div>
<div id='textPropertyContainer' class="db-text-prop-container" style="display:none">
<div class="db-prop-separator" style="background-color: #b5b5b5;">
</div>
<div class="col-xs-8 db-col-left db-prop-text-style">
<span class="db-prop-text-style">Text</span>
</div>
<div class="col-xs-4 db-col-left db-prop-text-style">
<span class="db-prop-text-style">Size</span>
</div>
<div class="row db-prop-row">
<div class="col-xs-8 db-col-left">
<input type="text" id='fontFamily' />
</div>
<div class="col-xs-4 db-col-right">
<div class="db-text-container">
<div class="db-text-input">
<input style="width: 75px;" id="fontSizeTextProperties" type="text" />
</div>
</div>
</div>
</div>
<div class="row db-prop-row">
<div class="col-xs-6 db-col-left" id="textPositionDiv" style="width:120px">
<input type="text" id='ddlTextPosition' />
</div>
<div class="col-xs-4 db-col-right" id="textColorDiv" style="width: 95px;margin-left:4px">
<div class="db-color-container">
<div class="db-color-input">
<input id="textColor" type="color">
</div>
</div>
</div>
</div>
<div class="row db-prop-row">
<div class="col-xs-6 db-col-left">
<div id="toolbarTextStyle"></div>
</div>
<div class="col-xs-6 db-col-right">
<div id="toolbarTextSubAlignment"></div>
</div>
</div>
<div class="row db-prop-row" id='toolbarTextAlignmentDiv'>
<div id="toolbarTextAlignment"></div>
</div>
<div class="row db-prop-row">
<div class="col-xs-2 db-col-right db-prop-text-style" style="margin-right: 3px;padding-top: 6px">
<span class="db-prop-text-style">Opacity</span>
</div>
<div class="col-xs-8 db-col-left" style="width: 120px;padding-right: 10px;margin-left: 5px;">
<div id='opacityTextSlider'></div>
</div>
<div class="col-xs-2 db-col-right" style="width: 50px;">
<input id='textOpacityText' type="text" value='100%' class="db-readonly-input" readOnly="true"/>
</div>
</div>
<!-- <div class="db-prop-separator" style="background-color: #b5b5b5;"></div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="hyperlinkDialog"></div>
<div id="exportDialog"></div>
<div id="printDialog"></div>
<div id="fileUploadDialog"></div>
<script src="./scripts/events.js" type="text/javascript"></script>
<script src="./scripts/dropdowndatasource.js" type="text/javascript"></script>
<script src="./scripts/properties.js" type="text/javascript"></script>
<script src="./scripts/utilitymethods.js" type="text/javascript"></script>
<script src="./scripts/index.js" type="text/javascript"></script>
</body>
</html>

Просмотреть файл

@ -0,0 +1,125 @@
var DropDownDataSources = (function () {
function DropDownDataSources() {
};
DropDownDataSources.prototype.getFileMenuItems = function()
{
var items =[
{ text : 'New', iconCss:'sf-icon-new'},
{ text : 'Open', iconCss:'sf-icon-open'},
{ text : 'Save', iconCss:'sf-icon-save'},
{ text : 'Export', iconCss:'sf-icon-export',items:[{ text: 'JPG' }, { text: 'PNG' },
{ text: 'BMP' }, { text: 'SVG' }]},
{ text : 'Print' ,iconCss:'sf-icon-print'},
];
return items;
};
DropDownDataSources.prototype.getEditMenuItems = function()
{
var items = [{ text : 'Undo', iconCss:'sf-icon-undo'},
{ text : 'Redo', iconCss:'sf-icon-redo'},
{ separator: true },
{ text : 'Copy', iconCss:'sf-icon-copy'},
{ text : 'Cut', iconCss:'sf-icon-cut'},
{ text : 'Paste', iconCss:'sf-icon-paste'},
{ separator: true },
{ text: 'Delete', iconCss: 'sf-icon-delete'}
];
return items;
};
DropDownDataSources.prototype.getInsertMenuItems = function()
{
var items = [
{ text: 'Insert Image',tooltipText:'Insert Image' ,iconCss:'sf-icon-insert_image '},
{ text: 'Insert Link', tooltipText:'Insert link',iconCss: 'sf-icon-insert_link '},
]
return items;
};
DropDownDataSources.prototype.getDesignMenuItems = function()
{
var items = [
{ text: 'Orientation', items:[{ text : 'Landscape',iconCss: 'sf-icon-check-tick'},{text : 'Portrait'}]},
{ text: 'Page Size' , items:[
{ text: 'Letter (8.5 in x 11 in)', value: 'Letter',iconCss:'sf-icon-check-tick' }, { text: 'Legal (8.5 in x 14 in)', value: 'Legal' },
{ text: 'Tabloid (279 mm x 432 mm)', value: 'Tabloid' }, { text: 'A3 (297 mm x 420 mm)', value: 'A3' },
{ text: 'A4 (210 mm x 297 mm)', value: 'A4' }, { text: 'A5 (148 mm x 210 mm)', value: 'A5' },
{ text: 'A6 (105 mm x 148 mm)', value: 'A6' },
]},
]
return items;
};
DropDownDataSources.prototype.getViewMenuItems = function()
{
var items = [
{ text: 'Show Rulers', iconCss: 'sf-icon-check-tick' },
{ text: 'Show Grid', iconCss: 'sf-icon-check-tick' }, { separator: true },
{ text: 'Snap To Grid' },
{ text: 'Show Guides', iconCss: 'sf-icon-check-tick' },
{ text: 'Page Break'},{ separator: true },
{ text: 'Fit To Screen' }, { separator: true },
]
return items;
};
DropDownDataSources.prototype.paperList = function()
{
var paperList = [
{ text: 'Letter (8.5 in x 11 in)', value: 'Letter' }, { text: 'Legal (8.5 in x 14 in)', value: 'Legal' },
{ text: 'Tabloid (279 mm x 432 mm)', value: 'Tabloid' }, { text: 'A3 (297 mm x 420 mm)', value: 'A3' },
{ text: 'A4 (210 mm x 297 mm)', value: 'A4' }, { text: 'A5 (148 mm x 210 mm)', value: 'A5' },
{ text: 'A6 (105 mm x 148 mm)', value: 'A6' }, { text: 'Custom', value: 'Custom' },
];
return paperList;
};
DropDownDataSources.prototype.fileFormats= function()
{
var fileFormats = [
{ text: 'JPG', value: 'JPG' }, { text: 'PNG', value: 'PNG' },
{ text: 'BMP', value: 'BMP' }, { text: 'SVG', value: 'SVG' }
];
return fileFormats;
};
DropDownDataSources.prototype.diagramRegions = function()
{
var diagramRegions = [
{ text: 'Content', value: 'Content' }, { text: 'PageSettings', value: 'PageSettings' }
];
return diagramRegions;
};
DropDownDataSources.prototype.borderStyles= function()
{
var borderStyles = [
{ text: '', value: '', className: 'ddl-svg-style ddl_linestyle_none' },
{ text: '1,2', value: '1,2', className: 'ddl-svg-style ddl_linestyle_one_two' },
{ text: '3,3', value: '3,3', className: 'ddl-svg-style ddl_linestyle_three_three' },
{ text: '5,3', value: '5,3', className: 'ddl-svg-style ddl_linestyle_five_three' },
{ text: '4,4,1', value: '4,4,1', className: 'ddl-svg-style ddl_linestyle_four_four_one' }
];
return borderStyles;
};
DropDownDataSources.prototype.fontFamilyList = function()
{
var fontFamilyList = [
{ text: 'Arial', value: 'Arial' },
{ text: 'Aharoni', value: 'Aharoni' },
{ text: 'Bell MT', value: 'Bell MT' },
{ text: 'Fantasy', value: 'Fantasy' },
{ text: 'Times New Roman', value: 'Times New Roman' },
{ text: 'Segoe UI', value: 'Segoe UI' },
{ text: 'Verdana', value: 'Verdana' },
];
return fontFamilyList;
};
DropDownDataSources.prototype.textPositionDataSource = function()
{
var textPosition = [
{ text: 'TopLeft', value: 'TopLeft' }, { text: 'TopCenter', value: 'TopCenter' },
{ text: 'TopRight', value: 'TopRight' }, { text: 'MiddleLeft', value: 'MiddleLeft' },
{ text: 'Center', value: 'Center' }, { text: 'MiddleRight', value: 'MiddleRight' },
{ text: 'BottomLeft', value: 'BottomLeft' }, { text: 'BottomCenter', value: 'BottomCenter' },
{ text: 'BottomRight', value: 'BottomRight' },
];
return textPosition;
};
return DropDownDataSources;
}());

474
scripts/events.js Normal file
Просмотреть файл

@ -0,0 +1,474 @@
var DiagramClientSideEvents = (function () {
function DiagramClientSideEvents(){
//Method define the selection change in the diagram
DiagramClientSideEvents.prototype.selectionChange = function (args)
{
if(args.state === 'Changed')
{
{
var selectedItems = diagram.selectedItems.nodes;
selectedItems = selectedItems.concat(diagram.selectedItems.connectors);
enableToolbarItems(selectedItems);
var nodeContainer = document.getElementById('nodePropertyContainer');
nodeContainer.classList.remove('multiple');
nodeContainer.classList.remove('connector');
if (selectedItems.length > 1) {
this.multipleSelectionSettings(selectedItems);
toolbarEditor.items[8].tooltipText = 'Group';
toolbarEditor.items[8].prefixIcon = 'sf-icon-group';
toolbarEditor.items[8].template = '';
this.multipleSelection();
toolbarEditor.hideItem(9,false);
toolbarEditor.hideItem(18,false);
toolbarEditor.hideItem(23,false);
toolbarEditor.hideItem(26,false);
toolbarEditor.hideItem(29,false);
toolbarEditor.hideItem(32,true);
}
else if (selectedItems.length === 1) {
this.singleSelectionSettings(selectedItems[0]);
UtilityMethods.prototype.onClickDisable(false);
toolbarEditor.hideItem(9,true);
toolbarEditor.hideItem(18,false);
toolbarEditor.hideItem(23,false);
toolbarEditor.hideItem(26,false);
toolbarEditor.hideItem(29,false)
if(selectedItems[0].children && selectedItems[0].children.length>0)
{
toolbarEditor.items[8].tooltipText = 'UnGroup';
toolbarEditor.items[8].prefixIcon = 'sf-icon-ungroup';
toolbarEditor.items[8].disabled = false;
toolbarEditor.items[8].template = '';
}
}
else {
this.objectTypeChange('diagram');
UtilityMethods.prototype.onClickDisable(true);
toolbarEditor.hideItem(9,true);
toolbarEditor.hideItem(18,true);
toolbarEditor.hideItem(23,true);
toolbarEditor.hideItem(26,true);
toolbarEditor.hideItem(29,true);
}
}
}
}
};
//Method define the position change in the diagram
DiagramClientSideEvents.prototype.positionChange = function(args)
{
if(diagram.selectedItems.nodes.concat(diagram.selectedItems.connectors).length===1){
nodeProperties.offsetX.value = args.newValue.offsetX;
nodeProperties.offsetY.value = args.newValue.offsetY;
}
};
//Method define the size change in the diagram
DiagramClientSideEvents.prototype.sizeChange =function(args)
{
if(diagram.selectedItems.nodes.concat(diagram.selectedItems.connectors).length===1){
nodeProperties.width.value = args.newValue.width;
nodeProperties.height.value = args.newValue.height;
nodeProperties.offsetX.value = args.newValue.offsetX;
nodeProperties.offsetY.value = args.newValue.offsetY;
}
};
//Method define the rotation change in the diagram
DiagramClientSideEvents.prototype.rotateChange =function(args)
{
if(args.state === 'Start' || args.state === 'Progress')
{
diagram.selectedItems = { constraints: ej.diagrams.SelectorConstraints.None};
}
if(args.state === 'Completed'){
diagram.selectedItems = { constraints: ej.diagrams.SelectorConstraints.All|ej.diagrams.SelectorConstraints.UserHandle };
}
if(diagram.selectedItems.nodes.concat(diagram.selectedItems.connectors).length===1){
nodeProperties.rotateAngle.value = args.newValue.rotateAngle;
}
};
//Method define the history change in the diagram
DiagramClientSideEvents.prototype.historyChange = function(args)
{
var toolbarContainer = document.getElementsByClassName('db-toolbar-container')[0];
toolbarContainer.classList.remove('db-undo');
toolbarContainer.classList.remove('db-redo');
if (diagram.historyManager.undoStack.length > 0) {
toolbarContainer.classList.add('db-undo');
}
if (diagram.historyManager.redoStack.length > 0) {
toolbarContainer.classList.add('db-redo');
}
};
//Method define the created change in the diagram
DiagramClientSideEvents.prototype.created= function(args)
{
diagram.fitToPage({ mode: 'Page', region: 'Content'});
// diagram.width = diagram.pageSettings.pageWidth;;
// diagram.height=diagram.pageSettings.pageHeight;;
};
//Method define the drag Enter in the diagram
DiagramClientSideEvents.prototype.dragEnter = function(args) {
if(args.element.id.indexOf('Door close')!== -1 )
{
args.element.width = 40;
args.element.height = 42;
}
else if(args.element.id.indexOf('Double door close')!== -1 ){
args.element.width = 80;
args.element.height = 42;
}
else if(args.element.id.indexOf('Circle Dining Table')!== -1){
args.element.width = 50;
args.element.height = 50;
}
else if(args.element.id.indexOf('Circle Study Table')!== -1 || args.element.id.indexOf('Circle Study Table1')!== -1 || args.element.id.indexOf('Circle Study Table2')!== -1 ||args.element.id.indexOf('Circle Study Table3')!== -1 )
{
args.element.width = 40;
args.element.height =40;
}
else if(args.element.id.indexOf('Rectangle Dining Table')!== -1 ){
args.element.width = 50;
args.element.height = 50;
}
else if(args.element.id.indexOf('Oblong Dining Table')!== -1 || args.element.id.indexOf('Oval Dining Table')!== -1)
{
args.element.width = 90;
args.element.height = 50;
}
else if(args.element.id.indexOf('Rectangular Table for Two')!== -1 || args.element.id.indexOf('Circular Table for Two')!== -1)
{
args.element.width = 50;
args.element.height = 60;
}
else if(args.element.id.indexOf('Rectangle Study Table')!== -1 || args.element.id.indexOf('Rectangle Study Table1')!== -1 )
{
args.element.width = 80;
args.element.height = 40;
}
else if(args.element.id.indexOf('Refrigerator')!== -1 )
{
args.element.width = 52;
args.element.height = 60;
}
else if(args.element.id.indexOf('Stool')!== -1){
args.element.width = 23;
args.element.height = 23;
}
else if( args.element.id.indexOf('Wall Corner')!== -1 || args.element.id.indexOf('Wall Corner1')!== -1 ){
args.element.width = 50;
args.element.height = 50;
}
else if(args.element.id.indexOf('Water Cooler')!== -1 || args.element.id.indexOf('Elevator')!== -1 )
{
args.element.width = 40;
args.element.height = 40;
}
else if(args.element.id.indexOf('Chair1')!== -1){
args.element.width = 25;
args.element.height = 25;
}
else if(args.element.id.indexOf('Chair')!== -1 ||args.element.id.indexOf('Large Plant')!== -1 )
{
args.element.width = 28;
args.element.height =32;
}
else if(args.element.id.indexOf('Double bed')!== -1 || args.element.id.indexOf('Double bed1')!== -1)
{
args.element.width = 100;
args.element.height =90;
}
else if(args.element.id.indexOf('Single bed')!== -1 || args.element.id.indexOf('Single bed1')!== -1)
{
args.element.width = 50;
args.element.height = 90;
}
else if(args.element.id.indexOf('Book Case')!== -1 )
{
args.element.width = 60;
args.element.height =20;
}
else if(args.element.id.indexOf('Warddrobe')!== -1 ||args.element.id.indexOf('Warddrobe1')!== -1){
args.element.width = 73;
args.element.height = 35;
}
else if(args.element.id.indexOf('Small Plant')!== -1 ||args.element.id.indexOf('Lamp light')!== -1)
{
args.element.width = 25;
args.element.height =25;
}
else if(args.element.id.indexOf('Matte')!== -1 || args.element.id.indexOf('Matte1')!== -1)
{
args.element.width = 40;
args.element.height =20;
}
else if(args.element.id.indexOf('Flat TV')!== -1 || args.element.id.indexOf('Flat TV1')!== -1)
{
args.elementwidth = 68;
args.element.height =10;
}
else if(args.element.id.indexOf('TV')!== -1)
{
args.element.width = 40;
args.element.height =25;
}
else if(args.element.id.indexOf('Single Sofa')!== -1|| args.element.id.indexOf('Couch')!== -1 )
{
args.element.width = 45;
args.element.height = 40;
}
else if(args.element.id.indexOf('Sofa')!== -1 || args.element.id.indexOf('Double Sofa')!== -1 || args.element.id.indexOf('Lounge')!== -1)
{
args.element.width = 100;
args.element.height =35;
}
else if(args.element.id.indexOf('Window Garden')!== -1 )
{
args.element.width = 80;
args.element.height = 18;
}
else if(args.element.id.indexOf('Small Gas Range')!== -1){
args.element.width = 80;
args.element.height = 32;
}
else if(args.element.id.indexOf('Large Gas Range')!== -1 || args.element.id.indexOf('Large Gas Range1')!== -1){
args.element.width = 100;
args.element.height = 32;
}
else if( args.element.id.indexOf('Window')!== -1|| args.element.id.indexOf('window1')!== -1 )
{
args.element.width = 50;
args.element.height =6;
}
else if(args.element.id.indexOf('Piano')!== -1)
{
args.element.width = 68;
args.element.height = 71;
}
else if(args.element.id.indexOf('Staircase1')!== -1){
args.element.width = 150;
args.element.height = 100;
}
else if(args.element.id.indexOf('Staircase')!== -1){
args.element.width = 150;
args.element.height = 50;
}
else if( args.element.id.indexOf('Printer')!== -1 ||args.element.id.indexOf('Laptop')!== -1 )
{
args.element.width = 30;
args.element.height =30;
}
else if( args.element.id.indexOf('Room')!== -1 || args.element.id.indexOf('T Room')!== -1 ||args.element.id.indexOf('L Room')!== -1 || args.element.id.indexOf('T Wall')!== -1 )
{
args.element.width = 50;
args.element.height =50;
}
else if(args.element.id.indexOf('Double Sink')!== -1 || args.element.id.indexOf('Double Sink1')!== -1|| args.element.id.indexOf('Double Sink2')!== -1|| args.element.id.indexOf('Double Sink4')!== -1 ){
args.element.width = 76;
args.element.height =38;
}
else if( args.element.id.indexOf('Toilet1')!== -1 || args.element.id.indexOf('Toilet2')!== -1 )
{
args.element.width = 23;
args.element.height =36;
}
else if(args.element.id.indexOf('Corner Shower')!== -1 ||args.element.id.indexOf('Shower')!== -1 ){
args.element.width = 50;
args.element.height = 50;
}
else if(args.element.id.indexOf('Wash Basin1')!== -1 || args.element.id.indexOf('Wash Basin2')!== -1 || args.element.id.indexOf('Wash Basin3')!== -1 || args.element.id.indexOf('Wash Basin5')!== -1 || args.element.id.indexOf('Wash Basin6')!== -1){
args.element.width = 35;
args.element.height = 30;
}
else if( args.element.id.indexOf('Bath Tub')!== -1 || args.element.id.indexOf('Bath Tub1')!== -1 ||args.element.id.indexOf('Bath Tub2')!== -1 || args.element.id.indexOf('Bath Tub3')!== -1 )
{
args.element.width = 55;
args.element.height =30;
}
else
{
args.element.width = 50;
args.element.height =50;
}
// var obj = args.element;
// var ratio = 100 / obj.width;
// obj.width = 100;
// obj.height *= ratio;
};
//Method define the multiple selection
DiagramClientSideEvents.prototype.multipleSelectionSettings = function(selectedItems)
{
this.objectTypeChange('None');
var showConnectorPanel = false, showNodePanel = false;
var showTextPanel = false, showConTextPanel = false;
var nodeContainer = document.getElementById('nodePropertyContainer');
for (var i = 0; i < selectedItems.length; i++) {
var object = selectedItems[i];
if (object instanceof ej.diagrams.Node && (!showNodePanel || !showTextPanel)) {
showNodePanel = true;
showTextPanel = object.annotations.length > 0 && object.annotations[0].content ? true : false;
}
else if (object instanceof ej.diagrams.Connector && (!showConnectorPanel || !showConTextPanel)) {
showConnectorPanel = true;
showConTextPanel = object.annotations.length > 0 && object.annotations[0].content ? true : false;
}
}
var selectItem1 =diagram.selectedItems;
if (showNodePanel) {
nodeContainer.style.display = '';
nodeContainer.classList.add('multiple');
if (showConnectorPanel) {
nodeContainer.classList.add('connector');
}
this.bindNodeProperties(selectItem1.nodes[0], selectedItem);
}
if (showConnectorPanel && !showNodePanel) {
document.getElementById('connectorPropertyContainer').style.display = '';
this.bindConnectorProperties(selectItem1.connectors[0], selectedItem);
}
if (showTextPanel || showConTextPanel) {
document.getElementById('textPropertyContainer').style.display = '';
if (showTextPanel && showConTextPanel) {
document.getElementById('textPositionDiv').style.display = 'none';
document.getElementById('textColorDiv').className = 'col-xs-6 db-col-left';
}
else {
document.getElementById('textPositionDiv').style.display = '';
document.getElementById('textColorDiv').className = 'col-xs-6 db-col-right';
if (showConTextPanel) {
ddlTextPosition.dataSource = textProperties.getConnectorTextPositions();
//selectedItem.utilityMethods.bindTextProperties(selectItem1.connectors[0].annotations[0].style, selectedItem);
}
else {
ddlTextPosition.dataSource = textProperties.getNodeTextPositions();
//selectedItem.utilityMethods.bindTextProperties(selectItem1.connectors[0].annotations[0].style, selectedItem);
}
ddlTextPosition.dataBind();
}
}
};
DiagramClientSideEvents.prototype. multipleSelection= function()
{
for(i=8;i<33;i++)
{
if(toolbarEditor.items[i].type !=='Separator'){
if(i !== 32 && i !== 33){
toolbarEditor.items[i].template= '';
}
if(i == 32 || i == 33)
{
toolbarEditor.items[i].template= '<div></div>';
}
}
}
}
//Method define the Single selection
DiagramClientSideEvents.prototype.singleSelectionSettings = function(selectedObject)
{
var object = null;
if (selectedObject instanceof ej.diagrams.Node) {
this.objectTypeChange('node');
object = selectedObject;
this.bindNodeProperties(object, selectedItem);
}
else if (selectedObject instanceof ej.diagrams.Connector) {
this.objectTypeChange('connector');
object = selectedObject;
this.bindConnectorProperties(object, selectedItem);
}
if (object.shape && object.shape.type === 'Text') {
document.getElementById('textPropertyContainer').style.display = '';
document.getElementById('toolbarTextAlignmentDiv').style.display = 'none';
document.getElementById('textPositionDiv').style.display = 'none';
document.getElementById('textColorDiv').className = 'col-xs-6 db-col-left';
this.bindTextProperties(object.style, selectedItem);
}
else if (object.annotations.length > 0 && object.annotations[0].content) {
document.getElementById('textPropertyContainer').style.display = '';
var annotation = null;
document.getElementById('toolbarTextAlignmentDiv').style.display = '';
document.getElementById('textPositionDiv').style.display = '';
document.getElementById('textColorDiv').className = 'col-xs-6 db-col-right';
this.bindTextProperties(object.annotations[0].style);
UtilityMethods.prototype.updateHorVertAlign(object.annotations[0].horizontalAlignment, object.annotations[0].verticalAlignment);
if (object.annotations[0] instanceof ej.diagrams.ShapeAnnotation) {
annotation = object.annotations[0];
ddlTextPosition.dataSource = textProperties.getNodeTextPositions();
ddlTextPosition.value = textProperties.textPosition = null;
ddlTextPosition.dataBind();
ddlTextPosition.value = textProperties.textPosition = UtilityMethods.prototype.getPosition(annotation.offset);
ddlTextPosition.dataBind();
}
else if (object.annotations[0] instanceof ej.diagrams.PathAnnotation) {
annotation = object.annotations[0];
ddlTextPosition.dataSource = textProperties.getConnectorTextPositions();
ddlTextPosition.value = textProperties.textPosition = null;
ddlTextPosition.dataBind();
ddlTextPosition.value = textProperties.textPosition = annotation.alignment;
ddlTextPosition.dataBind();
}
}
};
//Method define the diagram container
DiagramClientSideEvents.prototype.objectTypeChange = function(objectType)
{
document.getElementById('diagramPropertyContainer').style.display = 'none';
document.getElementById('nodePropertyContainer').style.display = 'none';
document.getElementById('textPropertyContainer').style.display = 'none';
document.getElementById('connectorPropertyContainer').style.display = 'none';
switch (objectType) {
case 'diagram':
document.getElementById('diagramPropertyContainer').style.display = '';
break;
case 'node':
document.getElementById('nodePropertyContainer').style.display = '';
break;
case 'connector':
document.getElementById('connectorPropertyContainer').style.display = '';
break;
}
};
//Method define the node properties binding
DiagramClientSideEvents.prototype.bindNodeProperties = function(node)
{
nodeProperties.offsetX.value = node.offsetX;
nodeProperties.offsetY.value = node.offsetY;
nodeProperties.width.value = node.width;
nodeProperties.height.value = node.height;
nodeProperties.rotateAngle.value = node.rotateAngle;
nodeProperties.fillColor.value = UtilityMethods.prototype.getHexColor(node.style.fill);
nodeProperties.strokeColor.value = UtilityMethods.prototype.getHexColor(node.style.strokeColor);
nodeProperties.strokeWidth.value = node.style.strokeWidth;
nodeProperties.strokeStyle.value = node.style.strokeDashArray ? node.style.strokeDashArray :'None';
nodeProperties.opacity.value = node.style.opacity*100;
nodeProperties.aspectRatio.cssClass = node.constraints & ej.diagrams.NodeConstraints.AspectRatio ? document.getElementById('aspectRatioBtn').classList.add('e-active') : document.getElementById('aspectRatioBtn').classList.remove('e-active');
node.constraints & ej.diagrams.NodeConstraints.AspectRatio ? aspectRatioBtn.iconCss = 'sf-icon-lock': aspectRatioBtn.iconCss = 'sf-icon-unlock';
}
//Method define the connector properties binding
DiagramClientSideEvents.prototype.bindConnectorProperties = function(connector)
{
connectorProperties.lineColor.value = UtilityMethods.prototype.getHexColor(connector.style.strokeColor);
connectorProperties.lineWidth.value = connector.style.strokeWidth;
connectorProperties.opacity.value = connector.style.opacity * 100;
}
//Method define the text properties binding
DiagramClientSideEvents.prototype.bindTextProperties = function(text)
{
textProperties.fontColor.value = UtilityMethods.prototype.getHexColor(text.color);
textProperties.fontFamily.value = text.fontFamily;
textProperties.fontSize.value = text.fontSize;
textProperties.opacity.value = text.opacity * 100;
var toolbarTextStyle = document.getElementById('toolbarTextStyle');
if (toolbarTextStyle) {
toolbarTextStyle = toolbarTextStyle.ej2_instances[0];
}
if (toolbarTextStyle) {
toolbarTextStyle.items[0].cssClass = text.bold ? 'tb-item-start tb-item-selected' : 'tb-item-start';
toolbarTextStyle.items[1].cssClass = text.italic ? 'tb-item-middle tb-item-selected' : 'tb-item-middle';
toolbarTextStyle.items[2].cssClass = text.textDecoration === 'Underline' ? 'tb-item-end tb-item-selected' : 'tb-item-end';
}
UtilityMethods.prototype.updateTextAlign(text.textAlign);
};
return DiagramClientSideEvents;
}());

4385
scripts/index.js Normal file

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

216
scripts/properties.js Normal file
Просмотреть файл

@ -0,0 +1,216 @@
var PropertyChange = (function () {
function PropertyChange() {
};
//Method define node property change
PropertyChange.prototype.nodePropertyChange = function(args)
{
if (diagram) {
if (diagram.selectedItems.nodes.length > 0) {
var selectedNodes = diagram.selectedItems.nodes;
for (var i = 0; i < selectedNodes.length; i++) {
var node = selectedNodes[i];
var propertyName1 = args.propertyName.toString().toLowerCase();
switch (propertyName1) {
case 'offsetx':
node.offsetX = nodeProperties.offsetX.value;
break;
case 'offsety':
node.offsetY = nodeProperties.offsetY.value;
break;
case 'width':
node.width = nodeProperties.width.value;
break;
case 'height':
node.height = nodeProperties.height.value;
break;
case 'rotateangle':
node.rotateAngle = nodeProperties.rotateAngle.value;
break;
case 'aspectratio':
node.constraints = node.constraints ^ ej.diagrams.NodeConstraints.AspectRatio;
break;
}
if (!node.children) {
UtilityMethods.prototype.applyNodeStyle(propertyName1, node, args.propertyValue);
}
else {
for (var j = 0; j < node.children.length; j++) {
UtilityMethods.prototype.applyNodeStyle(propertyName1, diagram.getObject(node.children[j]), args.propertyValue);
}
}
}
this.isModified = true;
}
if (diagram.connectors.length > 0) {
var selectedNodes = diagram.selectedItems.connectors;
for (var i = 0; i < selectedNodes.length; i++) {
switch (args.propertyName.toString().toLowerCase()) {
case 'strokecolor':
connectorProperties.lineColor.value = UtilityMethods.prototype.getColor(nodeProperties.strokeColor.value);
break;
case 'strokewidth':
connectorProperties.lineWidth.value = nodeProperties.strokeWidth.value;
break;
case 'strokestyle':
connectorProperties.lineStyle.value = nodeProperties.strokeStyle.value;
break;
case 'opacity':
connectorProperties.opacity.value = nodeProperties.opacity.value;
break;
}
}
this.isModified = true;
}
diagram.dataBind();
}
};
//Method define connector property change
PropertyChange.prototype.connectorPropertyChange = function(args)
{
if (diagram && diagram.selectedItems.connectors.length > 0) {
var selectedNodes = diagram.selectedItems.connectors;
for (var i = 0; i < selectedNodes.length; i++) {
var connector = selectedNodes[i];
switch (args.propertyName.toString().toLowerCase()) {
case 'linecolor':
connector.style.strokeColor = UtilityMethods.prototype.getColor(connectorProperties.lineColor.value);
connector.sourceDecorator.style = { fill: connector.style.strokeColor, strokeColor: connector.style.strokeColor };
connector.targetDecorator.style = { fill: connector.style.strokeColor, strokeColor: connector.style.strokeColor };
break;
case 'linewidth':
connector.style.strokeWidth = connectorProperties.lineWidth.value;
if (connector.sourceDecorator.style) {
connector.sourceDecorator.style.strokeWidth = connector.style.strokeWidth;
}
else {
connector.sourceDecorator.style = { strokeWidth: connector.style.strokeWidth };
}
if (connector.targetDecorator.style) {
connector.targetDecorator.style.strokeWidth = connector.style.strokeWidth;
}
else {
connector.targetDecorator.style = { strokeWidth: connector.style.strokeWidth };
}
break;
case 'linestyle':
connector.style.strokeDashArray = connectorProperties.lineStyle.value;
break;
case 'linetype':
connector.type = connectorProperties.lineType.value;
break;
case 'sourcetype':
connector.sourceDecorator.shape = connectorProperties.sourceType.value;
break;
case 'targettype':
connector.targetDecorator.shape = connectorProperties.targetType.value;
break;
case 'sourcesize':
connector.sourceDecorator.width = connector.sourceDecorator.height = connectorProperties.sourceSize.value;
break;
case 'targetsize':
connector.targetDecorator.width = connector.targetDecorator.height = connectorProperties.targetSize.value;
break;
case 'opacity':
connector.style.opacity = connectorProperties.opacity.value / 100;
connector.targetDecorator.style.opacity = connector.style.opacity;
connector.sourceDecorator.style.opacity = connector.style.opacity;
document.getElementById("connectorOpacitySliderText").value = connectorProperties.opacity.value + '%';
break;
case 'linejump':
if (args.propertyValue.checked) {
connector.constraints = connector.constraints | ej.diagrams.ConnectorConstraints.Bridging;
}
else {
connector.constraints = connector.constraints & ~ej.diagrams.ConnectorConstraints.Bridging;
}
break;
case 'linejumpsize':
connector.bridgeSpace = connectorProperties.lineJumpSize.value;
break;
}
}
diagram.dataBind();
this.isModified = true;
}
};
//Method define text property change
PropertyChange.prototype.textPropertyChange = function(args)
{
if (diagram) {
var selectedObjects = diagram.selectedItems.nodes;
selectedObjects = selectedObjects.concat(diagram.selectedItems.connectors);
var propertyName = args.propertyName.toString().toLowerCase();
if (selectedObjects.length > 0) {
for (var i = 0; i < selectedObjects.length; i++) {
var node = selectedObjects[i];
if (node instanceof ej.diagrams.Node || node instanceof ej.diagrams.Connector) {
if (node.annotations.length > 0) {
for (var j = 0; j < node.annotations.length; j++) {
var annotation = node.annotations[j].style;
UtilityMethods.prototype.updateTextFontProperties(propertyName, annotation);
}
}
else if (node.shape && node.shape.type === 'Text') {
UtilityMethods.prototype.updateTextFontProperties(propertyName, node.style);
}
}
}
diagram.dataBind();
this.isModified = true;
}
}
};
PropertyChange.prototype.textPropertiesChange = function(propertyName,propertyValue)
{
var selectedObjects = diagram.selectedItems.nodes;
selectedObjects = selectedObjects.concat(diagram.selectedItems.connectors);
propertyName = propertyName.toLowerCase();
if (selectedObjects.length > 0) {
for (var i = 0; i < selectedObjects.length; i++) {
var node = selectedObjects[i];
if (node instanceof ej.diagrams.Node || node instanceof ej.diagrams.Connector) {
if (node.annotations.length > 0) {
for (var j = 0; j < node.annotations.length; j++) {
var annotation = null;
if (node.annotations[j] instanceof ej.diagrams.ShapeAnnotation) {
annotation = node.annotations[j];
if (propertyName === 'textposition') {
textProperties.textPosition = propertyValue.toString();
annotation.offset =UtilityMethods.prototype.getOffset(propertyValue);
}
}
else if (node.annotations[j] instanceof ej.diagrams.PathAnnotation) {
annotation = node.annotations[j];
if (propertyName === 'textposition') {
textProperties.textPosition = propertyValue.toString();
annotation.alignment =textProperties.textPosition;
}
}
if (propertyName === 'left' || propertyName === 'right' || propertyName === 'center') {
annotation.horizontalAlignment = propertyValue;
UtilityMethods.prototype.updateHorVertAlign(annotation.horizontalAlignment, annotation.verticalAlignment);
}
else if (propertyName === 'top' || propertyName === 'bottom') {
annotation.verticalAlignment = propertyValue;
UtilityMethods.prototype.updateHorVertAlign(annotation.horizontalAlignment, annotation.verticalAlignment);
}
else if (propertyName === 'middle') {
annotation.verticalAlignment = 'Center';
UtilityMethods.prototype.updateHorVertAlign(annotation.horizontalAlignment, annotation.verticalAlignment);
}
else {
UtilityMethods.prototype.updateTextProperties1(propertyName, propertyValue, annotation.style);
}
}
}
else if (node.shape && node.shape.type === 'Text') {
UtilityMethods.prototype.updateTextProperties1(propertyName, propertyValue, node.style);
}
}
}
diagram.dataBind();
}
};
return PropertyChange;
}());

662
scripts/utilitymethods.js Normal file
Просмотреть файл

@ -0,0 +1,662 @@
var UtilityMethods = (function () {
function UtilityMethods() {
//Method define the style of nodes
UtilityMethods.prototype.applyNodeStyle = function(propertyName, node, value)
{
var addInfo = node.addInfo || {};
switch (propertyName) {
case 'fillcolor':
node.style.fill = this.getColor(value);
if (value && value.checked) {
NodeProperties.prototype.getGradient(node);
}
break;
case 'strokecolor':
node.style.strokeColor = this.getColor(nodeProperties.strokeColor.value);
break;
case 'strokewidth':
node.style.strokeWidth = nodeProperties.strokeWidth.value;
break;
case 'strokestyle':
node.style.strokeDashArray = nodeProperties.strokeStyle.value;
break;
case 'opacity':
node.style.opacity =nodeProperties.opacity.value / 100;
document.getElementById("nodeOpacitySliderText").value = nodeProperties.opacity.value + '%';
break;
case 'gradient':
if (value && !value.checked) {
node.style.gradient.type = 'None';
}
else {
NodeProperties.prototype.getGradient(node);
}
break;
case 'gradientdirection':
case 'gradientcolor':
NodeProperties.prototype.getGradient(node);
break;
}
};
};
UtilityMethods.prototype.getColor = function(colorName)
{
if (window.navigator.msSaveBlob && colorName.length === 9) {
return colorName.substring(0, 7);
}
return colorName;
};
//Method define the update in text properties
UtilityMethods.prototype.updateTextFontProperties = function(propertyName, annotation)
{
switch (propertyName) {
case 'fontfamily':
annotation.fontFamily = textProperties.fontFamily.value;
break;
case 'fontsize':
annotation.fontSize = textProperties.fontSize.value;
break;
case 'fontcolor':
annotation.color = this.getColor(textProperties.fontColor.value);
break;
case 'opacity':
annotation.opacity = textProperties.opacity.value / 100;
document.getElementById("textOpacityText").value = textProperties.opacity.value + '%';
break;
}
};
UtilityMethods.prototype.updateToolbarState = function(toolbarName, isSelected, index)
{
var toolbarTextStyle = document.getElementById(toolbarName);
if (toolbarTextStyle) {
toolbarTextStyle = toolbarTextStyle.ej2_instances[0];
}
if (toolbarTextStyle) {
var cssClass = toolbarTextStyle.items[index].cssClass;
toolbarTextStyle.items[index].cssClass = isSelected ? cssClass + ' tb-item-selected' : cssClass.replace(' tb-item-selected', '');
toolbarTextStyle.dataBind();
}
};
//Method define the text align
UtilityMethods.prototype.updateTextAlign= function(textAlign)
{
var toolbarTextSubAlignment = document.getElementById('toolbarTextSubAlignment');
if (toolbarTextSubAlignment) {
toolbarTextSubAlignment = toolbarTextSubAlignment.ej2_instances[0];
}
if (toolbarTextSubAlignment) {
for (var i = 0; i < toolbarTextSubAlignment.items.length; i++) {
toolbarTextSubAlignment.items[i].cssClass = toolbarTextSubAlignment.items[i].cssClass.replace(' tb-item-selected', '');
}
var index = textAlign === 'Left' ? 0 : (textAlign === 'Center' ? 1 : 2);
toolbarTextSubAlignment.items[index].cssClass = toolbarTextSubAlignment.items[index].cssClass + ' tb-item-selected';
}
};
//Method define the horizontal/vertical text align
UtilityMethods.prototype.updateHorVertAlign = function(horizontalAlignment, verticalAlignment)
{
var toolbarHorVerAlignment = document.getElementById('toolbarTextAlignment');
if (toolbarHorVerAlignment) {
toolbarHorVerAlignment = toolbarHorVerAlignment.ej2_instances[0];
}
if (toolbarHorVerAlignment) {
for (var i = 0; i < toolbarHorVerAlignment.items.length; i++) {
toolbarHorVerAlignment.items[i].cssClass = toolbarHorVerAlignment.items[i].cssClass.replace(' tb-item-selected', '');
}
var index = horizontalAlignment === 'Right' ? 0 : (horizontalAlignment === 'Center' ? 1 : 2);
toolbarHorVerAlignment.items[index].cssClass = toolbarHorVerAlignment.items[index].cssClass + ' tb-item-selected';
index = verticalAlignment === 'Bottom' ? 3 : (verticalAlignment === 'Center' ? 4 : 5);
toolbarHorVerAlignment.items[index].cssClass = toolbarHorVerAlignment.items[index].cssClass + ' tb-item-selected';
}
};
//Method define the text properties
UtilityMethods.prototype.updateTextProperties1 = function(propertyName, propertyValue, annotation)
{
switch (propertyName) {
case 'bold':
annotation.bold = !annotation.bold;
this.updateToolbarState('toolbarTextStyle', annotation.bold, 0);
break;
case 'italic':
annotation.italic = !annotation.italic;
this.updateToolbarState('toolbarTextStyle', annotation.italic, 1);
break;
case 'underline':
textProperties.textDecoration = !textProperties.textDecoration;
annotation.textDecoration = annotation.textDecoration === 'None' || !annotation.textDecoration ? 'Underline' : 'None';
this.updateToolbarState('toolbarTextStyle',textProperties.textDecoration, 2);
break;
case 'aligntextleft':
case 'aligntextright':
case 'aligntextcenter':
annotation.textAlign = propertyValue.toString().replace('AlignText', '');
this.updateTextAlign(annotation.textAlign);
break;
}
};
// Method define the offset values of the text
UtilityMethods.prototype.getOffset = function(position){
switch (position.toLowerCase()) {
case 'topleft':
return { x: 0, y: 0 };
case 'topcenter':
return { x: 0.5, y: 0 };
case 'topright':
return { x: 1, y: 0 };
case 'middleleft':
return { x: 0, y: 0.5 };
default:
return { x: 0.5, y: 0.5 };
case 'middleright':
return { x: 1, y: 0.5 };
case 'bottomleft':
return { x: 0, y: 1 };
case 'bottomcenter':
return { x: 0.5, y: 1 };
case 'bottomright':
return { x: 1, y: 1 };
}
};
//Method define the enable and disable of icons in single selection in toolbar
UtilityMethods.prototype.onClickDisable = function(args)
{
if(args === false)
{
for(i=8;i<33;i++)
{
if(toolbarEditor.items[i].type !=='Separator'){
if(i<=17)
{
toolbarEditor.items[i].template = '<div></div>';
}
else if(i>17 && i!==31){
toolbarEditor.items[i].template = '';
}
else if(i === 31) {
var obj = diagram.selectedItems.nodes.length>0 ?diagram.selectedItems.nodes[0] : diagram.selectedItems.connectors[0];
if((obj.annotations.length && obj.annotations[0].content )|| (obj.shape.type === "Text"))
{
toolbarEditor.items[i].template = '';
toolbarEditor.hideItem(i+1,false);
}
else{
toolbarEditor.items[i].template = '<div></div>';
toolbarEditor.hideItem(i+1,true);
}
}
}
}
}
else{
for(i=8;i<33;i++)
{
if(toolbarEditor.items[i].type !=='Separator'){
toolbarEditor.items[i].template = '<div></div>';
}
}
}
};
//save the diagram object in json data.
UtilityMethods.prototype.download = function(data)
{
if (window.navigator.msSaveBlob) {
var blob = new Blob([data], { type: 'data:text/json;charset=utf-8,' });
window.navigator.msSaveOrOpenBlob(blob, 'Diagram.json');
}
else {
var dataStr = 'data:text/json;charset=utf-8,' + encodeURIComponent(data);
var a = document.createElement('a');
a.href = dataStr;
a.download = 'Diagram.json';
document.body.appendChild(a);
a.click();
a.remove();
}
}
//Method for synchronization of page orientation between menubar and property panel
UtilityMethods.prototype.updateSelection = function(item)
{
for(i=0;i<item.parentObj.items.length;i++)
{
if(item.text === item.parentObj.items[i].text){
item.parentObj.items[i].iconCss = 'sf-icon-check-tick';
}
else{
item.parentObj.items[i].iconCss = '';
}
}
}
//Method o remove the selection highlight in toolbar
UtilityMethods.prototype.removeSelectedToolbarItem = function()
{
var toolbarEditor = document.getElementById('toolbarEditor').ej2_instances[0];;
for (var i = 0; i < toolbarEditor.items.length; i++) {
var item = toolbarEditor.items[i];
if (item.cssClass.indexOf('tb-item-selected') !== -1) {
item.cssClass = item.cssClass.replace(' tb-item-selected', '');
}
}
toolbarEditor.dataBind();
}
//Method define the paper size
UtilityMethods.prototype.getPaperSize = function(args)
{
var paperSize = new PaperSize();
switch (args) {
case 'Letter':
paperSize.pageWidth = 816;
paperSize.pageHeight = 1056;
break;
case 'Legal':
paperSize.pageWidth = 816;
paperSize.pageHeight = 1344;
break;
case 'Tabloid':
paperSize.pageWidth = 1056;
paperSize.pageHeight = 1632;
break;
case 'A0':
paperSize.pageWidth = 3179;
paperSize.pageHeight = 4494;
break;
case 'A1':
paperSize.pageWidth = 2245;
paperSize.pageHeight = 3179;
break;
case 'A2':
paperSize.pageWidth = 1587;
paperSize.pageHeight = 2245;
break;
case 'A3':
paperSize.pageWidth = 1122;
paperSize.pageHeight = 1587;
break;
case 'A4':
paperSize.pageWidth = 793;
paperSize.pageHeight = 1122;
break;
case 'A5':
paperSize.pageWidth = 559;
paperSize.pageHeight = 793;
break;
case 'A6':
paperSize.pageWidth = 396;
paperSize.pageHeight = 559;
break;
}
return paperSize;
};
//Method to change paper size
UtilityMethods.prototype.paperListChange = function(args)
{
document.getElementById('pageDimension').style.display ='none';
document.getElementById('pageOrientation').style.display ='';
var value = args.value || args.item.value;
var paperSize = UtilityMethods.prototype.getPaperSize(value);
var pageWidth = paperSize.pageWidth;
var pageHeight = paperSize.pageHeight;
if (pageWidth && pageHeight) {
if (diagram.pageSettings.orientation = 'Portrait') {
if (pageWidth > pageHeight) {
var temp = pageWidth;
pageWidth = pageHeight;
pageHeight = temp;
}
}
else {
if (pageHeight > pageWidth) {
var temp = pageHeight;
pageHeight = pageWidth;
pageWidth = temp;
}
}
diagram.pageSettings.width = pageWidth;
diagram.pageSettings.height = pageHeight;
}
else{
document.getElementById('pageOrientation').style.display = 'none';
document.getElementById('pageDimension').style.display = '';
diagram.pageSettings.width = 1460;
diagram.pageSettings.height = 600;
}
this.bindPaperSize(designContextMenu.items[1],args.value);
diagram.dataBind();
};
//Method to synchronize the paper size between menubar and property panel
UtilityMethods.prototype.bindPaperSize = function(items,value)
{
for(i=0;i<items.items.length;i++){
if(value === items.items[i].value)
{
items.items[i].iconCss = 'sf-icon-check-tick';
}
else{
items.items[i].iconCss = '';
}
}
}
//Method defines the page orientation change
UtilityMethods.prototype.pageOrientationChange = function(args)
{
if (args.target) {
var target = args.target;
var items = designContextMenu.items;
var option = target.id ? target.id : (args.currentTarget.ej2_instances[0].iconCss === 'sf-icon-portrait'? 'pagePortrait':'pageLandscape');
switch (option) {
case 'pagePortrait':
diagram.pageSettings.isPortrait = true;
diagram.pageSettings.isLandscape = false;
diagram.pageSettings.orientation = 'Portrait';
items[0].items[0].iconCss = '';
items[0].items[1].iconCss = 'sf-icon-check-tick';
document.getElementById('pageLandscape').classList.remove('e-active');
break;
case 'pageLandscape':
diagram.pageSettings.isPortrait = false;
diagram.pageSettings.isLandscape = true;
diagram.pageSettings.orientation = 'Landscape';
items[0].items[0].iconCss = 'sf-icon-check-tick';
items[0].items[1].iconCss = '';
document.getElementById('pagePortrait').classList.remove('e-active');
break;
}
diagram.dataBind();
diagram.pageSettings.pageWidth = diagram.pageSettings.width;
diagram.pageSettings.pageHeight = diagram.pageSettings.height;
}
};
UtilityMethods.prototype.pageDimensionChange = function(args)
{
if (args.event) {
var pageWidth = Number(diagram.pageSettings.width);
var pageHeight = Number(diagram.pageSettings.height);
var target = args.event.target;
if (target.tagName.toLowerCase() === 'span') {
target = target.parentElement.children[0];
}
if (target.id === 'pageWidth') {
pageWidth = Number(target.value.replace(/,/g, ''));
}
else {
pageHeight = Number(target.value.replace(/,/g, ''));
}
if (pageWidth && pageHeight) {
if (pageWidth > pageHeight) {
diagram.pageSettings.isPortrait = false;
diagram.pageSettings.isLandscape = true;
diagram.pageSettings.orientation = 'Landscape';
}
else {
diagram.pageSettings.isPortrait = true;
diagram.pageSettings.isLandscape = false;
diagram.pageSettings.orientation = 'Portrait';
}
diagram.pageSettings.pageWidth = diagram.pageSettings.width = pageWidth;
diagram.pageSettings.pageHeight = diagram.pageSettings.height = pageHeight;
diagram.dataBind();
}
}
};
//Method define background color change
UtilityMethods.prototype.pageBackgroundChange1= function(args)
{
if (args.currentValue) {
// let target: HTMLInputElement = args.target as HTMLInputElement;
diagram.pageSettings.background = {
color: args.currentValue.rgba
};
diagram.dataBind();
}
}
//Method define page breaks
UtilityMethods.prototype.pageBreaksChange = function(args)
{
var items = btnViewMenu.items;
if (args.event) {
diagram.pageSettings.pageBreaks = args.checked;
diagram.pageSettings.showPageBreaks = args.checked;
if(args.checked === true){
items[5].iconCss = 'sf-icon-check-tick';
}
else
{
items[5].iconCss = '';
}
}
};
//Method define the text position
UtilityMethods.prototype.getPosition = function(offset)
{
if (offset.x === 0 && offset.y === 0) {
return 'TopLeft';
}
else if (offset.x === 0.5 && offset.y === 0) {
return 'TopCenter';
}
else if (offset.x === 1 && offset.y === 0) {
return 'TopRight';
}
else if (offset.x === 0 && offset.y === 0.5) {
return 'MiddleLeft';
}
else if (offset.x === 1 && offset.y === 0.5) {
return 'MiddleRight';
}
else if (offset.x === 0 && offset.y === 1) {
return 'BottomLeft';
}
else if (offset.x === 0.5 && offset.y === 1) {
return 'BottomCenter';
}
else if (offset.x === 1 && offset.y === 1) {
return 'BottomRight';
}
else {
return 'Center';
}
};
//Method define the text color
UtilityMethods.prototype.getHexColor= function(colorStr)
{
var a = document.createElement('div');
a.style.color = colorStr;
var colors = window.getComputedStyle(document.body.appendChild(a)).color.match(/\d+/g).map(function (a) {
return parseInt(a, 10);
});
document.body.removeChild(a);
return (colors.length >= 3) ? '#' + (((1 << 24) + (colors[0] << 16) + (colors[1] << 8) + colors[2]).toString(16).substr(1)) : '';
};
//Method define the Insert link and insert image
UtilityMethods.prototype.toolbarInsertClick = function(args)
{
var commandType =(args.item ? args.item.text : args.target.id).replace(/[' ']/g, '').toLowerCase();
if (diagram.selectedItems.nodes.length > 0) {
switch (commandType) {
case 'insertlink':
document.getElementById('hyperlink').value = '';
document.getElementById('hyperlinkText').value = '';
if (diagram.selectedItems.nodes[0].annotations.length > 0) {
var annotation = diagram.selectedItems.nodes[0].annotations[0];
if (annotation.hyperlink.link || annotation.content) {
document.getElementById('hyperlink').value = annotation.hyperlink.link;
document.getElementById('hyperlinkText').value = annotation.hyperlink.content || annotation.content;
}
}
hyperlinkDialog.show();
break;
case 'insertimage':
openUploadBox(false, '.jpg,.png,.bmp');
break;
}
}
}
//Method define the aspect ratio
UtilityMethods.prototype.aspectRatioClick = function(args)
{
var isAspect = true;
if(document.getElementById('aspectRatioBtn').classList.contains('e-active'))
{
isAspect = true;
aspectRatioBtn.iconCss = 'sf-icon-lock'
}
else{
isAspect = false;
aspectRatioBtn.iconCss = 'sf-icon-unlock';
}
PropertyChange.prototype.nodePropertyChange({propertyName: 'aspectRatio', propertyValue: isAspect});
};
//Method define the dialog for export,print,hyperlink
UtilityMethods.prototype.getDialogButtons = function(dialogType)
{
var buttons= [];
switch (dialogType) {
case 'export':
buttons.push({
click: this.btnExportClick.bind(this), buttonModel: { content: 'Export', cssClass: 'e-flat e-db-primary', isPrimary: true }
});
break;
case 'print':
buttons.push({
click: this.btnPrintClick.bind(this),
buttonModel: { content: 'Print', cssClass: 'e-flat e-db-primary', isPrimary: true }
});
break;
case 'hyperlink':
buttons.push({
click: this.btnHyperLink.bind(this),
buttonModel: { content: 'Apply', cssClass: 'e-flat e-db-primary', isPrimary: true }
});
break;
}
buttons.push({
click: this.btnCancelClick.bind(this),
buttonModel: { content: 'Cancel', cssClass: 'e-outline', isPrimary: true }
});
return buttons;
}
//Method define the export dialog
UtilityMethods.prototype.btnExportClick = function()
{
diagram.exportDiagram({
fileName: document.getElementById("exportfileName").value,
format:exportFormat.value,
region: exportRegion.value
});
exportDialog.hide();
}
//Method define the print dialog
UtilityMethods.prototype.btnPrintClick = function()
{
var pageWidth = printSettings.pageWidth;
var pageHeight =printSettings.pageHeight;
var paperSize = UtilityMethods.prototype.getPaperSize(printSettings.paperSize);
if (paperSize.pageHeight && paperSize.pageWidth) {
pageWidth = paperSize.pageWidth;
pageHeight = paperSize.pageHeight;
}
if (diagram.pageSettings.isPortrait) {
if (pageWidth > pageHeight) {
var temp = pageWidth;
pageWidth = pageHeight;
pageHeight = temp;
}
} else {
if (pageHeight > pageWidth) {
var temp1 = pageHeight;
pageHeight = pageWidth;
pageWidth = temp1;
}
}
diagram.print({
region: printSettings.region, pageHeight: pageHeight, pageWidth: pageWidth,
multiplePage: !printSettings.multiplePage,
pageOrientation: printSettings.isPortrait ? 'Portrait' : 'Landscape'
});
printDialog.hide();
}
//Method define the hyperlink dialog
UtilityMethods.prototype.btnHyperLink = function()
{
var node = diagram.selectedItems.nodes[0];
if (node.annotations.length > 0) {
node.annotations[0].hyperlink.link = document.getElementById('hyperlink').value;
node.annotations[0].hyperlink.content = document.getElementById('hyperlinkText').value;
this.applyToolTipforHyperlink(node);
diagram.dataBind();
} else {
var annotation = {
hyperlink: {
content: document.getElementById('hyperlinkText').value,
link: document.getElementById('hyperlink').value
}
};
diagram.addLabels(node, [annotation]);
this.applyToolTipforHyperlink(node);
diagram.dataBind();
}
hyperlinkDialog.hide();
}
//Method define the ecancel for the dialog
UtilityMethods.prototype.btnCancelClick = function(args)
{
var ss = args.target;
var key = ss.offsetParent.id;
switch (key) {
case 'exportDialog':
exportDialog.hide();
break;
case 'hyperlinkDialog':
hyperlinkDialog.hide();
break;
case 'printDialog':
printDialog.hide();
break;
}
}
UtilityMethods.prototype.applyToolTipforHyperlink = function(node)
{
node.constraints = ej.diagrams.NodeConstraints.Default & ~ej.diagrams.NodeConstraints.InheritTooltip | ej.diagrams.NodeConstraints.Tooltip;
node.tooltip = {
content: node.annotations[0].hyperlink.link, relativeMode: 'Object',
position: 'TopCenter', showTipPointer: true,
};
}
// //Method for property panel hide
UtilityMethods.prototype.hideElements = function(elementType, diagram)
{
var diagramContainer = document.getElementsByClassName('diagrambuilder-container')[0];
if (diagramContainer.classList.contains(elementType)) {
diagramContainer.classList.remove(elementType);
document.getElementById('hideProperty').style.backgroundColor = ''
hidePropertyBtn.isPrimary = true;
}
else {
diagramContainer.classList.add(elementType);
document.getElementById('hideProperty').style.backgroundColor = '#e3e3e3'
hidePropertyBtn.isPrimary = false;
}
if (diagram) {
diagram.updateViewPort();
}
};
//Method to define the position of color picker
UtilityMethods.prototype.showColorPicker = function(propertyName, toolbarName)
{
var fillElement =
document.getElementById(propertyName).parentElement.getElementsByClassName('e-dropdown-btn')[0];
fillElement.click();
var popupElement = document.getElementById(fillElement.id + '-popup');
var bounds = document.getElementsByClassName(toolbarName)[0].getBoundingClientRect();
popupElement.style.left = bounds.left + 'px';
popupElement.style.top = (bounds.top + 40) + 'px';
}
return UtilityMethods;
}());