@operato/scene-google-map 1.3.6

package/dist/gmap-path.js

@@ -0,0 +1,296 @@
+/*
+ * 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) {
+    constructor() {
+        super(...arguments);
+        this._markers = [];
+    }
+    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) {
+        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
+                        }
+                    });
+                }
+                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 = 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) => {
+            marker.addListener('click', (e) => {
+                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) {
+        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);
+            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.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);
+//# sourceMappingURL=gmap-path.js.map

package/dist/gmap-path.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gmap-path.js","sourceRoot":"","sources":["../src/gmap-path.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { Component, InfoWindow, Properties, RectPath, Shape } from '@hatiolab/things-scene'\nimport GoogleMap from './google-map'\n\nconst NATURE = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'id-input',\n      label: 'target-map',\n      name: 'targetMap',\n      property: {\n        component: 'google-map'\n      }\n    },\n    {\n      type: 'checkbox',\n      label: 'show-path',\n      name: 'showPath'\n    },\n    {\n      type: 'checkbox',\n      label: 'show-intermediate-markers',\n      name: 'showIntermediateMarkers'\n    },\n    {\n      type: 'checkbox',\n      label: 'start-end-marker-different-design',\n      name: 'startEndMarkerDifferentDesign'\n    }\n  ],\n  'value-property': 'latlngs'\n  // help: 'scene/component/gmap-path'\n}\n\nconst 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'\nconst END_MARKER_PATH =\n  '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'\nconst START_MARKER_PATH =\n  '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'\n\nexport default class GMapPath extends RectPath(Shape) {\n  private _infoWindow?: google.maps.InfoWindow\n  private _markers: google.maps.Marker[] = []\n  private _map?: google.maps.Map | null\n  private _targetMap?: GoogleMap | null\n  private _trackPath?: google.maps.Polyline\n\n  dispose() {\n    this.markers && this.markers.forEach(marker => marker.setMap(null))\n\n    this.markers = []\n    delete this._infoWindow\n\n    super.dispose()\n  }\n\n  ready() {\n    super.ready()\n\n    if (this.isTemplate()) {\n      return\n    }\n\n    this.onchangeTargetMap()\n  }\n\n  get map() {\n    return this._map\n  }\n\n  findInfoWindow(type: string) {\n    var eventSetting = (this.state.event && this.state.event[type]) || {}\n\n    var infoWindow =\n      /* event spec v1.0 */ eventSetting.infoWindow ||\n      /* event spec v1.1 */ (eventSetting.action == 'infoWindow' && eventSetting.target)\n\n    if (infoWindow) {\n      return this.root.findById(infoWindow)\n    }\n  }\n\n  getInfoContent(sceneInfoWindow: InfoWindow, index: number) {\n    var tpl = Component.template(sceneInfoWindow.model.frontSideTemplate)\n    return (\n      `<style>${sceneInfoWindow.model.style}</style>` +\n      tpl({\n        data: this.data,\n        index\n      })\n    )\n  }\n\n  openInfoWindow(iw: InfoWindow, index: number) {\n    var content = this.getInfoContent(iw, index)\n\n    if (!this.map) return\n\n    var infoWindow = new google.maps.InfoWindow()\n    infoWindow.setContent(content)\n    infoWindow.open(this.map, this.markers![index])\n\n    return infoWindow\n  }\n\n  buildMarkers() {\n    if (!this.map) {\n      return\n    }\n\n    let {\n      latlngs = [],\n      fillStyle: fillColor,\n      alpha: fillOpacity = 1,\n      strokeStyle: strokeColor,\n      lineWidth: strokeWeight,\n      showIntermediateMarkers = false,\n      startEndMarkerDifferentDesign = true,\n      showPath = false\n    } = this.state\n\n    if (showIntermediateMarkers) {\n      var markers: google.maps.Marker[] = latlngs.map(({ lat, lng }: { lat: number; lng: number }, index: number) => {\n        if (startEndMarkerDifferentDesign) {\n          return new google.maps.Marker({\n            position: {\n              lat: Number(lat) || 0,\n              lng: Number(lng) || 0\n            },\n            map: this.map!,\n            icon: {\n              path: index == 0 ? START_MARKER_PATH : index + 1 == latlngs.length ? END_MARKER_PATH : EMPTY_MARKER_PATH,\n              fillColor,\n              fillOpacity,\n              strokeColor,\n              strokeWeight\n            }\n          })\n        } else {\n          return new google.maps.Marker({\n            position: {\n              lat: Number(lat) || 0,\n              lng: Number(lng) || 0\n            },\n            map: this.map!,\n            icon: {\n              path: EMPTY_MARKER_PATH,\n              fillColor,\n              fillOpacity,\n              strokeColor,\n              strokeWeight\n            }\n          })\n        }\n      })\n    } else {\n      var spots =\n        latlngs.length > 1 ? [latlngs[0], latlngs[latlngs.length - 1]] : latlngs.length == 1 ? [latlngs[0]] : []\n\n      var markers: google.maps.Marker[] = spots.map(({ lat, lng }, index) => {\n        if (startEndMarkerDifferentDesign) {\n          return new google.maps.Marker({\n            position: {\n              lat: Number(lat) || 0,\n              lng: Number(lng) || 0\n            },\n            map: this.map!,\n            icon: {\n              path: index == 0 ? START_MARKER_PATH : END_MARKER_PATH,\n              fillColor,\n              fillOpacity,\n              strokeColor,\n              strokeWeight\n            }\n          })\n        } else {\n          return new google.maps.Marker({\n            position: {\n              lat: Number(lat) || 0,\n              lng: Number(lng) || 0\n            },\n            map: this.map!,\n            icon: {\n              path: EMPTY_MARKER_PATH,\n              fillColor,\n              fillOpacity,\n              strokeColor,\n              strokeWeight\n            }\n          })\n        }\n      })\n    }\n\n    if (showPath) {\n      this.trackPath = new google.maps.Polyline({\n        path: latlngs,\n        geodesic: true,\n        strokeColor: '#FF0000',\n        strokeOpacity: 1,\n        strokeWeight: 4,\n        map: this.map\n      })\n    }\n\n    var infowindows = new Array(markers.length)\n\n    markers.forEach((marker, index: number) => {\n      marker.addListener('click', (e: Event) => {\n        var iw = this.findInfoWindow('tap')\n        iw && this.openInfoWindow(iw, index)\n\n        this.trigger('click', e)\n      })\n      marker.addListener('mouseover', () => {\n        var iw = this.findInfoWindow('hover')\n        if (!iw) return\n        infowindows[index] = this.openInfoWindow(iw, index)\n      })\n      marker.addListener('mouseout', () => {\n        var infowindow = infowindows[index]\n        infowindow && infowindow.close()\n        infowindows[index] = null\n      })\n    })\n\n    this.markers = markers\n  }\n\n  set markers(markers) {\n    if (this._markers) {\n      this._markers.forEach(marker => {\n        marker.setMap(null)\n        google.maps.event.clearInstanceListeners(marker)\n      })\n\n      this._markers = []\n    }\n\n    this._markers = markers\n  }\n\n  get markers() {\n    if (!this._markers) {\n      this.buildMarkers()\n    }\n\n    return this._markers\n  }\n\n  get trackPath() {\n    return this._trackPath\n  }\n\n  set trackPath(trackPath) {\n    if (this.trackPath) {\n      this.trackPath.setMap(null)\n    }\n\n    this._trackPath = trackPath\n  }\n\n  get hidden() {\n    return super.hidden || this.app.isViewMode\n  }\n\n  set hidden(hidden) {\n    super.hidden = hidden\n  }\n\n  render(context: CanvasRenderingContext2D) {\n    var { top, left, width, height } = this.state\n\n    context.translate(left, top)\n\n    // 마커 모양 그리기\n    context.beginPath()\n\n    context.moveTo(width / 2, height * 0.9)\n    context.bezierCurveTo(width / 2.3, height * 0.6, 0, height / 2, 0, height / 4)\n\n    context.ellipse(width / 2, height / 4, width / 2, height / 4, 0, Math.PI * 1, Math.PI * 0)\n\n    context.bezierCurveTo(width, height / 2, width / 1.7, height * 0.6, width / 2, height * 0.9)\n    context.closePath()\n\n    context.translate(-left, -top)\n  }\n\n  get controls() {\n    return []\n  }\n\n  onchangeTargetMap() {\n    if (this.targetMap) {\n      this._targetMap = null\n      this._map = null\n    }\n\n    var id = this.get('targetMap')\n    if (id !== undefined) {\n      this._targetMap = this.root.findById(id) as GoogleMap\n\n      if (this.targetMap) {\n        this._map = this.targetMap.map\n\n        if (!this.map) {\n          var listener = (after: any) => {\n            if ('map' in after) {\n              this._map = after.map\n              this.markers && this.markers.forEach(marker => marker.setMap(this.map!))\n\n              this.targetMap!.off('change', listener)\n            }\n          }\n          this.targetMap.on('change', listener)\n        } else {\n          this.markers && this.markers.forEach(marker => marker.setMap(this.map!))\n        }\n      }\n    }\n  }\n\n  get targetMap() {\n    return this._targetMap\n  }\n\n  onchange(after: Properties, before: Properties) {\n    if ('targetMap' in after) {\n      this.onchangeTargetMap()\n    }\n\n    if ('latlngs' in after) {\n      this.buildMarkers()\n    }\n\n    if ('fillStyle' in after || 'strokeStyle' in after || 'lineWidth' in after) {\n      this.buildMarkers()\n    }\n\n    super.onchange && super.onchange(after, before)\n  }\n\n  get latlngs() {\n    return this.getState('latlngs')\n  }\n\n  set latlngs(latlngs) {\n    this.setState({\n      latlngs\n    })\n  }\n\n  get nature() {\n    return NATURE\n  }\n}\n\nComponent.register('gmap-path', GMapPath)\n"]}

package/dist/google-map.d.ts

@@ -0,0 +1,49 @@
+/// <reference types="googlemaps" />
+import { HTMLOverlayContainer, Properties } from '@hatiolab/things-scene';
+export default class GoogleMap extends HTMLOverlayContainer {
+    static load(component: GoogleMap): void;
+    private static loaded;
+    private _listenTo?;
+    private _listener?;
+    private _anchor?;
+    private _map?;
+    ready(): void;
+    removed(): void;
+    rescale(): void;
+    createElement(): void;
+    onload(): void;
+    get tagName(): string;
+    get map(): google.maps.Map<Element> | undefined;
+    dispose(): void;
+    setElementProperties(div: HTMLDivElement): void;
+    onchange(after: Properties, before: Properties): void;
+    get latlng(): {
+        lat: any;
+        lng: any;
+    };
+    set latlng(latlng: {
+        lat: any;
+        lng: any;
+    });
+    get nature(): {
+        mutable: boolean;
+        resizable: boolean;
+        rotatable: boolean;
+        properties: ({
+            type: string;
+            label: string;
+            name: string;
+            property: {
+                step: number;
+                max: number;
+                min: number;
+            };
+        } | {
+            type: string;
+            label: string;
+            name: string;
+            property?: undefined;
+        })[];
+        'value-property': string;
+    };
+}

package/dist/google-map.js

@@ -0,0 +1,178 @@
+/*
+ * 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, ScriptLoader, error } from '@hatiolab/things-scene';
+function getGlobalScale(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;
+}
+class GoogleMap extends HTMLOverlayContainer {
+    constructor() {
+        super(...arguments);
+        this._listener = function (after) {
+            after.scale && this.rescale();
+        }.bind(this);
+    }
+    static load(component) {
+        var key = component.get('apiKey');
+        ScriptLoader.load('https://maps.googleapis.com/maps/api/js' + (key ? '?key=' + key : '')).then(() => component.onload(), error);
+    }
+    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')] = transform;
+            anchor.style[(prefix + 'transform-origin')] = '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) {
+        this.rescale();
+    }
+    onchange(after, before) {
+        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;
+    }
+}
+GoogleMap.loaded = false;
+export default GoogleMap;
+Component.register('google-map', GoogleMap);
+//# sourceMappingURL=google-map.js.map

package/dist/google-map.js.map

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

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import GmapMarker from './gmap-marker';
+import GmapPath from './gmap-path';
+import GoogleMap from './google-map';
+declare const _default: (typeof GoogleMap | typeof GmapMarker | typeof GmapPath)[];
+export default _default;

package/dist/index.js

@@ -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];
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,UAAU,MAAM,eAAe,CAAA;AACtC,OAAO,QAAQ,MAAM,aAAa,CAAA;AAClC,OAAO,SAAS,MAAM,cAAc,CAAA;AAEpC,eAAe,CAAC,UAAU,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport GmapMarker from './gmap-marker'\nimport GmapPath from './gmap-path'\nimport GoogleMap from './google-map'\n\nexport default [GmapMarker, GmapPath, GoogleMap]\n"]}

package/dist/templates/gmap-marker.d.ts

@@ -0,0 +1,18 @@
+declare const _default: {
+    type: string;
+    description: string;
+    group: string;
+    icon: string;
+    model: {
+        type: string;
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        lat: number;
+        lng: number;
+        fillStyle: string;
+        hidden: boolean;
+    };
+};
+export default _default;

package/dist/templates/gmap-marker.js

@@ -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
+    }
+};
+//# sourceMappingURL=gmap-marker.js.map

package/dist/templates/gmap-marker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gmap-marker.js","sourceRoot":"","sources":["../../src/templates/gmap-marker.ts"],"names":[],"mappings":"AAAA,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,6BAA6B,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAEzE,eAAe;IACb,IAAI,EAAE,aAAa;IACnB,WAAW,EAAE,mBAAmB;IAChC,KAAK,EAAE,KAAK;IACZ,gGAAgG;IAChG,IAAI;IACJ,KAAK,EAAE;QACL,IAAI,EAAE,aAAa;QACnB,IAAI,EAAE,GAAG;QACT,GAAG,EAAE,GAAG;QACR,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,GAAG,EAAE,SAAS;QACd,GAAG,EAAE,UAAU;QACf,SAAS,EAAE,SAAS;QACpB,MAAM,EAAE,IAAI;KACb;CACF,CAAA","sourcesContent":["const icon = new URL('../../icons/gmap-marker.png', import.meta.url).href\n\nexport default {\n  type: 'gmap-marker',\n  description: 'google map marker',\n  group: 'etc',\n  /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */\n  icon,\n  model: {\n    type: 'gmap-marker',\n    left: 150,\n    top: 150,\n    width: 40,\n    height: 60,\n    lat: 22.308117,\n    lng: 114.225443,\n    fillStyle: '#00ff00',\n    hidden: true\n  }\n}\n"]}

package/dist/templates/gmap-path.d.ts

@@ -0,0 +1,21 @@
+declare const _default: {
+    type: string;
+    description: string;
+    group: string;
+    icon: string;
+    model: {
+        type: string;
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        latlngs: {
+            lat: number;
+            lng: number;
+        }[];
+        startEndMarkerDifferentDesign: boolean;
+        fillStyle: string;
+        hidden: boolean;
+    };
+};
+export default _default;