From 1ce46337d6947a1891e995b2d23fcab53cd1786a Mon Sep 17 00:00:00 2001 From: Paulo Veiga Date: Mon, 27 Dec 2021 19:42:32 +0000 Subject: [PATCH] SVG Icons Update --- .../mindplot/assets/icons/bulb_light_off.svg | 11 + .../mindplot/assets/icons/bulb_light_on.svg | 11 + .../mindplot/assets/icons/face_crying.svg | 50 + packages/mindplot/assets/icons/face_love.svg | 48 + packages/mindplot/assets/icons/face_plain.svg | 50 + packages/mindplot/assets/icons/face_sad.svg | 43 + packages/mindplot/assets/icons/face_smile.svg | 44 + .../mindplot/assets/icons/face_smile_big.svg | 52 + .../mindplot/assets/icons/face_surprise.svg | 41 + packages/mindplot/assets/icons/face_wink.svg | 45 + packages/mindplot/assets/icons/funy_angel.svg | 48 + .../mindplot/assets/icons/funy_devilish.svg | 1 + .../mindplot/assets/icons/funy_glasses.svg | 42 + packages/mindplot/assets/icons/funy_grin.svg | 52 + packages/mindplot/assets/icons/funy_kiss.svg | 51 + .../mindplot/assets/icons/funy_monkey.svg | 44 + .../mindplot/assets/icons/hard_controller.svg | 57 + .../mindplot/assets/icons/hard_keyboard.svg | 64 + packages/mindplot/assets/icons/lock_close.svg | 5 + packages/mindplot/assets/icons/lock_open.svg | 5 + .../mindplot/assets/icons/sign_cancel.svg | 6 + .../mindplot/assets/icons/sign_closed.svg | 6 + packages/mindplot/assets/icons/sign_info.svg | 62 + .../mindplot/assets/icons/sign_warning.html | 5794 +++++++++++++++++ .../mindplot/assets/icons/sign_warning.svg | 6 + .../mindplot/assets/images/hard_computer.svg | 45 + packages/mindplot/assets/images/links.png | Bin 2631 -> 0 bytes packages/mindplot/assets/images/links.svg | 47 + packages/mindplot/assets/images/notes.svg | 60 + .../cypress/integration/playground.test.js | 2 +- packages/mindplot/src/components/IconGroup.js | 58 +- packages/mindplot/src/components/ImageIcon.js | 175 +- packages/mindplot/src/components/LinkIcon.js | 2 +- packages/mindplot/src/components/NoteIcon.js | 2 +- packages/mindplot/src/components/Topic.js | 177 +- .../mindplot/src/components/TopicStyle.js | 23 +- packages/mindplot/src/index.js | 9 +- .../map-render/samples/icon-sample.xml | 58 + .../src/components/peer/svg/GroupPeer.js | 115 +- 39 files changed, 7180 insertions(+), 231 deletions(-) create mode 100644 packages/mindplot/assets/icons/bulb_light_off.svg create mode 100644 packages/mindplot/assets/icons/bulb_light_on.svg create mode 100644 packages/mindplot/assets/icons/face_crying.svg create mode 100644 packages/mindplot/assets/icons/face_love.svg create mode 100644 packages/mindplot/assets/icons/face_plain.svg create mode 100644 packages/mindplot/assets/icons/face_sad.svg create mode 100644 packages/mindplot/assets/icons/face_smile.svg create mode 100644 packages/mindplot/assets/icons/face_smile_big.svg create mode 100644 packages/mindplot/assets/icons/face_surprise.svg create mode 100644 packages/mindplot/assets/icons/face_wink.svg create mode 100644 packages/mindplot/assets/icons/funy_angel.svg create mode 100644 packages/mindplot/assets/icons/funy_devilish.svg create mode 100644 packages/mindplot/assets/icons/funy_glasses.svg create mode 100644 packages/mindplot/assets/icons/funy_grin.svg create mode 100644 packages/mindplot/assets/icons/funy_kiss.svg create mode 100644 packages/mindplot/assets/icons/funy_monkey.svg create mode 100644 packages/mindplot/assets/icons/hard_controller.svg create mode 100644 packages/mindplot/assets/icons/hard_keyboard.svg create mode 100644 packages/mindplot/assets/icons/lock_close.svg create mode 100644 packages/mindplot/assets/icons/lock_open.svg create mode 100644 packages/mindplot/assets/icons/sign_cancel.svg create mode 100644 packages/mindplot/assets/icons/sign_closed.svg create mode 100644 packages/mindplot/assets/icons/sign_info.svg create mode 100644 packages/mindplot/assets/icons/sign_warning.html create mode 100644 packages/mindplot/assets/icons/sign_warning.svg create mode 100644 packages/mindplot/assets/images/hard_computer.svg delete mode 100644 packages/mindplot/assets/images/links.png create mode 100644 packages/mindplot/assets/images/links.svg create mode 100644 packages/mindplot/assets/images/notes.svg create mode 100644 packages/mindplot/test/playground/map-render/samples/icon-sample.xml diff --git a/packages/mindplot/assets/icons/bulb_light_off.svg b/packages/mindplot/assets/icons/bulb_light_off.svg new file mode 100644 index 00000000..7496b854 --- /dev/null +++ b/packages/mindplot/assets/icons/bulb_light_off.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/packages/mindplot/assets/icons/bulb_light_on.svg b/packages/mindplot/assets/icons/bulb_light_on.svg new file mode 100644 index 00000000..c88cb275 --- /dev/null +++ b/packages/mindplot/assets/icons/bulb_light_on.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/packages/mindplot/assets/icons/face_crying.svg b/packages/mindplot/assets/icons/face_crying.svg new file mode 100644 index 00000000..9044dca2 --- /dev/null +++ b/packages/mindplot/assets/icons/face_crying.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/mindplot/assets/icons/face_love.svg b/packages/mindplot/assets/icons/face_love.svg new file mode 100644 index 00000000..9db78523 --- /dev/null +++ b/packages/mindplot/assets/icons/face_love.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/mindplot/assets/icons/face_plain.svg b/packages/mindplot/assets/icons/face_plain.svg new file mode 100644 index 00000000..cd4d3f26 --- /dev/null +++ b/packages/mindplot/assets/icons/face_plain.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/mindplot/assets/icons/face_sad.svg b/packages/mindplot/assets/icons/face_sad.svg new file mode 100644 index 00000000..f3033bc9 --- /dev/null +++ b/packages/mindplot/assets/icons/face_sad.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/mindplot/assets/icons/face_smile.svg b/packages/mindplot/assets/icons/face_smile.svg new file mode 100644 index 00000000..c851906e --- /dev/null +++ b/packages/mindplot/assets/icons/face_smile.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/mindplot/assets/icons/face_smile_big.svg b/packages/mindplot/assets/icons/face_smile_big.svg new file mode 100644 index 00000000..6ee9e6b7 --- /dev/null +++ b/packages/mindplot/assets/icons/face_smile_big.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/mindplot/assets/icons/face_surprise.svg b/packages/mindplot/assets/icons/face_surprise.svg new file mode 100644 index 00000000..a11a1ff0 --- /dev/null +++ b/packages/mindplot/assets/icons/face_surprise.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/mindplot/assets/icons/face_wink.svg b/packages/mindplot/assets/icons/face_wink.svg new file mode 100644 index 00000000..b503fa45 --- /dev/null +++ b/packages/mindplot/assets/icons/face_wink.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/mindplot/assets/icons/funy_angel.svg b/packages/mindplot/assets/icons/funy_angel.svg new file mode 100644 index 00000000..9db78523 --- /dev/null +++ b/packages/mindplot/assets/icons/funy_angel.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/mindplot/assets/icons/funy_devilish.svg b/packages/mindplot/assets/icons/funy_devilish.svg new file mode 100644 index 00000000..3c72984b --- /dev/null +++ b/packages/mindplot/assets/icons/funy_devilish.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/mindplot/assets/icons/funy_glasses.svg b/packages/mindplot/assets/icons/funy_glasses.svg new file mode 100644 index 00000000..6427ac0d --- /dev/null +++ b/packages/mindplot/assets/icons/funy_glasses.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/mindplot/assets/icons/funy_grin.svg b/packages/mindplot/assets/icons/funy_grin.svg new file mode 100644 index 00000000..6ee9e6b7 --- /dev/null +++ b/packages/mindplot/assets/icons/funy_grin.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/mindplot/assets/icons/funy_kiss.svg b/packages/mindplot/assets/icons/funy_kiss.svg new file mode 100644 index 00000000..cbbc773d --- /dev/null +++ b/packages/mindplot/assets/icons/funy_kiss.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/mindplot/assets/icons/funy_monkey.svg b/packages/mindplot/assets/icons/funy_monkey.svg new file mode 100644 index 00000000..c851906e --- /dev/null +++ b/packages/mindplot/assets/icons/funy_monkey.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/mindplot/assets/icons/hard_controller.svg b/packages/mindplot/assets/icons/hard_controller.svg new file mode 100644 index 00000000..25f8b1c0 --- /dev/null +++ b/packages/mindplot/assets/icons/hard_controller.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/mindplot/assets/icons/hard_keyboard.svg b/packages/mindplot/assets/icons/hard_keyboard.svg new file mode 100644 index 00000000..e5ea697d --- /dev/null +++ b/packages/mindplot/assets/icons/hard_keyboard.svg @@ -0,0 +1,64 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/mindplot/assets/icons/lock_close.svg b/packages/mindplot/assets/icons/lock_close.svg new file mode 100644 index 00000000..8d0a9b88 --- /dev/null +++ b/packages/mindplot/assets/icons/lock_close.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/mindplot/assets/icons/lock_open.svg b/packages/mindplot/assets/icons/lock_open.svg new file mode 100644 index 00000000..8d0a9b88 --- /dev/null +++ b/packages/mindplot/assets/icons/lock_open.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/mindplot/assets/icons/sign_cancel.svg b/packages/mindplot/assets/icons/sign_cancel.svg new file mode 100644 index 00000000..4ff468f3 --- /dev/null +++ b/packages/mindplot/assets/icons/sign_cancel.svg @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/packages/mindplot/assets/icons/sign_closed.svg b/packages/mindplot/assets/icons/sign_closed.svg new file mode 100644 index 00000000..9b70e5dc --- /dev/null +++ b/packages/mindplot/assets/icons/sign_closed.svg @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/packages/mindplot/assets/icons/sign_info.svg b/packages/mindplot/assets/icons/sign_info.svg new file mode 100644 index 00000000..c8ec2632 --- /dev/null +++ b/packages/mindplot/assets/icons/sign_info.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/mindplot/assets/icons/sign_warning.html b/packages/mindplot/assets/icons/sign_warning.html new file mode 100644 index 00000000..0868bc13 --- /dev/null +++ b/packages/mindplot/assets/icons/sign_warning.html @@ -0,0 +1,5794 @@ + + + + + + + Alarm, attention, warning icon - Free download on Iconfinder + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+ + + + + +
+ + Iconfinder + + + + + + + + + + + + + Miscellaneous + + + + + + + Alarm, attention, warning icon + +
+ +
+
+
+
+ +
+
+ + +
+
+
+
+
+
+

