@operato/process 1.1.1

package/dist/src/graphql/process-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"process-group.js","sourceRoot":"","sources":["../../../src/graphql/process-group.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,GAAG,MAAM,aAAa,CAAA;AAE7B,MAAM,CAAC,KAAK,UAAU,iBAAiB,CAAC,EAAU;IAChD,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;QAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;KAkBT;QACD,SAAS,EAAE,EAAE,EAAE,EAAE;KAClB,CAAC,CAAA;IAEF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,kBAAkB,CAAC,KAAmB;IAC1D,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,KAAK,CAAA;IAErC,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;QACnC,QAAQ,EAAE,GAAG,CAAA;;;;;;;;;;KAUZ;QACD,SAAS,EAAE;YACT,EAAE;YACF,KAAK,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE;SAC7B;KACF,CAAC,CAAA;IAEF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,kBAAkB,CAAC,EAAU;IACjD,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;QACnC,QAAQ,EAAE,GAAG,CAAA;;;;KAIZ;QACD,SAAS,EAAE;YACT,EAAE;SACH;KACF,CAAC,CAAA;IAEF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,qBAAqB;IACzC,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;QAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;KAaT;KACF,CAAC,CAAA;IAEF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,kBAAkB,CAAC,KAAmB;IAC1D,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;QACnC,QAAQ,EAAE,GAAG,CAAA;;;;;;;;;;KAUZ;QACD,SAAS,EAAE,EAAE,KAAK,EAAE;KACrB,CAAC,CAAA;IAEF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,gBAAgB,CAAC,SAAiB,EAAE,OAAe;IACvE,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;QACnC,QAAQ,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;KAiBZ;QACD,SAAS,EAAE;YACT,EAAE,EAAE,OAAO;YACX,UAAU,EAAE,CAAC,SAAS,CAAC;SACxB;KACF,CAAC,CAAA;IAEF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC","sourcesContent":["import { ProcessGroup } from '../types'\nimport { client } from '@operato/graphql'\nimport gql from 'graphql-tag'\n\nexport async function fetchProcessGroup(id: string) {\n  const response = await client.query({\n    query: gql`\n      query FetchProcessGroupById($id: String!) {\n        group(id: $id) {\n          id\n          name\n          description\n          createdAt\n          creator {\n            id\n            name\n          }\n          updatedAt\n          updater {\n            id\n            name\n          }\n        }\n      }\n    `,\n    variables: { id }\n  })\n\n  return response.data\n}\n\nexport async function updateProcessGroup(group: ProcessGroup) {\n  var { id, name, description } = group\n\n  const response = await client.mutate({\n    mutation: gql`\n      mutation UpdateProcessGroup($id: String!, $patch: ProcessGroupPatch!) {\n        updateProcessGroup(id: $id, patch: $patch) {\n          id\n          name\n          description\n          createdAt\n          updatedAt\n        }\n      }\n    `,\n    variables: {\n      id,\n      patch: { name, description }\n    }\n  })\n\n  return response.data\n}\n\nexport async function deleteProcessGroup(id: string) {\n  const response = await client.mutate({\n    mutation: gql`\n      mutation ($id: String!) {\n        deleteProcessGroup(id: $id)\n      }\n    `,\n    variables: {\n      id\n    }\n  })\n\n  return response.data\n}\n\nexport async function fetchProcessGroupList() {\n  const response = await client.query({\n    query: gql`\n      {\n        processGroups {\n          items {\n            id\n            name\n            description\n            createdAt\n            updatedAt\n          }\n          total\n        }\n      }\n    `\n  })\n\n  return response.data\n}\n\nexport async function createProcessGroup(group: ProcessGroup) {\n  const response = await client.mutate({\n    mutation: gql`\n      mutation CreateProcessGroup($group: NewProcessGroup!) {\n        createProcessGroup(group: $group) {\n          id\n          name\n          description\n          createdAt\n          updatedAt\n        }\n      }\n    `,\n    variables: { group }\n  })\n\n  return response.data\n}\n\nexport async function joinProcessGroup(processId: string, groupId: string) {\n  const response = await client.mutate({\n    mutation: gql`\n      mutation JoinProcessGroup($id: String!, $processIds: [String!]!) {\n        joinProcessGroup(id: $id, processIds: $processIds) {\n          id\n          name\n          description\n          processes {\n            id\n            name\n            description\n            createdAt\n            updatedAt\n          }\n          createdAt\n          updatedAt\n        }\n      }\n    `,\n    variables: {\n      id: groupId,\n      processIds: [processId]\n    }\n  })\n\n  return response.data\n}\n"]}

