@operato/scene-google-map 1.3.6

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [1.3.6](https://github.com/things-scene/operato-scene/compare/v1.3.5...v1.3.6) (2024-01-01)
+
+
+### :bug: Bug Fix
+
+* google-map module moved from things-factory ([86c129f](https://github.com/things-scene/operato-scene/commit/86c129f14d91ec951f0e81a746005a3dfa857156))

package/README.md

@@ -0,0 +1,15 @@
+## things-scene-google-map
+
+## build
+
+`$ yarn build`
+
+| type | filename                      | for            | tested |
+| ---- | ----------------------------- | -------------- | ------ |
+| UMD  | things-scene-google-map.js    | modern browser | O      |
+| UMD  | things-scene-google-map-ie.js | ie 11          | O      |
+| ESM  | things-scene-google-map.mjs   | modern browser | O      |
+
+## publish
+
+`$ yarn publish`

package/dist/gmap-marker.d.ts

@@ -0,0 +1,67 @@
+/// <reference types="googlemaps" />
+/// <reference types="googlemaps" />
+/// <reference types="googlemaps" />
+import { Component, InfoWindow, Properties, Shape } from '@hatiolab/things-scene';
+import GoogleMap from './google-map';
+declare const GMapMarker_base: typeof Shape;
+export default class GMapMarker extends GMapMarker_base {
+    private _infoWindow?;
+    private _marker?;
+    private _map?;
+    private _targetMap?;
+    dispose(): void;
+    ready(): void;
+    get map(): google.maps.Map<Element> | null | undefined;
+    get infoWindow(): google.maps.InfoWindow;
+    findInfoWindow(type: string): Component | undefined;
+    setInfoContent(sceneInfoWindow: InfoWindow): void;
+    openInfoWindow(iw: InfoWindow): void;
+    onmarkerclick(e: Event): void;
+    onmarkermouseover(e: Event): void;
+    onmarkermouseout(e: Event): void;
+    set marker(marker: google.maps.Marker | null | undefined);
+    get marker(): google.maps.Marker | null | undefined;
+    get hidden(): boolean;
+    set hidden(hidden: boolean);
+    render(context: CanvasRenderingContext2D): void;
+    get controls(): never[];
+    onchangeTargetMap(): void;
+    get targetMap(): GoogleMap | null | undefined;
+    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: {
+                component: string;
+                step?: undefined;
+                max?: undefined;
+                min?: undefined;
+            };
+        } | {
+            type: string;
+            label: string;
+            name: string;
+            property: {
+                step: number;
+                max: number;
+                min: number;
+                component?: undefined;
+            };
+        })[];
+        'value-property': string;
+    };
+}
+export {};

package/dist/gmap-marker.js

