neo.mjs 3.2.2 → 3.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/apps/covid/view/country/Gallery.mjs +11 -11
  2. package/apps/realworld2/view/article/Gallery.mjs +8 -8
  3. package/apps/sharedcovid/view/country/Gallery.mjs +11 -11
  4. package/buildScripts/webpack/development/webpack.config.appworker.mjs +4 -4
  5. package/buildScripts/webpack/development/webpack.config.myapps.mjs +4 -4
  6. package/buildScripts/webpack/production/webpack.config.appworker.mjs +3 -3
  7. package/buildScripts/webpack/production/webpack.config.myapps.mjs +3 -3
  8. package/examples/ConfigurationViewport.mjs +1 -1
  9. package/examples/component/coronaGallery/CountryGallery.mjs +12 -12
  10. package/examples/component/coronaGallery/CountryModel.mjs +8 -2
  11. package/examples/component/coronaGallery/CountryStore.mjs +12 -2
  12. package/examples/component/coronaGallery/MainContainer.mjs +3 -6
  13. package/examples/component/gallery/ImageModel.mjs +38 -0
  14. package/examples/component/gallery/ImageStore.mjs +32 -0
  15. package/examples/component/gallery/MainContainer.mjs +2 -0
  16. package/examples/component/helix/ImageModel.mjs +38 -0
  17. package/examples/component/helix/ImageStore.mjs +32 -0
  18. package/examples/component/helix/MainContainer.mjs +2 -0
  19. package/examples/list/animate/List.mjs +11 -1
  20. package/examples/list/animate/MainStore.mjs +4 -5
  21. package/examples/list/circle/MainContainer.mjs +142 -0
  22. package/examples/list/circle/MainModel.mjs +33 -0
  23. package/examples/list/circle/MainStore.mjs +42 -0
  24. package/examples/list/circle/app.mjs +7 -0
  25. package/examples/list/circle/index.html +11 -0
  26. package/examples/list/circle/neo-config.json +7 -0
  27. package/package.json +3 -3
  28. package/resources/examples/data/{circleContacts.json → circles/group1.json} +0 -0
  29. package/resources/examples/data/circles/group2.json +18 -0
  30. package/resources/examples/data/circles/group3.json +20 -0
  31. package/resources/examples/data/circles/group4.json +28 -0
  32. package/resources/scss/src/apps/covid/country/Gallery.scss +2 -1
  33. package/resources/scss/src/component/Gallery.scss +2 -1
  34. package/resources/scss/src/component/Helix.scss +7 -1
  35. package/resources/scss/src/examples/component/coronaGallery/CountryGallery.scss +2 -1
  36. package/resources/scss/src/list/Circle.scss +25 -0
  37. package/src/calendar/view/MainContainer.mjs +1 -1
  38. package/src/calendar/view/calendars/List.mjs +2 -2
  39. package/src/calendar/view/month/Component.mjs +8 -21
  40. package/src/component/Circle.mjs +51 -30
  41. package/src/component/Gallery.mjs +86 -115
  42. package/src/component/Helix.mjs +26 -40
  43. package/src/core/Base.mjs +1 -1
  44. package/src/data/Store.mjs +2 -2
  45. package/src/list/Base.mjs +51 -14
  46. package/src/list/Chip.mjs +2 -3
  47. package/src/list/Circle.mjs +87 -0
  48. package/src/list/Component.mjs +37 -6
  49. package/src/list/plugin/Animate.mjs +79 -37
  50. package/src/selection/CircleModel.mjs +3 -3
  51. package/src/selection/ListModel.mjs +2 -2
  52. package/src/worker/App.mjs +14 -18