package/dist/src/graphql/process.d.ts

@@ -0,0 +1,6 @@
+import { Process } from '../types';
+export declare function fetchProcessList(listParam?: {}): Promise<any>;
+export declare function fetchProcess(id: string): Promise<any>;
+export declare function createProcess(process: Process): Promise<any>;
+export declare function updateProcess(process: Process): Promise<any>;
+export declare function deleteProcess(id: string): Promise<any>;

package/dist/src/graphql/process.js

@@ -0,0 +1,130 @@
+import { buildArgs, client } from '@operato/graphql';
+import gql from 'graphql-tag';
+export async function fetchProcessList(listParam = {}) {
+    const response = await client.query({
+        query: gql `
+      {
+        processes(${buildArgs(listParam)}) {
+          items {
+            id
+            name
+            description
+            thumbnail
+            createdAt
+            updatedAt
+          }
+          total
+        }
+      }
+    `
+    });
+    return response.data;
+}
+export async function fetchProcess(id) {
+    const response = await client.query({
+        query: gql `
+      query FetchProcessById($id: String!) {
+        process(id: $id) {
+          id
+          name
+          description
+          group {
+            id
+            name
+          }
+          thumbnail
+          model
+          createdAt
+          creator {
+            id
+            name
+          }
+          updatedAt
+          updater {
+            id
+            name
+          }
+        }
+      }
+    `,
+        variables: { id }
+    });
+    return response.data;
+}
+export async function createProcess(process) {
+    /*
+      input NewProcess {
+        name        : String!
+        description : String
+        model       : String!
+        groupId     : String!
+      }
+    */
+    process.model = JSON.stringify(process.model);
+    const response = await client.mutate({
+        mutation: gql `
+      mutation CreateProcess($process: NewProcess!) {
+        createProcess(process: $process) {
+          id
+          name
+          description
+          model
+          createdAt
+          updatedAt
+        }
+      }
+    `,
+        variables: {
+            process
+        }
+    });
+    return response.data;
+}
+export async function updateProcess(process) {
+    /*
+      input ProcessPatch {
+        name        : String
+        description : String
+        model       : String
+      }
+      */
+    var { id, name, description, model, groupId } = process;
+    model = JSON.stringify(model);
+    const response = await client.mutate({
+        mutation: gql `
+      mutation UpdateProcess($id: String!, $patch: ProcessPatch!) {
+        updateProcess(id: $id, patch: $patch) {
+          id
+          name
+          description
+          model
+          group {
+            id
+            name
+          }
+          createdAt
+          updatedAt
+        }
+      }
+    `,
+        variables: {
+            id,
+            patch: { name, description, model, groupId }
+        }
+    });
+    return response.data;
+}
+export async function deleteProcess(id) {
+    const response = await client.mutate({
+        mutation: gql `
+      mutation ($id: String!) {
+        deleteProcess(id: $id)
+      }
+    `,
+        variables: {
+            id
+        }
+    });
+    return response.data;
+}
+//# sourceMappingURL=process.js.map

