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

package/eslint.config.mjs

@@ -1,22 +0,0 @@
-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/rollup.config.cjs

@@ -1,28 +0,0 @@
-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

@@ -1,145 +0,0 @@
-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

@@ -1,279 +0,0 @@
-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>
-    `;
-  }
-}