@operato/scene-google-map 1.3.6

package/src/gmap-marker.ts

@@ -0,0 +1,306 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { Component, InfoWindow, Properties, RectPath, Shape } from '@hatiolab/things-scene'
+import GoogleMap from './google-map'
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'id-input',
+      label: 'target-map',
+      name: 'targetMap',
+      property: {
+        component: 'google-map'
+      }
+    },
+    {
+      type: 'number',
+      label: 'latitude',
+      name: 'lat',
+      property: {
+        step: 0.000001,
+        max: 90,
+        min: -90
+      }
+    },
+    {
+      type: 'number',
+      label: 'longitude',
+      name: 'lng',
+      property: {
+        step: 0.000001,
+        max: 180,
+        min: -180
+      }
+    }
+  ],
+  'value-property': 'latlng'
+  // help: 'scene/component/gmap-marker'
+}
+
+const MARKER_PATH =
+  'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0'
+
+export default class GMapMarker extends RectPath(Shape) {
+  private _infoWindow?: google.maps.InfoWindow
+  private _marker?: google.maps.Marker | null
+  private _map?: google.maps.Map | null
+  private _targetMap?: GoogleMap | null
+
+  dispose() {
+    this.marker && this.marker.setMap(null)
+
+    this.marker = null
+    delete this._infoWindow
+
+    super.dispose()
+  }
+
+  ready() {
+    super.ready()
+
+    if (this.isTemplate()) {
+      return
+    }
+
+    this.onchangeTargetMap()
+  }
+
+  get map() {
+    return this._map
+  }
+
+  get infoWindow() {
+    if (!this._infoWindow) this._infoWindow = new google.maps.InfoWindow()
+
+    return this._infoWindow
+  }
+
+  findInfoWindow(type: string) {
+    var eventSetting = (this.state.event && this.state.event[type]) || {}
+
+    var infoWindow =
+      /* event spec v1.0 */ eventSetting.infoWindow ||
+      /* event spec v1.1 */ (eventSetting.action == 'infoWindow' && eventSetting.target)
+
+    if (infoWindow) {
+      return this.root.findById(infoWindow)
+    }
+  }
+
+  setInfoContent(sceneInfoWindow: InfoWindow) {
+    var tpl = Component.template(sceneInfoWindow.model.frontSideTemplate)
+    var content = `<style>${sceneInfoWindow.model.style}</style>` + tpl(this)
+
+    this.infoWindow.setContent(content)
+  }
+
+  openInfoWindow(iw: InfoWindow) {
+    this.setInfoContent(iw)
+
+    if (!this.map) {
+      return
+    }
+
+    this.infoWindow.open(this.map, this.marker!)
+  }
+
+  onmarkerclick(e: Event) {
+    var iw = this.findInfoWindow('tap')
+    iw && this.openInfoWindow(iw)
+
+    this.trigger('click', e)
+  }
+
+  onmarkermouseover(e: Event) {
+    var iw = this.findInfoWindow('hover')
+    iw && this.openInfoWindow(iw)
+  }
+
+  onmarkermouseout(e: Event) {
+    var iw = this.findInfoWindow('hover')
+    iw && this.infoWindow.close()
+  }
+
+  set marker(marker) {
+    if (this._marker) {
+      this._marker.setMap(null)
+      google.maps.event.clearInstanceListeners(this._marker)
+
+      delete this._marker
+    }
+
+    if (marker) {
+      marker.addListener('click', this.onmarkerclick.bind(this))
+      marker.addListener('mouseover', this.onmarkermouseover.bind(this))
+      marker.addListener('mouseout', this.onmarkermouseout.bind(this))
+
+      this._marker = marker
+    }
+  }
+
+  get marker() {
+    if (!this._marker && this.map) {
+      let {
+        lat,
+        lng,
+        fillStyle: fillColor,
+        alpha: fillOpacity = 1,
+        strokeStyle: strokeColor,
+        lineWidth: strokeWeight
+      } = this.state
+
+      var marker = new google.maps.Marker({
+        position: {
+          lat: Number(lat) || 0,
+          lng: Number(lng) || 0
+        },
+        map: this.map,
+        icon: {
+          path: MARKER_PATH,
+          fillColor,
+          fillOpacity,
+          strokeColor,
+          strokeWeight
+        }
+      })
+
+      this.marker = marker
+    }
+
+    return this._marker
+  }
+
+  get hidden() {
+    return super.hidden || this.app.isViewMode
+  }
+
+  set hidden(hidden) {
+    super.hidden = hidden
+  }
+
+  render(context: CanvasRenderingContext2D) {
+    var { top, left, width, height } = this.state
+
+    context.translate(left, top)
+
+    // 마커 모양 그리기
+    context.beginPath()
+
+    context.moveTo(width / 2, height * 0.9)
+    context.bezierCurveTo(width / 2.3, height * 0.6, 0, height / 2, 0, height / 4)
+
+    context.ellipse(width / 2, height / 4, width / 2, height / 4, 0, Math.PI * 1, Math.PI * 0)
+
+    context.bezierCurveTo(width, height / 2, width / 1.7, height * 0.6, width / 2, height * 0.9)
+    context.closePath()
+
+    context.translate(-left, -top)
+  }
+
+  get controls() {
+    return []
+  }
+
+  onchangeTargetMap() {
+    if (this.targetMap) {
+      this._targetMap = null
+      this._map = null
+    }
+
+    var id = this.get('targetMap')
+    if (id !== undefined) {
+      this._targetMap = this.root.findById(id) as GoogleMap
+
+      if (this.targetMap) {
+        this._map = this.targetMap.map
+
+        if (!this.map) {
+          var listener = (after: any) => {
+            if ('map' in after) {
+              this._map = after.map
+              this.marker && this.marker.setMap(this.map!)
+
+              this.targetMap!.off('change', listener)
+            }
+          }
+          this.targetMap.on('change', listener)
+        } else {
+          this.marker && this.marker.setMap(this.map)
+        }
+      }
+    }
+  }
+
+  get targetMap() {
+    return this._targetMap
+  }
+
+  // get click_handler() {
+  //   if (!this._click_handler)
+  //     this._click_handler = this.onmarkerclick.bind(this);
+
+  //   return this._click_handler;
+  // }
+
+  onchange(after: Properties, before: Properties) {
+    if ('targetMap' in after) {
+      this.onchangeTargetMap()
+    }
+
+    if ('lat' in after || 'lng' in after) {
+      var { lat, lng } = this.state
+      this.latlng = {
+        lat,
+        lng
+      }
+    }
+
+    if (('fillStyle' in after || 'strokeStyle' in after || 'lineWidth' in after) && this.marker) {
+      let {
+        fillStyle: fillColor,
+        alpha: fillOpacity = 1,
+        strokeStyle: strokeColor,
+        lineWidth: strokeWeight
+      } = this.state
+
+      this.marker.setIcon({
+        path: MARKER_PATH,
+        fillColor,
+        fillOpacity,
+        strokeColor,
+        strokeWeight
+      })
+    }
+
+    super.onchange && super.onchange(after, before)
+  }
+
+  get latlng() {
+    return {
+      lat: this.getState('lat'),
+      lng: this.getState('lng')
+    }
+  }
+
+  set latlng(latlng) {
+    var { lat, lng } = latlng
+    this.marker && this.marker.setPosition(new google.maps.LatLng(lat, lng))
+
+    this.setState({
+      lat,
+      lng
+    })
+  }
+
+  get nature() {
+    return NATURE
+  }
+}
+
+Component.register('gmap-marker', GMapMarker)