package/dist/src/graphql/process.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"process.js","sourceRoot":"","sources":["../../../src/graphql/process.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAGpD,OAAO,GAAG,MAAM,aAAa,CAAA;AAE7B,MAAM,CAAC,KAAK,UAAU,gBAAgB,CAAC,SAAS,GAAG,EAAE;IACnD,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;QAClC,KAAK,EAAE,GAAG,CAAA;;oBAEM,SAAS,CAAC,SAAS,CAAC;;;;;;;;;;;;KAYnC;KACF,CAAC,CAAA;IAEF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,YAAY,CAAC,EAAU;IAC3C,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;QAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;KAwBT;QACD,SAAS,EAAE,EAAE,EAAE,EAAE;KAClB,CAAC,CAAA;IAEF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,aAAa,CAAC,OAAgB;IAClD;;;;;;;MAOE;IAEF,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;IAE7C,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;QACnC,QAAQ,EAAE,GAAG,CAAA;;;;;;;;;;;KAWZ;QACD,SAAS,EAAE;YACT,OAAO;SACR;KACF,CAAC,CAAA;IAEF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,aAAa,CAAC,OAAgB;IAClD;;;;;;QAMI;IACJ,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,OAAO,CAAA;IACvD,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA;IAE7B,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;QACnC,QAAQ,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;KAeZ;QACD,SAAS,EAAE;YACT,EAAE;YACF,KAAK,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE;SAC7C;KACF,CAAC,CAAA;IAEF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,aAAa,CAAC,EAAU;IAC5C,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;QACnC,QAAQ,EAAE,GAAG,CAAA;;;;KAIZ;QACD,SAAS,EAAE;YACT,EAAE;SACH;KACF,CAAC,CAAA;IAEF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC","sourcesContent":["import { buildArgs, client } from '@operato/graphql'\n\nimport { Process } from '../types'\nimport gql from 'graphql-tag'\n\nexport async function fetchProcessList(listParam = {}) {\n  const response = await client.query({\n    query: gql`\n      {\n        processes(${buildArgs(listParam)}) {\n          items {\n            id\n            name\n            description\n            thumbnail\n            createdAt\n            updatedAt\n          }\n          total\n        }\n      }\n    `\n  })\n\n  return response.data\n}\n\nexport async function fetchProcess(id: string) {\n  const response = await client.query({\n    query: gql`\n      query FetchProcessById($id: String!) {\n        process(id: $id) {\n          id\n          name\n          description\n          group {\n            id\n            name\n          }\n          thumbnail\n          model\n          createdAt\n          creator {\n            id\n            name\n          }\n          updatedAt\n          updater {\n            id\n            name\n          }\n        }\n      }\n    `,\n    variables: { id }\n  })\n\n  return response.data\n}\n\nexport async function createProcess(process: Process) {\n  /*\n    input NewProcess {\n      name        : String!\n      description : String\n      model       : String!\n      groupId     : String!\n    }\n  */\n\n  process.model = JSON.stringify(process.model)\n\n  const response = await client.mutate({\n    mutation: gql`\n      mutation CreateProcess($process: NewProcess!) {\n        createProcess(process: $process) {\n          id\n          name\n          description\n          model\n          createdAt\n          updatedAt\n        }\n      }\n    `,\n    variables: {\n      process\n    }\n  })\n\n  return response.data\n}\n\nexport async function updateProcess(process: Process) {\n  /*\n    input ProcessPatch {\n      name        : String\n      description : String\n      model       : String\n    }\n    */\n  var { id, name, description, model, groupId } = process\n  model = JSON.stringify(model)\n\n  const response = await client.mutate({\n    mutation: gql`\n      mutation UpdateProcess($id: String!, $patch: ProcessPatch!) {\n        updateProcess(id: $id, patch: $patch) {\n          id\n          name\n          description\n          model\n          group {\n            id\n            name\n          }\n          createdAt\n          updatedAt\n        }\n      }\n    `,\n    variables: {\n      id,\n      patch: { name, description, model, groupId }\n    }\n  })\n\n  return response.data\n}\n\nexport async function deleteProcess(id: string) {\n  const response = await client.mutate({\n    mutation: gql`\n      mutation ($id: String!) {\n        deleteProcess(id: $id)\n      }\n    `,\n    variables: {\n      id\n    }\n  })\n\n  return response.data\n}\n"]}

package/dist/src/graphql/scenario.d.ts

@@ -0,0 +1,6 @@
+export declare const scenarios: () => Promise<{
+    name: string;
+    description: string;
+}[]>;
+export declare const startScenario: (scenarioName: string, instanceName: string, variables: string | number | object) => Promise<any>;
+export declare const runScenario: (scenarioName: string, variables: string | number | object) => Promise<any>;

package/dist/src/graphql/scenario.js

