@operato/scene-restful 0.1.2

package/dist/restful.js

@@ -0,0 +1,223 @@
+import { Component, DataSource, RectPath, Shape, warn } from '@hatiolab/things-scene';
+import jsonp from './jsonp';
+const NATURE = {
+    mutable: false,
+    resizable: true,
+    rotatable: true,
+    properties: [
+        {
+            type: 'string',
+            label: 'url',
+            name: 'url'
+        },
+        {
+            type: 'number',
+            label: 'period',
+            name: 'period',
+            placeholder: 'SECONDS'
+        },
+        {
+            type: 'select',
+            label: 'data-format',
+            name: 'dataFormat',
+            property: {
+                options: [
+                    {
+                        display: 'Plain Text',
+                        value: 'text'
+                    },
+                    {
+                        display: 'JSON',
+                        value: 'json'
+                    },
+                    {
+                        display: 'JSONP',
+                        value: 'jsonp'
+                    }
+                ]
+            }
+        },
+        {
+            type: 'checkbox',
+            label: 'with-credentials',
+            name: 'withCredentials'
+        }
+    ],
+    'value-property': 'url',
+    help: 'scene/component/restful'
+};
+const REST_IMAGE = 'data:image/png;base64,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';
+const WARN_NO_URL = 'Valid URL property required';
+export default class Restful extends DataSource(RectPath(Shape)) {
+    constructor() {
+        super(...arguments);
+        this._isStarted = false;
+    }
+    static get image() {
+        if (!Restful._image) {
+            Restful._image = new Image();
+            Restful._image.src = REST_IMAGE;
+        }
+        return Restful._image;
+    }
+    get url() {
+        return this.getState('url');
+    }
+    set url(url) {
+        this.setState('url', url);
+        this._initRestful();
+    }
+    get period() {
+        return this.state.period * 1000;
+    }
+    set period(period) {
+        this.setState('period', period);
+        this._initRestful();
+    }
+    get withCredentials() {
+        return !!this.getState('withCredentials');
+    }
+    set withCredentials(withCredentials) {
+        this.setState('withCredentials', withCredentials);
+        this._initRestful();
+    }
+    get repeatTimer() {
+        return this._repeatTimer;
+    }
+    set repeatTimer(repeatTimer) {
+        this._stopRepeater();
+        this._repeatTimer = repeatTimer;
+    }
+    get httpRequest() {
+        return this._httpRequest;
+    }
+    set httpRequest(httpRequest) {
+        this._httpRequest = httpRequest;
+    }
+    ready() {
+        this._initRestful();
+    }
+    _initRestful() {
+        if (!this.app.isViewMode)
+            return;
+        if (!this.url) {
+            warn(WARN_NO_URL);
+            return;
+        }
+        this._stopRepeater();
+        this._startRepeater();
+    }
+    dispose() {
+        super.dispose();
+        this._stopRepeater();
+    }
+    _startRepeater() {
+        this._isStarted = true;
+        var self = this;
+        // requestAnimationFrame 이 호출되지 않을 때는 ajax 호출도 하지 않도록 함.
+        function _() {
+            if (!self._isStarted) {
+                return;
+            }
+            self.callAjax();
+            if (!self.period) {
+                self._stopRepeater();
+                return;
+            }
+            self._repeatTimer = setTimeout(() => {
+                requestAnimationFrame(_);
+            }, self.period);
+        }
+        requestAnimationFrame(_);
+    }
+    _stopRepeater() {
+        this._abortRequest();
+        if (this.repeatTimer)
+            clearTimeout(this._repeatTimer);
+        this._isStarted = false;
+    }
+    _makeRequest(url) {
+        if (window.XMLHttpRequest) {
+            // Mozilla, Safari, ...
+            this.httpRequest = new XMLHttpRequest();
+            // @ts-ignore
+        }
+        else if (window.ActiveXObject) {
+            // IE
+            try {
+                // @ts-ignore
+                this.httpRequest = new ActiveXObject('Msxml2.XMLHTTP');
+            }
+            catch (e) {
+                try {
+                    // @ts-ignore
+                    this.httpRequest = new ActiveXObject('Microsoft.XMLHTTP');
+                }
+                catch (e) { }
+            }
+        }
+        if (!this.httpRequest) {
+            warn('Giving up :( Cannot create an XMLHTTP instance');
+            return false;
+        }
+        this.httpRequest.withCredentials = this.withCredentials;
+        this.httpRequest.open('GET', url);
+        this.httpRequest.onreadystatechange = this.onDataReceived.bind(this);
+        return true;
+    }
+    _makeRequestJsonp(url) {
+        jsonp(url, {}, (self, data) => {
+            if (!data)
+                return;
+            this.data = data;
+        });
+    }
+    _abortRequest() {
+        if (this.httpRequest)
+            this.httpRequest.abort();
+    }
+    onDataReceived() {
+        var { dataFormat = 'text' } = this.state;
+        if (this.httpRequest.readyState === 4) {
+            if (this.httpRequest.status === 200) {
+                var data = this.httpRequest.responseText;
+                if (!data)
+                    return;
+                this.data = this._convertDataFormat(data, dataFormat);
+            }
+        }
+    }
+    callAjax() {
+        var { dataFormat = 'text' } = this.state;
+        if (dataFormat == 'jsonp') {
+            // @ts-ignore TODO add substitute property to things-scene.d.ts
+            this._makeRequestJsonp(this.substitute(this.url, this));
+        }
+        else {
+            // @ts-ignore TODO add substitute property to things-scene.d.ts
+            if (!this._makeRequest(this.substitute(this.url, this)))
+                return;
+            this.httpRequest.send();
+        }
+    }
+    _draw(context) {
+        var { left, top, width, height } = this.bounds;
+        context.beginPath();
+        this.drawImage(context, Restful.image, left, top, width, height);
+    }
+    ondblclick(e) {
+        if (!this.url) {
+            warn(WARN_NO_URL);
+            return;
+        }
+        this.callAjax();
+    }
+    get controls() {
+        return [];
+    }
+    get nature() {
+        return NATURE;
+    }
+}
+Component.register('restful', Restful);
+//# sourceMappingURL=restful.js.map

