@operato/scene-google-map 8.0.0-beta.1 → 8.0.0

package/src/gmap-marker.ts

@@ -1,306 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { Component, ComponentNature, InfoWindow, Properties, RectPath, Shape } from '@hatiolab/things-scene'
-import GoogleMap from './google-map'
-
-const NATURE: ComponentNature = {
-  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

@@ -1,365 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { Component, ComponentNature, InfoWindow, Properties, RectPath, Shape } from '@hatiolab/things-scene'
-import GoogleMap from './google-map'
-
-const NATURE: ComponentNature = {
-  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)