@@ -0,0 +1,69 @@
+import gql from 'graphql-tag';
+import { client } from '@operato/graphql';
+export const scenarios = async () => {
+    var response = await client.query({
+        query: gql `
+      query {
+        scenarios {
+          items {
+            name
+            description
+          }
+        }
+      }
+    `
+    });
+    if (response.errors) {
+        return [];
+    }
+    return response.data.scenarios.items;
+};
+export const startScenario = async (scenarioName, instanceName, variables) => {
+    var _a, _b;
+    if (!scenarioName) {
+        return;
+    }
+    if (client) {
+        var response = await client.query({
+            query: gql `
+        mutation ($instanceName: String, $scenarioName: String!, $variables: Object) {
+          startScenario(instanceName: $instanceName, scenarioName: $scenarioName, variables: $variables) {
+            state
+            message
+            data
+          }
+        }
+      `,
+            variables: {
+                instanceName: instanceName,
+                scenarioName: scenarioName,
+                variables
+            }
+        });
+        return (_b = (_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.startScenario) === null || _b === void 0 ? void 0 : _b.data;
+    }
+};
+export const runScenario = async (scenarioName, variables) => {
+    var _a, _b;
+    if (!scenarioName)
+        return;
+    if (client) {
+        var response = await client.query({
+            query: gql `
+        mutation ($scenarioName: String!, $variables: Object) {
+          runScenario(scenarioName: $scenarioName, variables: $variables) {
+            state
+            message
+            data
+          }
+        }
+      `,
+            variables: {
+                scenarioName: scenarioName,
+                variables
+            }
+        });
+        return (_b = (_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.runScenario) === null || _b === void 0 ? void 0 : _b.data;
+    }
+};
+//# sourceMappingURL=scenario.js.map

package/dist/src/graphql/scenario.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scenario.js","sourceRoot":"","sources":["../../../src/graphql/scenario.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,aAAa,CAAA;AAE7B,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAEzC,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,IAAsD,EAAE;IACpF,IAAI,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;QAChC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;KAST;KACF,CAAC,CAAA;IAEF,IAAI,QAAQ,CAAC,MAAM,EAAE;QACnB,OAAO,EAAE,CAAA;KACV;IAED,OAAO,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAA;AACtC,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,EAChC,YAAoB,EACpB,YAAoB,EACpB,SAAmC,EACnC,EAAE;;IACF,IAAI,CAAC,YAAY,EAAE;QACjB,OAAM;KACP;IAED,IAAI,MAAM,EAAE;QACV,IAAI,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;YAChC,KAAK,EAAE,GAAG,CAAA;;;;;;;;OAQT;YACD,SAAS,EAAE;gBACT,YAAY,EAAE,YAAY;gBAC1B,YAAY,EAAE,YAAY;gBAC1B,SAAS;aACV;SACF,CAAC,CAAA;QAEF,OAAO,MAAA,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,0CAAE,aAAa,0CAAE,IAAI,CAAA;KAC3C;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,EAAE,YAAoB,EAAE,SAAmC,EAAE,EAAE;;IAC7F,IAAI,CAAC,YAAY;QAAE,OAAM;IAEzB,IAAI,MAAM,EAAE;QACV,IAAI,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;YAChC,KAAK,EAAE,GAAG,CAAA;;;;;;;;OAQT;YACD,SAAS,EAAE;gBACT,YAAY,EAAE,YAAY;gBAC1B,SAAS;aACV;SACF,CAAC,CAAA;QAEF,OAAO,MAAA,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,0CAAE,WAAW,0CAAE,IAAI,CAAA;KACzC;AACH,CAAC,CAAA","sourcesContent":["import gql from 'graphql-tag'\n\nimport { client } from '@operato/graphql'\n\nexport const scenarios = async (): Promise<{ name: string; description: string }[]> => {\n  var response = await client.query({\n    query: gql`\n      query {\n        scenarios {\n          items {\n            name\n            description\n          }\n        }\n      }\n    `\n  })\n\n  if (response.errors) {\n    return []\n  }\n\n  return response.data.scenarios.items\n}\n\nexport const startScenario = async (\n  scenarioName: string,\n  instanceName: string,\n  variables: string | number | object\n) => {\n  if (!scenarioName) {\n    return\n  }\n\n  if (client) {\n    var response = await client.query({\n      query: gql`\n        mutation ($instanceName: String, $scenarioName: String!, $variables: Object) {\n          startScenario(instanceName: $instanceName, scenarioName: $scenarioName, variables: $variables) {\n            state\n            message\n            data\n          }\n        }\n      `,\n      variables: {\n        instanceName: instanceName,\n        scenarioName: scenarioName,\n        variables\n      }\n    })\n\n    return response?.data?.startScenario?.data\n  }\n}\n\nexport const runScenario = async (scenarioName: string, variables: string | number | object) => {\n  if (!scenarioName) return\n\n  if (client) {\n    var response = await client.query({\n      query: gql`\n        mutation ($scenarioName: String!, $variables: Object) {\n          runScenario(scenarioName: $scenarioName, variables: $variables) {\n            state\n            message\n            data\n          }\n        }\n      `,\n      variables: {\n        scenarioName: scenarioName,\n        variables\n      }\n    })\n\n    return response?.data?.runScenario?.data\n  }\n}\n"]}

package/dist/src/index.d.ts

@@ -0,0 +1,5 @@
+export * from './types.js';
+export { DataStorage } from './data-storage/data-storage.js';
+export * from './ox-process-viewer.js';
+export * from './ox-process-modeller.js';
+export * from './ox-process-list.js';

package/dist/src/index.js

@@ -0,0 +1,6 @@
+export * from './types.js';
+export { DataStorage } from './data-storage/data-storage.js';
+export * from './ox-process-viewer.js';
+export * from './ox-process-modeller.js';
+export * from './ox-process-list.js';
+//# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAE1B,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAA;AAE5D,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA","sourcesContent":["export * from './types.js'\n\nexport { DataStorage } from './data-storage/data-storage.js'\n\nexport * from './ox-process-viewer.js'\nexport * from './ox-process-modeller.js'\nexport * from './ox-process-list.js'\n"]}

package/dist/src/modeller/component-toolbar/component-detail.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@operato/markdown';
+import { LitElement } from 'lit';
+export declare class ComponentDetail extends LitElement {
+    static styles: import("lit").CSSResult[];
+    template: {
+        about: string;
+    } | null;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/modeller/component-toolbar/component-detail.js

@@ -0,0 +1,58 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@operato/markdown';
+import { css, html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ScrollbarStyles } from '@operato/styles';
+export class ComponentDetail extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.template = null;
+    }
+    render() {
+        const { about } = this.template || {};
+        if (about) {
+            var aboutURL = new URL(about, location.origin);
+            if (aboutURL.origin !== location.origin) {
+                return html `<iframe src=${about}></iframe>`;
+            }
+        }
+        return html ` <ox-markdown .src=${about}></ox-markdown> `;
+    }
+}
+ComponentDetail.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        align-content: stretch;
+
+        background-color: var(--component-detail-background-color, white);
+        margin: 0px;
+        padding: 0px;
+
+        overflow: hidden;
+
+        border: 2px solid var(--component-detail-border-color, gray);
+        box-sizing: border-box;
+
+        top: 0px;
+
+        z-index: 1;
+      }
+
+      ox-markdown,
+      iframe {
+        flex: 1;
+        padding: 10px;
+        overflow: auto;
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], ComponentDetail.prototype, "template", void 0);
+//# sourceMappingURL=component-detail.js.map