+ Alarm, attention, warning icon + + +

+
+ +
+
+ +
+
+
+ +
+
+ + Alarm, attention, warning icon - Free download on Iconfinder +
+
+ + +
+ + + +
+ + +
+
+ +
+
+ + + + + + + + + + + + + + +
+ +
+ +
+ + + + + + + + + +
Free icon
+ +
+ +

+ You will spend 0 credits when downloading with + + + Free for commercial use + +

+ +
+ + + +
+
+ + + +
+ + + + + Download in SVGCopy Base64 SVG
+ + + +
+
+ + + + + AI + + + + + + + + ICO + + + + + + + + ICNS + + + + +
+ +
+ + +
+ + + + + Download in AI
+ + + +
+ + + + + Download in ICO
+ + + +
+ + + + + Download in ICNS
+ + +
+
+ +
+
+ +
+
+ +
+ + + + + + + Valery Zanimanski's avatar + + + + Valery Zanimanski + + + + + + + + + + + + + + + Miscellaneous + + + + + + +
+ + + + + + + + Alarm, + + Attention, + + Warning + + +
+ +
+ + + + + + + 0 downloads + +
+ +
+ + + + + + + + Add to collection + + +
+
+
+
+
+
+
+ + + +
+ +
+ + + + + +
+
Sponsored by iStock
+

Find the perfect icons & illustrations to complete any project on iStock

+
+ + + + +
+ +
+
+
+ + + + + + + + + +
+

+ Miscellaneous icon set +

+ +

+ 48 vector (SVG) icons - Go to icon set page +

+ + + + +
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + direction, move, navigation +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + print, printer, printing +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + document, documents, file, page +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + database, storage +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + checklist, clipboard +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + bubble, chat, comment, communication, message +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + add, create, new, plus +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + add, bubble, chat, comment, message, plus, talk +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + refresh, reload, update +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + music, stop +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + cart, from, remove, shopping +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + favorites, from, remove +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + folder, remove +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + bubble, chat, comment, delete, message, remove, talk +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + record, video +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + lock, protection, secure, security +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + info, information +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + document, file, file type, page, paper, sheet +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + accept, check, good, mark, ok, tick, yes +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + flag, location, map, marker, pin, pointer +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + file, folder +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + forward +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + add, folder +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + music, note, sound +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + chart, presentation, report +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + analytics, chart, diagram, pie +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + configuration, options, preferences, settings, tools +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + next, right +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + cut, cutting, scissors +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + cloud, data, storage, weather +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + bulb, idea, lamp, light, on +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + account, add, avatar, person, profile, user +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + cash, financial, money, wallet +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + account, avatar, person, profile, user +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + delete, remove, uncheck +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + find, glass, magnifier, search, seo +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + back, rewind +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + person, profile, remove, user +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + bubble, chat, comments, communication, conversation, message, talk +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alert, danger, error, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + favorite, heart, like, love, romance, valentine +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + key +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + bag, basket, buy, cart, shop, shopping +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + bookmark, favorite, rating, star +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + music, play +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + favorite, no, rating, star +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + building, estate, home, house, real +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + book, education, school, study +
+ +
+
+ +
+ + + +
+ See all icons in this set +
+
+ + + + + + + + + +
+
+
+
+

+ Related icons +