package/src/gmap-path.ts

@@ -0,0 +1,365 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { Component, InfoWindow, Properties, RectPath, Shape } from '@hatiolab/things-scene'
+import GoogleMap from './google-map'
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'id-input',
+      label: 'target-map',
+      name: 'targetMap',
+      property: {
+        component: 'google-map'
+      }
+    },
+    {
+      type: 'checkbox',
+      label: 'show-path',
+      name: 'showPath'
+    },
+    {
+      type: 'checkbox',
+      label: 'show-intermediate-markers',
+      name: 'showIntermediateMarkers'
+    },
+    {
+      type: 'checkbox',
+      label: 'start-end-marker-different-design',
+      name: 'startEndMarkerDifferentDesign'
+    }
+  ],
+  'value-property': 'latlngs'
+  // help: 'scene/component/gmap-path'
+}
+
+const EMPTY_MARKER_PATH = 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z'
+const END_MARKER_PATH =
+  'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0'
+const START_MARKER_PATH =
+  'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z m -3,-34 l 0,8 l 8,-4 l -8,-4 z m -0,-0 l 0,8 l 8,-4 l -8,-4'
+
+export default class GMapPath extends RectPath(Shape) {
+  private _infoWindow?: google.maps.InfoWindow
+  private _markers: google.maps.Marker[] = []
+  private _map?: google.maps.Map | null
+  private _targetMap?: GoogleMap | null
+  private _trackPath?: google.maps.Polyline
+
+  dispose() {
+    this.markers && this.markers.forEach(marker => marker.setMap(null))
+
+    this.markers = []
+    delete this._infoWindow
+
+    super.dispose()
+  }
+
+  ready() {
+    super.ready()
+
+    if (this.isTemplate()) {
+      return
+    }
+
+    this.onchangeTargetMap()
+  }
+
+  get map() {
+    return this._map
+  }
+
+  findInfoWindow(type: string) {
+    var eventSetting = (this.state.event && this.state.event[type]) || {}
+
+    var infoWindow =
+      /* event spec v1.0 */ eventSetting.infoWindow ||
+      /* event spec v1.1 */ (eventSetting.action == 'infoWindow' && eventSetting.target)
+
+    if (infoWindow) {
+      return this.root.findById(infoWindow)
+    }
+  }
+
+  getInfoContent(sceneInfoWindow: InfoWindow, index: number) {
+    var tpl = Component.template(sceneInfoWindow.model.frontSideTemplate)
+    return (
+      `<style>${sceneInfoWindow.model.style}</style>` +
+      tpl({
+        data: this.data,
+        index
+      })
+    )
+  }
+
+  openInfoWindow(iw: InfoWindow, index: number) {
+    var content = this.getInfoContent(iw, index)
+
+    if (!this.map) return
+
+    var infoWindow = new google.maps.InfoWindow()
+    infoWindow.setContent(content)
+    infoWindow.open(this.map, this.markers![index])
+
+    return infoWindow
+  }
+
+  buildMarkers() {
+    if (!this.map) {
+      return
+    }
+
+    let {
+      latlngs = [],
+      fillStyle: fillColor,
+      alpha: fillOpacity = 1,
+      strokeStyle: strokeColor,
+      lineWidth: strokeWeight,
+      showIntermediateMarkers = false,
+      startEndMarkerDifferentDesign = true,
+      showPath = false
+    } = this.state
+
+    if (showIntermediateMarkers) {
+      var markers: google.maps.Marker[] = latlngs.map(({ lat, lng }: { lat: number; lng: number }, index: number) => {
+        if (startEndMarkerDifferentDesign) {
+          return new google.maps.Marker({
+            position: {
+              lat: Number(lat) || 0,
+              lng: Number(lng) || 0
+            },
+            map: this.map!,
+            icon: {
+              path: index == 0 ? START_MARKER_PATH : index + 1 == latlngs.length ? END_MARKER_PATH : EMPTY_MARKER_PATH,
+              fillColor,
+              fillOpacity,
+              strokeColor,
+              strokeWeight
+            }
+          })
+        } else {
+          return new google.maps.Marker({
+            position: {
+              lat: Number(lat) || 0,
+              lng: Number(lng) || 0
+            },
+            map: this.map!,
+            icon: {
+              path: EMPTY_MARKER_PATH,
+              fillColor,
+              fillOpacity,
+              strokeColor,
+              strokeWeight
+            }
+          })
+        }
+      })
+    } else {
+      var spots =
+        latlngs.length > 1 ? [latlngs[0], latlngs[latlngs.length - 1]] : latlngs.length == 1 ? [latlngs[0]] : []
+
+      var markers: google.maps.Marker[] = spots.map(({ lat, lng }, index) => {
+        if (startEndMarkerDifferentDesign) {
+          return new google.maps.Marker({
+            position: {
+              lat: Number(lat) || 0,
+              lng: Number(lng) || 0
+            },
+            map: this.map!,
+            icon: {
+              path: index == 0 ? START_MARKER_PATH : END_MARKER_PATH,
+              fillColor,
+              fillOpacity,
+              strokeColor,
+              strokeWeight
+            }
+          })
+        } else {
+          return new google.maps.Marker({
+            position: {
+              lat: Number(lat) || 0,
+              lng: Number(lng) || 0
+            },
+            map: this.map!,
+            icon: {
+              path: EMPTY_MARKER_PATH,
+              fillColor,
+              fillOpacity,
+              strokeColor,
+              strokeWeight
+            }
+          })
+        }
+      })
+    }
+
+    if (showPath) {
+      this.trackPath = new google.maps.Polyline({
+        path: latlngs,
+        geodesic: true,
+        strokeColor: '#FF0000',
+        strokeOpacity: 1,
+        strokeWeight: 4,
+        map: this.map
+      })
+    }
+
+    var infowindows = new Array(markers.length)
+
+    markers.forEach((marker, index: number) => {
+      marker.addListener('click', (e: Event) => {
+        var iw = this.findInfoWindow('tap')
+        iw && this.openInfoWindow(iw, index)
+
+        this.trigger('click', e)
+      })
+      marker.addListener('mouseover', () => {
+        var iw = this.findInfoWindow('hover')
+        if (!iw) return
+        infowindows[index] = this.openInfoWindow(iw, index)
+      })
+      marker.addListener('mouseout', () => {
+        var infowindow = infowindows[index]
+        infowindow && infowindow.close()
+        infowindows[index] = null
+      })
+    })
+
+    this.markers = markers
+  }
+
+  set markers(markers) {
+    if (this._markers) {
+      this._markers.forEach(marker => {
+        marker.setMap(null)
+        google.maps.event.clearInstanceListeners(marker)
+      })
+
+      this._markers = []
+    }
+
+    this._markers = markers
+  }
+
+  get markers() {
+    if (!this._markers) {
+      this.buildMarkers()
+    }
+
+    return this._markers
+  }
+
+  get trackPath() {
+    return this._trackPath
+  }
+
+  set trackPath(trackPath) {
+    if (this.trackPath) {
+      this.trackPath.setMap(null)
+    }
+
+    this._trackPath = trackPath
+  }
+
+  get hidden() {
+    return super.hidden || this.app.isViewMode
+  }
+
+  set hidden(hidden) {
+    super.hidden = hidden
+  }
+
+  render(context: CanvasRenderingContext2D) {
+    var { top, left, width, height } = this.state
+
+    context.translate(left, top)
+
+    // 마커 모양 그리기
+    context.beginPath()
+
+    context.moveTo(width / 2, height * 0.9)
+    context.bezierCurveTo(width / 2.3, height * 0.6, 0, height / 2, 0, height / 4)
+
+    context.ellipse(width / 2, height / 4, width / 2, height / 4, 0, Math.PI * 1, Math.PI * 0)
+
+    context.bezierCurveTo(width, height / 2, width / 1.7, height * 0.6, width / 2, height * 0.9)
+    context.closePath()
+
+    context.translate(-left, -top)
+  }
+
+  get controls() {
+    return []
+  }
+
+  onchangeTargetMap() {
+    if (this.targetMap) {
+      this._targetMap = null
+      this._map = null
+    }
+
+    var id = this.get('targetMap')
+    if (id !== undefined) {
+      this._targetMap = this.root.findById(id) as GoogleMap
+
+      if (this.targetMap) {
+        this._map = this.targetMap.map
+
+        if (!this.map) {
+          var listener = (after: any) => {
+            if ('map' in after) {
+              this._map = after.map
+              this.markers && this.markers.forEach(marker => marker.setMap(this.map!))
+
+              this.targetMap!.off('change', listener)
+            }
+          }
+          this.targetMap.on('change', listener)
+        } else {
+          this.markers && this.markers.forEach(marker => marker.setMap(this.map!))
+        }
+      }
+    }
+  }
+
+  get targetMap() {
+    return this._targetMap
+  }
+
+  onchange(after: Properties, before: Properties) {
+    if ('targetMap' in after) {
+      this.onchangeTargetMap()
+    }
+
+    if ('latlngs' in after) {
+      this.buildMarkers()
+    }
+
+    if ('fillStyle' in after || 'strokeStyle' in after || 'lineWidth' in after) {
+      this.buildMarkers()
+    }
+
+    super.onchange && super.onchange(after, before)
+  }
+
+  get latlngs() {
+    return this.getState('latlngs')
+  }
+
+  set latlngs(latlngs) {
+    this.setState({
+      latlngs
+    })
+  }
+
+  get nature() {
+    return NATURE
+  }
+}
+
+Component.register('gmap-path', GMapPath)