package/dist/src/modeller/component-toolbar/component-detail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-detail.js","sourceRoot":"","sources":["../../../../src/modeller/component-toolbar/component-detail.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,mBAAmB,CAAA;AAE1B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5C,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEjD,MAAM,OAAO,eAAgB,SAAQ,UAAU;IAA/C;;QAgC8B,aAAQ,GAA6B,IAAI,CAAA;IAcvE,CAAC;IAZC,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAA;QAErC,IAAI,KAAK,EAAE;YACT,IAAI,QAAQ,GAAG,IAAI,GAAG,CAAC,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAA;YAC9C,IAAI,QAAQ,CAAC,MAAM,KAAK,QAAQ,CAAC,MAAM,EAAE;gBACvC,OAAO,IAAI,CAAA,eAAe,KAAK,YAAY,CAAA;aAC5C;SACF;QAED,OAAO,IAAI,CAAA,sBAAsB,KAAK,kBAAkB,CAAA;IAC1D,CAAC;;AA5CM,sBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;KA0BF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAA0C","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/markdown'\n\nimport { css, html, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nexport class ComponentDetail extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        align-content: stretch;\n\n        background-color: var(--component-detail-background-color, white);\n        margin: 0px;\n        padding: 0px;\n\n        overflow: hidden;\n\n        border: 2px solid var(--component-detail-border-color, gray);\n        box-sizing: border-box;\n\n        top: 0px;\n\n        z-index: 1;\n      }\n\n      ox-markdown,\n      iframe {\n        flex: 1;\n        padding: 10px;\n        overflow: auto;\n      }\n    `\n  ]\n\n  @property({ type: Object }) template: { about: string } | null = null\n\n  render() {\n    const { about } = this.template || {}\n\n    if (about) {\n      var aboutURL = new URL(about, location.origin)\n      if (aboutURL.origin !== location.origin) {\n        return html`<iframe src=${about}></iframe>`\n      }\n    }\n\n    return html` <ox-markdown .src=${about}></ox-markdown> `\n  }\n}\n"]}

