@digipair/skill-web-editor 0.4.10 → 0.4.12

package/index.esm2.js

@@ -2650,11 +2650,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];
@@ -2662,16 +2659,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;
         }
@@ -2682,6 +2679,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) {
@@ -2918,6 +2951,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) {
@@ -2949,6 +2996,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';
@@ -2998,32 +3360,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) {
@@ -3041,7 +3380,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) {
@@ -3089,10 +3431,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, {
@@ -3104,7 +3448,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) {
@@ -3155,6 +3543,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" />

package/libs/skill-web-editor/src/lib/generator/pins-to-blockly.d.ts

@@ -1,4 +1,4 @@
-export declare function generateToolboxFromLibraries(libraries: any[]): {
+export declare function generateToolboxFromLibraries(libraries: any[], tags: string[]): {
     kind: string;
     contents: {
         kind: string;

package/libs/skill-web-editor/src/lib/schemas/web.schema.d.ts

@@ -0,0 +1,142 @@
+export declare const schemas: {
+    openapi: string;
+    info: {
+        title: string;
+        summary: string;
+        description: string;
+        version: string;
+        'x-icon': string;
+    };
+    paths: {
+        '/section': {
+            post: {
+                tags: string[];
+                summary: string;
+                parameters: {
+                    name: string;
+                    in: string;
+                    description: string;
+                    schema: {
+                        type: string;
+                    };
+                }[];
+            };
+        };
+        '/h1': {
+            post: {
+                tags: string[];
+                summary: string;
+                parameters: {
+                    name: string;
+                    in: string;
+                    description: string;
+                    schema: {
+                        type: string;
+                    };
+                }[];
+            };
+        };
+        '/nav': {
+            post: {
+                tags: string[];
+                summary: string;
+                parameters: {
+                    name: string;
+                    in: string;
+                    description: string;
+                    schema: {
+                        type: string;
+                    };
+                }[];
+            };
+        };
+        '/a': {
+            post: {
+                tags: string[];
+                summary: string;
+                parameters: {
+                    name: string;
+                    in: string;
+                    description: string;
+                    schema: {
+                        type: string;
+                    };
+                }[];
+            };
+        };
+        '/button': {
+            post: {
+                tags: string[];
+                summary: string;
+                parameters: {
+                    name: string;
+                    in: string;
+                    description: string;
+                    schema: {
+                        type: string;
+                    };
+                }[];
+            };
+        };
+        '/span': {
+            post: {
+                tags: string[];
+                summary: string;
+                parameters: {
+                    name: string;
+                    in: string;
+                    description: string;
+                    schema: {
+                        type: string;
+                    };
+                }[];
+            };
+        };
+        '/div': {
+            post: {
+                tags: string[];
+                summary: string;
+                parameters: {
+                    name: string;
+                    in: string;
+                    description: string;
+                    schema: {
+                        type: string;
+                    };
+                }[];
+            };
+        };
+        '/ul': {
+            post: {
+                tags: string[];
+                summary: string;
+                parameters: {
+                    name: string;
+                    in: string;
+                    description: string;
+                    schema: {
+                        type: string;
+                    };
+                }[];
+            };
+        };
+        '/li': {
+            post: {
+                tags: string[];
+                summary: string;
+                parameters: {
+                    name: string;
+                    in: string;
+                    description: string;
+                    schema: {
+                        type: string;
+                    };
+                }[];
+            };
+        };
+    };
+    components: {
+        schemas: {};
+    };
+    'x-scene-blocks': {};
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digipair/skill-web-editor",
-  "version": "0.4.10",
+  "version": "0.4.12",
   "dependencies": {},
   "main": "./index.cjs.js",
   "module": "./index.esm.js"