@operato/scene-openlayers 1.2.54

package/src/ol-path.ts_x

@@ -0,0 +1,368 @@
+/*
+ * 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

@@ -0,0 +1,256 @@
+/*
+ * 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<Geometry>
+
+  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
+
+    if (showMarker) {
+      const marker = new Feature({
+        type: 'circle',
+        geometry: new Point(center)
+      })
+
+      this._vectorSource.addFeatures([marker])
+    }
+
+    this.rescale()
+  }
+
+  get tagName() {
+    return 'div'
+  }
+
+  get map() {
+    return this._map
+  }
+
+  dispose() {
+    super.dispose()
+
+    delete this._anchor
+  }
+
+  setElementProperties(div: HTMLDivElement) {
+    this.rescale()
+  }
+
+  onchange(after: Properties, before: Properties) {
+    if (after.zoom) {
+      const view = this.map?.getView()
+      view?.setCenter(after.zoom)
+    }
+
+    if ('lat' in after || 'lng' in after) {
+      let { lat, lng } = this.state
+      const view = this.map?.getView()
+      view?.setCenter(fromLonLat([lng, lat]))
+    }
+
+    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

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

package/src/templates/ol-marker.ts

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,16 @@
+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
+  }
+}

package/things-scene.config.js

@@ -0,0 +1,7 @@
+import groups from './dist/groups'
+import templates from './dist/templates'
+
+export default {
+  templates,
+  groups
+}

package/translations/en.json

@@ -0,0 +1,3 @@
+{
+  "keyword": "keyword"
+}

package/translations/ko.json

@@ -0,0 +1,3 @@
+{
+  "keyword": "키워드"
+}

package/translations/ms.json

@@ -0,0 +1,3 @@
+{
+  "keyword": "[ms] keyword"
+}

package/translations/zh.json

@@ -0,0 +1,3 @@
+{
+  "keyword": "关键词"
+}