cnx-public/vue-google-maps-community-fork
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update dependencies and improve build system

Browse Source
This commit is contained in:
Fawad Mirzad
2021-02-13 17:30:46 +01:00
parent 04431e1b39
commit 9a20c42459
57 changed files with 8395 additions and 1064 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/utils/TwoWayBindingWrapper.js
View File

@@ -1,48 +1,52 @@
/**
* When you have two-way bindings, but the actual bound value will not equal
* the value you initially passed in, then to avoid an infinite loop you
* need to increment a counter every time you pass in a value, decrement the
* same counter every time the bound value changed, but only bubble up
* the event when the counter is zero.
*
Example:
Let's say DrawingRecognitionCanvas is a deep-learning backed canvas
that, when given the name of an object (e.g. 'dog'), draws a dog.
But whenever the drawing on it changes, it also sends back its interpretation
of the image by way of the @newObjectRecognized event.
<input
type="text"
placeholder="an object, e.g. Dog, Cat, Frog"
v-model="identifiedObject" />
<DrawingRecognitionCanvas
:object="identifiedObject"
@newObjectRecognized="identifiedObject = $event"
/>
new TwoWayBindingWrapper((increment, decrement, shouldUpdate) => {
this.$watch('identifiedObject', () => {
// new object passed in
increment()
})
this.$deepLearningBackend.on('drawingChanged', () => {
recognizeObject(this.$deepLearningBackend)
.then((object) => {
decrement()
if (shouldUpdate()) {
this.$emit('newObjectRecognized', object.name)
}
})
})
})
*/
export default function TwoWayBindingWrapper (fn) {
let counter = 0
fn(
() => { counter += 1 },
() => { counter = Math.max(0, counter - 1) },
() => counter === 0,
)
}
/**
* When you have two-way bindings, but the actual bound value will not equal
* the value you initially passed in, then to avoid an infinite loop you
* need to increment a counter every time you pass in a value, decrement the
* same counter every time the bound value changed, but only bubble up
* the event when the counter is zero.
*
Example:
Let's say DrawingRecognitionCanvas is a deep-learning backed canvas
that, when given the name of an object (e.g. 'dog'), draws a dog.
But whenever the drawing on it changes, it also sends back its interpretation
of the image by way of the @newObjectRecognized event.
<input
type="text"
placeholder="an object, e.g. Dog, Cat, Frog"
v-model="identifiedObject" />
<DrawingRecognitionCanvas
:object="identifiedObject"
@newObjectRecognized="identifiedObject = $event"
/>
new TwoWayBindingWrapper((increment, decrement, shouldUpdate) => {
this.$watch('identifiedObject', () => {
// new object passed in
increment()
})
this.$deepLearningBackend.on('drawingChanged', () => {
recognizeObject(this.$deepLearningBackend)
.then((object) => {
decrement()
if (shouldUpdate()) {
this.$emit('newObjectRecognized', object.name)
}
})
})
})
*/
export default function TwoWayBindingWrapper(fn) {
let counter = 0
fn(
() => {
counter += 1
},
() => {
counter = Math.max(0, counter - 1)
},
() => counter === 0
)
}

53
src/utils/WatchPrimitiveProperties.js
View File

@@ -1,24 +1,29 @@
/**
* Watch the individual properties of a PoD object, instead of the object
* per se. This is different from a deep watch where both the reference
* and the individual values are watched.
*
* In effect, it throttles the multiple $watch to execute at most once per tick.
*/
export default function WatchPrimitiveProperties (vueInst, propertiesToTrack, handler, immediate = false) {
let isHandled = false
function requestHandle () {
if (!isHandled) {
isHandled = true
vueInst.$nextTick(() => {
isHandled = false
handler()
})
}
}
for (let prop of propertiesToTrack) {
vueInst.$watch(prop, requestHandle, {immediate})
}
}
/**
* Watch the individual properties of a PoD object, instead of the object
* per se. This is different from a deep watch where both the reference
* and the individual values are watched.
*
* In effect, it throttles the multiple $watch to execute at most once per tick.
*/
export default function WatchPrimitiveProperties(
vueInst,
propertiesToTrack,
handler,
immediate = false
) {
let isHandled = false
function requestHandle() {
if (!isHandled) {
isHandled = true
vueInst.$nextTick(() => {
isHandled = false
handler()
})
}
}
for (let prop of propertiesToTrack) {
vueInst.$watch(prop, requestHandle, { immediate })
}
}

3
src/utils/bindEvents.js
View File