package/examples/list/circle/MainModel.mjs ADDED
@@ -0,0 +1,33 @@
1
+ import Model from '../../../src/data/Model.mjs';
2
+
3
+ /**
4
+ * @class Neo.examples.list.circle.MainModel
5
+ * @extends Neo.data.Model
6
+ */
7
+ class MainModel extends Model {
8
+ static getConfig() {return {
9
+ /**
10
+ * @member {String} className='Neo.examples.list.circle.MainModel'
11
+ * @protected
12
+ */
13
+ className: 'Neo.examples.list.circle.MainModel',
14
+ /**
15
+ * @member {Object[]} fields
16
+ * @protected
17
+ */
18
+ fields: [{
19
+ name: 'id',
20
+ type: 'Integer'
21
+ }, {
22
+ name: 'name',
23
+ type: 'String'
24
+ }, {
25
+ name: 'url',
26
+ type: 'String'
27
+ }]
28
+ }}
29
+ }
30
+
31
+ Neo.applyClassConfig(MainModel);
32
+
33
+ export default MainModel;
package/examples/list/circle/MainStore.mjs ADDED
@@ -0,0 +1,42 @@
1
+ import MainModel from './MainModel.mjs';
2
+ import Store from '../../../src/data/Store.mjs';
3
+
4
+ /**
5
+ * @class Neo.examples.list.circle.MainStore
6
+ * @extends Neo.data.Store
7
+ */
8
+ class MainStore extends Store {
9
+ static getConfig() {return {
10
+ /**
11
+ * @member {String} className='Neo.examples.list.circle.MainStore'
12
+ * @protected
13
+ */
14
+ className: 'Neo.examples.list.circle.MainStore',
15
+ /**
16
+ * @member {Object[]} data
17
+ */
18
+ data: [
19
+ {id: 1, name: 'Red', url: '../../resources/examples/data/circles/group1.json'},
20
+ {id: 2, name: 'Pink', url: '../../resources/examples/data/circles/group4.json'},
21
+ {id: 3, name: 'Orange', url: '../../resources/examples/data/circles/group3.json'},
22
+ {id: 4, name: 'Yellow', url: '../../resources/examples/data/circles/group1.json'},
23
+ {id: 5, name: 'Green', url: '../../resources/examples/data/circles/group2.json'},
24
+ {id: 6, name: 'Blue', url: '../../resources/examples/data/circles/group1.json'}
25
+ ],
26
+ /**
27
+ * @member {Neo.data.Model} model=MainModel
28
+ */
29
+ model: MainModel,
30
+ /**
31
+ * @member {Object[]} sorters
32
+ */
33
+ sorters: [{
34
+ property : 'name',
35
+ direction: 'ASC'
36
+ }]
37
+ }}
38
+ }
39
+
40
+ Neo.applyClassConfig(MainStore);
41
+
42
+ export default MainStore;
package/examples/list/circle/app.mjs ADDED
@@ -0,0 +1,7 @@
1
+ import MainContainer from './MainContainer.mjs';
2
+
3
+ export const onStart = () => Neo.app({
4
+ mainView: MainContainer,
5
+ name : 'Neo.examples.list.circle'
6
+ });
7
+
package/examples/list/circle/index.html ADDED
@@ -0,0 +1,11 @@
1
+ <!DOCTYPE HTML>
2
+ <html>
3
+ <head>
4
+ <meta name="viewport" content="width=device-width, initial-scale=1">
5
+ <meta charset="UTF-8">
6
+ <title>Neo CircleList</title>
7
+ </head>
8
+ <body>
9
+ <script src="../../../src/MicroLoader.mjs" type="module"></script>
10
+ </body>
11
+ </html>
package/examples/list/circle/neo-config.json ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "appPath" : "examples/list/circle/app.mjs",
3
+ "basePath" : "../../../",
4
+ "environment" : "development",
5
+ "mainPath" : "./Main.mjs",
6
+ "mainThreadAddons": ["Stylesheet"]
7
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "neo.mjs",
3
- "version": "3.2.2",
3
+ "version": "3.2.5",
4
4
  "description": "The webworkers driven UI framework",
5
5
  "type": "module",
