@operato/scene-google-map 8.0.0-beta.0 → 8.0.0-beta.2

package/src/google-map.ts

@@ -1,222 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-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: 'string',
-      label: 'api-key',
-      name: 'apiKey'
-    }
-  ],
-  'value-property': 'latlng'
-  // help: 'scene/component/gmap-map'
-}
-
-import {
-  Component,
-  ComponentNature,
-  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

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

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

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

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

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

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

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

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

@@ -1,22 +0,0 @@
-/*
- * 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/tsconfig.json

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