@operato/scene-google-map 1.3.6

package/src/google-map.ts

@@ -0,0 +1,215 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+const NATURE = {
+  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: 'string',
+      label: 'api-key',
+      name: 'apiKey'
+    }
+  ],
+  'value-property': 'latlng'
+  // help: 'scene/component/gmap-map'
+}
+
+import { Component, HTMLOverlayContainer, Properties, ScriptLoader, error } from '@hatiolab/things-scene'
+
+function getGlobalScale(component: GoogleMap) {
+  var scale = { x: 1, y: 1 }
+  var parent: Component = 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 GoogleMap extends HTMLOverlayContainer {
+  static load(component: GoogleMap) {
+    var key = component.get('apiKey')
+    ScriptLoader.load('https://maps.googleapis.com/maps/api/js' + (key ? '?key=' + key : '')).then(
+      () => component.onload(),
+      error
+    )
+  }
+
+  private static loaded: boolean = false
+
+  private _listenTo?: Component
+  private _listener? = function (this: GoogleMap, after: any) {
+    after.scale && this.rescale()
+  }.bind(this)
+
+  private _anchor?: HTMLDivElement
+  private _map?: google.maps.Map
+
+  ready() {
+    super.ready()
+
+    if (this.rootModel) {
+      this._listenTo = this.rootModel
+      this.rootModel.on('change', this._listener!)
+    }
+  }
+
+  removed() {
+    if (this._listenTo) {
+      this._listenTo.off('change', this._listener!)
+
+      delete this._listenTo
+      delete this._listener
+    }
+  }
+
+  /*
+   * google map은 scale된 상태에서 마우스 포지션을 정확히 매핑하지 못하므로, 마커를 정상적으로 동작시키지 못한다.
+   * 따라서, google map의 경우에는 부모의 스케일의 역으로 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})`
+
+    ;['-webkit-', '-moz-', '-ms-', '-o-', ''].forEach(prefix => {
+      anchor!.style[(prefix + 'transform') as any] = transform
+      anchor!.style[(prefix + 'transform-origin') as any] = '0px 0px'
+    })
+
+    var { width, height } = this.state
+    anchor.style.width = width * scale.x + 'px'
+    anchor.style.height = height * scale.y + 'px'
+
+    if (GoogleMap.loaded) {
+      google.maps.event.trigger(this.map, 'resize')
+      let { lat, lng } = this.state
+      this.map &&
+        this.map.setCenter({
+          lat,
+          lng
+        })
+    }
+  }
+
+  createElement() {
+    super.createElement()
+    this._anchor = document.createElement('div')
+    this.element.appendChild(this._anchor)
+    this.rescale()
+
+    GoogleMap.load(this)
+  }
+
+  onload() {
+    GoogleMap.loaded = true
+
+    var { lat, lng, zoom } = this.state
+
+    try {
+      this._map = new google.maps.Map(this._anchor!, {
+        zoom,
+        center: new google.maps.LatLng(lat, lng)
+      })
+    } finally {
+      /*
+       * setState 로 map 객체가 생성되었음을 change 이벤트로 알려줄 수 있다
+       * - set('map', this._map)으로 만들 지 않도록 주의한다.
+       * - setState('map', this._map)으로해야 컴포넌트 모델에 추가되지 않는다.
+       */
+      this.setState('map', this._map)
+      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 (GoogleMap.loaded) {
+      if (after.zoom) {
+        this.map!.setZoom(after.zoom)
+      }
+
+      if ('lat' in after || 'lng' in after) {
+        let { lat, lng } = this.state
+        this.map!.setCenter(new google.maps.LatLng(lat, lng))
+      }
+    }
+
+    super.onchange(after, before)
+
+    this.rescale()
+  }
+
+  get latlng() {
+    return {
+      lat: this.get('lat'),
+      lng: this.get('lng')
+    }
+  }
+
+  set latlng(latlng) {
+    this.set(latlng)
+  }
+
+  get nature() {
+    return NATURE
+  }
+}
+
+Component.register('google-map', GoogleMap)

package/src/index.ts

@@ -0,0 +1,8 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import GmapMarker from './gmap-marker'
+import GmapPath from './gmap-path'
+import GoogleMap from './google-map'
+
+export default [GmapMarker, GmapPath, GoogleMap]

package/src/templates/gmap-marker.ts

@@ -0,0 +1,20 @@
+const icon = new URL('../../icons/gmap-marker.png', import.meta.url).href
+
+export default {
+  type: 'gmap-marker',
+  description: 'google map marker',
+  group: 'etc',
+  /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
+  icon,
+  model: {
+    type: 'gmap-marker',
+    left: 150,
+    top: 150,
+    width: 40,
+    height: 60,
+    lat: 22.308117,
+    lng: 114.225443,
+    fillStyle: '#00ff00',
+    hidden: true
+  }
+}

package/src/templates/gmap-path.ts

@@ -0,0 +1,25 @@
+const icon = new URL('../../icons/gmap-path.png', import.meta.url).href
+
+export default {
+  type: 'gmap-path',
+  description: 'google map path',
+  group: 'etc',
+  /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
+  icon,
+  model: {
+    type: 'gmap-path',
+    left: 150,
+    top: 150,
+    width: 40,
+    height: 60,
+    latlngs: [
+      {
+        lat: 22.308117,
+        lng: 114.225443
+      }
+    ],
+    startEndMarkerDifferentDesign: true,
+    fillStyle: '#00ff00',
+    hidden: true
+  }
+}

package/src/templates/google-map.ts