6
6
  "repository": {
@@ -49,8 +49,8 @@
49
49
  "neo-jsdoc": "^1.0.1",
50
50
  "neo-jsdoc-x": "^1.0.4",
51
51
  "postcss": "^8.4.6",
52
- "sass": "^1.49.7",
53
- "webpack": "^5.68.0",
52
+ "sass": "^1.49.8",
53
+ "webpack": "^5.69.1",
54
54
  "webpack-cli": "^4.9.2",
55
55
  "webpack-dev-server": "4.7.4",
56
56
  "webpack-hook-plugin": "^1.0.7",
package/resources/examples/data/circles/group2.json ADDED
@@ -0,0 +1,18 @@
1
+ {
2
+ "success" : true,
3
+
4
+ "total" : 10,
5
+
6
+ "data" : [
7
+ {"id": 1, "firstname": "Linda", "lastname": "Kamen", "isOnline": false, "image": "ai_images/000022.jpg"},
8
+ {"id": 2, "firstname": "William", "lastname": "Horn", "isOnline": true, "image": "ai_images/000023.jpg"},
9
+ {"id": 3, "firstname": "Kimberly", "lastname": "Martin", "isOnline": false, "image": "ai_images/000024.jpg"},
10
+ {"id": 4, "firstname": "Maribel", "lastname": "Hermandez", "isOnline": true, "image": "ai_images/000025.jpg"},
11
+ {"id": 5, "firstname": "Keneth", "lastname": "Gilette", "isOnline": true, "image": "ai_images/000026.jpg"},
12
+ {"id": 6, "firstname": "Mark", "lastname": "Boerner", "isOnline": false, "image": "ai_images/000027.jpg"},
13
+ {"id": 7, "firstname": "Alicia", "lastname": "Baker", "isOnline": true, "image": "ai_images/000028.jpg"},
14
+ {"id": 8, "firstname": "Wesley", "lastname": "Kaplan", "isOnline": true, "image": "ai_images/000029.jpg"},
15
+ {"id": 9, "firstname": "Leroy", "lastname": "Marzano", "isOnline": false, "image": "ai_images/000030.jpg"},
16
+ {"id": 10, "firstname": "Lynn", "lastname": "Broughton", "isOnline": false, "image": "ai_images/000031.jpg"}
17
+ ]
18
+ }
package/resources/examples/data/circles/group3.json ADDED
@@ -0,0 +1,20 @@
1
+ {
2
+ "success" : true,
3
+
4
+ "total" : 12,
5
+
6
+ "data" : [
7
+ {"id": 1, "firstname": "Leah", "lastname": "Weigle", "isOnline": false, "image": "ai_images/000032.jpg"},
8
+ {"id": 2, "firstname": "Teresita", "lastname": "Cisneros", "isOnline": true, "image": "ai_images/000033.jpg"},
9
+ {"id": 3, "firstname": "Anne", "lastname": "Brown", "isOnline": false, "image": "ai_images/000034.jpg"},
10
+ {"id": 4, "firstname": "Kim", "lastname": "Bryant", "isOnline": true, "image": "ai_images/000035.jpg"},
11
+ {"id": 5, "firstname": "Rose", "lastname": "Seale", "isOnline": true, "image": "ai_images/000036.jpg"},
12
+ {"id": 6, "firstname": "Joseph", "lastname": "Sabin", "isOnline": false, "image": "ai_images/000037.jpg"},
13
+ {"id": 7, "firstname": "Edward", "lastname": "Paine", "isOnline": true, "image": "ai_images/000038.jpg"},
14
+ {"id": 8, "firstname": "Shannon", "lastname": "Dison", "isOnline": true, "image": "ai_images/000039.jpg"},
15
+ {"id": 9, "firstname": "Tyler", "lastname": "Marlowe", "isOnline": false, "image": "ai_images/000040.jpg"},
16
+ {"id": 10, "firstname": "Mary", "lastname": "Thompson", "isOnline": false, "image": "ai_images/000041.jpg"},
17
+ {"id": 11, "firstname": "David", "lastname": "Maddy", "isOnline": false, "image": "ai_images/000042.jpg"},
18
+ {"id": 12, "firstname": "Anna", "lastname": "McDaniel", "isOnline": false, "image": "ai_images/000043.jpg"}
19
+ ]
20
+ }
package/resources/examples/data/circles/group4.json ADDED
@@ -0,0 +1,28 @@
1
+ {
2
+ "success" : true,
3
+
4
+ "total" : 20,
5
+
6
+ "data" : [
7
+ {"id": 1, "firstname": "Susanne", "lastname": "Bosch", "isOnline": false, "image": "ai_images/000044.jpg"},
8
+ {"id": 2, "firstname": "Sarah", "lastname": "Baer", "isOnline": true, "image": "ai_images/000045.jpg"},
9
+ {"id": 3, "firstname": "Felix", "lastname": "Schwarz", "isOnline": false, "image": "ai_images/000046.jpg"},
10
+ {"id": 4, "firstname": "Lukas", "lastname": "Krause", "isOnline": true, "image": "ai_images/000047.jpg"},
11
+ {"id": 5, "firstname": "Frank", "lastname": "Schmitz", "isOnline": true, "image": "ai_images/000048.jpg"},
12
+ {"id": 6, "firstname": "Stefanie", "lastname": "Berg", "isOnline": false, "image": "ai_images/000049.jpg"},
13
+ {"id": 7, "firstname": "Anne", "lastname": "Fischer", "isOnline": true, "image": "ai_images/000050.jpg"},
14
+ {"id": 8, "firstname": "Tanja", "lastname": "Fenstermacher", "isOnline": true, "image": "ai_images/000051.jpg"},
15
+ {"id": 9, "firstname": "Ines", "lastname": "Meister", "isOnline": false, "image": "ai_images/000052.jpg"},
16
+ {"id": 10, "firstname": "Antje", "lastname": "Peters", "isOnline": false, "image": "ai_images/000053.jpg"},
17
+ {"id": 11, "firstname": "Stephan", "lastname": "Fleischer", "isOnline": false, "image": "ai_images/000054.jpg"},
18
+ {"id": 12, "firstname": "Annett", "lastname": "Fuerst", "isOnline": false, "image": "ai_images/000055.jpg"},
19
+ {"id": 13, "firstname": "Leon", "lastname": "Ritter", "isOnline": false, "image": "ai_images/000056.jpg"},
20
+ {"id": 14, "firstname": "Andrea", "lastname": "Biermann", "isOnline": false, "image": "ai_images/000057.jpg"},
21
+ {"id": 15, "firstname": "Wolfgang", "lastname": "Abend", "isOnline": false, "image": "ai_images/000058.jpg"},
22
+ {"id": 16, "firstname": "Ulrich", "lastname": "Zimmer", "isOnline": false, "image": "ai_images/000059.jpg"},
23
+ {"id": 17, "firstname": "Nicole", "lastname": "Herzog", "isOnline": false, "image": "ai_images/000060.jpg"},
24
+ {"id": 18, "firstname": "Felix", "lastname": "König", "isOnline": false, "image": "ai_images/000061.jpg"},
25
+ {"id": 19, "firstname": "Thorsten", "lastname": "Werfel", "isOnline": false, "image": "ai_images/000063.jpg"},
26
+ {"id": 20, "firstname": "Patrick", "lastname": "Wolf", "isOnline": false, "image": "ai_images/000064.jpg"}
27
+ ]
28
+ }
package/resources/scss/src/apps/covid/country/Gallery.scss CHANGED
@@ -16,6 +16,7 @@
16
16
 
17
17
  .neo-selected {
18
18
  .neo-item-wrapper {
19
+ opacity : .95;
19
20
  transform : translateZ(180px) scale(1.5);
20
21
  -webkit-box-reflect: unset!important;
21
22
  }
@@ -66,4 +67,4 @@
66
67
  .image-wrap.neo-selected img {
67
68
  transform: inherit;
68
69
  }
69
- }
70
+ }
package/resources/scss/src/component/Gallery.scss CHANGED
@@ -62,6 +62,7 @@
62
62
 