@@ -1,7 +1,6 @@
export default (vueInst, googleMapsInst, events) => {
for (let eventName of events) {
if (vueInst.$gmapOptions.autobindAllEvents ||
vueInst.$attrs[eventName]) {
if (vueInst.$gmapOptions.autobindAllEvents || vueInst.$attrs[eventName]) {
googleMapsInst.addListener(eventName, (ev) => {
vueInst.$emit(eventName, ev)
})

67
src/utils/bindProps.js
View File

@@ -1,32 +1,28 @@
import WatchPrimitiveProperties from '../utils/WatchPrimitiveProperties'
function capitalizeFirstLetter (string) {
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1)
}
export function getPropsValues (vueInst, props) {
return Object.keys(props)
.reduce(
(acc, prop) => {
if (vueInst[prop] !== undefined) {
acc[prop] = vueInst[prop]
}
return acc
},
{}
)
export function getPropsValues(vueInst, props) {
return Object.keys(props).reduce((acc, prop) => {
if (vueInst[prop] !== undefined) {
acc[prop] = vueInst[prop]
}
return acc
}, {})
}
/**
* Binds the properties defined in props to the google maps instance.
* If the prop is an Object type, and we wish to track the properties
* of the object (e.g. the lat and lng of a LatLng), then we do a deep
* watch. For deep watch, we also prevent the _changed event from being
* $emitted if the data source was external.
*/
export function bindProps (vueInst, googleMapsInst, props, options) {
* Binds the properties defined in props to the google maps instance.
* If the prop is an Object type, and we wish to track the properties
* of the object (e.g. the lat and lng of a LatLng), then we do a deep
* watch. For deep watch, we also prevent the _changed event from being
* $emitted if the data source was external.
*/
export function bindProps(vueInst, googleMapsInst, props) {
for (let attribute in props) {
let {twoWay, type, trackProperties, noBind} = props[attribute]
let { twoWay, type, trackProperties, noBind } = props[attribute]
if (noBind) continue
@@ -36,7 +32,9 @@ export function bindProps (vueInst, googleMapsInst, props, options) {
const initialValue = vueInst[attribute]
if (typeof googleMapsInst[setMethodName] === 'undefined') {
throw new Error(`${setMethodName} is not a method of (the Maps object corresponding to) ${vueInst.$options._componentTag}`)
throw new Error(
`${setMethodName} is not a method of (the Maps object corresponding to) ${vueInst.$options._componentTag}`
)
}
// We need to avoid an endless
@@ -44,18 +42,22 @@ export function bindProps (vueInst, googleMapsInst, props, options) {
// although this may really be the user's responsibility
if (type !== Object || !trackProperties) {
// Track the object deeply
vueInst.$watch(attribute, () => {
const attributeValue = vueInst[attribute]
vueInst.$watch(
attribute,
() => {
const attributeValue = vueInst[attribute]
googleMapsInst[setMethodName](attributeValue)
}, {
immediate: typeof initialValue !== 'undefined',
deep: type === Object
})
googleMapsInst[setMethodName](attributeValue)
},
{
immediate: typeof initialValue !== 'undefined',
deep: type === Object,
}
)
} else {
WatchPrimitiveProperties(
vueInst,
trackProperties.map(prop => `${attribute}.${prop}`),
trackProperties.map((prop) => `${attribute}.${prop}`),
() => {
googleMapsInst[setMethodName](vueInst[attribute])
},
@@ -63,10 +65,9 @@ export function bindProps (vueInst, googleMapsInst, props, options) {
)
}
if (twoWay &&
(vueInst.$gmapOptions.autobindAllEvents ||
vueInst.$attrs[eventName])) {
googleMapsInst.addListener(eventName, (ev) => { // eslint-disable-line no-unused-vars
if (twoWay && (vueInst.$gmapOptions.autobindAllEvents || vueInst.$attrs[eventName])) {
googleMapsInst.addListener(eventName, () => {
// eslint-disable-line no-unused-vars
vueInst.$emit(eventName, googleMapsInst[getMethodName]())
})
}

2
src/utils/lazyValue.js
View File

@@ -1,7 +1,7 @@
// This piece of code was orignally written by sindresorhus and can be seen here
// https://github.com/sindresorhus/lazy-value/blob/master/index.js
export default fn => {
export default (fn) => {
let called = false
let ret

23
src/utils/mountableMixin.js
View File

@@ -10,13 +10,13 @@ operations so it exposes a property which accepts a bus
export default {
props: ['resizeBus'],
data () {
data() {
return {
_actualResizeBus: null,
}
},
created () {
created() {
if (typeof this.resizeBus === 'undefined') {
this.$data._actualResizeBus = this.$gmapDefaultResizeBus
} else {
@@ -25,31 +25,32 @@ export default {
},
methods: {
_resizeCallback () {
_resizeCallback() {
this.resize()
},
_delayedResizeCallback () {
_delayedResizeCallback() {
this.$nextTick(() => this._resizeCallback())
}
},
},
watch: {
resizeBus (newVal, oldVal) { // eslint-disable-line no-unused-vars
resizeBus(newVal) {
// eslint-disable-line no-unused-vars
this.$data._actualResizeBus = newVal
},
'$data._actualResizeBus' (newVal, oldVal) {
'$data._actualResizeBus'(newVal, oldVal) {
if (oldVal) {
oldVal.$off('resize', this._delayedResizeCallback)
}
if (newVal) {
// newVal.$on('resize', this._delayedResizeCallback)
// newVal.$on('resize', this._delayedResizeCallback)
}
}
},
},
unmounted () {
unmounted() {
if (this.$data._actualResizeBus) {
this.$data._actualResizeBus.$off('resize', this._delayedResizeCallback)
}
}
},
}

4
src/utils/simulateArrowDown.js
View File

@@ -2,9 +2,9 @@
// http://stackoverflow.com/a/11703018/2694653
// This has been ported to Vanilla.js by GuillaumeLeclerc
export default (input) => {
var _addEventListener = (input.addEventListener) ? input.addEventListener : input.attachEvent
var _addEventListener = input.addEventListener ? input.addEventListener : input.attachEvent
function addEventListenerWrapper (type, listener) {
function addEventListenerWrapper(type, listener) {
// Simulate a 'down arrow' keypress on hitting 'return' when no pac suggestion is selected,
// and then trigger the original listener.
if (type === 'keydown') {