package/dist/src/modeller/component-toolbar/component-menu.d.ts

@@ -0,0 +1,24 @@
+import { LitElement, PropertyValues } from 'lit';
+import { Scene } from '@hatiolab/things-scene';
+import { Pallet, PalletItem } from '../../types';
+import { ComponentDetail } from './component-detail';
+declare const ComponentMenu_base: typeof LitElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types").ScopedElementsHost>;
+export declare class ComponentMenu extends ComponentMenu_base {
+    static styles: import("lit").CSSResult[];
+    groups: Pallet[];
+    scene: Scene | null;
+    group: string | null;
+    templates: PalletItem[];
+    template: PalletItem | any;
+    detail: HTMLElement;
+    static get scopedElements(): {
+        'process-component-detail': typeof ComponentDetail;
+    };
+    render(): import("lit-html").TemplateResult<1>;
+    updated(changes: PropertyValues<this>): void;
+    findTemplate(type: string | null | undefined): void;
+    onHoverComponent(e: MouseEvent): void;
+    onClickTemplate(e: MouseEvent): void;
+    templateIcon(template: PalletItem): HTMLImageElement;
+}
+export {};

package/dist/src/modeller/component-toolbar/component-menu.js

@@ -0,0 +1,190 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { ScrollbarStyles } from '@operato/styles';
+import { ComponentDetail } from './component-detail';
+const noImage = new URL('../../../../icons/components/no-image.png', import.meta.url).href;
+export class ComponentMenu extends ScopedElementsMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.groups = [];
+        this.scene = null;
+        this.group = '';
+        this.templates = [];
+    }
+    static get scopedElements() {
+        return {
+            'process-component-detail': ComponentDetail
+        };
+    }
+    render() {
+        return this.group
+            ? html `
+          <h2 @click=${(e) => e.stopPropagation()}>${this.group} list</h2>
+
+          <div templates @mouseover=${(e) => this.onHoverComponent(e)}>
+            ${(this.templates || []).map(template => html `
+                <div @click=${this.onClickTemplate} data-type=${template.type} template>
+                  <img src=${String(this.templateIcon(template))} />${template.type}
+                </div>
+              `)}
+          </div>
+
+          <process-component-detail
+            tabindex="-1"
+            @focusout=${() => {
+                this.template = null;
+            }}
+            .template=${this.template}
+            hidden
+          >
+          </process-component-detail>
+        `
+            : html ``;
+    }
+    updated(changes) {
+        var _a;
+        if (changes.has('group')) {
+            if (!this.group) {
+                this.templates = [];
+                this.setAttribute('hidden', '');
+            }
+            else {
+                this.templates = ((_a = this.groups.find((g) => g.name === this.group)) === null || _a === void 0 ? void 0 : _a.templates) || [];
+                this.removeAttribute('active');
+            }
+        }
+        if (changes.has('template')) {
+            this.template && this.template.about
+                ? this.detail.removeAttribute('hidden')
+                : this.detail.setAttribute('hidden', '');
+        }
+    }
+    findTemplate(type) {
+        this.template = type && this.templates.find(template => template.type == type);
+    }
+    onHoverComponent(e) {
+        var _a;
+        const button = e.target;
+        this.findTemplate((_a = button.closest('[data-type]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-type'));
+    }
+    onClickTemplate(e) {
+        var _a;
+        var item = e.target;
+        var type = (_a = item.closest('[data-type]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-type');
+        if (!type) {
+            return;
+        }
+        if (this.scene) {
+            this.template = this.templates.find(template => template.type == type);
+            this.template && this.scene.startAddMode(JSON.parse(JSON.stringify(this.template.model)));
+        }
+        this.group = null;
+    }
+    templateIcon(template) {
+        return template.icon || noImage;
+    }
+}
+ComponentMenu.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        align-content: stretch;
+
+        background-color: var(--component-menu-background-color);
+        margin: 0px;
+        padding: 0px;
+
+        width: 180px;
+        height: 100%;
+
+        overflow: visible;
+
+        border: 2px solid var(--component-menu-border-color);
+        box-sizing: border-box;
+
+        position: absolute;
+        top: 0px;
+
+        z-index: 1;
+      }
+
+      h2 {
+        background-color: var(--component-menu-border-color);
+        padding: 1px 5px;
+        margin: 0;
+        font: var(--component-menu-title);
+        color: #fff;
+        text-transform: capitalize;
+      }
+
+      [templates] {
+        flex: 1;
+
+        display: block;
+        margin: 0;
+        padding: 0;
+        overflow-y: auto;
+
+        background-color: var(--component-menu-background-color);
+      }
+
+      [template] {
+        display: flex;
+        align-items: center;
+        min-height: var(--component-menu-item-icon-size-height);
+        padding: 0 5px 0 0;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        font-size: 11px;
+        color: var(--component-menu-item-color);
+      }
+
+      [template]:hover,
+      [template]:focus {
+        color: var(--component-menu-item-hover-color);
+        font-weight: bold;
+        cursor: pointer;
+      }
+
+      [template] img {
+        margin: 5px;
+        max-width: var(--component-menu-item-icon-size-width);
+        max-height: var(--component-menu-item-icon-size-height);
+      }
+
+      process-component-detail {
+        position: absolute;
+        top: 0;
+        left: 180px;
+        height: 100%;
+        width: calc(100vw - 510px);
+        outline: none;
+      }
+
+      process-component-detail[hidden] {
+        display: none;
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], ComponentMenu.prototype, "groups", void 0);
+__decorate([
+    property({ type: Object })
+], ComponentMenu.prototype, "scene", void 0);
+__decorate([
+    property({ type: String })
+], ComponentMenu.prototype, "group", void 0);
+__decorate([
+    state()
+], ComponentMenu.prototype, "templates", void 0);
+__decorate([
+    state()
+], ComponentMenu.prototype, "template", void 0);
+__decorate([
+    query('process-component-detail')
+], ComponentMenu.prototype, "detail", void 0);
+//# sourceMappingURL=component-menu.js.map

