OCIF updates

Author: devhelpr

libs/app-canvas/src/app/components/navbar-components.tsx

@@ -7,7 +7,6 @@ import {
   setSelectNode,
 } from '@devhelpr/visual-programming-system';
 import {
-  navBarButton,
   navBarIconButton,
   navBarIconButtonInnerElement,
 } from '../consts/classes';
@@ -68,13 +67,13 @@ export class NavbarComponent extends Component<
       return;
     }
     //         <button class="${navBarPrimaryIconButton}"><span class="${navBarIconButtonInnerElement} icon-add"></span></button>
-
+    //<button class="${navBarButton}">Import</button>
     this.template = createTemplate(
       `<div class="inline-flex items-center content-center">
         <button class="${navBarIconButton}"><span class="${navBarIconButtonInnerElement} icon-fit_screen"></span></button>
         <button class="${navBarIconButton}"><span class="${navBarIconButtonInnerElement} icon-delete"></span></button>
         <div></div>
-        <button class="${navBarButton}">Import</button>
+        <div></div>
         ${
           props.hideFlowPresets
             ? ''
@@ -130,11 +129,33 @@ export class NavbarComponent extends Component<
         this.centerButton.addEventListener('click', this.onClickCenter);
         this.deleteButton.addEventListener('click', this.onClickDelete);
         //this.exportButton.addEventListener('click', this.onClickExport);
-        this.importButton.addEventListener('click', this.onClickImport);
+        //this.importButton.addEventListener('click', this.onClickImport);
         this.selectExampleFlow?.addEventListener(
           'change',
           this.onClickImportExample
         );
+
+        renderElement(
+          <DropdownButton
+            class=""
+            mainBgColorClass="bg-slate-500"
+            bgColorClasses="bg-slate-500 "
+            textColorClasses="text-white"
+            caption="Import"
+            onClick={() => {
+              this.import();
+            }}
+            dropdownItems={[
+              {
+                caption: 'Import as OCIF',
+                onClick: () => {
+                  //
+                },
+              },
+            ]}
+          />,
+          this.importButton
+        );
         renderElement(
           <DropdownButton
             class=""
@@ -522,8 +543,7 @@ export class NavbarComponent extends Component<
     );
   };
 
-  onClickImport = (event: Event) => {
-    event.preventDefault();
+  import = () => {
     const input = document.createElement('input') as HTMLInputElement & {
       files: FileList;
     };
@@ -569,7 +589,6 @@ export class NavbarComponent extends Component<
       }
     };
     input.click();
-    return false;
   };
 
   onClickImportScript = (event: Event) => {

libs/app-canvas/src/app/exporters/export-ocwg.ts

@@ -87,11 +87,11 @@ export class OCWGExporter extends BaseExporter<OCWGFile, OCWGInfo> {
     }
     if (parentId && this.file) {
       const relation = this.file.relations.find((r) => r.id === parentId);
-      if (relation && relation.type === '@ocwg/set') {
+      if (relation && relation.type === '@ocwg/rel/group') {
         relation.members.push(ocwgNode.id);
       } else {
         const relation = {
-          type: '@ocwg/set' as const,
+          type: '@ocwg/rel/group' as const,
           members: [ocwgNode.id],
           id: parentId,
         };

libs/app-canvas/src/app/exporters/ocwg/ocwg-empty-file.ts

@@ -5,5 +5,59 @@ export const ocwgEmptyFile: OCWGFile = {
   nodes: [],
   relations: [],
   resources: [],
-  schemas: {},
+  schemas: [
+    {
+      uri: 'https://codeflowcanvas.io/schemas/node/0.1.json',
+      name: '@code-flow-canvas/node-properties',
+      type: 'object',
+      properties: {
+        type: {
+          type: 'string',
+        },
+        nodeType: {
+          type: 'string',
+        },
+      },
+      required: ['type', 'nodeType'],
+      additionalProperties: true,
+    },
+    {
+      uri: 'https://codeflowcanvas.io/schemas/connection/0.1.json',
+      name: '@code-flow-canvas/connection-properties',
+      type: 'object',
+      properties: {
+        type: {
+          type: 'string',
+        },
+        start: {
+          type: 'object',
+          properties: {
+            connected_to: {
+              type: 'string',
+            },
+            portName: {
+              type: 'string',
+            },
+          },
+          required: ['connected_to', 'portName'],
+          additionalProperties: false,
+        },
+        end: {
+          type: 'object',
+          properties: {
+            connected_to: {
+              type: 'string',
+            },
+            portName: {
+              type: 'string',
+            },
+          },
+          required: ['connected_to', 'portName'],
+          additionalProperties: false,
+        },
+      },
+      required: ['type', 'start', 'end'],
+      additionalProperties: true,
+    },
+  ],
 };

libs/app-canvas/src/app/exporters/ocwg/ocwg-schema.ts

@@ -14,10 +14,10 @@ export type OCWGEdge = {
   from: string;
   to: string;
 };
-export type OCWGRelation = OCWGSet | OCWGEdge;
+export type OCWGRelation = OCWGGroup | OCWGEdge;
 
-export type OCWGSet = {
-  type: '@ocwg/set';
+export type OCWGGroup = {
+  type: '@ocwg/rel/group';
   members: Array<string>;
   id: string;
 };
@@ -26,7 +26,5 @@ export type OCWGFile = {
   nodes: OCWGNode[];
   relations: OCWGRelation[];
   resources: any[];
-  schemas: {
-    [key: string]: any;
-  };
+  schemas: any[];
 };