+ +
+ + Alarm, + Attention, + Warning + icons in + + styles +
+
+
+
+ + + + +
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alarm, attention, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alarm, attention, bell, error, timer, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alarm, alert, attention, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + notification, alert, bell, warning, attention, error, alarm +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alert, attention, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alarm, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + attention, exclamation, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + bell, alarm, alert, warning, notification, attention +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + attention, exclamation, notice, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alarm, warning, fill +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alarm, alert, attention, bell, notification, timer, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alert, warning, alarm, notification, attention, danger, error +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + active, alarm, alert, attention, notification, notifications, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + elearning, notification, bell, alert, alarm, warning, attention +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alarm, alert, attention, bell, notification, ring, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alarm, alert, attention, bell, notification, ring, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alert, warning, attention, sign, information +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + attention, sign, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + warning, alert, attention +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + attention, warning, error +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alarm, alert, bell, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alarm, alert, bell, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alert, bell, notification, alarm, attention, ring +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alert, attention, user, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + warning, attention, moving parts, cog +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + hot, attention, warning, sign +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alert, attention, triangle, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alarm, alert, bell, ring, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alarm, alert, bell, chime, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + attention, alert, problem, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alert, attention, email, internet, mail, security, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + attention, erro, exclamation, mark, warn, warning, weather +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alert, attention, danger, error, internet, security, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alert, attention, caution, danger, error, notification, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + clock, stopwatch, time, alarm, alert, attention, timer +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alert, attention, danger, error, internet, security, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alarm, alert, attention, bell, clock, notification, ring +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + attention, caution, warning, exclamation, problem +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + achtung, alert, attention, exclamation, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alert, attention, caution, exclamation, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alarm, alert, bell, clock, ring, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alert, attention, critical, error, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + warning, traffic lights, attention, traffic, transportation +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + attention, exclamation point, notice, notice attention, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alert, attention, caution, dangerous, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alert, attention, caution, dangerous, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alert, attention, error, warning, exclamation +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alert, attention, danger, warning, notification +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alarm, alert, report, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alarm, bell, notification, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alarm, danger, notification, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alarm, alert, internet, light, security, siren, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alarm, bell, alert, event, schedule, timer, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + road, sign, caution, attention, warning, alert +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + attention, atention, alert, danger, warning, seo +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alert, attention, danger, error, message, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alert, attention, ban, danger, warning, notification +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + caution, attention, exclamation, warning, circle, error +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + caution, attention, exclamation, problem, warning, error +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + exclamation, point, attention, danger, problem, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + notif, bell, alarm, alert, notification, attention +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alarm, alert, bell, notification, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + vibrator, alarm, alert, notification, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + advice, attention, care, caution, exclamation, outline, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + airplane, attention, corona, coronavirus, flight, virus, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + advice, attention, care, caution, exclamation, fill, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + caution, yield, alert, attention, danger ahead, exclamation, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + basic, warning, danger, error, caution, attention, safety +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alert, attention, caution, danger, exclamation, stop, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + attention, caution, danger, error, interested, not, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alarm, alert, bell, fire, notification, ring, attention +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + school, bell, ringing, alarm, fire alarm, attention, emergency +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alarm, alert, attention, bell, notification, notifications, ring +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alarm, alert, attention, bell, clock, notice, notification +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + exclamation, alarm, alert, attention, caution, danger, error +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + advice, attention, care, caution, exclamation, prudence, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + attention, caution, coronavirus, handshake, shake, virus, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + box, dialog, alert, attention, warning, error, danger +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + cloud, error, alert, warning, attention, exclamation, notification +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + caution, alert, attention, danger, error, exclamation, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alert, attention, call, chat, talk, warning, yell +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + box, white, alert, exclamation, attention, warning, error +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + bell, alarm, alert, attention, horn, schedule, timer +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alarm, alert, bell, disable, notification, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + bell, alarm, clock, alert, notification, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alarm, alert, ban, bell, notification, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alarm, alert, clock, time, notification, warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + attention +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + attention +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + attention +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + warning +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + attention +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alarm +
+ +
+
+ + + + + +
+
+
+ +
+ + +
+ FREE +
+ + + + + +
+ + + + + + + alarm +
+ +
+
+ +
+ + +
+ See all related icons +
+
+ + + + + + + + +
+
+
+
+

Upgrade to Pro

+

Access million of icons and illustrations for a better price.