63
63
  .neo-selected {
64
64
  .neo-item-wrapper {
65
+ opacity : .95;
65
66
  transform: translate3d(0, 0, 180px) scale(1.5);
66
67
  }
67
68
  }
@@ -69,4 +70,4 @@
69
70
  .image-wrap.neo-selected img {
70
71
  -webkit-box-reflect: unset !important;
71
72
  }
72
- }
73
+ }
package/resources/scss/src/component/Helix.scss CHANGED
@@ -16,6 +16,12 @@
16
16
  outline: 0;
17
17
  }
18
18
 
19
+ &.neo-follow-selection {
20
+ .neo-helix-item {
21
+ transition: all 0.1s linear;
22
+ }
23
+ }
24
+
19
25
  &.neo-transition-100 {
20
26
  .neo-helix-item {
21
27
  transition: all 0.1s ease-in-out !important;
@@ -87,4 +93,4 @@
87
93
  right : 0;
88
94
  text-shadow : 0 0 10px #61DFE5;
89
95
  }
90
- }
96
+ }
package/resources/scss/src/examples/component/coronaGallery/CountryGallery.scss CHANGED
@@ -42,6 +42,7 @@
42
42
 
43
43
  .neo-selected {
44
44
  .neo-item-wrapper {
45
+ opacity : .95;
45
46
  transform : translateZ(180px) scale(1.5);
46
47
  -webkit-box-reflect: unset!important;
47
48
  }
@@ -87,4 +88,4 @@
87
88
  .image-wrap.neo-selected img {
88
89
  transform: inherit;
89
90
  }
90
- }
91
+ }
package/resources/scss/src/list/Circle.scss ADDED
@@ -0,0 +1,25 @@
1
+ .neo-circle-list.neo-list {
2
+ background-color: v(list-item-background-color);
3
+
4
+ .neo-circle-component {
5
+ background-color: transparent;
6
+ border : none;
7
+
8
+ .neo-circle-center {
9
+ top: 50%;
10
+
11
+ .neo-circle-back {
12
+ background-color: rgba(62, 123, 134, 0.302);
13
+ }
14
+ }
15
+ }
16
+
17
+ .neo-list-item {
18
+ background-color: transparent;
19
+ padding : 0;
20
+
21
+ &.neo-selected {
22
+ background-color: v(list-item-background-color-hover);
23
+ }
24
+ }
25
+ }
package/src/calendar/view/MainContainer.mjs CHANGED
@@ -500,7 +500,7 @@ class MainContainer extends Container {
500
500
  return import('./SettingsContainer.mjs').then(module => {
501
501
  me.items[1].add({
502
502
  module : module.default,
503
- collapsed : collapsed,
503
+ collapsed,
504
504
  removeInactiveCards: me.removeInactiveCards,
505
505
  style : {marginRight: !collapsed ? '0' : `-${me.settingsContainerWidth}px`},
506
506
  width : me.settingsContainerWidth,
package/src/calendar/view/calendars/List.mjs CHANGED
@@ -47,7 +47,7 @@ class List extends ComponentList {
47
47
  */
48
48
  createItemContent(record, index) {
49
49
  let me = this,
50
- id = record[me.store.keyProperty],
50
+ id = record[me.getKeyProperty()],
51
51
  items = me.items || [],
52
52
  checkBox = items[index],
53
53
 
@@ -112,7 +112,7 @@ class List extends ComponentList {
112
112
 
113
113
  Object.assign(style, {
114
114
  left: `${listItemRect.right + 13}px`,
115
- top : `${listItemRect.top - 10}px`,
115
+ top : `${listItemRect.top - 10}px`
116
116
  });
117
117
 
118
118
  editCalendarContainer[mounted ? 'set' : 'setSilent']({
package/src/calendar/view/month/Component.mjs CHANGED
@@ -554,10 +554,7 @@ class Component extends BaseComponent {
554
554
  date.setDate(date.getDate() + 1);
555
555
  }
556
556
 
557
- return {
558
- header: header,
559
- row : row
560
- }
557
+ return {header, row}
561
558
  }
562
559
 
563
560
  /**
@@ -626,16 +623,12 @@ class Component extends BaseComponent {
626
623
  let oldPath = data.oldPath,
627
624
  path = data.path;
628
625
 
629
- if (oldPath) {
630
- if (oldPath[0]?.cls.includes('neo-event')) {
631
- Neo.applyDeltas(this.appName, {id: oldPath[0].id, cls: {remove: ['neo-focus']}});
632
- }
626
+ if (oldPath?.[0]?.cls.includes('neo-event')) {
627
+ Neo.applyDeltas(this.appName, {id: oldPath[0].id, cls: {remove: ['neo-focus']}});
633
628
  }
634
629
 
635
- if (path) {
636
- if (path[0]?.cls.includes('neo-event')) {
637
- Neo.applyDeltas(this.appName, {id: path[0].id, cls: {add: ['neo-focus']}});
638
- }
630
+ if (path?.[0]?.cls.includes('neo-event')) {
631
+ Neo.applyDeltas(this.appName, {id: path[0].id, cls: {add: ['neo-focus']}});
639
632
  }
640
633
  }
641
634
 
@@ -668,9 +661,7 @@ class Component extends BaseComponent {
668
661
 
669
662
  week = me.createWeek(DateUtil.clone(date));
670
663
 
671
- if (week.header) {
672
- container.cn.push(week.header);
673
- }
664
+ week.header && container.cn.push(week.header);
674
665
 
675
666
  container.cn.push(week.row);
676
667
  }
@@ -702,9 +693,7 @@ class Component extends BaseComponent {
702
693
 
703
694
  container.cn.unshift(week.row);
704
695
 
705
- if (week.header) {
706
- container.cn.unshift(week.header);
707
- }
696
+ week.header && container.cn.unshift(week.header);
708
697
  }
709
698
 
710
699
  me.promiseVdomUpdate(me.vdom).then(() => {
@@ -723,9 +712,7 @@ class Component extends BaseComponent {
723
712
  me.vdom = vdom;
724
713
  }
725
714
 
726
- if (me.scrollTaskId) {
727
- clearTimeout(me.scrollTaskId);
728
- }
715
+ me.scrollTaskId && clearTimeout(me.scrollTaskId);
729
716
 
730
717
  me.scrollTaskId = setTimeout(me.onWheelEnd.bind(me), 300);
731
718
  }
package/src/component/Circle.mjs CHANGED
@@ -41,11 +41,11 @@ class Circle extends Component {
41
41
  collapsed: true,
42
42
  /**
43
43
  * Additional used keys for the selection model
44
- * @member {Object} keys
44
+ * @member {Object} keys={}
45
45
  */
46
46
  keys: {},
47
47
  /**
48
- * @member {Number} innerRadius_=60
48
+ * @member {Number} innerRadius_=100
49
49
  */
50
50
  innerRadius_: 100,
51
51
  /**
@@ -58,7 +58,7 @@ class Circle extends Component {
58
58
  */
59
59
  itemImagePath: null,
60
60
  /**
61
- * @member {Number} itemSize_=30
61
+ * @member {Number} itemSize_=60
62
62
  */
63
63
  itemSize_: 60,
64
64
  /**
@@ -73,21 +73,25 @@ class Circle extends Component {
73
73
  /**
74
74
  * @member {Number} rotateX_=0
75
75
  */
76
- rotateX_:0,
76
+ rotateX_: 0,
77
77
  /**
78
78
  * @member {Number} rotateY_=0
79
79
  */
80
- rotateY_:0,
80
+ rotateY_: 0,
81
81
  /**
82
82
  * @member {Number} rotateZ_=0
83
83
  */
84
- rotateZ_:0,
84
+ rotateZ_: 0,
85
85
  /**
86
- * @member {Neo.selection.Model} selectionModel_=null
86
+ * @member {Number} rotationIndex_=0
87
+ */
88
+ rotationIndex_: 0,
89
+ /**
90
+ * @member {Neo.selection.Model|null} selectionModel_=null
87
91
  */
88
92
  selectionModel_: null,
89
93
  /**
90
- * @member {Neo.collection.Base} store_=null
94
+ * @member {Neo.collection.Base|null} store_=null
91
95
  */
92
96
  store_: null,
93
97
  /**
@@ -96,9 +100,9 @@ class Circle extends Component {
96
100
  title_: 'Circle 1',
97
101
  /**
98
102
  * The url for the store to load the data
99
- * @member {String} url_='../resources/examples/data/ai_contacts.json'
103
+ * @member {String} url_='../resources/examples/data/circles/group1.json'
100
104
  */
101
- url_: '../../resources/examples/data/circleContacts.json',
105
+ url_: '../../resources/examples/data/circles/group1.json',
102
106
  /**
103
107
  * @member {Object} _vdom
104
108
  */
@@ -283,6 +287,18 @@ class Circle extends Component {
283
287
  oldValue && this.rendered && this.rotate();
284
288
  }
285
289
 
290
+ /**
291
+ * Triggered after the rotationIndex config got changed
292
+ * @param {Number} value
293
+ * @param {Number} oldValue
294
+ * @protected
295
+ */
296
+ afterSetRotationIndex(value, oldValue) {
297
+ if (Neo.isNumber(oldValue)) {
298
+ console.log('afterSetRotationIndex', value);
299
+ }
300
+ }
301
+
286
302
  /**
287
303
  * Triggered after the selectionModel config got changed
288
304
  * @param {Neo.selection.Model} value
@@ -408,6 +424,7 @@ class Circle extends Component {
408
424
  let me = this,
409
425
  frontEl = me.getFrontEl(),
410
426
  itemPositions = me.calculateItemPositions(),
427
+ itemSize = me.itemSize,
411
428
  countItems = Math.min(me.store.getCount(), me.maxItems),
412
429
  i = startIndex,
413
430
  vdom = me.vdom;
@@ -418,18 +435,18 @@ class Circle extends Component {
418
435
  cls : ['neo-circle-item'],
419
436
  tabIndex: -1,
420
437
  style: {
421
- height: me.itemSize + 'px',
438
+ height: itemSize + 'px',
422
439
  left : itemPositions[i].left + 'px',
423
440
  top : itemPositions[i].top + 'px',
424
- width : me.itemSize + 'px'
441
+ width : itemSize + 'px'
425
442
  },
426
443
  cn: [{
427
444
  tag : 'img',
428
445
  cls : ['neo-circle-item-image'],
429
446
  src : me.itemImagePath + me.store.getAt(i).image,
430
447
  style: {
431
- height: me.itemSize + 'px',
432
- width : me.itemSize + 'px'
448
+ height: itemSize + 'px',
449
+ width : itemSize + 'px'
433
450
  }
434
451
  }]
435
452
  });
@@ -439,7 +456,7 @@ class Circle extends Component {
439
456
  }
440
457
 
441
458
  /**
442
- *
459
+ * @param {Object} data
443
460
  */
444
461
  expand(data) {
445
462
  let me = this;
@@ -452,7 +469,7 @@ class Circle extends Component {
452
469
  }
453
470
 
454
471
  /**
455
- * @param data
472
+ * @param {Object} data
456
473
  */
457
474
  expandItem(data) {
458
475
  let me = this,
@@ -526,7 +543,7 @@ class Circle extends Component {
526
543
  * @returns {String|Number} itemId
527
544
  */
528
545
  getItemRecordId(vnodeId) {
529
- let itemId = vnodeId.split('__')[1],
546
+ let itemId = vnodeId.split('__').pop(),
530
547
  model = this.store.model,
531
548
  keyField = model?.getField(model.keyProperty);
532
549
 
@@ -586,10 +603,7 @@ class Circle extends Component {
586
603
 
587
604
  let me = this;
588
605
 
589
- if (me.selectionModel) {
590
- me.selectionModel.register(me);
591
- }
592
-
606
+ me.selectionModel?.register(me);
593
607
  me.loadData();
594
608
  }
595
609
 
@@ -604,18 +618,25 @@ class Circle extends Component {
604
618
  * @param {Object} data
605
619
  */
606
620
  onMouseWheel(data) {
607
- let me = this,
608
- deltaY = data.deltaY,
609
- rotateZ = me.rotateZ;
621
+ let me = this,
622
+ deltaY = data.deltaY,
623
+ itemAngle = 360 / me.maxItems,
624
+ maxAngle = Math.max(0, (me.store.getCount() - me.maxItems) * itemAngle),
625
+ rotateZ = me.rotateZ;
610
626
 
611
- if (deltaY > 1 || deltaY < -1) {rotateZ += deltaY;}
627
+ if (deltaY > 1 || deltaY < -1) {
628
+ rotateZ += deltaY;
629
+ }
612
630
 
613
631
  if (rotateZ < 0) {
614
632
  rotateZ = 0;
633
+ } else if (rotateZ > maxAngle) {
634
+ rotateZ = maxAngle;
615
635
  }
616
636
 
617
- if (!(me.rotateZ === 0 && rotateZ === 0)) {
618
- me.rotateZ = rotateZ;
637
+ if (!(me.rotateZ === 0 && rotateZ === 0) && !(me.rotateZ === maxAngle && rotateZ === maxAngle)) {
638
+ me.rotateZ = rotateZ;
639
+ me.rotationIndex = Math.floor(rotateZ / itemAngle);
619
640
 
620
641
  me.rotate();
621
642
  }
@@ -629,9 +650,9 @@ class Circle extends Component {
629
650
  vdom = me.vdom,
630
651
  circleCenterEl = vdom.cn[0],
631
652
  transform = [
632
- 'rotateX(' + me.rotateX + 'deg)',
633
- 'rotateY(' + me.rotateY + 'deg)',
634
- 'rotateZ(' + me.rotateZ + 'deg)'
653
+ `rotateX(${me.rotateX}deg)`,
654
+ `rotateY(${me.rotateY}deg)`,
655
+ `rotateZ(${me.rotateZ}deg)`
635
656
  ].join(' ');
636
657
 
637
658
  if (me.circleCenterHasTransitionCls) {