package/dist/src/modeller/component-toolbar/component-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-menu.js","sourceRoot":"","sources":["../../../../src/modeller/component-toolbar/component-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, PropertyValues } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\n\nimport { Scene } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { Pallet, PalletItem } from '../../types'\nimport { ComponentDetail } from './component-detail'\n\nconst noImage = new URL('../../../../icons/components/no-image.png', import.meta.url).href\n\nexport class ComponentMenu extends ScopedElementsMixin(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        align-content: stretch;\n\n        background-color: var(--component-menu-background-color);\n        margin: 0px;\n        padding: 0px;\n\n        width: 180px;\n        height: 100%;\n\n        overflow: visible;\n\n        border: 2px solid var(--component-menu-border-color);\n        box-sizing: border-box;\n\n        position: absolute;\n        top: 0px;\n\n        z-index: 1;\n      }\n\n      h2 {\n        background-color: var(--component-menu-border-color);\n        padding: 1px 5px;\n        margin: 0;\n        font: var(--component-menu-title);\n        color: #fff;\n        text-transform: capitalize;\n      }\n\n      [templates] {\n        flex: 1;\n\n        display: block;\n        margin: 0;\n        padding: 0;\n        overflow-y: auto;\n\n        background-color: var(--component-menu-background-color);\n      }\n\n      [template] {\n        display: flex;\n        align-items: center;\n        min-height: var(--component-menu-item-icon-size-height);\n        padding: 0 5px 0 0;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        font-size: 11px;\n        color: var(--component-menu-item-color);\n      }\n\n      [template]:hover,\n      [template]:focus {\n        color: var(--component-menu-item-hover-color);\n        font-weight: bold;\n        cursor: pointer;\n      }\n\n      [template] img {\n        margin: 5px;\n        max-width: var(--component-menu-item-icon-size-width);\n        max-height: var(--component-menu-item-icon-size-height);\n      }\n\n      process-component-detail {\n        position: absolute;\n        top: 0;\n        left: 180px;\n        height: 100%;\n        width: calc(100vw - 510px);\n        outline: none;\n      }\n\n      process-component-detail[hidden] {\n        display: none;\n      }\n    `\n  ]\n\n  @property({ type: Object }) groups: Pallet[] = []\n  @property({ type: Object }) scene: Scene | null = null\n  @property({ type: String }) group: string | null = ''\n\n  @state() templates: PalletItem[] = []\n  @state() template: PalletItem | any\n\n  @query('process-component-detail') detail!: HTMLElement\n\n  static get scopedElements() {\n    return {\n      'process-component-detail': ComponentDetail\n    }\n  }\n\n  render() {\n    return this.group\n      ? html`\n          <h2 @click=${(e: MouseEvent) => e.stopPropagation()}>${this.group} list</h2>\n\n          <div templates @mouseover=${(e: MouseEvent) => this.onHoverComponent(e)}>\n            ${(this.templates || []).map(\n              template => html`\n                <div @click=${this.onClickTemplate} data-type=${template.type} template>\n                  <img src=${String(this.templateIcon(template))} />${template.type}\n                </div>\n              `\n            )}\n          </div>\n\n          <process-component-detail\n            tabindex=\"-1\"\n            @focusout=${() => {\n              this.template = null\n            }}\n            .template=${this.template}\n            hidden\n          >\n          </process-component-detail>\n        `\n      : html``\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('group')) {\n      if (!this.group) {\n        this.templates = []\n        this.setAttribute('hidden', '')\n      } else {\n        this.templates = this.groups.find((g: Pallet) => g.name === this.group)?.templates || []\n        this.removeAttribute('active')\n      }\n    }\n\n    if (changes.has('template')) {\n      this.template && this.template.about\n        ? this.detail.removeAttribute('hidden')\n        : this.detail.setAttribute('hidden', '')\n    }\n  }\n\n  findTemplate(type: string | null | undefined) {\n    this.template = type && this.templates.find(template => template.type == type)\n  }\n\n  onHoverComponent(e: MouseEvent) {\n    const button = e.target as HTMLElement\n    this.findTemplate(button!.closest('[data-type]')?.getAttribute('data-type'))\n  }\n\n  onClickTemplate(e: MouseEvent) {\n    var item = e.target as HTMLElement\n    var type = item.closest('[data-type]')?.getAttribute('data-type')\n\n    if (!type) {\n      return\n    }\n\n    if (this.scene) {\n      this.template = this.templates.find(template => template.type == type)\n      this.template && this.scene.startAddMode(JSON.parse(JSON.stringify(this.template.model)))\n    }\n\n    this.group = null\n  }\n\n  templateIcon(template: PalletItem) {\n    return template.icon || noImage\n  }\n}\n"]}

package/dist/src/modeller/component-toolbar/component-toolbar.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { LitElement, PropertyValues } from 'lit';
+import { Scene, SCENE_MODE } from '@hatiolab/things-scene';
+import { ComponentGroup } from '../../types';
+import { ComponentMenu } from './component-menu.js';
+declare const ComponentToolbar_base: typeof LitElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types").ScopedElementsHost>;
+export declare class ComponentToolbar extends ComponentToolbar_base {
+    static styles: import("lit").CSSResult[];
+    componentGroupList: ComponentGroup[];
+    group?: string | null;
+    scene: Scene;
+    mode: SCENE_MODE;
+    shift: HTMLImageElement;
+    private menu;
+    private groups;
+    private icons;
+    updated(changes: PropertyValues<this>): void;
+    static get scopedElements(): {
+        'process-component-menu': typeof ComponentMenu;
+    };
+    render(): import("lit-html").TemplateResult<1>;
+    _setMode(mode: SCENE_MODE): void;
+    _onClickShift(e: MouseEvent): void;
+    _onClickGroup(e: MouseEvent): Promise<void>;
+}
+export {};