@digipair/skill-web-editor 0.89.0 → 0.91.0-0

package/.swcrc

@@ -0,0 +1,28 @@
+{
+  "jsc": {
+    "target": "es2017",
+    "parser": {
+      "syntax": "typescript",
+      "decorators": true,
+      "dynamicImport": true
+    },
+    "transform": {
+      "decoratorMetadata": true,
+      "legacyDecorator": true
+    },
+    "keepClassNames": true,
+    "externalHelpers": true,
+    "loose": true
+  },
+  "module": {
+    "type": "es6"
+  },
+  "sourceMaps": true,
+  "exclude": [
+    "jest.config.ts",
+    ".*\\.spec.tsx?$",
+    ".*\\.test.tsx?$",
+    "./src/jest-setup.ts$",
+    "./**/jest-setup.ts$"
+  ]
+}

package/README.md

@@ -0,0 +1,7 @@
+# mylib
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build mylib` to build the library.

package/eslint.config.mjs

@@ -0,0 +1,22 @@
+import baseConfig from '../../eslint.config.mjs';
+
+export default [
+  ...baseConfig,
+  {
+    files: ['**/*.json'],
+    rules: {
+      '@nx/dependency-checks': [
+        'error',
+        {
+          ignoredFiles: [
+            '{projectRoot}/eslint.config.{js,cjs,mjs}',
+            '{projectRoot}/rollup.config.{js,ts,mjs,mts,cjs,cts}',
+          ],
+        },
+      ],
+    },
+    languageOptions: {
+      parser: await import('jsonc-eslint-parser'),
+    },
+  },
+];

package/package.json

@@ -1,12 +1,28 @@
 {
   "name": "@digipair/skill-web-editor",
-  "version": "0.89.0",
+  "version": "0.91.0-0",
+  "type": "module",
+  "main": "dist/libs/skill-web-editor/index.cjs.js",
+  "module": "dist/libs/skill-web-editor/index.esm.js",
+  "types": "dist/libs/skill-web-editor/index.esm.d.ts",
+  "exports": {
+    "./package.json": "./libs/skill-web-editor/package.json",
+    ".": {
+      "development": "./dist/libs/skill-web-editor/src/index.ts",
+      "types": "./dist/libs/skill-web-editor/index.esm.d.ts",
+      "import": "./dist/libs/skill-web-editor/index.esm.js",
+      "default": "./dist/libs/skill-web-editor/index.cjs.js"
+    }
+  },
   "keywords": [
     "digipair",
     "web",
     "util"
   ],
-  "dependencies": {},
-  "main": "./index.cjs.js",
-  "module": "./index.esm.js"
-}
+  "nx": {
+    "name": "skill-web-editor"
+  },
+  "dependencies": {
+    "@digipair/engine": "0.91.0-0"
+  }
+}

package/rollup.config.cjs

@@ -0,0 +1,28 @@
+const { withNx } = require('@nx/rollup/with-nx');
+
+module.exports = withNx(
+  {
+    main: 'libs/skill-web-editor/src/index.ts',
+    outputPath: 'dist/libs/skill-web-editor',
+    tsConfig: 'libs/skill-web-editor/tsconfig.lib.json',
+    compiler: 'swc',
+    format: ['esm', "cjs"],
+    assets: [
+      {
+        input: 'libs/skill-web-editor/',
+        glob: 'package.json',
+        output: '.'
+      },
+      {
+        input: 'libs/skill-web-editor/src/',
+        glob: '*.json',
+        output: '.'
+      }
+    ]
+  },
+  {
+    // Provide additional rollup configuration here. See: https://rollupjs.org/configuration-options
+    // e.g.
+    // output: { sourcemap: true },
+  }
+);

package/src/lib/blocks/json.ts

@@ -0,0 +1,145 @@
+export const blocksLegacy = [
+  {
+    type: 'object',
+    message0: '{ %1 %2 }',
+    args0: [
+      {
+        type: 'input_dummy',
+      },
+      {
+        type: 'input_statement',
+        name: 'MEMBERS',
+        check: 'MEMBER',
+      },
+    ],
+    output: null,
+    colour: '#48c6be',
+  },
+  {
+    type: 'array',
+    message0: '[ %1 %2 ]',
+    args0: [
+      {
+        type: 'input_dummy',
+      },
+      {
+        type: 'input_statement',
+        name: 'MEMBERS',
+        check: 'ARRAY_INPUT',
+      },
+    ],
+    output: null,
+    colour: '#48c6be',
+  },
+  {
+    type: 'member',
+    message0: '%1 %2 %3',
+    args0: [
+      {
+        type: 'field_input',
+        name: 'MEMBER_NAME',
+        text: '',
+      },
+      {
+        type: 'field_label',
+        name: 'COLON',
+        text: ':',
+      },
+      {
+        type: 'input_value',
+        name: 'MEMBER_VALUE',
+      },
+    ],
+    previousStatement: 'MEMBER',
+    nextStatement: 'MEMBER',
+    colour: '#35b3ab',
+  },
+  {
+    type: 'array-input',
+    message0: '%1',
+    args0: [
+      {
+        type: 'input_value',
+        name: 'MEMBER_VALUE',
+      },
+    ],
+    previousStatement: 'ARRAY_INPUT',
+    nextStatement: 'ARRAY_INPUT',
+    colour: '#35b3ab',
+  },
+  {
+    type: 'unknown-pins',
+    message0: 'unknown-pins',
+    args0: [],
+    colour: 0,
+    inputsInline: false,
+    previousStatement: null,
+    nextStatement: null,
+  },
+  {
+    type: 'unknown-format',
+    message0: 'unknown-format',
+    args0: [],
+    output: null,
+    colour: 0,
+  },
+  {
+    type: 'unknown-component',
+    message0: 'unknown-component',
+    args0: [],
+    output: null,
+    colour: 0,
+  },
+  {
+    type: 'generic-scene-block',
+    message0: 'Error - Generic Scene Block',
+    arg0: [],
+    message1: 'type = %1',
+    args1: [
+      {
+        type: 'field_input',
+        name: 'SCENE_TYPE',
+        text: 'default-type',
+      },
+    ],
+    message2: '%1 %2',
+    args2: [
+      {
+        type: 'field_label_serializable',
+        name: 'NAME_EXECUTE',
+        text: 'Execute*',
+      },
+      {
+        type: 'input_statement',
+        name: 'EXECUTE_PINS',
+      },
+    ],
+    message3: '%1 %2',
+    args3: [
+      {
+        type: 'field_label_serializable',
+        name: 'NAME_METADATA',
+        text: 'Metadata',
+      },
+      {
+        type: 'input_value',
+        name: 'METADATA_INPUT',
+      },
+    ],
+    message4: '%1 %2',
+    args4: [
+      {
+        type: 'field_label_serializable',
+        name: 'NAME_EVENTS',
+        text: 'Events',
+      },
+      {
+        type: 'input_value',
+        name: 'EVENTS_INPUT',
+      },
+    ],
+    colour: 0,
+    tooltip: '',
+    helpUrl: '',
+  },
+];

package/src/lib/editor.element.ts

@@ -0,0 +1,279 @@
+import { LitElement, TemplateResult, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { PinsSettings } from '@digipair/engine';
+import { blocksLegacy } from './blocks/json';
+import { initializeWorkspaceFromPinsAndLibraries } from './generator/json-to-blockly';
+import { schemas as schemasWeb } from './schemas/web.schema';
+import { schemas as schemasWebFr } from './schemas/web.fr.schema';
+
+declare const Blockly: any;
+let jsonGenerator: any,
+  generateBlocklyBlockFromLibraries: any,
+  generateToolboxFromLibraries: any,
+  initializeMutator: any;
+
+@customElement('digipair-editor')
+export class EditorElement extends LitElement {
+  @property()
+  reasoning!: any;
+
+  @property()
+  schemas: any[] = [];
+
+  @property()
+  menuColor = 'white';
+
+  @property()
+  menuBackgroundColor = 'rgb(66, 133, 244)';
+
+  @property()
+  contentStyle = 'position: fixed; top: 0; right: 0; bottom: 0; left: 0;';
+
+  @property()
+  language = 'en';
+
+  @property()
+  canSave = false;
+
+  @property()
+  codeInWorkspace: any;
+
+  private workspace: any;
+  private blocks: any;
+  private toolbox: any;
+  private librariesToLoad: any;
+
+  override createRenderRoot() {
+    return this;
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.initialize();
+  }
+
+  private async initialize() {
+    const globalInstance: any = typeof window === 'undefined' ? global : window;
+    const config = globalInstance.__DIGIPAIR_CONFIG__;
+    const baseUrl = config.BASE_URL;
+    const blocklyVersion = '10.4.3';
+    let script: any, promise: any;
+
+    script = document.createElement('script');
+    script.src = `${baseUrl}/blockly@${blocklyVersion}/blockly_compressed.js`;
+    promise = new Promise(resolve => {
+      script.onload = resolve;
+    });
+    document.head.appendChild(script);
+    await promise;
+
+    script = document.createElement('script');
+    script.src = `${baseUrl}/blockly@${blocklyVersion}/blocks_compressed.js`;
+    promise = new Promise(resolve => {
+      script.onload = resolve;
+    });
+    document.head.appendChild(script);
+    await promise;
+
+    script = document.createElement('script');
+    script.src = `${baseUrl}/blockly@${blocklyVersion}/msg/${this.language}.js`;
+    promise = new Promise(resolve => {
+      script.onload = resolve;
+    });
+    document.head.appendChild(script);
+    await promise;
+
+    const blocklyToJson = await import('./generator/blockly-to-json');
+    jsonGenerator = blocklyToJson.jsonGenerator;
+
+    const pinsToBlockly = await import('./generator/pins-to-blockly');
+    generateBlocklyBlockFromLibraries = pinsToBlockly.generateBlocklyBlockFromLibraries;
+    generateToolboxFromLibraries = pinsToBlockly.generateToolboxFromLibraries;
+    initializeMutator = pinsToBlockly.initializeMutator;
+
+    setTimeout(() => this.loadScene(this.reasoning), 1);
+    this.addEventListener('setReasoning' as any, ({ detail }: CustomEvent) =>
+      this.loadReasoning(detail),
+    );
+  }
+
+  private loadReasoning(reasoning: PinsSettings) {
+    Blockly.Events.disable();
+    initializeWorkspaceFromPinsAndLibraries(reasoning, this.workspace, this.librariesToLoad);
+    Blockly.Events.enable();
+  }
+
+  private async getLibraries(): Promise<any[]> {
+    const list = [this.language === 'fr' ? schemasWebFr : schemasWeb, ...this.schemas];
+
+    return list;
+  }
+
+  private async loadScene(reasoning: PinsSettings): Promise<void> {
+    const scene = reasoning;
+    this.librariesToLoad = await this.getLibraries();
+
+    this.loadBlockly(scene);
+    if (!scene) {
+      return;
+    }
+    this.canSave = this.verifyCanSaveAndGetCode();
+  }
+
+  private verifyCanSaveAndGetCode(): boolean {
+    const code = jsonGenerator.workspaceToCode(this.workspace);
+
+    try {
+      this.codeInWorkspace = {
+        description: this.reasoning.description,
+        summary: this.reasoning.summary,
+        ...JSON.parse(code),
+      };
+
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+
+  private loadBlockly(scene: PinsSettings) {
+    initializeMutator();
+    const generatedBlocks = generateBlocklyBlockFromLibraries(this.librariesToLoad, blocksLegacy);
+    this.blocks = Blockly.common.createBlockDefinitionsFromJsonArray(generatedBlocks);
+
+    const tags =
+      this.librariesToLoad.find((library: any) => library.info.title === scene.library)?.[
+        'x-scene-blocks'
+      ]?.[`/${scene.element}`]?.tags || [];
+    this.toolbox = generateToolboxFromLibraries(this.librariesToLoad, tags);
+    Blockly.common.defineBlocks(this.blocks);
+    const container = this.renderRoot.querySelector('[data-scene]');
+
+    this.workspace = Blockly.inject(
+      container as any,
+      {
+        toolbox: this.toolbox,
+        scrollbars: true,
+        infiniteBlocks: true,
+        trashcan: false,
+        move: {
+          scrollbars: true,
+          drag: true,
+          wheel: true,
+        },
+        theme: Blockly.Theme.defineTheme('modest', {
+          blockStyles: {
+            logic_blocks: {
+              colourPrimary: '#D1C4E9',
+              colourSecondary: '#EDE7F6',
+              colorTertiary: '#B39DDB',
+            },
+            loop_blocks: {
+              colourPrimary: '#A5D6A7',
+              colourSecondary: '#E8F5E9',
+              colorTertiary: '#66BB6A',
+            },
+            math_blocks: {
+              colourPrimary: '#2196F3',
+              colourSecondary: '#1E88E5',
+              colorTertiary: '#0D47A1',
+            },
+            text_blocks: {
+              colourPrimary: '#FFCA28',
+              colourSecondary: '#FFF8E1',
+              colorTertiary: '#FF8F00',
+            },
+            list_blocks: {
+              colourPrimary: '#4DB6AC',
+              colourSecondary: '#B2DFDB',
+              colorTertiary: '#009688',
+            },
+            variable_blocks: {
+              colourPrimary: '#EF9A9A',
+              colourSecondary: '#FFEBEE',
+              colorTertiary: '#EF5350',
+            },
+            variable_dynamic_blocks: {
+              colourPrimary: '#EF9A9A',
+              colourSecondary: '#FFEBEE',
+              colorTertiary: '#EF5350',
+            },
+            procedure_blocks: {
+              colourPrimary: '#D7CCC8',
+              colourSecondary: '#EFEBE9',
+              colorTertiary: '#BCAAA4',
+            },
+          },
+        }),
+      } as any,
+    );
+
+    this.workspace.addChangeListener((e: any) => {
+      if (e.isUiEvent || e.type == Blockly.Events.FINISHED_LOADING) {
+        return;
+      }
+      if (this.workspace.isDragging()) {
+        return;
+      }
+      this.canSave = this.verifyCanSaveAndGetCode();
+    });
+
+    Blockly.Events.disable();
+    initializeWorkspaceFromPinsAndLibraries(scene, this.workspace, this.librariesToLoad);
+    Blockly.Events.enable();
+  }
+
+  override render(): TemplateResult {
+    return html`
+      <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+        .blocklyToolboxDiv {
+          background-color: ${this.menuBackgroundColor};
+          color: ${this.menuColor};
+          width: 370px;
+        }
+
+        .header {
+          position: unset !important;
+        }
+
+        .menu-item > a::after {
+          content: '> ';
+          margin-left: 30px;
+        }
+
+        .header__logo {
+          margin-left: 80px;
+        }
+
+        .header .main-nav {
+          position: unset;
+          margin-top: 50px;
+          margin-left: 60px;
+        }
+
+        .header .container {
+          margin: 0;
+        }
+
+        .blocklyTreeRow {
+          height: 30px;
+          line-height: 30px;
+        }
+
+        .blocklyPath {
+          stroke: #fff;
+        }
+
+        .blocklyPathDark {
+          fill: #fff;
+        }
+      </style>
+
+      <div>
+        <div style=${this.contentStyle} data-scene></div>
+      </div>
+    `;
+  }
+}