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
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Cart
+
+
+
+
+
+
+
+ Upgrade to Pro
+
+
+
+
+
+
+
+ Pricing
+
+
+
+
+
+ Sign in
+
+
+ Sign up
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Alarm, attention, warning icon
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Change colors
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Free icon
+
+
+
+
+ You will spend 0 credits when downloading with
+
+
+ Free for commercial use
+
+
+
+
+
+
+
+ PNG
+
+
+
+
+ SVG
+
+
+
+
+
+ Other
+
+
+
+
+ Help with formats
+
+
+ PNG
+ The PNG format is widely supported and works best with presentations and web design. It is not vectorized which makes it unsuitable for enlarging after download or for print use.
+
+ SVG
+ The SVG format is vectorized which makes it editable and widely supported by design software and web browsers. SVGs can be scaled to any size without loss in quality, which also makes them suitable for print purposes.
+
+
+ Other
+ For other, more specific purposes, the icon is also available for download in formats such as
+
+
+ AI
+
+
+
+ ICO
+
+
+
+ ICNS
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 48 vector (SVG) icons - Go to icon set page
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Upgrade to Pro
+
Access million of icons and illustrations for a better price.
+
Compare plans
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Black Friday
+
+
+ Get 70% off the first month or year on all Pro subscriptions.
+
+
+
Enjoy the largest library of 5M icons and 20k illustrations.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Ratings on G2 and Trustpilot
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ 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 dd3b830f..00000000
Binary files a/packages/mindplot/assets/images/links.png and /dev/null differ
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