package/dist/restful.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"restful.js","sourceRoot":"","sources":["../src/restful.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, DataSource, RectPath, Shape, warn } from '@hatiolab/things-scene'\n\nimport jsonp from './jsonp'\n\nconst NATURE = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'string',\n      label: 'url',\n      name: 'url'\n    },\n    {\n      type: 'number',\n      label: 'period',\n      name: 'period',\n      placeholder: 'SECONDS'\n    },\n    {\n      type: 'select',\n      label: 'data-format',\n      name: 'dataFormat',\n      property: {\n        options: [\n          {\n            display: 'Plain Text',\n            value: 'text'\n          },\n          {\n            display: 'JSON',\n            value: 'json'\n          },\n          {\n            display: 'JSONP',\n            value: 'jsonp'\n          }\n        ]\n      }\n    },\n    {\n      type: 'checkbox',\n      label: 'with-credentials',\n      name: 'withCredentials'\n    }\n  ],\n  'value-property': 'url',\n  help: 'scene/component/restful'\n}\n\nconst REST_IMAGE =\n  'data:image/png;base64,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'\n\nconst WARN_NO_URL = 'Valid URL property required'\n\nexport default class Restful extends DataSource(RectPath(Shape)) {\n  static _image: HTMLImageElement\n\n  static get image() {\n    if (!Restful._image) {\n      Restful._image = new Image()\n      Restful._image.src = REST_IMAGE\n    }\n\n    return Restful._image\n  }\n\n  get url() {\n    return this.getState('url')\n  }\n\n  set url(url) {\n    this.setState('url', url)\n    this._initRestful()\n  }\n\n  get period() {\n    return this.state.period * 1000\n  }\n\n  set period(period) {\n    this.setState('period', period)\n    this._initRestful()\n  }\n\n  get withCredentials() {\n    return !!this.getState('withCredentials')\n  }\n\n  set withCredentials(withCredentials) {\n    this.setState('withCredentials', withCredentials)\n    this._initRestful()\n  }\n\n  _repeatTimer!: NodeJS.Timeout\n  _httpRequest?: any\n  _isStarted = false\n  _convertDataFormat?: any\n\n  get repeatTimer() {\n    return this._repeatTimer\n  }\n\n  set repeatTimer(repeatTimer) {\n    this._stopRepeater()\n    this._repeatTimer = repeatTimer\n  }\n\n  get httpRequest() {\n    return this._httpRequest\n  }\n\n  set httpRequest(httpRequest) {\n    this._httpRequest = httpRequest\n  }\n\n  ready() {\n    this._initRestful()\n  }\n\n  _initRestful() {\n    if (!this.app.isViewMode) return\n\n    if (!this.url) {\n      warn(WARN_NO_URL)\n      return\n    }\n\n    this._stopRepeater()\n    this._startRepeater()\n  }\n\n  dispose() {\n    super.dispose()\n    this._stopRepeater()\n  }\n\n  _startRepeater() {\n    this._isStarted = true\n\n    var self = this\n\n    // requestAnimationFrame 이 호출되지 않을 때는 ajax 호출도 하지 않도록 함.\n    function _() {\n      if (!self._isStarted) {\n        return\n      }\n      self.callAjax()\n\n      if (!self.period) {\n        self._stopRepeater()\n        return\n      }\n\n      self._repeatTimer = setTimeout(() => {\n        requestAnimationFrame(_)\n      }, self.period)\n    }\n\n    requestAnimationFrame(_)\n  }\n\n  _stopRepeater() {\n    this._abortRequest()\n\n    if (this.repeatTimer) clearTimeout(this._repeatTimer)\n    this._isStarted = false\n  }\n\n  _makeRequest(url: string) {\n    if (window.XMLHttpRequest) {\n      // Mozilla, Safari, ...\n      this.httpRequest = new XMLHttpRequest()\n      // @ts-ignore\n    } else if (window.ActiveXObject) {\n      // IE\n      try {\n        // @ts-ignore\n        this.httpRequest = new ActiveXObject('Msxml2.XMLHTTP')\n      } catch (e) {\n        try {\n          // @ts-ignore\n          this.httpRequest = new ActiveXObject('Microsoft.XMLHTTP')\n        } catch (e) {}\n      }\n    }\n\n    if (!this.httpRequest) {\n      warn('Giving up :( Cannot create an XMLHTTP instance')\n      return false\n    }\n    this.httpRequest.withCredentials = this.withCredentials\n    this.httpRequest.open('GET', url)\n    this.httpRequest.onreadystatechange = this.onDataReceived.bind(this)\n\n    return true\n  }\n\n  _makeRequestJsonp(url: string) {\n    jsonp(url, {}, (self, data) => {\n      if (!data) return\n\n      this.data = data\n    })\n  }\n\n  _abortRequest() {\n    if (this.httpRequest) this.httpRequest.abort()\n  }\n\n  onDataReceived() {\n    var { dataFormat = 'text' } = this.state\n\n    if (this.httpRequest.readyState === 4) {\n      if (this.httpRequest.status === 200) {\n        var data = this.httpRequest.responseText\n\n        if (!data) return\n\n        this.data = this._convertDataFormat(data, dataFormat)\n      }\n    }\n  }\n\n  callAjax() {\n    var { dataFormat = 'text' } = this.state\n\n    if (dataFormat == 'jsonp') {\n      // @ts-ignore TODO add substitute property to things-scene.d.ts\n      this._makeRequestJsonp(this.substitute(this.url, this))\n    } else {\n      // @ts-ignore TODO add substitute property to things-scene.d.ts\n      if (!this._makeRequest(this.substitute(this.url, this))) return\n\n      this.httpRequest.send()\n    }\n  }\n\n  _draw(context: CanvasRenderingContext2D) {\n    var { left, top, width, height } = this.bounds\n\n    context.beginPath()\n    this.drawImage(context, Restful.image, left, top, width, height)\n  }\n\n  ondblclick(e: Event) {\n    if (!this.url) {\n      warn(WARN_NO_URL)\n      return\n    }\n\n    this.callAjax()\n  }\n\n  get controls() {\n    return []\n  }\n\n  get nature() {\n    return NATURE\n  }\n}\n\nComponent.register('restful', Restful)\n"]}

