neo.mjs 4.4.8 → 4.4.10
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.
- package/examples/component/wrapper/googleMaps/MainContainer.mjs +46 -0
- package/examples/component/wrapper/googleMaps/MainContainerController.mjs +31 -0
- package/examples/component/wrapper/googleMaps/app.mjs +7 -0
- package/examples/component/wrapper/googleMaps/index.html +11 -0
- package/examples/component/wrapper/googleMaps/neo-config.json +7 -0
- package/package.json +2 -2
- package/src/component/Base.mjs +2 -2
- package/src/component/Splitter.mjs +1 -1
- package/src/component/wrapper/GoogleMaps.mjs +156 -0
- package/src/container/Base.mjs +10 -0
- package/src/main/addon/GoogleMaps.mjs +123 -0
- package/src/manager/Component.mjs +6 -2
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import Button from '../../../../src/button/Base.mjs';
|
|
2
|
+
import GoogleMapsComponent from '../../../../src/component/wrapper/GoogleMaps.mjs';
|
|
3
|
+
import MainContainerController from './MainContainerController.mjs';
|
|
4
|
+
import Toolbar from '../../../../src/toolbar/Base.mjs';
|
|
5
|
+
import Viewport from '../../../../src/container/Viewport.mjs';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* @class Neo.examples.component.wrapper.googleMaps.MainContainer
|
|
9
|
+
* @extends Neo.container.Viewport
|
|
10
|
+
*/
|
|
11
|
+
class MainContainer extends Viewport {
|
|
12
|
+
static getConfig() {return {
|
|
13
|
+
className : 'Neo.examples.component.wrapper.googleMaps.MainContainer',
|
|
14
|
+
autoMount : true,
|
|
15
|
+
controller: MainContainerController,
|
|
16
|
+
layout : {ntype: 'vbox', align: 'stretch'},
|
|
17
|
+
|
|
18
|
+
items: [{
|
|
19
|
+
module : GoogleMapsComponent,
|
|
20
|
+
flex : 1,
|
|
21
|
+
reference: 'google-maps-component',
|
|
22
|
+
|
|
23
|
+
markerStoreConfig: {
|
|
24
|
+
data: [{
|
|
25
|
+
id : '1',
|
|
26
|
+
position: {lat: -34.397, lng: 150.644},
|
|
27
|
+
title : 'Hello neo'
|
|
28
|
+
}]
|
|
29
|
+
}
|
|
30
|
+
}, {
|
|
31
|
+
module: Toolbar,
|
|
32
|
+
flex : 'none',
|
|
33
|
+
style : {margin: '20px'},
|
|
34
|
+
items : [{
|
|
35
|
+
module : Button,
|
|
36
|
+
handler: 'onFlyToButtonClick',
|
|
37
|
+
iconCls: 'fa-solid fa-plane',
|
|
38
|
+
text : 'Fly to San Fran'
|
|
39
|
+
}]
|
|
40
|
+
}]
|
|
41
|
+
}}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
Neo.applyClassConfig(MainContainer);
|
|
45
|
+
|
|
46
|
+
export default MainContainer;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import ComponentController from '../../../../src/controller/Component.mjs';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @class Neo.examples.component.wrapper.googleMaps.MainContainerController
|
|
5
|
+
* @extends Neo.controller.Component
|
|
6
|
+
*/
|
|
7
|
+
class MainContainerController extends ComponentController {
|
|
8
|
+
static getConfig() {return {
|
|
9
|
+
/**
|
|
10
|
+
* @member {String} className='Neo.examples.component.wrapper.googleMaps.MainContainerController'
|
|
11
|
+
* @protected
|
|
12
|
+
*/
|
|
13
|
+
className: 'Neo.examples.component.wrapper.googleMaps.MainContainerController'
|
|
14
|
+
}}
|
|
15
|
+
|
|
16
|
+
/**
|
|
17
|
+
* @param {Object} data
|
|
18
|
+
*/
|
|
19
|
+
onFlyToButtonClick(data) {
|
|
20
|
+
// todo
|
|
21
|
+
/*this.getReference('google-maps-component').flyTo({
|
|
22
|
+
destination: [-122.4175, 37.655, 400],
|
|
23
|
+
heading : 0.0,
|
|
24
|
+
pitch : -15.0
|
|
25
|
+
});*/
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
Neo.applyClassConfig(MainContainerController);
|
|
30
|
+
|
|
31
|
+
export default MainContainerController;
|
|
@@ -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 GoogleMaps Component</title>
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
<script src="../../../../src/MicroLoader.mjs" type="module"></script>
|
|
10
|
+
</body>
|
|
11
|
+
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "neo.mjs",
|
|
3
|
-
"version": "4.4.
|
|
3
|
+
"version": "4.4.10",
|
|
4
4
|
"description": "The webworkers driven UI framework",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"repository": {
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"neo-jsdoc": "^1.0.1",
|
|
57
57
|
"neo-jsdoc-x": "^1.0.4",
|
|
58
58
|
"postcss": "^8.4.20",
|
|
59
|
-
"sass": "^1.57.
|
|
59
|
+
"sass": "^1.57.1",
|
|
60
60
|
"webpack": "^5.75.0",
|
|
61
61
|
"webpack-cli": "^5.0.1",
|
|
62
62
|
"webpack-dev-server": "4.11.1",
|
package/src/component/Base.mjs
CHANGED
|
@@ -974,8 +974,8 @@ class Base extends CoreBase {
|
|
|
974
974
|
|
|
975
975
|
/**
|
|
976
976
|
* Unregisters this instance from the ComponentManager
|
|
977
|
-
* @param {Boolean}
|
|
978
|
-
* @param {Boolean}
|
|
977
|
+
* @param {Boolean} updateParentVdom=false true to remove the component from the parent vdom => real dom
|
|
978
|
+
* @param {Boolean} silent=false true to update the vdom silently (useful for destroying multiple child items in a row)
|
|
979
979
|
* todo: unregister events
|
|
980
980
|
*/
|
|
981
981
|
destroy(updateParentVdom=false, silent=false) {
|
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
import Base from '../../component/Base.mjs';
|
|
2
|
+
import ClassSystemUtil from '../../util/ClassSystem.mjs';
|
|
3
|
+
import Store from '../../data/Store.mjs';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* @class Neo.component.wrapper.GoogleMaps
|
|
7
|
+
* @extends Neo.component.Base
|
|
8
|
+
*/
|
|
9
|
+
class GoogleMaps extends Base {
|
|
10
|
+
static getConfig() {return {
|
|
11
|
+
/**
|
|
12
|
+
* @member {String} className='Neo.component.wrapper.GoogleMaps'
|
|
13
|
+
* @protected
|
|
14
|
+
*/
|
|
15
|
+
className: 'Neo.component.wrapper.GoogleMaps',
|
|
16
|
+
/**
|
|
17
|
+
* Prefer to use markerStoreConfig instead.
|
|
18
|
+
* @member {Neo.data.Store|Object} markerStore_
|
|
19
|
+
* @protected
|
|
20
|
+
*/
|
|
21
|
+
markerStore_: {
|
|
22
|
+
model: {
|
|
23
|
+
fields: [{
|
|
24
|
+
name: 'id',
|
|
25
|
+
type: 'String'
|
|
26
|
+
}, {
|
|
27
|
+
name: 'position',
|
|
28
|
+
type: 'Object'
|
|
29
|
+
}, {
|
|
30
|
+
name: 'title',
|
|
31
|
+
type: 'String'
|
|
32
|
+
}]
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
/**
|
|
36
|
+
* @member {Object} markerStoreConfig: null
|
|
37
|
+
*/
|
|
38
|
+
markerStoreConfig: null,
|
|
39
|
+
/**
|
|
40
|
+
* @member {Object} _vdom
|
|
41
|
+
*/
|
|
42
|
+
_vdom:
|
|
43
|
+
{}
|
|
44
|
+
}}
|
|
45
|
+
|
|
46
|
+
/**
|
|
47
|
+
* @param {Object} data
|
|
48
|
+
* @param {String} data.id
|
|
49
|
+
* @param {String} data.mapId
|
|
50
|
+
* @param {Object} data.position
|
|
51
|
+
* @param {String} [data.title]
|
|
52
|
+
*/
|
|
53
|
+
addMarker(data) {
|
|
54
|
+
Neo.main.addon.GoogleMaps.addMarker(data);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/**
|
|
58
|
+
* Triggered after the markerStore config got changed
|
|
59
|
+
* @param {Object} value
|
|
60
|
+
* @param {Object} oldValue
|
|
61
|
+
* @protected
|
|
62
|
+
*/
|
|
63
|
+
afterSetMarkerStore(value, oldValue) {
|
|
64
|
+
let me = this;
|
|
65
|
+
|
|
66
|
+
value.on({
|
|
67
|
+
load : me.onMarkerStoreLoad,
|
|
68
|
+
scope: me
|
|
69
|
+
});
|
|
70
|
+
|
|
71
|
+
if (value.items.length > 0) {
|
|
72
|
+
me.onMarkerStoreLoad();
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
/**
|
|
77
|
+
* Triggered after the mounted config got changed
|
|
78
|
+
* @param {Boolean} value
|
|
79
|
+
* @param {Boolean} oldValue
|
|
80
|
+
* @protected
|
|
81
|
+
*/
|
|
82
|
+
afterSetMounted(value, oldValue) {
|
|
83
|
+
let me = this;
|
|
84
|
+
|
|
85
|
+
if (value === false && oldValue !== undefined) {
|
|
86
|
+
Neo.main.addon.GoogleMaps.destroy({
|
|
87
|
+
appName: me.appName,
|
|
88
|
+
id : me.id
|
|
89
|
+
});
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
super.afterSetMounted(value, oldValue);
|
|
93
|
+
|
|
94
|
+
if (value) {
|
|
95
|
+
let opts = {
|
|
96
|
+
appName: me.appName,
|
|
97
|
+
id : me.id
|
|
98
|
+
};
|
|
99
|
+
|
|
100
|
+
setTimeout(() => {
|
|
101
|
+
Neo.main.addon.GoogleMaps.create(opts).then(() => {
|
|
102
|
+
me.onComponentMounted();
|
|
103
|
+
});
|
|
104
|
+
}, 50);
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
/**
|
|
109
|
+
* Triggered before the markerStore config gets changed.
|
|
110
|
+
* @param {Object} value
|
|
111
|
+
* @param {Object} oldValue
|
|
112
|
+
* @protected
|
|
113
|
+
*/
|
|
114
|
+
beforeSetMarkerStore(value, oldValue) {
|
|
115
|
+
oldValue?.destroy();
|
|
116
|
+
|
|
117
|
+
return ClassSystemUtil.beforeSetInstance(value, Store, this.markerStoreConfig);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/**
|
|
121
|
+
* @param {Boolean} updateParentVdom=false
|
|
122
|
+
* @param {Boolean} silent=false
|
|
123
|
+
*/
|
|
124
|
+
destroy(updateParentVdom=false, silent=false) {
|
|
125
|
+
Neo.main.addon.GoogleMaps.removeMap({
|
|
126
|
+
mapId: this.id
|
|
127
|
+
});
|
|
128
|
+
|
|
129
|
+
super.destroy(updateParentVdom, silent);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
/**
|
|
133
|
+
*
|
|
134
|
+
*/
|
|
135
|
+
onComponentMounted() {
|
|
136
|
+
console.log('onComponentMounted', this.id);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
/**
|
|
140
|
+
*
|
|
141
|
+
*/
|
|
142
|
+
onMarkerStoreLoad() {
|
|
143
|
+
let me = this;
|
|
144
|
+
|
|
145
|
+
me.markerStore.items.forEach(item => {
|
|
146
|
+
Neo.main.addon.GoogleMaps.addMarker({
|
|
147
|
+
mapId: me.id,
|
|
148
|
+
...item
|
|
149
|
+
})
|
|
150
|
+
})
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
Neo.applyClassConfig(GoogleMaps);
|
|
155
|
+
|
|
156
|
+
export default GoogleMaps;
|
package/src/container/Base.mjs
CHANGED
|
@@ -191,6 +191,16 @@ class Base extends Component {
|
|
|
191
191
|
defaults = me.itemDefaults,
|
|
192
192
|
lazyLoadItem, module;
|
|
193
193
|
|
|
194
|
+
if (defaults) {
|
|
195
|
+
if (item.module) {
|
|
196
|
+
delete defaults.ntype;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
if (item.ntype) {
|
|
200
|
+
delete defaults.module;
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
|
|
194
204
|
switch (Neo.typeOf(item)) {
|
|
195
205
|
case 'NeoClass': {
|
|
196
206
|
item = Neo.create({
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
import Base from '../../core/Base.mjs';
|
|
2
|
+
import DomAccess from '../DomAccess.mjs';
|
|
3
|
+
import Observable from '../../core/Observable.mjs';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* @class Neo.main.addon.GoogleMaps
|
|
7
|
+
* @extends Neo.core.Base
|
|
8
|
+
* @singleton
|
|
9
|
+
*/
|
|
10
|
+
class GoogleMaps extends Base {
|
|
11
|
+
static getConfig() {return {
|
|
12
|
+
/**
|
|
13
|
+
* @member {String} className='Neo.main.addon.GoogleMaps'
|
|
14
|
+
* @protected
|
|
15
|
+
*/
|
|
16
|
+
className: 'Neo.main.addon.GoogleMaps',
|
|
17
|
+
/**
|
|
18
|
+
* @member {Object} maps={}
|
|
19
|
+
*/
|
|
20
|
+
maps: {},
|
|
21
|
+
/**
|
|
22
|
+
* @member {Object} markers={}
|
|
23
|
+
*/
|
|
24
|
+
markers: {},
|
|
25
|
+
/**
|
|
26
|
+
* @member {Neo.core.Base[]} mixins=[Observable]
|
|
27
|
+
*/
|
|
28
|
+
mixins: [Observable],
|
|
29
|
+
/**
|
|
30
|
+
* @member {Object} remote
|
|
31
|
+
* @protected
|
|
32
|
+
*/
|
|
33
|
+
remote: {
|
|
34
|
+
app: [
|
|
35
|
+
'addMarker',
|
|
36
|
+
'create',
|
|
37
|
+
'removeMap'
|
|
38
|
+
]
|
|
39
|
+
},
|
|
40
|
+
/**
|
|
41
|
+
* @member {Boolean} singleton=true
|
|
42
|
+
* @protected
|
|
43
|
+
*/
|
|
44
|
+
singleton: true
|
|
45
|
+
}}
|
|
46
|
+
|
|
47
|
+
/**
|
|
48
|
+
* @param {Object} config
|
|
49
|
+
*/
|
|
50
|
+
construct(config) {
|
|
51
|
+
super.construct(config);
|
|
52
|
+
this.loadApi();
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/**
|
|
56
|
+
* @param {Object} data
|
|
57
|
+
* @param {String} data.id
|
|
58
|
+
* @param {String} data.mapId
|
|
59
|
+
* @param {Object} data.position
|
|
60
|
+
* @param {String} [data.title]
|
|
61
|
+
*/
|
|
62
|
+
addMarker(data) {
|
|
63
|
+
let me = this;
|
|
64
|
+
|
|
65
|
+
if (!me.maps[data.mapId]) {
|
|
66
|
+
let listenerId = me.on('mapCreated', mapId => {
|
|
67
|
+
if (data.mapId === mapId) {
|
|
68
|
+
me.un(listenerId);
|
|
69
|
+
me.addMarker(data);
|
|
70
|
+
}
|
|
71
|
+
})
|
|
72
|
+
} else {
|
|
73
|
+
Neo.ns(`${data.mapId}`, true, me.markers);
|
|
74
|
+
|
|
75
|
+
me.markers[data.mapId][data.id] = new google.maps.Marker({
|
|
76
|
+
position: data.position,
|
|
77
|
+
map : me.maps[data.mapId],
|
|
78
|
+
title : data.title,
|
|
79
|
+
});
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/**
|
|
84
|
+
* @param {Object} data
|
|
85
|
+
* @param {String} data.id
|
|
86
|
+
*/
|
|
87
|
+
create(data) {
|
|
88
|
+
let me = this;
|
|
89
|
+
|
|
90
|
+
me.maps[data.id] = new google.maps.Map(DomAccess.getElement(data.id), {
|
|
91
|
+
center: { lat: -34.397, lng: 150.644 },
|
|
92
|
+
zoom: 8,
|
|
93
|
+
});
|
|
94
|
+
|
|
95
|
+
me.fire('mapCreated', data.id);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/**
|
|
99
|
+
* @param {Object} data
|
|
100
|
+
* @param {String} data.mapId
|
|
101
|
+
*/
|
|
102
|
+
removeMap(data) {
|
|
103
|
+
delete this.maps[data.mapId];
|
|
104
|
+
delete this.markers[data.mapId];
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
/**
|
|
108
|
+
* @protected
|
|
109
|
+
*/
|
|
110
|
+
loadApi() {
|
|
111
|
+
DomAccess.loadScript('https://maps.googleapis.com/maps/api/js?key=AIzaSyCRj-EPE3H7PCzZtYCmDzln6sj7uPCGohA&v=weekly').then(() => {
|
|
112
|
+
console.log('GoogleMaps API loaded');
|
|
113
|
+
})
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
Neo.applyClassConfig(GoogleMaps);
|
|
118
|
+
|
|
119
|
+
let instance = Neo.create(GoogleMaps);
|
|
120
|
+
|
|
121
|
+
Neo.applyToGlobalNs(instance);
|
|
122
|
+
|
|
123
|
+
export default instance;
|
|
@@ -184,11 +184,15 @@ class Component extends Base {
|
|
|
184
184
|
}
|
|
185
185
|
|
|
186
186
|
/**
|
|
187
|
-
* Returns an Array containing all parent components for a given component
|
|
188
|
-
* @param {Neo.component.Base} component
|
|
187
|
+
* Returns an Array containing all parent components for a given component or component id
|
|
188
|
+
* @param {Neo.component.Base|String} component
|
|
189
189
|
* @returns {Neo.component.Base[]} parents
|
|
190
190
|
*/
|
|
191
191
|
getParents(component) {
|
|
192
|
+
if (Neo.isString(component)) {
|
|
193
|
+
component = this.getById(component);
|
|
194
|
+
}
|
|
195
|
+
|
|
192
196
|
let parents = [];
|
|
193
197
|
|
|
194
198
|
while (component?.parentId) {
|