+ Compare plans +
+
+ +
+
+
+
+ + + + + + + + + + + + + + + + + +
+ + + \ No newline at end of file diff --git a/packages/mindplot/assets/icons/sign_warning.svg b/packages/mindplot/assets/icons/sign_warning.svg new file mode 100644 index 00000000..b9e81385 --- /dev/null +++ b/packages/mindplot/assets/icons/sign_warning.svg @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/packages/mindplot/assets/images/hard_computer.svg b/packages/mindplot/assets/images/hard_computer.svg new file mode 100644 index 00000000..37312ac2 --- /dev/null +++ b/packages/mindplot/assets/images/hard_computer.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/mindplot/assets/images/links.png b/packages/mindplot/assets/images/links.png deleted file mode 100644 index dd3b830f4d60e143d90897e23518c250433e85bb..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2631 zcmZ8i3pf+%8(#^Tp)qnh%-kYvxrG_Ukh{6$9+nNu*lf!-79tf>B2jK9Dawvqx?swp z$f=}~yAzX3(vVw}oHOTi&hvl%-}AiB_kQp5dw=iyd%x#?I}dDGCv52F3JU4fqtG-x;$Rm21rc4!HbYQ+cHBxF1Ni@5c=IA}19l$a~k0l}{Q zb`Ivc3cFicWa6glEz}zZ zjeSPJS?BN}nVx#){M{vKwGJX}jx@^I4DT(x3<58xLR<1opThV7*9gJyXmVqH8S^EE zrfprWRR78y66%rWr0`Sxtn-@r5hkXG3MJaa+ij69jfc#y5XP3I240h&cb+I;kNg_1eR%w3qhr*^(~IVczDJ3Ktm zRiXLhDc$p+h@)-l1y$Uhu^d|vwlMr@)tak<63qF=TLR68S#REFx#v>8K=m-=_fYA^ z5QUYX`o`6<@1=ie_g{D@pWfb3KHw?1e`0MZwn!7`b3~d`tG&@-n-6M@2kNtQsNA( zIi=oR9iO$|y1t#oHS#i7Y&#U!FB+l)OIoztiZd-1hcJ@5V)WG6sqtV$zj$f$%cJ~n zO*^aM6wM25yI1U48VfDPE!Lq8q;uHH;g%lUY`J0JY;#Wz_j+AIUiPr=s?~)mIi>o# zmbxV0oqO+H4?pgFm*xQw(T;I1SQ5Q74?Zo)I(KJZMmFb|-$jqTK+;uENCC*H#&Hl{ zYnd$&dEni5bczs4wOG<8%(G7C35A{L_b_ze}l`m{72yaz{xp9#S7bOT29Cv%j^W{q7_txz0H7F1p&NszVWEr|Vk{NOu!8-K zKnne>Faies8$ye=g892)plA{W4>f_C!1u$fflw$EMZrZNz3d!*rVCG2uqYahj6@*l zbUK`F3@1?{5r!5P7Kr^u2qU9?Lc~5QGnR&B?2Dyp{zLLFj~$*GP9czK1X3(?ix+#0 zbb@9DgKZW1Z~g2uhWuZlSn5wzLVXAZmW(ij???Q{EKEcRH6qazJeEeH_>f3MYn!bh zK%HW+k$5jW7RN*({vYwPBnq+B$N%*8kLbUnLegukS24!Vsm~Y>|p`0*-#i^NqB!yW5X z?R$56eTi4rQ~fwc^RS_%<=#MMoxf*ZHx9RQ_3G88irRe~3l}=&IK>vNiWwdlP#m<< z59h;pUFGHFQ(W$7m%TmDkylaCK{QcvE4+PMFSvyzK^nbqt)|A~TU=Zm?3T9qenZ1k zXJyo(2!wjp*NF+O;NYXzKp@a-#+TBE)~khw?CtGM*YP3lDoRR9y}5tx9k?`kvHVhb z+T&M=cVj`K%nL7Hf*_EMEc*O={z%ijr=OoLi)d$*`dEIt6va#xmr({oAX$9A1~xMz zqkZ#7D7L4Nk<`1 zYoLibtyaod{s`uBk#$V!jt4QrI?ZG2=@YlV7KgR|G2B4nae8J(6pRK`%uG#Bu%Q~? z)2wt>-RQ`_IzGwHxr@B}ccA}!`kn8Y~M~RVl6#OLvr}ZPBoe~kZ z`?x$aUrU*ECIgWc7QYueXa)e+7k!%q?@Lm=E8Y2BMadU0uSntFWRIB;Nu($ICwgt= z%3vF{&%+J7b8>PV-Q7E?j&Lx+ER~j)mRmJ7XfH2WTU*{1QFGCdqIagdPNhXtb?ftZR<*>GkYWJ_*HUR;8Cd#6^ z?!}NU7EB>mnahkrC2gEu7_7ghU;8u%IHztI|9RjV++f9HB_eBM<8n>Py>&xQgi(sjMA4nuJL8PoE{KlWz75#}b4GttJ4MzPA@AoUo z{56e`!Ao_DxbA$H;IN>;z}G`V`uBUfyLUIox2M_S{4TeTQBV^qSK0Sl!&0)dvx~jW z%;+>aU3e8~b7&D~7nidB+4kCmBxaalCo{VH#p-JO2rpTEW@d&a_b#_>_rmIGK1WMa zQ!XSV1ZKJ4JY~2cR%1W;7iATdxR0+j3_H2gK19kEnBqJlk zi|eYR`HR3G^UE`iAC<18j!G(EB`)6Bb0R+8!RKAU((>=yPZAS4%z3Ug2rh0o~<-8)o9NBF4 zq{5VQ1AShNI4G+v0ajEz*V<~6AywdXL56hZmBPKDZ1O@_t`B21U$Vrio)Ps(6RvA) zeAmbQ$ArKbh02=kuSrAL9DqQUn;31q!r6HMts@P1mxy4?al3;ROfe>Zpe{TYDuz}E zN=h1!{F^$@1&yr_%*o!}?v8C(>R*LvtzG~C diff --git a/packages/mindplot/assets/images/links.svg b/packages/mindplot/assets/images/links.svg new file mode 100644 index 00000000..94ce26b6 --- /dev/null +++ b/packages/mindplot/assets/images/links.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/mindplot/assets/images/notes.svg b/packages/mindplot/assets/images/notes.svg new file mode 100644 index 00000000..ac496d6a --- /dev/null +++ b/packages/mindplot/assets/images/notes.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/mindplot/cypress/integration/playground.test.js b/packages/mindplot/cypress/integration/playground.test.js index 7119ffdb..877528d4 100644 --- a/packages/mindplot/cypress/integration/playground.test.js +++ b/packages/mindplot/cypress/integration/playground.test.js @@ -9,7 +9,7 @@ context('Playground', () => { cy.matchImageSnapshot('layout'); }); it('viewmode page should match its snapshot', () => { - ['welcome', 'sample1', 'sample2', 'sample3', 'sample4', 'sample5', 'sample6', 'complex', 'img-support'].forEach((mapId) => { + ['welcome', 'sample1', 'sample2', 'sample3', 'sample4', 'sample5', 'sample6', 'complex', 'img-support', 'icon-sample'].forEach((mapId) => { cy.visit(`/viewmode.html?id=${mapId}`); cy.get('#mindplot.ready').should('exist'); cy.matchImageSnapshot(`viewmode-${mapId}`); diff --git a/packages/mindplot/src/components/IconGroup.js b/packages/mindplot/src/components/IconGroup.js index 652c19e3..e66f4f02 100644 --- a/packages/mindplot/src/components/IconGroup.js +++ b/packages/mindplot/src/components/IconGroup.js @@ -16,12 +16,25 @@ * limitations under the License. */ // eslint-disable-next-line max-classes-per-file -import { $assert, $defined } from '@wisemapping/core-js'; -import { Group } from '@wisemapping/web2d'; +import { + $assert, + $defined +} from '@wisemapping/core-js'; +import { + Group +} from '@wisemapping/web2d'; import IconGroupRemoveTip from './IconGroupRemoveTip'; +import NoteModel from './model/NoteModel'; +import LinkModel from './model/LinkModel'; +import IconModel from './model/IconModel'; import Icon from './Icon'; +const ORDER_BY_TYPE = new Map(); +ORDER_BY_TYPE.set(IconModel.FEATURE_TYPE, 0); +ORDER_BY_TYPE.set(NoteModel.FEATURE_TYPE, 1); +ORDER_BY_TYPE.set(LinkModel.FEATURE_TYPE, 2); + class IconGroup { constructor(topicId, iconSize) { $assert($defined(topicId), 'topicId can not be null'); @@ -64,27 +77,38 @@ class IconGroup { /** */ seIconSize(width, height) { - this._iconSize = { width, height }; + this._iconSize = { + width, + height, + }; this._resize(this._icons.length); } /** - * @param icon the icon to be added to the icon group - * @param {Boolean} remove - * @throws will throw an error if icon is not defined - */ + * @param icon the icon to be added to the icon group + * @param {Boolean} remove + * @throws will throw an error if icon is not defined + */ addIcon(icon, remove) { $defined(icon, 'icon is not defined'); + // Order could have change, need to re-add all. + const icons = this._icons.slice(); + this._icons.forEach((i) => { + this._removeIcon(i); + }); + icon.setGroup(this); - this._icons.push(icon); + icons.push(icon); + this._icons = icons.sort((a, b) => ORDER_BY_TYPE.get(a.getModel().getType()) - ORDER_BY_TYPE.get(b.getModel().getType())); - // Adjust group and position ... + // Add all the nodes back ... this._resize(this._icons.length); - this._positionIcon(icon, this._icons.length - 1); - - const imageShape = icon.getImage(); - this._group.append(imageShape); + this._icons.forEach((i, index) => { + this._positionIcon(i, index); + const imageShape = i.getImage(); + this._group.append(imageShape); + }); // Register event for the group .. if (remove) { @@ -166,11 +190,5 @@ class IconGroup { } } -/** - * @constant - * @type {Number} - * @default - */ IconGroup.ICON_PADDING = 5; - -export default IconGroup; +export default IconGroup; \ No newline at end of file diff --git a/packages/mindplot/src/components/ImageIcon.js b/packages/mindplot/src/components/ImageIcon.js index d606cde9..0de0c5ae 100644 --- a/packages/mindplot/src/components/ImageIcon.js +++ b/packages/mindplot/src/components/ImageIcon.js @@ -15,17 +15,21 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { $assert } from '@wisemapping/core-js'; +import { + $assert, +} from '@wisemapping/core-js'; import Icon from './Icon'; import ActionDispatcher from './ActionDispatcher'; function importAll(r) { const images = {}; - r.keys().forEach((item) => { images[item.replace('./', '')] = r(item); }); + r.keys().forEach((item) => { + images[item.replace('./', '')] = r(item); + }); return images; } -const images = importAll(require.context('../../assets/icons', false, /\.png$/)); +const images = importAll(require.context('../../assets/icons', false, /\.(png|svg)$/)); class ImageIcon extends Icon { constructor(topic, iconModel, readOnly) { @@ -56,7 +60,11 @@ class ImageIcon extends Icon { } static _getImageUrl(iconId) { - return images[`${iconId}.png`]; + let result = images[`${iconId}.svg`]; + if (!result) { + result = images[`${iconId}.png`]; + } + return result; } getModel() { @@ -108,63 +116,108 @@ class ImageIcon extends Icon { } } -ImageIcon.prototype.ICON_FAMILIES = [ - { id: 'face', icons: ['face_plain', 'face_sad', 'face_crying', 'face_smile', 'face_surprise', 'face_wink'] }, - { id: 'funy', icons: ['funy_angel', 'funy_devilish', 'funy_glasses', 'funy_grin', 'funy_kiss', 'funy_monkey'] }, - { id: 'conn', icons: ['conn_connect', 'conn_disconnect'] }, - { - id: 'sport', - icons: ['sport_basketball', 'sport_football', 'sport_golf', 'sport_raquet', 'sport_shuttlecock', 'sport_soccer', 'sport_tennis'], - }, - { id: 'bulb', icons: ['bulb_light_on', 'bulb_light_off'] }, - { id: 'thumb', icons: ['thumb_thumb_up', 'thumb_thumb_down'] }, - { id: 'tick', icons: ['tick_tick', 'tick_cross'] }, - { - id: 'onoff', - icons: ['onoff_clock', 'onoff_clock_red', 'onoff_add', 'onoff_delete', 'onoff_status_offline', 'onoff_status_online'], - }, - { - id: 'money', - icons: ['money_money', 'money_dollar', 'money_euro', 'money_pound', 'money_yen', 'money_coins', 'money_ruby'], - }, - { id: 'time', icons: ['time_calendar', 'time_clock', 'time_hourglass'] }, - { - id: 'number', - icons: ['number_1', 'number_2', 'number_3', 'number_4', 'number_5', 'number_6', 'number_7', 'number_8', 'number_9'], - }, - { id: 'chart', icons: ['chart_bar', 'chart_line', 'chart_curve', 'chart_pie', 'chart_organisation'] }, - { id: 'sign', icons: ['sign_warning', 'sign_info', 'sign_stop', 'sign_help', 'sign_cancel'] }, - { - id: 'hard', - icons: ['hard_cd', 'hard_computer', 'hard_controller', 'hard_driver_disk', 'hard_ipod', 'hard_keyboard', 'hard_mouse', 'hard_printer'], - }, - { - id: 'soft', - icons: ['soft_bug', 'soft_cursor', 'soft_database_table', 'soft_database', 'soft_feed', 'soft_folder_explore', 'soft_rss', 'soft_penguin'], - }, - { id: 'arrow', icons: ['arrow_up', 'arrow_down', 'arrow_left', 'arrow_right'] }, - { - id: 'arrowc', - icons: ['arrowc_rotate_anticlockwise', 'arrowc_rotate_clockwise', 'arrowc_turn_left', 'arrowc_turn_right'], - }, - { id: 'people', icons: ['people_group', 'people_male1', 'people_male2', 'people_female1', 'people_female2'] }, - { id: 'mail', icons: ['mail_envelop', 'mail_mailbox', 'mail_edit', 'mail_list'] }, - { id: 'flag', icons: ['flag_blue', 'flag_green', 'flag_orange', 'flag_pink', 'flag_purple', 'flag_yellow'] }, - { - id: 'bullet', - icons: ['bullet_black', 'bullet_blue', 'bullet_green', 'bullet_orange', 'bullet_red', 'bullet_pink', 'bullet_purple'], - }, - { id: 'tag', icons: ['tag_blue', 'tag_green', 'tag_orange', 'tag_red', 'tag_pink', 'tag_yellow'] }, - { - id: 'object', - icons: ['object_bell', 'object_clanbomber', 'object_key', 'object_pencil', 'object_phone', 'object_magnifier', 'object_clip', - 'object_music', 'object_star', 'object_wizard', 'object_house', 'object_cake', 'object_camera', 'object_palette', 'object_rainbow'], - }, - { - id: 'weather', - icons: ['weather_clear-night', 'weather_clear', 'weather_few-clouds-night', 'weather_few-clouds', 'weather_overcast', 'weather_severe-alert', 'weather_showers-scattered', 'weather_showers', 'weather_snow', 'weather_storm'], - }, - { id: 'task', icons: ['task_0', 'task_25', 'task_50', 'task_75', 'task_100'] }, +ImageIcon.prototype.ICON_FAMILIES = [{ + id: 'face', + icons: ['face_plain', 'face_sad', 'face_crying', 'face_smile', 'face_surprise', 'face_wink'], +}, +{ + id: 'funy', + icons: ['funy_angel', 'funy_devilish', 'funy_glasses', 'funy_grin', 'funy_kiss', 'funy_monkey'], +}, +{ + id: 'conn', + icons: ['conn_connect', 'conn_disconnect'], +}, +{ + id: 'sport', + icons: ['sport_basketball', 'sport_football', 'sport_golf', 'sport_raquet', 'sport_shuttlecock', 'sport_soccer', 'sport_tennis'], +}, +{ + id: 'bulb', + icons: ['bulb_light_on', 'bulb_light_off'], +}, +{ + id: 'thumb', + icons: ['thumb_thumb_up', 'thumb_thumb_down'], +}, +{ + id: 'tick', + icons: ['tick_tick', 'tick_cross'], +}, +{ + id: 'onoff', + icons: ['onoff_clock', 'onoff_clock_red', 'onoff_add', 'onoff_delete', 'onoff_status_offline', 'onoff_status_online'], +}, +{ + id: 'money', + icons: ['money_money', 'money_dollar', 'money_euro', 'money_pound', 'money_yen', 'money_coins', 'money_ruby'], +}, +{ + id: 'time', + icons: ['time_calendar', 'time_clock', 'time_hourglass'], +}, +{ + id: 'number', + icons: ['number_1', 'number_2', 'number_3', 'number_4', 'number_5', 'number_6', 'number_7', 'number_8', 'number_9'], +}, +{ + id: 'chart', + icons: ['chart_bar', 'chart_line', 'chart_curve', 'chart_pie', 'chart_organisation'], +}, +{ + id: 'sign', + icons: ['sign_warning', 'sign_info', 'sign_stop', 'sign_help', 'sign_cancel'], +}, +{ + id: 'hard', + icons: ['hard_cd', 'hard_computer', 'hard_controller', 'hard_driver_disk', 'hard_ipod', 'hard_keyboard', 'hard_mouse', 'hard_printer'], +}, +{ + id: 'soft', + icons: ['soft_bug', 'soft_cursor', 'soft_database_table', 'soft_database', 'soft_feed', 'soft_folder_explore', 'soft_rss', 'soft_penguin'], +}, +{ + id: 'arrow', + icons: ['arrow_up', 'arrow_down', 'arrow_left', 'arrow_right'], +}, +{ + id: 'arrowc', + icons: ['arrowc_rotate_anticlockwise', 'arrowc_rotate_clockwise', 'arrowc_turn_left', 'arrowc_turn_right'], +}, +{ + id: 'people', + icons: ['people_group', 'people_male1', 'people_male2', 'people_female1', 'people_female2'], +}, +{ + id: 'mail', + icons: ['mail_envelop', 'mail_mailbox', 'mail_edit', 'mail_list'], +}, +{ + id: 'flag', + icons: ['flag_blue', 'flag_green', 'flag_orange', 'flag_pink', 'flag_purple', 'flag_yellow'], +}, +{ + id: 'bullet', + icons: ['bullet_black', 'bullet_blue', 'bullet_green', 'bullet_orange', 'bullet_red', 'bullet_pink', 'bullet_purple'], +}, +{ + id: 'tag', + icons: ['tag_blue', 'tag_green', 'tag_orange', 'tag_red', 'tag_pink', 'tag_yellow'], +}, +{ + id: 'object', + icons: ['object_bell', 'object_clanbomber', 'object_key', 'object_pencil', 'object_phone', 'object_magnifier', 'object_clip', + 'object_music', 'object_star', 'object_wizard', 'object_house', 'object_cake', 'object_camera', 'object_palette', 'object_rainbow', + ], +}, +{ + id: 'weather', + icons: ['weather_clear-night', 'weather_clear', 'weather_few-clouds-night', 'weather_few-clouds', 'weather_overcast', 'weather_severe-alert', 'weather_showers-scattered', 'weather_showers', 'weather_snow', 'weather_storm'], +}, +{ + id: 'task', + icons: ['task_0', 'task_25', 'task_50', 'task_75', 'task_100'], +}, ]; export default ImageIcon; diff --git a/packages/mindplot/src/components/LinkIcon.js b/packages/mindplot/src/components/LinkIcon.js index 0288e9ae..c9ba7fab 100644 --- a/packages/mindplot/src/components/LinkIcon.js +++ b/packages/mindplot/src/components/LinkIcon.js @@ -19,7 +19,7 @@ import { $assert } from '@wisemapping/core-js'; import $ from 'jquery'; import Icon from './Icon'; import LinkIconTooltip from './widget/LinkIconTooltip'; -import LinksImage from '../../assets/images/links.png'; +import LinksImage from '../../assets/images/links.svg'; class LinkIcon extends Icon { constructor(topic, linkModel, readOnly) { diff --git a/packages/mindplot/src/components/NoteIcon.js b/packages/mindplot/src/components/NoteIcon.js index 7f2d4732..504322d8 100644 --- a/packages/mindplot/src/components/NoteIcon.js +++ b/packages/mindplot/src/components/NoteIcon.js @@ -20,7 +20,7 @@ import $ from 'jquery'; import { $msg } from './Messages'; import Icon from './Icon'; import FloatingTip from './widget/FloatingTip'; -import NotesImage from '../../assets/images/notes.png'; +import NotesImage from '../../assets/images/notes.svg'; class NoteIcon extends Icon { constructor(topic, noteModel, readOnly) { diff --git a/packages/mindplot/src/components/Topic.js b/packages/mindplot/src/components/Topic.js index ae068505..fbabd451 100644 --- a/packages/mindplot/src/components/Topic.js +++ b/packages/mindplot/src/components/Topic.js @@ -16,9 +16,16 @@ * limitations under the License. */ import $ from 'jquery'; -import { $assert, $defined } from '@wisemapping/core-js'; import { - Rect, Image, Line, Text, Group, + $assert, + $defined, +} from '@wisemapping/core-js'; +import { + Rect, + Image, + Line, + Text, + Group, } from '@wisemapping/web2d'; import NodeGraph from './NodeGraph'; @@ -34,16 +41,22 @@ import NoteEditor from './widget/NoteEditor'; import ActionDispatcher from './ActionDispatcher'; import LinkEditor from './widget/LinkEditor'; -import TopicEventDispatcher, { TopicEvent } from './TopicEventDispatcher'; -import INodeModel, { TopicShape } from './model/INodeModel'; +import TopicEventDispatcher, { + TopicEvent, +} from './TopicEventDispatcher'; +import INodeModel, { + TopicShape, +} from './model/INodeModel'; + +const ICON_SCALING_FACTOR = 1.2; class Topic extends NodeGraph { /** - * @extends mindplot.NodeGraph - * @constructs - * @param model - * @param options - */ + * @extends mindplot.NodeGraph + * @constructs + * @param model + * @param options + */ constructor(model, options) { super(model, options); this._children = []; @@ -79,9 +92,9 @@ class Topic extends NodeGraph { } /** - * @param {String} type the topic shape type - * @see {@link mindplot.model.INodeModel} - */ + * @param {String} type the topic shape type + * @see {@link mindplot.model.INodeModel} + */ setShapeType(type) { this._setShapeType(type, true); } @@ -194,15 +207,21 @@ class Topic extends NodeGraph { return model.getImageSize(); }; - result.setPosition = function setPosition() { }; + result.setPosition = function setPosition() {}; } else if (shapeType === TopicShape.ELLIPSE) { result = new Rect(0.9, attributes); } else if (shapeType === TopicShape.ROUNDED_RECT) { result = new Rect(0.3, attributes); } else if (shapeType === TopicShape.LINE) { - result = new Line({ strokeColor: '#495879', strokeWidth: 1 }); + result = new Line({ + strokeColor: '#495879', + strokeWidth: 1, + }); result.setSize = function setSize(width, height) { - this.size = { width, height }; + this.size = { + width, + height, + }; result.setFrom(0, height); result.setTo(width, height); @@ -215,9 +234,9 @@ class Topic extends NodeGraph { return this.size; }; - result.setPosition = function setPosition() { }; - result.setFill = function setFill() { }; - result.setStroke = function setStroke() { }; + result.setPosition = function setPosition() {}; + result.setFill = function setFill() {}; + result.setStroke = function setStroke() {}; } else { $assert(false, `Unsupported figure shapeType:${shapeType}`); } @@ -283,30 +302,27 @@ class Topic extends NodeGraph { _buildIconGroup() { const textHeight = this.getTextShape().getFontHeight(); - const result = new IconGroup(this.getId(), textHeight); + const iconSize = textHeight * ICON_SCALING_FACTOR; + const result = new IconGroup(this.getId(), iconSize); const padding = TopicStyle.getInnerPadding(this); result.setPosition(padding, padding); // Load topic features ... const model = this.getModel(); const featuresModel = model.getFeatures(); - for (let i = 0; i < featuresModel.length; i++) { - const featureModel = featuresModel[i]; - const icon = TopicFeature.createIcon(this, featureModel, this.isReadOnly()); - result.addIcon( - icon, - featureModel.getType() === TopicFeature.Icon.id && !this.isReadOnly(), - ); - } + featuresModel.forEach((f) => { + const icon = TopicFeature.createIcon(this, f, this.isReadOnly()); + result.addIcon(icon, f.getType() === TopicFeature.Icon.id && !this.isReadOnly()); + }); return result; } /** - * assigns the new feature model to the topic's node model and adds the respective icon - * @param {mindplot.model.FeatureModel} featureModel - * @return {mindplot.Icon} the icon corresponding to the feature model - */ + * assigns the new feature model to the topic's node model and adds the respective icon + * @param {mindplot.model.FeatureModel} featureModel + * @return {mindplot.Icon} the icon corresponding to the feature model + */ addFeature(featureModel) { const iconGroup = this.getOrBuildIconGroup(); this.closeEditors(); @@ -737,7 +753,9 @@ class Topic extends NodeGraph { /** */ showTextEditor(text) { - this._getTopicEventDispatcher().show(this, { text }); + this._getTopicEventDispatcher().show(this, { + text, + }); } /** */ @@ -822,8 +840,8 @@ class Topic extends NodeGraph { } /** - * Point: references the center of the rect shape.!!! - */ + * Point: references the center of the rect shape.!!! + */ setPosition(point) { $assert(point, 'position can not be null'); // allowed param reassign to avoid risks of existing code relying in this side-effect @@ -858,18 +876,10 @@ class Topic extends NodeGraph { return this._outgoingLine; } - /** */ getIncomingLines() { - const result = []; const children = this.getChildren(); - for (let i = 0; i < children.length; i++) { - const node = children[i]; - const line = node.getOutgoingLine(); - if ($defined(line)) { - result.push(line); - } - } - return result; + return children.filter((node) => $defined(node.getOutgoingLine())) + .map(((node) => node.getOutgoingLine())); } /** */ @@ -891,14 +901,10 @@ class Topic extends NodeGraph { // Update all the incoming lines ... const incomingLines = this.getIncomingLines(); - for (let i = 0; i < incomingLines.length; i++) { - incomingLines[i].redraw(); - } + incomingLines.forEach((line) => line.redraw()); // Update relationship lines - for (let j = 0; j < this._relationships.length; j++) { - this._relationships[j].redraw(); - } + this._relationships.forEach((r) => r.redraw()); } /** */ @@ -932,9 +938,8 @@ class Topic extends NodeGraph { /** */ moveToBack() { // Update relationship lines - for (let j = 0; j < this._relationships.length; j++) { - this._relationships[j].moveToBack(); - } + this._relationships.forEach((r) => r.moveToBack()); + const connector = this.getShrinkConnector(); if ($defined(connector)) { connector.moveToBack(); @@ -951,9 +956,7 @@ class Topic extends NodeGraph { connector.moveToFront(); } // Update relationship lines - for (let j = 0; j < this._relationships.length; j++) { - this._relationships[j].moveToFront(); - } + this._relationships.forEach((r) => r.moveToFront()); } /** */ @@ -970,9 +973,9 @@ class Topic extends NodeGraph { const targetParent = targetTopic.getModel().getParent(); const sourceParent = sourceTopic.getModel().getParent(); relationship.setVisibility( - value - && (targetParent == null || !targetParent.areChildrenShrunken()) - && (sourceParent == null || !sourceParent.areChildrenShrunken()), + value && + (targetParent == null || !targetParent.areChildrenShrunken()) && + (sourceParent == null || !sourceParent.areChildrenShrunken()), ); }); } @@ -1034,11 +1037,14 @@ class Topic extends NodeGraph { setSize(size, force) { $assert(size, 'size can not be null'); $assert($defined(size.width), 'size seem not to be a valid element'); - const roundedSize = { width: Math.ceil(size.width), height: Math.ceil(size.height) }; + const roundedSize = { + width: Math.ceil(size.width), + height: Math.ceil(size.height), + }; const oldSize = this.getSize(); - const hasSizeChanged = oldSize.width !== roundedSize.width - || oldSize.height !== roundedSize.height; + const hasSizeChanged = oldSize.width !== roundedSize.width || + oldSize.height !== roundedSize.height; if (hasSizeChanged || force) { NodeGraph.prototype.setSize.call(this, roundedSize); @@ -1257,34 +1263,33 @@ class Topic extends NodeGraph { if (this._isInWorkspace) { const textShape = this.getTextShape(); if (this.getShapeType() !== TopicShape.IMAGE) { + // Calculate topic size and adjust elements ... const textWidth = textShape.getWidth(); + const textHeight = textShape.getHeight(); + const padding = TopicStyle.getInnerPadding(this); - let textHeight = textShape.getHeight(); - textHeight = textHeight !== 0 ? textHeight : 20; - - const topicPadding = TopicStyle.getInnerPadding(this); - - // Adjust the icon size to the size of the text ... + // Adjust icons group based on the font size ... const iconGroup = this.getOrBuildIconGroup(); const fontHeight = this.getTextShape().getFontHeight(); - iconGroup.setPosition(topicPadding, topicPadding); - iconGroup.seIconSize(fontHeight, fontHeight); + const iconHeight = ICON_SCALING_FACTOR * fontHeight; + iconGroup.seIconSize(iconHeight, iconHeight); - // Add a extra padding between the text and the icons - let iconsWidth = iconGroup.getSize().width; - if (iconsWidth !== 0) { - iconsWidth += textHeight / 4; - } + // Calculate size and adjust ... + const topicHeight = Math.max(iconHeight, textHeight) + padding * 2; + const textIconSpacing = Math.round(fontHeight / 4); + const iconGroupWith = iconGroup.getSize().width; + const topicWith = iconGroupWith + textIconSpacing + textWidth + padding * 2; - const height = textHeight + topicPadding * 2; - const width = textWidth + iconsWidth + topicPadding * 2; + this.setSize({ + width: topicWith, + height: topicHeight, + }); - this.setSize({ width, height }); - - // Position node ... - textShape.setPosition(topicPadding + iconsWidth, topicPadding); + // Adjust all topic elements positions ... + iconGroup.setPosition(padding, (topicHeight - iconHeight) / 2); + textShape.setPosition(padding + iconGroupWith + textIconSpacing, (topicHeight - textHeight) / 2); } else { - // In case of images, the size if fixed ... + // In case of images, the size is fixed ... const size = this.getModel().getImageSize(); this.setSize(size); } @@ -1311,9 +1316,9 @@ class Topic extends NodeGraph { } /** - * @param childTopic - * @return {Boolean} true if childtopic is a child topic of this topic or the topic itself - */ + * @param childTopic + * @return {Boolean} true if childtopic is a child topic of this topic or the topic itself + */ isChildTopic(childTopic) { let result = this.getId() === childTopic.getId(); if (!result) { @@ -1335,4 +1340,4 @@ class Topic extends NodeGraph { } } -export default Topic; +export default Topic; \ No newline at end of file diff --git a/packages/mindplot/src/components/TopicStyle.js b/packages/mindplot/src/components/TopicStyle.js index 9e378a31..22bb7d5f 100644 --- a/packages/mindplot/src/components/TopicStyle.js +++ b/packages/mindplot/src/components/TopicStyle.js @@ -15,9 +15,16 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { $assert, $defined } from '@wisemapping/core-js'; -import { $msg } from './Messages'; -import { TopicShape } from './model/INodeModel'; +import { + $assert, + $defined, +} from '@wisemapping/core-js'; +import { + $msg, +} from './Messages'; +import { + TopicShape, +} from './model/INodeModel'; class TopicStyle { static _getStyles(topic) { @@ -42,7 +49,9 @@ class TopicStyle { } static defaultText(topic) { - const { msgKey } = this._getStyles(topic); + const { + msgKey, + } = this._getStyles(topic); return $msg(msgKey); } @@ -59,7 +68,7 @@ class TopicStyle { } static getInnerPadding(topic) { - return this._getStyles(topic).innerPadding; + return Math.round(topic.getTextShape().getFontHeight() * 0.5); } static defaultShapeType(topic) { @@ -79,7 +88,6 @@ TopicStyle.STYLES = { color: '#ffffff', }, msgKey: 'CENTRAL_TOPIC', - innerPadding: 11, shapeType: TopicShape.ROUNDED_RECT, }, @@ -94,7 +102,6 @@ TopicStyle.STYLES = { color: 'rgb(82,92,97)', }, msgKey: 'MAIN_TOPIC', - innerPadding: 3, shapeType: TopicShape.LINE, }, @@ -109,7 +116,6 @@ TopicStyle.STYLES = { color: 'rgb(82,92,97)', }, msgKey: 'SUB_TOPIC', - innerPadding: 3, shapeType: TopicShape.LINE, }, @@ -124,7 +130,6 @@ TopicStyle.STYLES = { color: 'rgb(82,92,97)', }, msgKey: 'ISOLATED_TOPIC', - innerPadding: 4, shapeType: TopicShape.LINE, }, }; diff --git a/packages/mindplot/src/index.js b/packages/mindplot/src/index.js index 8d503168..d4cd1edd 100644 --- a/packages/mindplot/src/index.js +++ b/packages/mindplot/src/index.js @@ -30,5 +30,10 @@ global.jQuery = jquery; require('@libraries/bootstrap/js/bootstrap'); export { - Mindmap, PersistenceManager, Designer, LocalStorageManager, Menu, DesignerBuilder, -}; + Mindmap, + PersistenceManager, + Designer, + LocalStorageManager, + Menu, + DesignerBuilder, +}; \ No newline at end of file diff --git a/packages/mindplot/test/playground/map-render/samples/icon-sample.xml b/packages/mindplot/test/playground/map-render/samples/icon-sample.xml new file mode 100644 index 00000000..166d2161 --- /dev/null +++ b/packages/mindplot/test/playground/map-render/samples/icon-sample.xml @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/web2d/src/components/peer/svg/GroupPeer.js b/packages/web2d/src/components/peer/svg/GroupPeer.js index 005b6039..a799b9fa 100644 --- a/packages/web2d/src/components/peer/svg/GroupPeer.js +++ b/packages/web2d/src/components/peer/svg/GroupPeer.js @@ -24,10 +24,19 @@ class GroupPeer extends ElementPeer { const svgElement = window.document.createElementNS(ElementPeer.svgNamespace, 'g'); super(svgElement); this._native.setAttribute('preserveAspectRatio', 'none'); - this._coordSize = { width: 1, height: 1 }; + this._coordSize = { + width: 1, + height: 1, + }; this._native.setAttribute('focusable', 'true'); - this._position = { x: 0, y: 0 }; - this._coordOrigin = { x: 0, y: 0 }; + this._position = { + x: 0, + y: 0, + }; + this._coordOrigin = { + x: 0, + y: 0, + }; } setCoordSize(width, height) { @@ -42,56 +51,56 @@ class GroupPeer extends ElementPeer { } getCoordSize() { - return { width: this._coordSize.width, height: this._coordSize.height }; + return { + width: this._coordSize.width, + height: this._coordSize.height + }; } /** - * http://www.w3.org/TR/SVG/coords.html#TransformAttribute - * 7.6 The transform attribute - * - * The value of the transform attribute is a , which is defined - * as a list of transform definitions, which are applied in the order provided. - * The individual transform definitions are separated by whitespace and/or a comma. - * The available types of transform definitions include: - * - * * matrix( ), which specifies a transformation in the form - * of a transformation matrix of six values. matrix(a,b,c,d,e,f) is equivalent to applying - * the transformation matrix [a b c d e f]. - * - * * translate( []), which specifies a translation by tx and ty. - * If is not provided, it is assumed to be zero. - * - * * scale( []), which specifies a scale operation by sx and sy. - * If is not provided, it is assumed to be equal to . - * - * * rotate( [ ]), which specifies a rotation - * by degrees about a given point. - * If optional parameters and are not supplied, the rotate - * is about the origin of the current user coordinate system. The operation corresponds - * to the matrix [cos(a) sin(a) -sin(a) cos(a) 0 0]. - * If optional parameters and are supplied, the rotate is - * about the point (, ). The operation represents the equivalent of the - *following specification: translate(, ) rotate() translate(-, -). - * - * * skewX(), which specifies a skew transformation along the x-axis. - * - * * skewY(), which specifies a skew transformation along the y-axis. - * */ + * http://www.w3.org/TR/SVG/coords.html#TransformAttribute + * 7.6 The transform attribute + * + * The value of the transform attribute is a , which is defined + * as a list of transform definitions, which are applied in the order provided. + * The individual transform definitions are separated by whitespace and/or a comma. + * The available types of transform definitions include: + * + * * matrix( ), which specifies a transformation in the form + * of a transformation matrix of six values. matrix(a,b,c,d,e,f) is equivalent to applying + * the transformation matrix [a b c d e f]. + * + * * translate( []), which specifies a translation by tx and ty. + * If is not provided, it is assumed to be zero. + * + * * scale( []), which specifies a scale operation by sx and sy. + * If is not provided, it is assumed to be equal to . + * + * * rotate( [ ]), which specifies a rotation + * by degrees about a given point. + * If optional parameters and are not supplied, the rotate + * is about the origin of the current user coordinate system. The operation corresponds + * to the matrix [cos(a) sin(a) -sin(a) cos(a) 0 0]. + * If optional parameters and are supplied, the rotate is + * about the point (, ). The operation represents the equivalent of the + *following specification: translate(, ) rotate() translate(-, -). + * + * * skewX(), which specifies a skew transformation along the x-axis. + * + * * skewY(), which specifies a skew transformation along the y-axis. + * */ updateTransform() { - let sx = this._size.width / this._coordSize.width; - let sy = this._size.height / this._coordSize.height; + if (this._coordSize.width > 0) { + const sx = (this._size.width / this._coordSize.width).toFixed(5); + const sy = (this._size.height / this._coordSize.height).toFixed(5); - let cx = this._position.x - this._coordOrigin.x * sx; - let cy = this._position.y - this._coordOrigin.y * sy; - - // FIXME: are we sure of this values? - cx = Number.isNaN(cx) ? 0 : cx; - cy = Number.isNaN(cy) ? 0 : cy; - sx = Number.isNaN(sx) ? 0 : sx; - sy = Number.isNaN(sy) ? 0 : sy; - - this._native.setAttribute('transform', `translate(${cx},${cy}) scale(${sx},${sy})`); + const cx = (this._position.x - this._coordOrigin.x * sx).toFixed(5); + const cy = (this._position.y - this._coordOrigin.y * sy).toFixed(5); + this._native.setAttribute('transform', `translate(${cx},${cy}) scale(${sx},${sy})`); + } else { + this._native.removeAttribute('transform'); + } } setOpacity(value) { @@ -135,7 +144,10 @@ class GroupPeer extends ElementPeer { } getPosition() { - return { x: this._position.x, y: this._position.y }; + return { + x: this._position.x, + y: this._position.y + }; } append(child) { @@ -144,8 +156,11 @@ class GroupPeer extends ElementPeer { } getCoordOrigin() { - return { x: this._coordOrigin.x, y: this._coordOrigin.y }; + return { + x: this._coordOrigin.x, + y: this._coordOrigin.y + }; } } -export default GroupPeer; +export default GroupPeer; \ No newline at end of file