@@ -0,0 +1,20 @@
+const icon = new URL('../../icons/google-map.png', import.meta.url).href
+
+export default {
+  type: 'google-map',
+  description: 'google-map',
+  group: 'etc',
+  /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
+  icon,
+  model: {
+    type: 'google-map',
+    left: 150,
+    top: 150,
+    width: 300,
+    height: 200,
+    lat: 22.308117,
+    lng: 114.225443,
+    zoom: 20,
+    apiKey: 'AIzaSyBgQZb-SFqjQBC_XTxNiz0XapejNwV9PgA'
+  }
+}

package/src/templates/index.ts

@@ -0,0 +1,5 @@
+import GoogleMap from './google-map'
+import GmapMarker from './gmap-marker'
+import GmapPath from './gmap-path'
+
+export default [GoogleMap, GmapMarker, GmapPath]

package/test/basic-test.html

@@ -0,0 +1,67 @@
+<!--
+@license
+Copyright © HatioLab Inc. All rights reserved.
+-->
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
+
+    <!-- Step 1: import the element to test -->
+    <link rel="import" href="../things-scene-google-map.html">
+  </head>
+  <body>
+
+    <!-- You can use the document as a place to set up your fixtures. -->
+    <test-fixture id="things-scene-google-map-fixture">
+      <template>
+        <things-scene-google-map>
+          <h2>things-scene-google-map</h2>
+        </things-scene-google-map>
+      </template>
+    </test-fixture>
+
+    <script>
+      suite('<things-scene-google-map>', function() {
+
+        var myEl;
+
+        setup(function() {
+          myEl = fixture('things-scene-google-map-fixture');
+        });
+
+        test('defines the "author" property', function() {
+          assert.equal(myEl.author.name, 'Dimitri Glazkov');
+          assert.equal(myEl.author.image, 'http://addyosmani.com/blog/wp-content/uploads/2013/04/unicorn.jpg');
+        });
+
+        test('says hello', function() {
+          assert.equal(myEl.sayHello(), 'things-scene-google-map says, Hello World!');
+
+          var greetings = myEl.sayHello('greetings Earthlings');
+          assert.equal(greetings, 'things-scene-google-map says, greetings Earthlings');
+        });
+
+        test('fires lasers', function(done) {
+          myEl.addEventListener('things-scene-google-map-lasers', function(event) {
+            assert.equal(event.detail.sound, 'Pew pew!');
+            done();
+          });
+          myEl.fireLasers();
+        });
+
+        test('distributed children', function() {
+          var els = myEl.getContentChildren();
+          assert.equal(els.length, 1, 'one distributed node');
+          assert.equal(els[0], myEl.querySelector('h2'), 'content distributed correctly');
+        });
+
+      });
+    </script>
+
+  </body>
+</html>

package/test/index.html

@@ -0,0 +1,24 @@
+<!--
+@license
+Copyright © HatioLab Inc. All rights reserved.
+-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
+  </head>
+  <body>
+    <script>
+      // Load and run all tests (.html, .js):
+      WCT.loadSuites([
+        'basic-test.html',
+        'basic-test.html?dom=shadow'
+      ]);
+    </script>
+
+  </body>
+</html>

package/test/unit/test-google-map.js

@@ -0,0 +1,33 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import './util'
+
+import { expect } from 'chai'
+
+import '../../bower_components/things-scene-core/things-scene-min'
+import { GoogleMap } from '../../src/index'
+
+describe('GoogleMap', function () {
+
+  var board;
+
+  beforeEach(function () {
+    board = scene.create({
+      model: {
+        components: [{
+          id: 'google-map',
+          type: 'google-map'
+        }]
+      }
+    })
+  });
+
+  it('component should be found by its id.', function () {
+
+    var component = board.findById('google-map')
+
+    expect(!!component).not.to.equal(false);
+  });
+});

package/test/unit/util.js

@@ -0,0 +1,22 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+var noop = () => {}
+
+global.Canvas = require('canvas');
+
+Canvas.prototype.setAttribute = noop;
+Canvas.prototype.style = {};
+
+global.Image = Canvas.Image;
+global.screen = {
+  width: 1280,
+  height: 800
+};
+
+global.window = global;
+
+global.addEventListener = noop;
+global.location = {};
+global.getComputedStyle = noop;

package/things-scene.config.js

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

package/translations/en.json

@@ -0,0 +1,6 @@
+{
+  "label.target-map": "Target Map",
+  "label.show-path": "Show Path",
+  "label.show-intermediate-markers": "Show Intermediate Markers",
+  "label.start-end-marker-different-design": "Apply First and Last Marker Design"
+}

package/translations/ja.json

@@ -0,0 +1,6 @@
+{
+  "label.target-map": "ターゲット 地図",
+  "label.show-path": "パスを見せる",
+  "label.show-intermediate-markers": "中間マーカーを見せる",
+  "label.start-end-marker-different-design": "最初と最後のマーカーデザイン適用"
+}

package/translations/ko.json

@@ -0,0 +1,6 @@
+{
+  "label.target-map": "타겟 지도",
+  "label.show-path": "패스 보이기",
+  "label.show-intermediate-markers": "중간마커 보이기",
+  "label.start-end-marker-different-design": "처음과 마지막 마커 디자인 적용"
+}

package/translations/zh.json

@@ -0,0 +1,6 @@
+{
+  "label.target-map": "对象地图",
+  "label.show-path": "显示路径",
+  "label.show-intermediate-markers": "显示中心点标记",
+  "label.start-end-marker-different-design": "使用开始和结束标记设计"
+}

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "es2018",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "lib": ["es2019", "dom"],
+    "strict": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "inlineSources": true,
+    "rootDir": "src",
+    "declaration": true,
+    "incremental": true,
+    "skipLibCheck": true
+  },
+  "include": ["**/*.ts", "*.d.ts"]
+}