@operato/scene-graphql 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,16 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+### [0.1.3](https://github.com/things-scene/operato-scene/compare/v0.1.2...v0.1.3) (2022-01-28)
+
+
+### :rocket: New Features
+
+* add graphql, mqtt scene component ([e223063](https://github.com/things-scene/operato-scene/commit/e223063b562f6a6a7b6ff12f3e32df30aa920da8))
+
+
+### :bug: Bug Fix
+
+* applied [@operato](https://github.com/operato)@^0.3.20 ([9a1dcbd](https://github.com/things-scene/operato-scene/commit/9a1dcbd2d1ca7f95b498503c87242b6d57ee3482))

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Hearty, Oh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,59 @@
+# graphql
+
+## graphql을 활용하여, 데이터를 불러오거나 수정하는 컴포넌트가 있다.
+
+## graphql-client
+
+**properties: endpoint**
+
+입력받은 endpoint에 데이터를 request하는 client 컴포넌트입니다. 다른 컴포넌트에서 주로 참조하여 사용하기 때문에 ID값을 지정해주어야 합니다.
+
+## graphql-query
+
+**properties: client, period, query**
+
+graphql-client의 id를 참조하여, 입력한 주기대로 해당 클라이언트에 graphql query를 통해 데이터를 요청하여 받아오는 컴포넌트입니다.
+
+## graphql-quick-bind-query
+
+**properties: client, period, query**
+
+위의 graphql-query와 동일한 역할을 하지만, query에 quick-bind기능을 활용하여, 변화하는 값을 쿼리에 넣어 조회할 수 있도록 돕는 컴포넌트입니다. quick-bind 사용방법은 query문 내의 변화하는 참조값을 입력하는 부분에 \${참조할컴포넌트ID.프로퍼티명} 형식으로 입력하면 됩니다. period에 관계없이 데이터가 특정 컴포넌트 값이 변경될 때마다 가져오고 싶은 경우, graphql-quick-bind-query컴포넌트의 value 값으로 데이터를 넘겨주면, 그때마다 데이터를 새로 조회할 수 있습니다.
+
+## graphql-quick-bind-mutation
+
+**properties: client, updateGql**
+
+updateGql에 따라 해당 클라이언트를 통해 데이터를 업데이트해줍니다. graphql-quick-bind-query와 마찬가지로 quick-bind 방식을 사용할 수 있습니다.
+
+## node package를 설치한다.
+
+`$ yarn`
+
+## 실행
+
+`$ yarn serve`
+`$ yarn serve:dev`
+
+## 포트를 바꾸려면, -p 3001 식으로 추가해준다.
+
+`$ yarn serve`
+`$ yarn serve -p 3001`
+
+## test in browser
+
+http://localhost:3000
+
+## build
+
+`$ yarn build`
+
+| type | filename                   | for            | tested |
+| ---- | -------------------------- | -------------- | ------ |
+| UMD  | things-scene-graphql.js    | modern browser | O      |
+| UMD  | things-scene-graphql-ie.js | ie 11          | O      |
+| ESM  | things-scene-graphql.mjs   | modern browser | O      |
+
+## publish
+
+`$ yarn publish`

package/dist/graphql-client.d.ts

@@ -0,0 +1,29 @@
+import { ApolloClient, NormalizedCacheObject } from '@apollo/client/core';
+import { Shape } from '@hatiolab/things-scene';
+declare const GraphqlClient_base: (new (...args: any[]) => {
+    isDataSource(): boolean;
+    _convertDataFormat(data: any, format: string): any;
+}) & typeof Shape;
+export default class GraphqlClient extends GraphqlClient_base {
+    private static _image;
+    private _client?;
+    static get image(): HTMLImageElement;
+    ready(): void;
+    init(): void;
+    get client(): ApolloClient<NormalizedCacheObject> | undefined;
+    dispose(): void;
+    render(context: CanvasRenderingContext2D): void;
+    onchangeData(data: any, before: any): void;
+    get nature(): {
+        mutable: boolean;
+        resizable: boolean;
+        rotatable: boolean;
+        properties: {
+            type: string;
+            label: string;
+            name: string;
+        }[];
+        help: string;
+    };
+}
+export {};

package/dist/graphql-client.js

@@ -0,0 +1,143 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { ApolloClient, from, HttpLink, InMemoryCache } from '@apollo/client/core';
+import { onError } from '@apollo/client/link/error';
+import { Component, DataSource, RectPath, Shape } from '@hatiolab/things-scene';
+const defaultOptions = {
+    watchQuery: {
+        fetchPolicy: 'no-cache',
+        errorPolicy: 'ignore'
+    },
+    query: {
+        fetchPolicy: 'no-cache',
+        errorPolicy: 'all'
+    },
+    mutate: {
+        errorPolicy: 'all'
+    }
+};
+const ERROR_HANDLER = ({ operation, graphQLErrors, networkError }) => {
+    if (graphQLErrors) {
+        document.dispatchEvent(new CustomEvent('notify', {
+            detail: {
+                level: 'error',
+                message: graphQLErrors[0].message,
+                ex: graphQLErrors
+            }
+        }));
+    }
+    if (networkError) {
+        /* networkError가 ServerParseError 이거나 ServerError 인 경우에만 statusCode를 갖는다. */
+        switch (networkError.statusCode) {
+            case undefined /* in case this error is not a server side error */:
+                document.dispatchEvent(new CustomEvent('notify', {
+                    detail: {
+                        level: 'error',
+                        message: networkError.message,
+                        ex: networkError
+                    }
+                }));
+                break;
+            case 401:
+                /* 401 에러가 리턴되면, 인증이 필요하다는 메시지를 dispatch 한다. 이 auth 모듈 등에서 이 메시지를 받아서 signin 프로세스를 진행할 수 있다. */
+                document.dispatchEvent(new CustomEvent('auth-required'));
+                break;
+            case 403:
+                /* 403 에러가 리턴되면, 도메인 정보가 필요하다는 메시지를 dispatch 한다. 이 auth 모듈 등에서 이 메시지를 받아서 domain-register 프로세스 등을 진행할 수 있다. */
+                document.dispatchEvent(new CustomEvent('domain-required'));
+                break;
+            default:
+                var { name, response, statusCode, bodyText, message } = networkError;
+                if (name == 'ServerParseError') {
+                    message = `[ ${statusCode || ''} : ${response.statusText} ] ${bodyText}`;
+                }
+                else {
+                    /* in case this error is instanceof ServerError */
+                    message = `[ ${statusCode || ''} : ${response.statusText} ] ${message}`;
+                }
+                document.dispatchEvent(new CustomEvent('notify', {
+                    detail: {
+                        level: 'error',
+                        message,
+                        ex: networkError
+                    }
+                }));
+        }
+    }
+};
+const NATURE = {
+    mutable: false,
+    resizable: true,
+    rotatable: true,
+    properties: [
+        {
+            type: 'string',
+            label: 'endpoint',
+            name: 'endpoint'
+        }
+    ],
+    help: 'scene/component/graphql'
+};
+export default class GraphqlClient extends DataSource(RectPath(Shape)) {
+    static get image() {
+        if (!GraphqlClient._image) {
+            GraphqlClient._image = new Image();
+            GraphqlClient._image.src = new URL('../icons/symbol-graphql-client.png', import.meta.url).href;
+        }
+        return GraphqlClient._image;
+    }
+    ready() {
+        super.ready();
+        this.init();
+    }
+    init() {
+        var { endpoint } = this.state;
+        if (!endpoint) {
+            console.warn('endpoint not defined');
+            return;
+        }
+        var cache = new InMemoryCache();
+        const httpOptions = {
+            uri: endpoint,
+            credentials: 'include'
+        };
+        const client = new ApolloClient({
+            defaultOptions,
+            cache,
+            link: from([onError(ERROR_HANDLER), new HttpLink(httpOptions)])
+        });
+        this._client = client;
+    }
+    get client() {
+        return this._client;
+    }
+    dispose() {
+        super.dispose();
+        try {
+            if (this._client) {
+                this._client.stop();
+            }
+        }
+        catch (e) {
+            console.error(e);
+        }
+        delete this._client;
+    }
+    render(context) {
+        /*
+         * TODO role이 publisher 인지 subscriber 인지에 따라서 구분할 수 있는 표시를 추가할 것.
+         */
+        var { left, top, width, height } = this.bounds;
+        context.beginPath();
+        this.drawImage(context, GraphqlClient.image, left, top, width, height);
+    }
+    onchangeData(data, before) {
+        super.onchangeData(data, before);
+    }
+    get nature() {
+        return NATURE;
+    }
+}
+Component.register('graphql-client', GraphqlClient);
+//# sourceMappingURL=graphql-client.js.map

package/dist/graphql-client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graphql-client.js","sourceRoot":"","sources":["../src/graphql-client.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { ServerParseError } from '@apollo/client'\nimport {\n  ApolloClient,\n  DefaultOptions,\n  from,\n  HttpLink,\n  HttpOptions,\n  InMemoryCache,\n  NormalizedCacheObject\n} from '@apollo/client/core'\nimport { ErrorLink, onError } from '@apollo/client/link/error'\nimport { Component, DataSource, RectPath, Shape } from '@hatiolab/things-scene'\n\nconst defaultOptions: DefaultOptions = {\n  watchQuery: {\n    fetchPolicy: 'no-cache',\n    errorPolicy: 'ignore'\n  },\n  query: {\n    fetchPolicy: 'no-cache', //'network-only'\n    errorPolicy: 'all'\n  },\n  mutate: {\n    errorPolicy: 'all'\n  }\n}\n\nconst ERROR_HANDLER: ErrorLink.ErrorHandler = ({ operation, graphQLErrors, networkError }) => {\n  if (graphQLErrors) {\n    document.dispatchEvent(\n      new CustomEvent('notify', {\n        detail: {\n          level: 'error',\n          message: graphQLErrors[0].message,\n          ex: graphQLErrors\n        }\n      })\n    )\n  }\n\n  if (networkError) {\n    /* networkError가 ServerParseError 이거나 ServerError 인 경우에만 statusCode를 갖는다. */\n    switch ((networkError as ServerParseError).statusCode) {\n      case undefined /* in case this error is not a server side error */:\n        document.dispatchEvent(\n          new CustomEvent('notify', {\n            detail: {\n              level: 'error',\n              message: networkError.message,\n              ex: networkError\n            }\n          })\n        )\n        break\n\n      case 401:\n        /* 401 에러가 리턴되면, 인증이 필요하다는 메시지를 dispatch 한다. 이 auth 모듈 등에서 이 메시지를 받아서 signin 프로세스를 진행할 수 있다. */\n        document.dispatchEvent(new CustomEvent('auth-required'))\n        break\n\n      case 403:\n        /* 403 에러가 리턴되면, 도메인 정보가 필요하다는 메시지를 dispatch 한다. 이 auth 모듈 등에서 이 메시지를 받아서 domain-register 프로세스 등을 진행할 수 있다. */\n        document.dispatchEvent(new CustomEvent('domain-required'))\n        break\n\n      default:\n        var { name, response, statusCode, bodyText, message } = networkError as ServerParseError\n        if (name == 'ServerParseError') {\n          message = `[ ${statusCode || ''} : ${response.statusText} ] ${bodyText}`\n        } else {\n          /* in case this error is instanceof ServerError */\n          message = `[ ${statusCode || ''} : ${response.statusText} ] ${message}`\n        }\n\n        document.dispatchEvent(\n          new CustomEvent('notify', {\n            detail: {\n              level: 'error',\n              message,\n              ex: networkError\n            }\n          })\n        )\n    }\n  }\n}\n\nconst NATURE = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'string',\n      label: 'endpoint',\n      name: 'endpoint'\n    }\n  ],\n  help: 'scene/component/graphql'\n}\n\nexport default class GraphqlClient extends DataSource(RectPath(Shape)) {\n  private static _image: HTMLImageElement\n  private _client?: ApolloClient<NormalizedCacheObject>\n\n  static get image() {\n    if (!GraphqlClient._image) {\n      GraphqlClient._image = new Image()\n      GraphqlClient._image.src = new URL('../icons/symbol-graphql-client.png', import.meta.url).href\n    }\n\n    return GraphqlClient._image\n  }\n\n  ready() {\n    super.ready()\n\n    this.init()\n  }\n\n  init() {\n    var { endpoint } = this.state\n\n    if (!endpoint) {\n      console.warn('endpoint not defined')\n      return\n    }\n\n    var cache = new InMemoryCache()\n    const httpOptions: HttpOptions = {\n      uri: endpoint,\n      credentials: 'include'\n    }\n\n    const client = new ApolloClient({\n      defaultOptions,\n      cache,\n      link: from([onError(ERROR_HANDLER), new HttpLink(httpOptions)])\n    })\n\n    this._client = client\n  }\n\n  get client(): ApolloClient<NormalizedCacheObject> | undefined {\n    return this._client\n  }\n\n  dispose() {\n    super.dispose()\n\n    try {\n      if (this._client) {\n        this._client.stop()\n      }\n    } catch (e) {\n      console.error(e)\n    }\n    delete this._client\n  }\n\n  render(context: CanvasRenderingContext2D) {\n    /*\n     * TODO role이 publisher 인지 subscriber 인지에 따라서 구분할 수 있는 표시를 추가할 것.\n     */\n\n    var { left, top, width, height } = this.bounds\n\n    context.beginPath()\n    this.drawImage(context, GraphqlClient.image, left, top, width, height)\n  }\n\n  onchangeData(data: any, before: any) {\n    super.onchangeData(data, before)\n  }\n\n  get nature() {\n    return NATURE\n  }\n}\n\nComponent.register('graphql-client', GraphqlClient)\n"]}

package/dist/graphql-query-and-mutation.d.ts

@@ -0,0 +1,68 @@
+/// <reference types="node" />
+import { ApolloClient, NormalizedCacheObject } from '@apollo/client/core';
+import { Properties, Shape } from '@hatiolab/things-scene';
+declare const GraphQLQuery_base: (new (...args: any[]) => {
+    isDataSource(): boolean;
+    _convertDataFormat(data: any, format: string): any;
+}) & typeof Shape;
+declare class GraphQLQuery extends GraphQLQuery_base {
+    client?: ApolloClient<NormalizedCacheObject>;
+    private _repeatTimer?;
+    private _isStarted;
+    value: any;
+    get nature(): {
+        mutable: boolean;
+        resizable: boolean;
+        rotatable: boolean;
+        properties: ({
+            type: string;
+            label: string;
+            name: string;
+            property: {
+                component: string;
+            };
+            placeholder?: undefined;
+        } | {
+            type: string;
+            label: string;
+            name: string;
+            placeholder: string;
+            property?: undefined;
+        } | {
+            type: string;
+            label: string;
+            name: string;
+            property?: undefined;
+            placeholder?: undefined;
+        })[];
+        'value-property': string;
+        help: string;
+    };
+    onchange(after: Properties, before: Properties): void;
+    get period(): number;
+    set period(period: number);
+    get repeatTimer(): NodeJS.Timeout | undefined;
+    set repeatTimer(repeatTimer: NodeJS.Timeout | undefined);
+    get autoStart(): any;
+    set autoStart(autoStart: any);
+    get query(): string | undefined;
+    get source(): any;
+    set source(source: any);
+    dispose(): void;
+    ready(): void;
+    _initGraphqlQuery(): void;
+    _stopRepeater(): void;
+    _startRepeater(): void;
+    requestData(): Promise<void>;
+}
+export declare class Query extends GraphQLQuery {
+    private static _image;
+    static get image(): HTMLImageElement;
+    render(context: CanvasRenderingContext2D): void;
+}
+export declare class Mutation extends GraphQLQuery {
+    private static _image;
+    static get image(): HTMLImageElement;
+    render(context: CanvasRenderingContext2D): void;
+}
+export {};

package/dist/graphql-query-and-mutation.js

@@ -0,0 +1,197 @@
+import gql from 'graphql-tag';
+import { Component, DataSource, RectPath, Shape } from '@hatiolab/things-scene';
+import { buildArgs } from '@operato/graphql';
+const NATURE = {
+    mutable: false,
+    resizable: true,
+    rotatable: true,
+    properties: [
+        {
+            type: 'id-input',
+            label: 'client',
+            name: 'client',
+            property: {
+                component: 'graphql-client' // component의 type (null or undefined이면 모든 컴포넌트)
+            }
+        },
+        {
+            type: 'number',
+            label: 'period',
+            name: 'period',
+            placeholder: 'SECONDS'
+        },
+        {
+            type: 'graphql',
+            label: 'query',
+            name: 'query'
+        },
+        {
+            type: 'checkbox',
+            label: 'auto-start',
+            name: 'autoStart'
+        }
+    ],
+    'value-property': 'value',
+    help: 'scene/component/graphql'
+};
+class GraphQLQuery extends DataSource(RectPath(Shape)) {
+    constructor() {
+        super(...arguments);
+        this._isStarted = false;
+    }
+    get nature() {
+        return NATURE;
+    }
+    onchange(after, before) {
+        if ('value' in after) {
+            if (after.value)
+                this.requestData();
+        }
+    }
+    get period() {
+        return this.state.period * 1000;
+    }
+    set period(period) {
+        this.setState('period', period);
+        this._initGraphqlQuery();
+    }
+    get repeatTimer() {
+        return this._repeatTimer;
+    }
+    set repeatTimer(repeatTimer) {
+        this._stopRepeater();
+        this._repeatTimer = repeatTimer;
+    }
+    get autoStart() {
+        return this.state.autoStart;
+    }
+    set autoStart(autoStart) {
+        this.setState('autoStart', autoStart);
+    }
+    get query() {
+        var _query = this.state.query;
+        var objToVal = (exp) => {
+            if (typeof exp === 'string')
+                return exp;
+            else
+                return JSON.stringify(exp);
+        };
+        var changedQuery = (Component.buildSubstitutor(_query, this, objToVal) || (() => _query))();
+        try {
+            changedQuery = changedQuery.replace(/\(.*\)/gi, params => {
+                let paramObject = eval(`({${params.slice(1, -1)}})`);
+                return '(' + buildArgs(paramObject) + ')';
+            });
+        }
+        catch (e) {
+            console.log(e);
+        }
+        return changedQuery;
+    }
+    get source() {
+        return this.getState('source');
+    }
+    set source(source) {
+        this.setState('source', source);
+    }
+    dispose() {
+        super.dispose();
+        this._stopRepeater();
+    }
+    ready() {
+        super.ready();
+        if (this.autoStart) {
+            this._initGraphqlQuery();
+        }
+    }
+    _initGraphqlQuery() {
+        if (!this.app.isViewMode)
+            return;
+        this._stopRepeater();
+        this._startRepeater();
+    }
+    _stopRepeater() {
+        if (this.repeatTimer !== undefined) {
+            clearTimeout(this._repeatTimer);
+            delete this._repeatTimer;
+        }
+        this._isStarted = false;
+    }
+    _startRepeater() {
+        this._isStarted = true;
+        // requestAnimationFrame 이 호출되지 않을 때는 requestData 호출도 하지 않도록 함.
+        var _ = () => {
+            if (!this._isStarted) {
+                return;
+            }
+            this.requestData();
+            if (!Number.isNaN(this.period) && this.period > 0) {
+                this._repeatTimer = setTimeout(() => {
+                    requestAnimationFrame(_);
+                }, this.period);
+            }
+        };
+        requestAnimationFrame(_);
+    }
+    async requestData() {
+        var _a, _b, _c;
+        if (!this.app.isViewMode)
+            return;
+        var { client } = this.state;
+        var query = this.query;
+        var variables = this.value;
+        if (client && query) {
+            this.client = (_a = this.root.findById(client)) === null || _a === void 0 ? void 0 : _a.client;
+            var response;
+            if (typeof variables === 'object') {
+                response = await ((_b = this.client) === null || _b === void 0 ? void 0 : _b.query({
+                    query: gql `
+            ${query}
+          `,
+                    variables: variables
+                }));
+            }
+            else {
+                response = await ((_c = this.client) === null || _c === void 0 ? void 0 : _c.query({
+                    query: gql `
+            ${query}
+          `,
+                    errorPolicy: 'all'
+                }));
+            }
+            console.log('response', response);
+            this.data = response;
+        }
+    }
+}
+export class Query extends GraphQLQuery {
+    static get image() {
+        if (!Query._image) {
+            Query._image = new Image();
+            Query._image.src = new URL('../icons/symbol-graphql-query.png', import.meta.url).href;
+        }
+        return Query._image;
+    }
+    render(context) {
+        var { left, top, width, height } = this.bounds;
+        context.beginPath();
+        this.drawImage(context, Query.image, left, top, width, height);
+    }
+}
+export class Mutation extends GraphQLQuery {
+    static get image() {
+        if (!Mutation._image) {
+            Mutation._image = new Image();
+            Mutation._image.src = new URL('../icons/symbol-graphql-mutation.png', import.meta.url).href;
+        }
+        return Mutation._image;
+    }
+    render(context) {
+        var { left, top, width, height } = this.bounds;
+        context.beginPath();
+        this.drawImage(context, Mutation.image, left, top, width, height);
+    }
+}
+Component.register('graphql-query', Query);
+Component.register('graphql-mutation', Mutation);
+//# sourceMappingURL=graphql-query-and-mutation.js.map

package/dist/graphql-query-and-mutation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graphql-query-and-mutation.js","sourceRoot":"","sources":["../src/graphql-query-and-mutation.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,aAAa,CAAA;AAG7B,OAAO,EAAE,SAAS,EAAE,UAAU,EAAc,QAAQ,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAA;AAC3F,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAI5C,MAAM,MAAM,GAAG;IACb,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV;YACE,IAAI,EAAE,UAAU;YAChB,KAAK,EAAE,QAAQ;YACf,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE;gBACR,SAAS,EAAE,gBAAgB,CAAC,gDAAgD;aAC7E;SACF;QACD;YACE,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,QAAQ;YACf,IAAI,EAAE,QAAQ;YACd,WAAW,EAAE,SAAS;SACvB;QACD;YACE,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,OAAO;YACd,IAAI,EAAE,OAAO;SACd;QACD;YACE,IAAI,EAAE,UAAU;YAChB,KAAK,EAAE,YAAY;YACnB,IAAI,EAAE,WAAW;SAClB;KACF;IACD,gBAAgB,EAAE,OAAO;IACzB,IAAI,EAAE,yBAAyB;CAChC,CAAA;AAED,MAAM,YAAa,SAAQ,UAAU,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAAtD;;QAIU,eAAU,GAAY,KAAK,CAAA;IA+IrC,CAAC;IA3IC,IAAI,MAAM;QACR,OAAO,MAAM,CAAA;IACf,CAAC;IAED,QAAQ,CAAC,KAAiB,EAAE,MAAkB;QAC5C,IAAI,OAAO,IAAI,KAAK,EAAE;YACpB,IAAI,KAAK,CAAC,KAAK;gBAAE,IAAI,CAAC,WAAW,EAAE,CAAA;SACpC;IACH,CAAC;IAED,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAA;IACjC,CAAC;IAED,IAAI,MAAM,CAAC,MAAM;QACf,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;QAC/B,IAAI,CAAC,iBAAiB,EAAE,CAAA;IAC1B,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,YAAY,CAAA;IAC1B,CAAC;IAED,IAAI,WAAW,CAAC,WAAW;QACzB,IAAI,CAAC,aAAa,EAAE,CAAA;QACpB,IAAI,CAAC,YAAY,GAAG,WAAW,CAAA;IACjC,CAAC;IAED,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,KAAK,CAAC,SAAS,CAAA;IAC7B,CAAC;IAED,IAAI,SAAS,CAAC,SAAS;QACrB,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,SAAS,CAAC,CAAA;IACvC,CAAC;IAED,IAAI,KAAK;QACP,IAAI,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAA;QAC7B,IAAI,QAAQ,GAAG,CAAC,GAAQ,EAAE,EAAE;YAC1B,IAAI,OAAO,GAAG,KAAK,QAAQ;gBAAE,OAAO,GAAG,CAAA;;gBAClC,OAAO,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAA;QACjC,CAAC,CAAA;QACD,IAAI,YAAY,GAAuB,CAAC,SAAS,CAAC,gBAAgB,CAAC,MAAM,EAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,CAAA;QAC/G,IAAI;YACF,YAAY,GAAG,YAAa,CAAC,OAAO,CAAC,UAAU,EAAE,MAAM,CAAC,EAAE;gBACxD,IAAI,WAAW,GAAG,IAAI,CAAC,KAAK,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAA;gBACpD,OAAO,GAAG,GAAG,SAAS,CAAC,WAAW,CAAC,GAAG,GAAG,CAAA;YAC3C,CAAC,CAAC,CAAA;SACH;QAAC,OAAO,CAAC,EAAE;YACV,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;SACf;QAED,OAAO,YAAY,CAAA;IACrB,CAAC;IAED,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAA;IAChC,CAAC;IAED,IAAI,MAAM,CAAC,MAAM;QACf,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;IACjC,CAAC;IAED,OAAO;QACL,KAAK,CAAC,OAAO,EAAE,CAAA;QACf,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAED,KAAK;QACH,KAAK,CAAC,KAAK,EAAE,CAAA;QACb,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,CAAC,iBAAiB,EAAE,CAAA;SACzB;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,UAAU;YAAE,OAAM;QAEhC,IAAI,CAAC,aAAa,EAAE,CAAA;QACpB,IAAI,CAAC,cAAc,EAAE,CAAA;IACvB,CAAC;IAED,aAAa;QACX,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS,EAAE;YAClC,YAAY,CAAC,IAAI,CAAC,YAAa,CAAC,CAAA;YAChC,OAAO,IAAI,CAAC,YAAY,CAAA;SACzB;QAED,IAAI,CAAC,UAAU,GAAG,KAAK,CAAA;IACzB,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,UAAU,GAAG,IAAI,CAAA;QAEtB,+DAA+D;QAC/D,IAAI,CAAC,GAAG,GAAG,EAAE;YACX,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;gBACpB,OAAM;aACP;YACD,IAAI,CAAC,WAAW,EAAE,CAAA;YAClB,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;gBACjD,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC,GAAG,EAAE;oBAClC,qBAAqB,CAAC,CAAC,CAAC,CAAA;gBAC1B,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,CAAA;aAChB;QACH,CAAC,CAAA;QACD,qBAAqB,CAAC,CAAC,CAAC,CAAA;IAC1B,CAAC;IAED,KAAK,CAAC,WAAW;;QACf,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,UAAU;YAAE,OAAM;QAChC,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QAC3B,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;QACtB,IAAI,SAAS,GAAG,IAAI,CAAC,KAAK,CAAA;QAE1B,IAAI,MAAM,IAAI,KAAK,EAAE;YACnB,IAAI,CAAC,MAAM,GAAG,MAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAmB,0CAAE,MAAM,CAAA;YACnE,IAAI,QAAQ,CAAA;YAEZ,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE;gBACjC,QAAQ,GAAG,MAAM,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,KAAK,CAAC;oBAClC,KAAK,EAAE,GAAG,CAAA;cACN,KAAK;WACR;oBACD,SAAS,EAAE,SAAS;iBACrB,CAAC,CAAA,CAAA;aACH;iBAAM;gBACL,QAAQ,GAAG,MAAM,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,KAAK,CAAC;oBAClC,KAAK,EAAE,GAAG,CAAA;cACN,KAAK;WACR;oBACD,WAAW,EAAE,KAAK;iBACnB,CAAC,CAAA,CAAA;aACH;YAED,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAA;YACjC,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAA;SACrB;IACH,CAAC;CACF;AAED,MAAM,OAAO,KAAM,SAAQ,YAAY;IAGrC,MAAM,KAAK,KAAK;QACd,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;YACjB,KAAK,CAAC,MAAM,GAAG,IAAI,KAAK,EAAE,CAAA;YAC1B,KAAK,CAAC,MAAM,CAAC,GAAG,GAAG,IAAI,GAAG,CAAC,mCAAmC,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;SACtF;QAED,OAAO,KAAK,CAAC,MAAM,CAAA;IACrB,CAAC;IAED,MAAM,CAAC,OAAiC;QACtC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;QAE9C,OAAO,CAAC,SAAS,EAAE,CAAA;QACnB,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;IAChE,CAAC;CACF;AAED,MAAM,OAAO,QAAS,SAAQ,YAAY;IAGxC,MAAM,KAAK,KAAK;QACd,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;YACpB,QAAQ,CAAC,MAAM,GAAG,IAAI,KAAK,EAAE,CAAA;YAC7B,QAAQ,CAAC,MAAM,CAAC,GAAG,GAAG,IAAI,GAAG,CAAC,sCAAsC,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;SAC5F;QAED,OAAO,QAAQ,CAAC,MAAM,CAAA;IACxB,CAAC;IAED,MAAM,CAAC,OAAiC;QACtC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;QAE9C,OAAO,CAAC,SAAS,EAAE,CAAA;QACnB,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,QAAQ,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;IACnE,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,eAAe,EAAE,KAAK,CAAC,CAAA;AAC1C,SAAS,CAAC,QAAQ,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAA","sourcesContent":["import gql from 'graphql-tag'\n\nimport { ApolloClient, NormalizedCacheObject } from '@apollo/client/core'\nimport { Component, DataSource, Properties, RectPath, Shape } from '@hatiolab/things-scene'\nimport { buildArgs } from '@operato/graphql'\n\nimport GraphqlClient from './graphql-client'\n\nconst NATURE = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'id-input',\n      label: 'client',\n      name: 'client',\n      property: {\n        component: 'graphql-client' // component의 type (null or undefined이면 모든 컴포넌트)\n      }\n    },\n    {\n      type: 'number',\n      label: 'period',\n      name: 'period',\n      placeholder: 'SECONDS'\n    },\n    {\n      type: 'graphql',\n      label: 'query',\n      name: 'query'\n    },\n    {\n      type: 'checkbox',\n      label: 'auto-start',\n      name: 'autoStart'\n    }\n  ],\n  'value-property': 'value',\n  help: 'scene/component/graphql'\n}\n\nclass GraphQLQuery extends DataSource(RectPath(Shape)) {\n  public client?: ApolloClient<NormalizedCacheObject>\n\n  private _repeatTimer?: NodeJS.Timeout\n  private _isStarted: boolean = false\n\n  value: any\n\n  get nature() {\n    return NATURE\n  }\n\n  onchange(after: Properties, before: Properties) {\n    if ('value' in after) {\n      if (after.value) this.requestData()\n    }\n  }\n\n  get period() {\n    return this.state.period * 1000\n  }\n\n  set period(period) {\n    this.setState('period', period)\n    this._initGraphqlQuery()\n  }\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 autoStart() {\n    return this.state.autoStart\n  }\n\n  set autoStart(autoStart) {\n    this.setState('autoStart', autoStart)\n  }\n\n  get query() {\n    var _query = this.state.query\n    var objToVal = (exp: any) => {\n      if (typeof exp === 'string') return exp\n      else return JSON.stringify(exp)\n    }\n    var changedQuery: string | undefined = (Component.buildSubstitutor(_query, this, objToVal) || (() => _query))()\n    try {\n      changedQuery = changedQuery!.replace(/\\(.*\\)/gi, params => {\n        let paramObject = eval(`({${params.slice(1, -1)}})`)\n        return '(' + buildArgs(paramObject) + ')'\n      })\n    } catch (e) {\n      console.log(e)\n    }\n\n    return changedQuery\n  }\n\n  get source() {\n    return this.getState('source')\n  }\n\n  set source(source) {\n    this.setState('source', source)\n  }\n\n  dispose() {\n    super.dispose()\n    this._stopRepeater()\n  }\n\n  ready() {\n    super.ready()\n    if (this.autoStart) {\n      this._initGraphqlQuery()\n    }\n  }\n\n  _initGraphqlQuery() {\n    if (!this.app.isViewMode) return\n\n    this._stopRepeater()\n    this._startRepeater()\n  }\n\n  _stopRepeater() {\n    if (this.repeatTimer !== undefined) {\n      clearTimeout(this._repeatTimer!)\n      delete this._repeatTimer\n    }\n\n    this._isStarted = false\n  }\n\n  _startRepeater() {\n    this._isStarted = true\n\n    // requestAnimationFrame 이 호출되지 않을 때는 requestData 호출도 하지 않도록 함.\n    var _ = () => {\n      if (!this._isStarted) {\n        return\n      }\n      this.requestData()\n      if (!Number.isNaN(this.period) && this.period > 0) {\n        this._repeatTimer = setTimeout(() => {\n          requestAnimationFrame(_)\n        }, this.period)\n      }\n    }\n    requestAnimationFrame(_)\n  }\n\n  async requestData() {\n    if (!this.app.isViewMode) return\n    var { client } = this.state\n    var query = this.query\n    var variables = this.value\n\n    if (client && query) {\n      this.client = (this.root.findById(client) as GraphqlClient)?.client\n      var response\n\n      if (typeof variables === 'object') {\n        response = await this.client?.query({\n          query: gql`\n            ${query}\n          `,\n          variables: variables\n        })\n      } else {\n        response = await this.client?.query({\n          query: gql`\n            ${query}\n          `,\n          errorPolicy: 'all'\n        })\n      }\n\n      console.log('response', response)\n      this.data = response\n    }\n  }\n}\n\nexport class Query extends GraphQLQuery {\n  private static _image: HTMLImageElement\n\n  static get image() {\n    if (!Query._image) {\n      Query._image = new Image()\n      Query._image.src = new URL('../icons/symbol-graphql-query.png', import.meta.url).href\n    }\n\n    return Query._image\n  }\n\n  render(context: CanvasRenderingContext2D) {\n    var { left, top, width, height } = this.bounds\n\n    context.beginPath()\n    this.drawImage(context, Query.image, left, top, width, height)\n  }\n}\n\nexport class Mutation extends GraphQLQuery {\n  private static _image: HTMLImageElement\n\n  static get image() {\n    if (!Mutation._image) {\n      Mutation._image = new Image()\n      Mutation._image.src = new URL('../icons/symbol-graphql-mutation.png', import.meta.url).href\n    }\n\n    return Mutation._image\n  }\n\n  render(context: CanvasRenderingContext2D) {\n    var { left, top, width, height } = this.bounds\n\n    context.beginPath()\n    this.drawImage(context, Mutation.image, left, top, width, height)\n  }\n}\n\nComponent.register('graphql-query', Query)\nComponent.register('graphql-mutation', Mutation)\n"]}

package/dist/graphql-subscription.d.ts

@@ -0,0 +1,28 @@
+import { Shape } from '@hatiolab/things-scene';
+declare const GraphqlSubscription_base: (new (...args: any[]) => {
+    isDataSource(): boolean;
+    _convertDataFormat(data: any, format: string): any;
+}) & typeof Shape;
+export default class GraphqlSubscription extends GraphqlSubscription_base {
+    private static _image;
+    private client?;
+    private unsubscribe?;
+    static get image(): HTMLImageElement;
+    dispose(): void;
+    render(context: CanvasRenderingContext2D): void;
+    ready(): void;
+    get nature(): {
+        mutable: boolean;
+        resizable: boolean;
+        rotatable: boolean;
+        properties: {
+            type: string;
+            label: string;
+            name: string;
+        }[];
+        help: string;
+    };
+    _initGraphqlSubscription(): void;
+    requestData(): Promise<void>;
+}
+export {};