@@ -0,0 +1,230 @@
+/*
+ * 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: 'number',
+            label: 'latitude',
+            name: 'lat',
+            property: {
+                step: 0.000001,
+                max: 90,
+                min: -90
+            }
+        },
+        {
+            type: 'number',
+            label: 'longitude',
+            name: 'lng',
+            property: {
+                step: 0.000001,
+                max: 180,
+                min: -180
+            }
+        }
+    ],
+    'value-property': 'latlng'
+    // help: 'scene/component/gmap-marker'
+};
+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';
+export default class GMapMarker extends RectPath(Shape) {
+    dispose() {
+        this.marker && this.marker.setMap(null);
+        this.marker = null;
+        delete this._infoWindow;
+        super.dispose();
+    }
+    ready() {
+        super.ready();
+        if (this.isTemplate()) {
+            return;
+        }
+        this.onchangeTargetMap();
+    }
+    get map() {
+        return this._map;
+    }
+    get infoWindow() {
+        if (!this._infoWindow)
+            this._infoWindow = new google.maps.InfoWindow();
+        return this._infoWindow;
+    }
+    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);
+        }
+    }
+    setInfoContent(sceneInfoWindow) {
+        var tpl = Component.template(sceneInfoWindow.model.frontSideTemplate);
+        var content = `<style>${sceneInfoWindow.model.style}</style>` + tpl(this);
+        this.infoWindow.setContent(content);
+    }
+    openInfoWindow(iw) {
+        this.setInfoContent(iw);
+        if (!this.map) {
+            return;
+        }
+        this.infoWindow.open(this.map, this.marker);
+    }
+    onmarkerclick(e) {
+        var iw = this.findInfoWindow('tap');
+        iw && this.openInfoWindow(iw);
+        this.trigger('click', e);
+    }
+    onmarkermouseover(e) {
+        var iw = this.findInfoWindow('hover');
+        iw && this.openInfoWindow(iw);
+    }
+    onmarkermouseout(e) {
+        var iw = this.findInfoWindow('hover');
+        iw && this.infoWindow.close();
+    }
+    set marker(marker) {
+        if (this._marker) {
+            this._marker.setMap(null);
+            google.maps.event.clearInstanceListeners(this._marker);
+            delete this._marker;
+        }
+        if (marker) {
+            marker.addListener('click', this.onmarkerclick.bind(this));
+            marker.addListener('mouseover', this.onmarkermouseover.bind(this));
+            marker.addListener('mouseout', this.onmarkermouseout.bind(this));
+            this._marker = marker;
+        }
+    }
+    get marker() {
+        if (!this._marker && this.map) {
+            let { lat, lng, fillStyle: fillColor, alpha: fillOpacity = 1, strokeStyle: strokeColor, lineWidth: strokeWeight } = this.state;
+            var marker = new google.maps.Marker({
+                position: {
+                    lat: Number(lat) || 0,
+                    lng: Number(lng) || 0
+                },
+                map: this.map,
+                icon: {
+                    path: MARKER_PATH,
+                    fillColor,
+                    fillOpacity,
+                    strokeColor,
+                    strokeWeight
+                }
+            });
+            this.marker = marker;
+        }
+        return this._marker;
+    }
+    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.marker && this.marker.setMap(this.map);
+                            this.targetMap.off('change', listener);
+                        }
+                    };
+                    this.targetMap.on('change', listener);
+                }
+                else {
+                    this.marker && this.marker.setMap(this.map);
+                }
+            }
+        }
+    }
+    get targetMap() {
+        return this._targetMap;
+    }
+    // get click_handler() {
+    //   if (!this._click_handler)
+    //     this._click_handler = this.onmarkerclick.bind(this);
+    //   return this._click_handler;
+    // }
+    onchange(after, before) {
+        if ('targetMap' in after) {
+            this.onchangeTargetMap();
+        }
+        if ('lat' in after || 'lng' in after) {
+            var { lat, lng } = this.state;
+            this.latlng = {
+                lat,
+                lng
+            };
+        }
+        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 latlng() {
+        return {
+            lat: this.getState('lat'),
+            lng: this.getState('lng')
+        };
+    }
+    set latlng(latlng) {
+        var { lat, lng } = latlng;
+        this.marker && this.marker.setPosition(new google.maps.LatLng(lat, lng));
+        this.setState({
+            lat,
+            lng
+        });
+    }
+    get nature() {
+        return NATURE;
+    }
+}
+Component.register('gmap-marker', GMapMarker);
+//# sourceMappingURL=gmap-marker.js.map

package/dist/gmap-marker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gmap-marker.js","sourceRoot":"","sources":["../src/gmap-marker.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: '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        max: 180,\n        min: -180\n      }\n    }\n  ],\n  'value-property': 'latlng'\n  // help: 'scene/component/gmap-marker'\n}\n\nconst 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'\n\nexport default class GMapMarker extends RectPath(Shape) {\n  private _infoWindow?: google.maps.InfoWindow\n  private _marker?: google.maps.Marker | null\n  private _map?: google.maps.Map | null\n  private _targetMap?: GoogleMap | null\n\n  dispose() {\n    this.marker && this.marker.setMap(null)\n\n    this.marker = null\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  get infoWindow() {\n    if (!this._infoWindow) this._infoWindow = new google.maps.InfoWindow()\n\n    return this._infoWindow\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  setInfoContent(sceneInfoWindow: InfoWindow) {\n    var tpl = Component.template(sceneInfoWindow.model.frontSideTemplate)\n    var content = `<style>${sceneInfoWindow.model.style}</style>` + tpl(this)\n\n    this.infoWindow.setContent(content)\n  }\n\n  openInfoWindow(iw: InfoWindow) {\n    this.setInfoContent(iw)\n\n    if (!this.map) {\n      return\n    }\n\n    this.infoWindow.open(this.map, this.marker!)\n  }\n\n  onmarkerclick(e: Event) {\n    var iw = this.findInfoWindow('tap')\n    iw && this.openInfoWindow(iw)\n\n    this.trigger('click', e)\n  }\n\n  onmarkermouseover(e: Event) {\n    var iw = this.findInfoWindow('hover')\n    iw && this.openInfoWindow(iw)\n  }\n\n  onmarkermouseout(e: Event) {\n    var iw = this.findInfoWindow('hover')\n    iw && this.infoWindow.close()\n  }\n\n  set marker(marker) {\n    if (this._marker) {\n      this._marker.setMap(null)\n      google.maps.event.clearInstanceListeners(this._marker)\n\n      delete this._marker\n    }\n\n    if (marker) {\n      marker.addListener('click', this.onmarkerclick.bind(this))\n      marker.addListener('mouseover', this.onmarkermouseover.bind(this))\n      marker.addListener('mouseout', this.onmarkermouseout.bind(this))\n\n      this._marker = marker\n    }\n  }\n\n  get marker() {\n    if (!this._marker && this.map) {\n      let {\n        lat,\n        lng,\n        fillStyle: fillColor,\n        alpha: fillOpacity = 1,\n        strokeStyle: strokeColor,\n        lineWidth: strokeWeight\n      } = this.state\n\n      var marker = 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: MARKER_PATH,\n          fillColor,\n          fillOpacity,\n          strokeColor,\n          strokeWeight\n        }\n      })\n\n      this.marker = marker\n    }\n\n    return this._marker\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.marker && this.marker.setMap(this.map!)\n\n              this.targetMap!.off('change', listener)\n            }\n          }\n          this.targetMap.on('change', listener)\n        } else {\n          this.marker && this.marker.setMap(this.map)\n        }\n      }\n    }\n  }\n\n  get targetMap() {\n    return this._targetMap\n  }\n\n  // get click_handler() {\n  //   if (!this._click_handler)\n  //     this._click_handler = this.onmarkerclick.bind(this);\n\n  //   return this._click_handler;\n  // }\n\n  onchange(after: Properties, before: Properties) {\n    if ('targetMap' in after) {\n      this.onchangeTargetMap()\n    }\n\n    if ('lat' in after || 'lng' in after) {\n      var { lat, lng } = this.state\n      this.latlng = {\n        lat,\n        lng\n      }\n    }\n\n    if (('fillStyle' in after || 'strokeStyle' in after || 'lineWidth' in after) && this.marker) {\n      let {\n        fillStyle: fillColor,\n        alpha: fillOpacity = 1,\n        strokeStyle: strokeColor,\n        lineWidth: strokeWeight\n      } = this.state\n\n      this.marker.setIcon({\n        path: MARKER_PATH,\n        fillColor,\n        fillOpacity,\n        strokeColor,\n        strokeWeight\n      })\n    }\n\n    super.onchange && super.onchange(after, before)\n  }\n\n  get latlng() {\n    return {\n      lat: this.getState('lat'),\n      lng: this.getState('lng')\n    }\n  }\n\n  set latlng(latlng) {\n    var { lat, lng } = latlng\n    this.marker && this.marker.setPosition(new google.maps.LatLng(lat, lng))\n\n    this.setState({\n      lat,\n      lng\n    })\n  }\n\n  get nature() {\n    return NATURE\n  }\n}\n\nComponent.register('gmap-marker', GMapMarker)\n"]}

package/dist/gmap-path.d.ts

@@ -0,0 +1,54 @@
+/// <reference types="googlemaps" />
+/// <reference types="googlemaps" />
+/// <reference types="googlemaps" />
+/// <reference types="googlemaps" />
+import { Component, InfoWindow, Properties, Shape } from '@hatiolab/things-scene';
+import GoogleMap from './google-map';
+declare const GMapPath_base: typeof Shape;
+export default class GMapPath extends GMapPath_base {
+    private _infoWindow?;
+    private _markers;
+    private _map?;
+    private _targetMap?;
+    private _trackPath?;
+    dispose(): void;
+    ready(): void;
+    get map(): google.maps.Map<Element> | null | undefined;
+    findInfoWindow(type: string): Component | undefined;
+    getInfoContent(sceneInfoWindow: InfoWindow, index: number): string;
+    openInfoWindow(iw: InfoWindow, index: number): google.maps.InfoWindow | undefined;
+    buildMarkers(): void;
+    set markers(markers: google.maps.Marker[]);
+    get markers(): google.maps.Marker[];
+    get trackPath(): google.maps.Polyline | undefined;
+    set trackPath(trackPath: google.maps.Polyline | undefined);
+    get hidden(): boolean;
+    set hidden(hidden: boolean);
+    render(context: CanvasRenderingContext2D): void;
+    get controls(): never[];
+    onchangeTargetMap(): void;
+    get targetMap(): GoogleMap | null | undefined;
+    onchange(after: Properties, before: Properties): void;
+    get latlngs(): any;
+    set latlngs(latlngs: any);
+    get nature(): {
+        mutable: boolean;
+        resizable: boolean;
+        rotatable: boolean;
+        properties: ({
+            type: string;
+            label: string;
+            name: string;
+            property: {
+                component: string;
+            };
+        } | {
+            type: string;
+            label: string;
+            name: string;
+            property?: undefined;
+        })[];
+        'value-property': string;
+    };
+}
+export {};