Skip to content

Commit 0174dc6

Browse files
byWulfbyWulf
committed
Fixed Lint errors. Reworked change detection. WIP!
1 parent 94a9588 commit 0174dc6

File tree

3 files changed

+171
-77
lines changed

3 files changed

+171
-77
lines changed

‎examples/src/App.vue

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,14 @@
2727
@click="currentView='custom-url-params'">Custom Url Params</a>
2828
</li>
2929
<li>
30-
<a href="#" @click="currentView='custom-control'">Custom Leaflet Control</a>
30+
<a
31+
href="#"
32+
@click="currentView='custom-control'">Custom Leaflet Control</a>
3133
</li>
3234
<li>
33-
<a href="#" @click="currentView='set-bounds'">Set bounds</a>
35+
<a
36+
href="#"
37+
@click="currentView='set-bounds'">Set bounds</a>
3438
</li>
3539
<li>
3640
<a

‎examples/src/components/Icon.vue

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,18 @@
33
<div style="height: 20%; overflow: auto;">
44
<h3>Custom Marker Icons</h3>
55
<label for="iconSize">Icon size:</label>
6-
<input id="iconSize" v-model="iconSize" type="range" min="1" max="200" value="64">
6+
<input
7+
id="iconSize"
8+
v-model="iconSize"
9+
type="range"
10+
min="1"
11+
max="200"
12+
value="64">
713
<label for="customTextInput">Custom text: </label>
8-
<input id="customTextInput" v-model="customText" type="text">
14+
<input
15+
id="customTextInput"
16+
v-model="customText"
17+
type="text">
918
</div>
1019
<l-map
1120
:zoom="zoom"
@@ -19,16 +28,25 @@
1928
<l-marker :lat-lng="[47.413220, -1.219482]" />
2029

2130
<!-- Use icon given in icon property -->
22-
<l-marker :lat-lng="[47.413220, -1.209482]" :icon="icon" />
31+
<l-marker
32+
:lat-lng="[47.413220, -1.209482]"
33+
:icon="icon" />
2334

2435
<!-- Create image icon (L.icon) from l-icon tag -->
2536
<l-marker :lat-lng="[47.413220, -1.199482]">
26-
<l-icon :icon-size="[iconSize, iconSize*1.15]" :icon-anchor="[iconSize/2, iconSize*1.15]" icon-url="static/images/baseball-marker.png" />
37+
<l-icon
38+
:icon-size="[iconSize, iconSize*1.15]"
39+
:icon-anchor="[iconSize/2, iconSize*1.15]"
40+
temp-name="icon 1"
41+
icon-url="static/images/baseball-marker.png" />
2742
</l-marker>
2843

2944
<!-- Create HTML icon (L.divIcon) by providing content inside the l-icon tag -->
3045
<l-marker :lat-lng="[47.413220, -1.189482]">
31-
<l-icon :icon-anchor="[16, 37]" class-name="someExtraClass">
46+
<l-icon
47+
:icon-anchor="[16, 37]"
48+
temp-name="icon 2"
49+
class-name="someExtraClass">
3250
<div class="headline">{{ customText }}</div>
3351
<img src="static/images/layers.png">
3452
</l-icon>

‎src/components/LIcon.vue

Lines changed: 142 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,108 @@
11
<template>
2-
<div>
3-
<slot></slot>
4-
</div>
2+
<div>
3+
<slot/>
4+
</div>
55
</template>
66