package/helps/scene/component/restful.ko.md

@@ -0,0 +1,12 @@
+# restful
+URL를 제공 받고 URL로만 데이터를 조회할 경우 사용하는 컴포넌트.
+
+## properties
+
+  - url : 데이터 조회 URL
+  - period : 데이터 조회 주기
+  - data format : Plain Text, JSON, JSONP등 데이터 포멧
+    - Plain Text : 서버에서 데이터를 Plain Text로 반환할 경우 사용
+    - JSON : 서버에서 데이터를 JSON으로 제공할 경우 
+    - JSONP : 데이터를 function형태로 전달 받을 경우 해당 function을 받아서 처리해 주는 기능
+  - with credentials : Cross site request 설정

package/helps/scene/component/restful.md

@@ -0,0 +1,11 @@
+# restful
+A component used when a URL is provided and data is retrieved only with a URL.
+
+## properties
+  - url : Data inquiry URL
+  - period : Data inquiry cycle
+  - data format : Plain Text, JSON, JSONP Data format
+     - Plain Text : Used when the server returns data in Plain Text.
+     - JSON : When the server provides data as JSON
+     - JSONP : When data is received in the form of a function, the function is received and processed.
+  - with credentials : Cross site request

package/helps/scene/component/restful.zh.md

@@ -0,0 +1,13 @@
+# restful
+提供URL且仅通过URL检索数据时使用的组件。
+
+## properties
+
+- 访问地址 : 数据查询网址
+- 周期 : 数据查询周期
+- 数据格式 : Plain Text，JSON，JSONP数据格式
+   - Plain Text : 服务器以纯文本格式返回数据时使用。
+   - JSON : 当服务器以JSON形式提供数据时
+   - JSONP : 当以函数形式接收数据时，将接收并处理该函数。
+
+- 允许跨网 : 是否允许跨网

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@operato/scene-restful",
+  "description": "Restful Client Component for Things Scene",
+  "license": "MIT",
+  "author": "heartyoh",
+  "version": "0.1.2",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "things-scene": true,
+  "publishConfig": {
+    "access": "public",
+    "@oprato:registry": "https://registry.npmjs.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/things-scene/operato-scene.git",
+    "directory": "packages/restful"
+  },
+  "scripts": {
+    "serve": "tsc && things-factory-dev",
+    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+    "build": "tsc",
+    "prepublish": "tsc",
+    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "migration": "things-factory-migration"
+  },
+  "dependencies": {
+    "@hatiolab/things-scene": "^2.7.31"
+  },
+  "devDependencies": {
+    "@hatiolab/prettier-config": "^1.0.0",
+    "@operato/board": "^0.3.7",
+    "@things-factory/builder": "^4.0.27",
+    "@things-factory/operato-board": "^4.0.27",
+    "@types/chance": "^1.1.3",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "@web/dev-server": "^0.1.28",
+    "concurrently": "^5.3.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "husky": "^4.3.8",
+    "lint-staged": "^10.5.4",
+    "prettier": "^2.4.1",
+    "tslib": "^2.3.1",
+    "typescript": "^4.5.2"
+  },
+  "prettier": "@hatiolab/prettier-config",
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
+  "gitHead": "a08c67f644a77255e0ccd00a9ebcdb81f89b8adc"
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+export { default as Restful } from './restful'

