@operato/scene-openlayers 8.0.0-beta.1 → 9.0.0-beta.0

package/src/ol-path.ts_x

@@ -1,368 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { Component, RectPath, Shape } from '@hatiolab/things-scene'
-
-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) {
-  _infoWindow: any
-  _map: any
-
-  dispose() {
-    this.markers && this.markers.forEach(marker => marker.setMap(null))
-
-    this.markers = null
-    delete this._infoWindow
-
-    super.dispose()
-  }
-
-  ready() {
-    super.ready()
-
-    if (this.isTemplate()) {
-      return
-    }
-
-    this.onchangeTargetMap()
-  }
-
-  get map() {
-    return this._map
-  }
-
-  findInfoWindow(type) {
-    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, index) {
-    var tpl = Component.template(sceneInfoWindow.model.frontSideTemplate)
-    return (
-      `<style>${sceneInfoWindow.model.style}</style>` +
-      tpl({
-        data: this.data,
-        index
-      })
-    )
-  }
-
-  openInfoWindow(iw, index) {
-    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 = latlngs.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 : index + 1 == latlngs.length ? END_MARKER_PATH : EMPTY_MARKER_PATH,
-              fillColor,
-              fillOpacity,
-              strokeColor,
-              strokeWeight
-            },
-            index
-          })
-        } 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
-            },
-            index
-          })
-        }
-      })
-    } else {
-      var spots =
-        latlngs.length > 1 ? [latlngs[0], latlngs[latlngs.length - 1]] : latlngs.length == 1 ? [latlngs[0]] : []
-
-      var markers = 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
-            },
-            index
-          })
-        } 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
-            },
-            index
-          })
-        }
-      })
-    }
-
-    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) => {
-      marker.addListener('click', e => {
-        var iw = this.findInfoWindow('tap')
-        iw && this.openInfoWindow(iw, index)
-
-        this.trigger('click', e.ya)
-      })
-      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)
-      })
-
-      delete 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
-  }
-
-  render(context) {
-    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() {}
-
-  onchangeTargetMap() {
-    if (this.targetMap) {
-      this._targetMap = null
-      this._map = null
-    }
-
-    var id = this.get('targetMap')
-    if (id !== undefined) {
-      this._targetMap = this.root.findById(id)
-
-      if (this.targetMap) {
-        this._map = this.targetMap.map
-
-        if (!this.map) {
-          var listener = after => {
-            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, before) {
-    if ('targetMap' in after) {
-      this.onchangeTargetMap()
-    }
-
-    if ('latlngs' in after) {
-      this.buildMarkers()
-    }
-
-    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 latlngs() {
-    return this.getState('latlngs')
-  }
-
-  set latlngs(latlngs) {
-    this.setState({
-      latlngs
-    })
-  }
-
-  get nature() {
-    return NATURE
-  }
-}
-
-Component.register('gmap-path', GMapPath)

package/src/openlayers.ts

@@ -1,282 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-// @ts-ignore
-import OpenLayersStyle from '!!text-loader!ol/ol.css'
-
-import { Feature, Map, View } from 'ol'
-import { Circle as CircleStyle, Fill, Icon, Stroke, Style } from 'ol/style.js'
-import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'
-import { Vector as VectorSource, OSM } from 'ol/source'
-import { fromLonLat } from 'ol/proj'
-import { Geometry, Point } from 'ol/geom'
-
-import { Component, HTMLOverlayContainer, Properties, ComponentNature, error } from '@hatiolab/things-scene'
-
-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'
-
-const NATURE: ComponentNature = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'number',
-      label: 'latitude',
-      name: 'lat',
-      property: {
-        step: 0.000001,
-        max: 90,
-        min: -90
-      }
-    },
-    {
-      type: 'number',
-      label: 'longitude',
-      name: 'lng',
-      property: {
-        step: 0.000001,
-        min: -180,
-        max: 180
-      }
-    },
-    {
-      type: 'number',
-      label: 'zoom',
-      name: 'zoom'
-    },
-    {
-      type: 'boolean',
-      label: 'show-marker',
-      name: 'showMarker'
-    }
-  ],
-  'value-property': 'latlng',
-  help: 'scene/component/openlayers'
-}
-
-function getGlobalScale(component: Component) {
-  var scale = { x: 1, y: 1 }
-  var parent = component
-
-  while (parent) {
-    let { x, y } = parent.get('scale') || { x: 1, y: 1 }
-    scale.x *= x || 1
-    scale.y *= y || 1
-
-    parent = parent.parent
-  }
-  return scale
-}
-
-export default class Openlayers extends HTMLOverlayContainer {
-  static markerStyle: Style = new Style({
-    image: new Icon({
-      src:
-        'data:image/svg+xml;charset=utf-8,' +
-        encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">' + MARKER_PATH + '</svg>'),
-      anchor: [0.5, 1]
-    })
-  })
-
-  _anchor?: HTMLDivElement
-  _map: Map | null = null
-  _listenTo?: Component
-  _listener?: Function
-  _vectorSource?: VectorSource<Feature>
-  _marker: Feature | null = null
-
-  get eventMap() {
-    return {
-      'model-layer': {
-        '(self)': {
-          change: (after: any) => {
-            after.scale && this.rescale()
-          }
-        }
-      }
-    }
-  }
-
-  /*
-   * 부모의 스케일의 역으로 transform해서, scale을 1로 맞추어준다.
-   */
-  rescale() {
-    var anchor = this._anchor
-    if (!anchor) {
-      return
-    }
-
-    var scale = getGlobalScale(this)
-
-    var sx = 1 / scale.x
-    var sy = 1 / scale.y
-
-    var transform = `scale(${sx}, ${sy})`
-
-    anchor!.style.transform = transform
-    anchor!.style.transformOrigin = '0px 0px'
-
-    var { width, height } = this.state
-    anchor.style.width = width * scale.x + 'px'
-    anchor.style.height = height * scale.y + 'px'
-  }
-
-  createElement() {
-    super.createElement()
-    this._anchor = document.createElement('div')
-
-    const style = document.createElement('style')
-    style.textContent = `
-      ${OpenLayersStyle}
-    `
-
-    this.element.appendChild(style)
-    this.element.appendChild(this._anchor)
-
-    const { lat, lng, zoom, showMarker } = this.state
-
-    // 지도의 중심 좌표
-    const center = fromLonLat([lng || 126.9783882, lat || 37.5666103])
-
-    // 타일 레이어 생성 (배경 지도)
-    const tileLayer = new TileLayer({
-      source: new OSM({
-        attributions: ''
-      })
-    })
-
-    // 벡터 레이어 생성
-    const styles: { [name: string]: Style } = {
-      route: new Style({
-        stroke: new Stroke({
-          width: 6,
-          color: [237, 212, 0, 0.8]
-        })
-      }),
-      marker: Openlayers.markerStyle,
-      circle: new Style({
-        image: new CircleStyle({
-          radius: 7,
-          stroke: new Stroke({
-            color: 'black',
-            width: 2
-          })
-        })
-      })
-    }
-
-    const vectorSource = new VectorSource()
-    const vectorLayer = new VectorLayer({
-      source: vectorSource,
-      style: function (feature) {
-        return styles[feature.get('type')]
-      }
-    })
-
-    // 지도 생성
-    const map = new Map({
-      target: this._anchor,
-      layers: [tileLayer, vectorLayer],
-      view: new View({
-        center,
-        zoom
-      })
-    })
-
-    this._map = map
-    this._vectorSource = vectorSource
-
-    showMarker && this.refreshMarker()
-
-    this.rescale()
-  }
-
-  get tagName() {
-    return 'div'
-  }
-
-  get map() {
-    return this._map
-  }
-
-  dispose() {
-    super.dispose()
-
-    delete this._anchor
-  }
-
-  setElementProperties(div: HTMLDivElement) {
-    this.rescale()
-  }
-
-  refreshMarker() {
-    const { showMarker, lat, lng } = this.state
-
-    if (this._marker) {
-      this.vectorSource?.removeFeature(this._marker)
-      this._marker = null
-    }
-
-    if (showMarker) {
-      // 지도의 중심 좌표
-      const center = fromLonLat([lng || 126.9783882, lat || 37.5666103])
-
-      this._marker = new Feature({
-        type: 'circle',
-        geometry: new Point(center)
-      })
-
-      this.vectorSource?.addFeatures([this._marker])
-    }
-  }
-
-  onchange(after: Properties, before: Properties) {
-    if ('zoom' in after) {
-      const view = this.map?.getView()
-      view?.setZoom(after.zoom)
-    }
-
-    if ('lat' in after || 'lng' in after) {
-      let { lat, lng } = this.state
-      const view = this.map?.getView()
-      view?.setCenter(fromLonLat([lng, lat]))
-
-      if (this._marker) {
-        const geometry = this._marker.getGeometry()
-        if (geometry instanceof Point) {
-          geometry.setCoordinates(fromLonLat([lng, lat]))
-        }
-      }
-    }
-
-    if ('showMarker' in after) {
-      this.refreshMarker()
-    }
-
-    super.onchange(after, before)
-
-    this.rescale()
-  }
-
-  get latlng() {
-    const { lat, lng } = this.state
-    return { lat, lng }
-  }
-
-  set latlng(latlng) {
-    this.setState(latlng)
-  }
-
-  get vectorSource() {
-    return this._vectorSource
-  }
-
-  get nature() {
-    return NATURE
-  }
-}
-
-Component.register('openlayers', Openlayers)

package/src/templates/index.ts

@@ -1,4 +0,0 @@
-import openlayers from './openlayers'
-import olMarker from './ol-marker'
-
-export default [openlayers, olMarker]

package/src/templates/ol-marker.ts

@@ -1,16 +0,0 @@
-const icon = new URL('../../icons/ol-marker-template.png', import.meta.url).href
-
-export default {
-  type: 'ol-marker',
-  description: 'ol-marker',
-  // group: 'geographic',
-  group: 'etc',
-  icon,
-  model: {
-    type: 'ol-marker',
-    left: 10,
-    top: 10,
-    width: 55,
-    height: 100
-  }
-}

package/src/templates/ol-path.ts

@@ -1,16 +0,0 @@
-const icon = new URL('../../icons/ol-path-template.png', import.meta.url).href
-
-export default {
-  type: 'ol-path',
-  description: 'ol-path',
-  // group: 'geographic',
-  group: 'etc',
-  icon,
-  model: {
-    type: 'ol-path',
-    left: 10,
-    top: 10,
-    width: 100,
-    height: 20
-  }
-}

package/src/templates/openlayers.ts

@@ -1,16 +0,0 @@
-const icon = new URL('../../icons/openlayers-template.png', import.meta.url).href
-
-export default {
-  type: 'openlayers',
-  description: 'openlayers',
-  // group: 'geographic',
-  group: 'etc',
-  icon,
-  model: {
-    type: 'openlayers',
-    left: 10,
-    top: 10,
-    width: 100,
-    height: 20
-  }
-}