77
<script>
8+
import propsBinder from '../utils/propsBinder.js';
89
import findRealParent from '../utils/findRealParent.js';
910
import { optionsMerger } from '../utils/optionsUtils.js';
10-
import Options from '../mixins/Options.js';
1111
1212
export default {
1313
name: 'LIcon',
14-
mixins: [Options],
1514
props: {
16-
iconUrl: String,
17-
iconRetinaUrl: String,
18-
iconSize: [Object, Array],
19-
iconAnchor: [Object, Array],
20-
popupAnchor: [Object, Array],
21-
tooltipAnchor: [Object, Array],
22-
shadowUrl: String,
23-
shadowRetinaUrl: String,
24-
shadowSize: [Object, Array],
25-
shadowAnchor: [Object, Array],
26-
bgPos: [Object, Array],
27-
className: String
15+
iconUrl: {
16+
type: String,
17+
custom: true,
18+
default: null
19+
},
20+
iconRetinaUrl: {
21+
type: String,
22+
custom: true,
23+
default: null
24+
},
25+
iconSize: {
26+
type: [Object, Array],
27+
custom: true,
28+
default: null
29+
},
30+
iconAnchor: {
31+
type: [Object, Array],
32+
custom: true,
33+
default: null
34+
},
35+
popupAnchor: {
36+
type: [Object, Array],
37+
custom: true,
38+
default: () => [0, 0]
39+
},
40+
tooltipAnchor: {
41+
type: [Object, Array],
42+
custom: true,
43+
default: () => [0, 0]
44+
},
45+
shadowUrl: {
46+
type: String,
47+
custom: true,
48+
default: null
49+
},
50+
shadowRetinaUrl: {
51+
type: String,
52+
custom: true,
53+
default: null
54+
},
55+
shadowSize: {
56+
type: [Object, Array],
57+
custom: true,
58+
default: null
59+
},
60+
shadowAnchor: {
61+
type: [Object, Array],
62+
custom: true,
63+
default: null
64+
},
65+
bgPos: {
66+
type: [Object, Array],
67+
custom: true,
68+
default: () => [0, 0]
69+
},
70+
className: {
71+
type: String,
72+
custom: true,
73+
default: ''
74+
},
75+
options: {
76+
type: Object,
77+
custom: true,
78+
default: () => ({})
79+
},
80+
// TODO: Remove tempName here (and from the example)
81+
tempName: {
82+
type: String,
83+
custom: true,
84+
default: null
85+
}
2886
},
2987
30-
data() {
88+
data () {
3189
return {
3290
observer: null
33-
}
91+
};
3492
},
3593
3694
mounted () {
37-
const options = optionsMerger({
38-
iconUrl: this.iconUrl,
39-
iconRetinaUrl: this.iconRetinaUrl,
40-
iconSize: this.iconSize,
41-
iconAnchor: this.iconAnchor,
42-
popupAnchor: this.popupAnchor,
43-
tooltipAnchor: this.tooltipAnchor,
44-
shadowUrl: this.shadowUrl,
45-
shadowRetinaUrl: this.shadowRetinaUrl,
46-
shadowSize: this.shadowSize,
47-
shadowAnchor: this.shadowAnchor,
48-
bgPos: this.bgPos,
49-
className: this.className
50-
}, this);
95+
propsBinder(this, null, this.$options.props);
5196
52-
this.watchProps(options);
53-
this.watchSlot(options);
97+
this.observer = new MutationObserver(() => {
98+
this.createIcon();
99+
});
100+
this.observer.observe(
101+
this.$el,
102+
{ attributes: true, childList: true, characterData: true, subtree: true }
103+
);
54104
55-
this.createIcon(options);
105+
this.createIcon();
56106
},
57107
58108
beforeDestroy () {
@@ -63,17 +113,29 @@ export default {
63113
this.observer.disconnect();
64114
},
65115
66-
render() {
67-
return null;
68-
},
69-
70116
methods: {
71-
createIcon(options) {
117+
createIcon () {
118+
console.log(Date.now() + ' - recreate ' + this.tempName);
119+
72120
if (this.iconObject) {
73121
L.DomEvent.off(this.iconObject, this.$listeners);
74122
}
75123
76-
options.html = this.$el.innerHTML;
124+
const options = optionsMerger({
125+
iconUrl: this.iconUrl,
126+
iconRetinaUrl: this.iconRetinaUrl,
127+
iconSize: this.iconSize,
128+
iconAnchor: this.iconAnchor,
129+
popupAnchor: this.popupAnchor,
130+
tooltipAnchor: this.tooltipAnchor,
131+
shadowUrl: this.shadowUrl,
132+
shadowRetinaUrl: this.shadowRetinaUrl,
133+
shadowSize: this.shadowSize,
134+
shadowAnchor: this.shadowAnchor,
135+
bgPos: this.bgPos,
136+
className: this.className,
137+
html: this.$el.innerHTML || this.html
138+
}, this);
77139
78140
if (options.html) {
79141
this.iconObject = L.divIcon(options);
@@ -86,36 +148,46 @@ export default {
86148
this.parentContainer = findRealParent(this.$parent);
87149
this.parentContainer.mapObject.setIcon(this.iconObject);
88150
},
89-
90-
watchProps(options) {
91-
const props = this.$options.props;
92-
const keys = Object.keys(props);
93-
94-
for (let i = 0; i < keys.length; i++) {
95-
this.$watch(keys[i], (newVal, oldVal) => {
96-
//TODO: why is watch triggered on foreign props when changing icon size in my example?
97-
if (JSON.stringify(newVal) === JSON.stringify(oldVal)) {
98-
return;
99-
}
100-
101-
options[keys[i]] = newVal;
102-
this.createIcon(options);
103-
}, {
104-
deep: props[keys[i]].type === Object
105-
});
106-
}
151+
setIconUrl () {
152+
this.createIcon();
107153
},
108-
109-
watchSlot(options) {
110-
this.observer = new MutationObserver(() => {
111-
this.createIcon(options);
112-
});
113-
114-
this.observer.observe(
115-
this.$el,
116-
{ attributes: true, childList: true, characterData: true, subtree: true }
117-
);
154+
setIconRetinaUrl () {
155+
this.createIcon();
156+
},
157+
setIconSize () {
158+
this.createIcon();
159+
},
160+
setIconAnchor () {
161+
this.createIcon();
162+
},
163+
setPopupAnchor () {
164+
this.createIcon();
165+
},
166+
setTooltipAnchor () {
167+
this.createIcon();
168+
},
169+
setShadowUrl () {
170+
this.createIcon();
171+
},
172+
setShadowRetinaUrl () {
173+
this.createIcon();
174+
},
175+
setShadowAnchor () {
176+
this.createIcon();
177+
},
178+
setBgPos () {
179+
this.createIcon();
180+
},
181+
setClassName () {
182+
this.createIcon();
183+
},
184+
setHtml () {
185+
this.createIcon();
118186
}
187+
},
188+
189+
render () {
190+
return null;
119191
}
120192
};
121193
</script>

0 commit comments

Comments
 (0)