package/src/jsonp.ts

@@ -0,0 +1,85 @@
+import { debug } from '@hatiolab/things-scene'
+
+var count = 0
+
+function noop() {}
+
+/**
+ * JSONP handler
+ *
+ * Options:
+ *  - param {String} qs parameter (`callback`)
+ *  - prefix {String} qs parameter (`__jp`)
+ *  - name {String} qs parameter (`prefix` + incr)
+ *  - timeout {Number} how long after a timeout error is emitted (`60000`)
+ *
+ * @param {String} url
+ * @param {Object|Function} optional options / callback
+ * @param {Function} optional callback
+ */
+
+export default function jsonp(
+  url: string,
+  opts: { prefix?: string; name?: string; param?: string; timeout?: number },
+  fn: (self: any, data?: any) => void
+) {
+  if ('function' == typeof opts) {
+    fn = opts
+    opts = {}
+  }
+  if (!opts) opts = {}
+
+  var prefix = opts.prefix || '__jp'
+
+  // use the callback name that was passed if one was provided.
+  // otherwise generate a unique name by incrementing our counter.
+  var id = opts.name || prefix + count++
+
+  var param = opts.param || 'callback'
+  var timeout = null != opts.timeout ? opts.timeout : 60000
+  var enc = encodeURIComponent
+  var target = document.getElementsByTagName('script')[0] || document.head
+  var script: any
+  var timer: any
+
+  if (timeout) {
+    timer = setTimeout(function () {
+      cleanup()
+      if (fn) fn(new Error('Timeout'))
+    }, timeout)
+  }
+
+  function cleanup() {
+    if (script.parentNode) script.parentNode.removeChild(script)
+    //@ts-ignore
+    window[id] = noop
+    if (timer) clearTimeout(timer)
+  }
+
+  function cancel() {
+    // @ts-ignore
+    if (window[id]) {
+      cleanup()
+    }
+  }
+
+  //@ts-ignore
+  window[id] = function (data) {
+    debug('jsonp got', data)
+    cleanup()
+    if (fn) fn(null, data)
+  }
+
+  // add qs component
+  url += (~url.indexOf('?') ? '&' : '?') + param + '=' + enc(id)
+  url = url.replace('?&', '?')
+
+  debug('jsonp req "%s"', url)
+
+  // create script
+  script = document.createElement('script')
+  script.src = url
+  target.parentNode?.insertBefore(script, target)
+
+  return cancel
+}