@digipair/skill-web-editor 0.4.10 → 0.4.12

package/blockly-to-json.cjs.js

@@ -130,6 +130,7 @@ jsonGenerator.generatePin = function(block) {
     code += `\n  "element": "${elementName}",`;
     let propertiesCode = '';
     let eventCode = '';
+    let conditionCode = '';
     for(let i = 0, input; input = block.inputList[i]; i++){
         const inputName = input.name;
         const connectedBlock = input.connection && input.connection.targetBlock();
@@ -138,14 +139,18 @@ jsonGenerator.generatePin = function(block) {
                 const inputCode = jsonGenerator.customStatementToCode(block, inputName);
                 if (inputName.includes('__EVENT__/')) {
                     eventCode += `    "${inputName.split('__EVENT__/')[1]}": [${inputCode}],`;
+                } else if (inputName.includes('__CONDITION__/')) {
+                    conditionCode += `    "${inputName.split('__CONDITION__/')[1]}": [${inputCode}],`;
                 } else {
                     propertiesCode += `    "${inputName}": [${inputCode}],`;
                 }
             } else {
                 const codeToAdd = getCodeFromBlock(connectedBlock);
+                const inputCode = jsonGenerator.customStatementToCode(block, inputName);
                 if (inputName === 'pins') {
-                    const inputCode = jsonGenerator.customStatementToCode(block, inputName);
                     code += `  "${inputName}": [${inputCode}],`;
+                } else if (inputName.includes('__CONDITION__/')) {
+                    conditionCode += `    "${inputName.split('__CONDITION__/')[1]}": ${inputCode},`;
                 } else if (codeToAdd !== 'undefined') {
                     propertiesCode += `    "${inputName}": ${codeToAdd},`;
                 }
@@ -164,6 +169,12 @@ jsonGenerator.generatePin = function(block) {
         }
         code += '\n"events": {\n' + eventCode + '\n  },';
     }
+    if (conditionCode !== '') {
+        if (conditionCode.endsWith(',')) {
+            conditionCode = conditionCode.slice(0, -1);
+        }
+        code += '\n"conditions": {\n' + conditionCode + '\n  },';
+    }
     if (code.endsWith(',')) {
         code = code.slice(0, -1);
     }

package/blockly-to-json.esm.js

@@ -128,6 +128,7 @@ jsonGenerator.generatePin = function(block) {
     code += `\n  "element": "${elementName}",`;
     let propertiesCode = '';
     let eventCode = '';
+    let conditionCode = '';
     for(let i = 0, input; input = block.inputList[i]; i++){
         const inputName = input.name;
         const connectedBlock = input.connection && input.connection.targetBlock();
@@ -136,14 +137,18 @@ jsonGenerator.generatePin = function(block) {
                 const inputCode = jsonGenerator.customStatementToCode(block, inputName);
                 if (inputName.includes('__EVENT__/')) {
                     eventCode += `    "${inputName.split('__EVENT__/')[1]}": [${inputCode}],`;
+                } else if (inputName.includes('__CONDITION__/')) {
+                    conditionCode += `    "${inputName.split('__CONDITION__/')[1]}": [${inputCode}],`;
                 } else {
                     propertiesCode += `    "${inputName}": [${inputCode}],`;
                 }
             } else {
                 const codeToAdd = getCodeFromBlock(connectedBlock);
+                const inputCode = jsonGenerator.customStatementToCode(block, inputName);
                 if (inputName === 'pins') {
-                    const inputCode = jsonGenerator.customStatementToCode(block, inputName);
                     code += `  "${inputName}": [${inputCode}],`;
+                } else if (inputName.includes('__CONDITION__/')) {
+                    conditionCode += `    "${inputName.split('__CONDITION__/')[1]}": ${inputCode},`;
                 } else if (codeToAdd !== 'undefined') {
                     propertiesCode += `    "${inputName}": ${codeToAdd},`;
                 }
@@ -162,6 +167,12 @@ jsonGenerator.generatePin = function(block) {
         }
         code += '\n"events": {\n' + eventCode + '\n  },';
     }
+    if (conditionCode !== '') {
+        if (conditionCode.endsWith(',')) {
+            conditionCode = conditionCode.slice(0, -1);
+        }
+        code += '\n"conditions": {\n' + conditionCode + '\n  },';
+    }
     if (code.endsWith(',')) {
         code = code.slice(0, -1);
     }

package/index.cjs2.js

@@ -2652,11 +2652,8 @@ function generateBlockFromPins(pinsSettings, workspace) {
             connectBlock(pinsBlock, pinsConnection);
         }
     }
-    if (!pinsSettings || !pinsSettings.properties) {
-        return pinsBlock;
-    }
     for (const parameter of pinsDefinition.parameters){
-        if (!Object.prototype.hasOwnProperty.call(pinsSettings.properties, parameter.name)) {
+        if (!pinsSettings.properties || !Object.prototype.hasOwnProperty.call(pinsSettings.properties, parameter.name)) {
             continue;
         }
         const valueToLoad = pinsSettings.properties[parameter.name];
@@ -2664,16 +2661,16 @@ function generateBlockFromPins(pinsSettings, workspace) {
             const parameterType = getParameterType(parameter.schema.items);
             for (const propertyValue of valueToLoad.reverse()){
                 const parameterBlock = parameterType === 'component' ? generateBlockFromComponent(propertyValue, workspace, library, parameter.schema.items.$ref) : generateBlockFromPins(propertyValue, workspace);
-                const sceneInputConnection = pinsBlock.getInput(parameter.name).connection;
-                connectBlock(parameterBlock, sceneInputConnection);
+                const inputConnection = pinsBlock.getInput(parameter.name).connection;
+                connectBlock(parameterBlock, inputConnection);
             }
         } else {
             const parameterBlock = generateParameterBlock(parameter.schema, valueToLoad, workspace, library);
-            const sceneInputConnection = pinsBlock.getInput(parameter.name).connection;
-            connectBlock(parameterBlock, sceneInputConnection);
+            const inputConnection = pinsBlock.getInput(parameter.name).connection;
+            connectBlock(parameterBlock, inputConnection);
         }
     }
-    for (const event of pinsDefinition['x-events']){
+    for (const event of pinsDefinition['x-events'] || []){
         if (!pinsSettings.events || !Object.prototype.hasOwnProperty.call(pinsSettings.events, event.name)) {
             continue;
         }
@@ -2684,6 +2681,42 @@ function generateBlockFromPins(pinsSettings, workspace) {
             connectBlock(parameterBlock, inputConnection);
         }
     }
+    const conditions = [
+        {
+            name: 'if',
+            schema: {
+                type: 'boolean'
+            }
+        },
+        {
+            name: 'each',
+            schema: {
+                type: 'array',
+                items: {
+                    type: 'object'
+                }
+            }
+        }
+    ];
+    for (const parameter of conditions){
+        var _parameter_schema_items;
+        if (!pinsSettings.conditions || !Object.prototype.hasOwnProperty.call(pinsSettings.conditions, parameter.name)) {
+            continue;
+        }
+        const valueToLoad = pinsSettings.conditions[parameter.name];
+        if (parameter.schema.type === 'array' && ((_parameter_schema_items = parameter.schema.items) == null ? void 0 : _parameter_schema_items.$ref)) {
+            const parameterType = getParameterType(parameter.schema.items);
+            for (const propertyValue of valueToLoad.reverse()){
+                const parameterBlock = parameterType === 'component' ? generateBlockFromComponent(propertyValue, workspace, library, parameter.schema.items.$ref) : generateBlockFromPins(propertyValue, workspace);
+                const inputConnection = pinsBlock.getInput('__CONDITION__/' + parameter.name).connection;
+                connectBlock(parameterBlock, inputConnection);
+            }
+        } else {
+            const parameterBlock = generateParameterBlock(parameter.schema, valueToLoad, workspace, library);
+            const inputConnection = pinsBlock.getInput('__CONDITION__/' + parameter.name).connection;
+            connectBlock(parameterBlock, inputConnection);
+        }
+    }
     return pinsBlock;
 }
 function generateBlockFromComponent(componentSettings, workspace, library, component$ref) {
@@ -2920,6 +2953,20 @@ function itemListFromPinsSettings(pinsSettings, pinsDefinition) {
             });
         }
     }
+    if (pinsSettings.conditions) {
+        if (pinsSettings.conditions.if) {
+            inputArray.push({
+                id: '__CONDITION__/if',
+                name: '#if'
+            });
+        }
+        if (pinsSettings.conditions.each) {
+            inputArray.push({
+                id: '__CONDITION__/each',
+                name: '#each'
+            });
+        }
+    }
     return inputArray;
 }
 function itemListFromComponentSettings(componentSettings, componentDefinition) {
@@ -2951,6 +2998,321 @@ function itemListFromSceneSettings(sceneSettings, sceneDefinition) {
     return inputArray;
 }
 
+const schemas = {
+    openapi: '3.0.0',
+    info: {
+        title: 'web',
+        summary: 'Web: bases',
+        description: 'description de la librairie de pins web',
+        version: '1.0.11',
+        'x-icon': '🌐'
+    },
+    paths: {
+        '/section': {
+            post: {
+                tags: [
+                    'needPins',
+                    'web'
+                ],
+                summary: 'Section',
+                parameters: [
+                    {
+                        name: 'class',
+                        in: 'query',
+                        description: '',
+                        schema: {
+                            type: 'string'
+                        }
+                    },
+                    {
+                        name: 'textContent',
+                        in: 'query',
+                        description: '',
+                        schema: {
+                            type: 'string'
+                        }
+                    }
+                ]
+            }
+        },
+        '/h1': {
+            post: {
+                tags: [
+                    'web'
+                ],
+                summary: 'h1',
+                parameters: [
+                    {
+                        name: 'textContent',
+                        in: 'query',
+                        description: '',
+                        schema: {
+                            type: 'string'
+                        }
+                    }
+                ]
+            }
+        },
+        '/nav': {
+            post: {
+                tags: [
+                    'needPins',
+                    'web'
+                ],
+                summary: 'nav',
+                parameters: [
+                    {
+                        name: 'class',
+                        in: 'query',
+                        description: '',
+                        schema: {
+                            type: 'string'
+                        }
+                    }
+                ]
+            }
+        },
+        '/a': {
+            post: {
+                tags: [
+                    'needPins',
+                    'web'
+                ],
+                summary: 'a',
+                parameters: [
+                    {
+                        name: 'class',
+                        in: 'query',
+                        description: '',
+                        schema: {
+                            type: 'string'
+                        }
+                    },
+                    {
+                        name: 'href',
+                        in: 'query',
+                        description: '',
+                        schema: {
+                            type: 'string'
+                        }
+                    },
+                    {
+                        name: 'textContent',
+                        in: 'query',
+                        description: '',
+                        schema: {
+                            type: 'string'
+                        }
+                    },
+                    {
+                        name: 'id',
+                        in: 'query',
+                        description: '',
+                        schema: {
+                            type: 'string'
+                        }
+                    },
+                    {
+                        name: 'role',
+                        in: 'query',
+                        description: '',
+                        schema: {
+                            type: 'string'
+                        }
+                    },
+                    {
+                        name: 'data-toggle',
+                        in: 'query',
+                        description: '',
+                        schema: {
+                            type: 'string'
+                        }
+                    },
+                    {
+                        name: 'aria-haspopup',
+                        in: 'query',
+                        description: '',
+                        schema: {
+                            type: 'string'
+                        }
+                    },
+                    {
+                        name: 'aria-expanded',
+                        in: 'query',
+                        description: '',
+                        schema: {
+                            type: 'string'
+                        }
+                    }
+                ]
+            }
+        },
+        '/button': {
+            post: {
+                tags: [
+                    'needPins',
+                    'web'
+                ],
+                summary: 'button',
+                parameters: [
+                    {
+                        name: 'class',
+                        in: 'query',
+                        description: '',
+                        schema: {
+                            type: 'string'
+                        }
+                    },
+                    {
+                        name: 'type',
+                        in: 'query',
+                        description: '',
+                        schema: {
+                            type: 'string'
+                        }
+                    },
+                    {
+                        name: 'data-toggle',
+                        in: 'query',
+                        description: '',
+                        schema: {
+                            type: 'string'
+                        }
+                    },
+                    {
+                        name: 'data-target',
+                        in: 'query',
+                        description: '',
+                        schema: {
+                            type: 'string'
+                        }
+                    },
+                    {
+                        name: 'aria-controls',
+                        in: 'query',
+                        description: '',
+                        schema: {
+                            type: 'string'
+                        }
+                    },
+                    {
+                        name: 'aria-expanded',
+                        in: 'query',
+                        description: '',
+                        schema: {
+                            type: 'string'
+                        }
+                    },
+                    {
+                        name: 'aria-label',
+                        in: 'query',
+                        description: '',
+                        schema: {
+                            type: 'string'
+                        }
+                    }
+                ]
+            }
+        },
+        '/span': {
+            post: {
+                tags: [
+                    'needPins',
+                    'web'
+                ],
+                summary: 'span',
+                parameters: [
+                    {
+                        name: 'class',
+                        in: 'query',
+                        description: '',
+                        schema: {
+                            type: 'string'
+                        }
+                    }
+                ]
+            }
+        },
+        '/div': {
+            post: {
+                tags: [
+                    'needPins',
+                    'web'
+                ],
+                summary: 'div',
+                parameters: [
+                    {
+                        name: 'class',
+                        in: 'query',
+                        description: '',
+                        schema: {
+                            type: 'string'
+                        }
+                    },
+                    {
+                        name: 'id',
+                        in: 'query',
+                        description: '',
+                        schema: {
+                            type: 'string'
+                        }
+                    },
+                    {
+                        name: 'aria-labelledby',
+                        in: 'query',
+                        description: '',
+                        schema: {
+                            type: 'string'
+                        }
+                    }
+                ]
+            }
+        },
+        '/ul': {
+            post: {
+                tags: [
+                    'needPins',
+                    'web'
+                ],
+                summary: 'ul',
+                parameters: [
+                    {
+                        name: 'class',
+                        in: 'query',
+                        description: '',
+                        schema: {
+                            type: 'string'
+                        }
+                    }
+                ]
+            }
+        },
+        '/li': {
+            post: {
+                tags: [
+                    'needPins',
+                    'web'
+                ],
+                summary: 'li',
+                parameters: [
+                    {
+                        name: 'class',
+                        in: 'query',
+                        description: '',
+                        schema: {
+                            type: 'string'
+                        }
+                    }
+                ]
+            }
+        }
+    },
+    components: {
+        schemas: {}
+    },
+    'x-scene-blocks': {}
+};
+
 const Toastify$1 = toastify;
 const BASE_URL = 'https://cdn.jsdelivr.net/npm';
 const BLOCKLY_VERSION = '10.4.3';
@@ -3000,32 +3362,9 @@ class GenericSceneElement extends s {
         setTimeout(()=>this.loadScene(this.digipair, this.reasoning), 1);
         this.addEventListener('setReasoning', ({ detail })=>this.loadReasoning(detail));
     }
-    loadReasoning(detail) {
-        const scene = _extends({}, detail, {
-            properties: _extends({}, (detail.properties.trigger || []).reduce((acc, { name, value })=>_extends({}, acc, {
-                    [name]: value
-                }), {}), {
-                actions: detail.properties.actions.map((action)=>{
-                    var _action_properties;
-                    return _extends({}, action, {
-                        properties: (_action_properties = action.properties) == null ? void 0 : _action_properties.reduce((acc, { name, value })=>_extends({}, acc, {
-                                [name]: value
-                            }), {})
-                    });
-                }),
-                conditions: detail.properties.conditions.map((action)=>{
-                    var _action_properties;
-                    return _extends({}, action, {
-                        properties: (_action_properties = action.properties) == null ? void 0 : _action_properties.reduce((acc, { name, value })=>_extends({}, acc, {
-                                [name]: value
-                            }), {})
-                    });
-                }),
-                pins: []
-            })
-        });
+    loadReasoning(reasoning) {
         Blockly.Events.disable();
-        initializeWorkspaceFromPinsAndLibraries(scene, this.workspace, this.librariesToLoad);
+        initializeWorkspaceFromPinsAndLibraries(reasoning, this.workspace, this.librariesToLoad);
         Blockly.Events.enable();
     }
     async getReasoning(digipair, reasoning) {
@@ -3043,7 +3382,10 @@ class GenericSceneElement extends s {
         return content;
     }
     async getLibraries(libraries) {
-        const list = await Promise.all(Object.keys(libraries).map(async (library, i)=>fetch(`${BASE_URL}/${library}@${libraries[library]}/schema.json`).then((res)=>res.json())));
+        const list = [
+            schemas,
+            ...await Promise.all(Object.keys(libraries).map(async (library, i)=>fetch(`${BASE_URL}/${library}@${libraries[library]}/schema.json`).then((res)=>res.json())))
+        ];
         return list;
     }
     async loadScene(digipair, reasoning) {
@@ -3091,10 +3433,12 @@ class GenericSceneElement extends s {
         }
     }
     loadBlockly(scene) {
+        var _this_librariesToLoad_find_xsceneblocks_, _this_librariesToLoad_find_xsceneblocks, _this_librariesToLoad_find;
         initializeMutator();
         const generatedBlocks = generateBlocklyBlockFromLibraries(this.librariesToLoad, blocksLegacy);
         this.blocks = Blockly.common.createBlockDefinitionsFromJsonArray(generatedBlocks);
-        this.toolbox = generateToolboxFromLibraries(this.librariesToLoad);
+        const tags = ((_this_librariesToLoad_find = this.librariesToLoad.find((library)=>library.info.title === scene.library)) == null ? void 0 : (_this_librariesToLoad_find_xsceneblocks = _this_librariesToLoad_find['x-scene-blocks']) == null ? void 0 : (_this_librariesToLoad_find_xsceneblocks_ = _this_librariesToLoad_find_xsceneblocks[`/${scene.element}`]) == null ? void 0 : _this_librariesToLoad_find_xsceneblocks_.tags) || [];
+        this.toolbox = generateToolboxFromLibraries(this.librariesToLoad, tags);
         Blockly.common.defineBlocks(this.blocks);
         const container = this.renderRoot.querySelector('[data-scene]');
         this.workspace = Blockly.inject(container, {
@@ -3106,7 +3450,51 @@ class GenericSceneElement extends s {
                 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'
+                    }
+                }
+            })
         });
         this.workspace.addChangeListener((e)=>{
             if (e.isUiEvent || e.type == Blockly.Events.FINISHED_LOADING) {
@@ -3157,6 +3545,14 @@ class GenericSceneElement extends s {
         height: 30px;
         line-height: 30px;
       }
+
+      .blocklyPath {
+        stroke: #fff;
+      }
+
+      .blocklyPathDark {
+        fill: #fff;
+      }
     </style>
 
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />