Afrisure Blockly Expression Library

A reusable Angular library for building visual block-based expressions using Google Blockly.

Features

• 🧩 Visual Expression Builder: Drag-and-drop interface for creating complex expressions
• 🎨 Custom Blocks: Math operations (addition, subtraction, multiplication, division, max, min)
• 🔢 Dynamic Variables: Support for custom lookup variables
• 💾 Save/Load: Serialize and deserialize block configurations
• 🎯 Type-Safe: Full TypeScript support
• 🌐 i18n Ready: Built with ngx-translate support

Installation

From NPM (After Publishing)

npm install afrisure-blockly-expression

Local Development

The library is already built and available in your workspace at:

dist/afrisure-blockly-expression

Dependencies

This library requires the following peer dependencies:

{
  "@angular/common": "^20.0.0",
  "@angular/core": "^20.0.0",
  "@angular/material": "^20.0.0",
  "@ngx-translate/core": "^16.0.0",
  "blockly": "^10.4.3",
  "@blockly/continuous-toolbox": "^5.0.19",
  "@blockly/toolbox-search": "^1.2.11",
  "@blockly/zoom-to-fit": "^5.0.18"
}

Usage

1. Import the Component

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { BlocklyExpression } from 'afrisure-blockly-expression';

@Component({
  selector: 'app-my-component',
  template: `
    <button (click)="openBlocklyDialog()">
      Open Expression Builder
    </button>
  `
})
export class MyComponent {
  constructor(private dialog: MatDialog) {}

  openBlocklyDialog() {
    const dialogRef = this.dialog.open(BlocklyExpression, {
      width: '90vw',
      height: '90vh',
      disableClose: true,
      data: {
        InputBlockyExpression: {
          lookup: [
            { id: 'var1', name: 'Variable 1', type: '' },
            { id: 'var2', name: 'Variable 2', type: '' },
            { id: 'var3', name: 'Variable 3', type: '' }
          ],
          blockExpressionJSON: {
            loadexpression: null // or previously saved JSON string
          }
        }
      }
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result) {
        console.log('Expression:', result.expression);
        console.log('JavaScript Code:', result.javascriptCode);
        console.log('Saved State:', result.loadexpression);
      }
    });
  }
}

2. Test the Library

Navigate to the test page in your application:

http://localhost:1223/blockly-test

API Reference

BlocklyExpression Component

Input Data Structure

interface BlocklyInputData {
  InputBlockyExpression: {
    lookup: Array<{
      id: string;
      name: string;
      type: string;
    }>;
    blockExpressionJSON: {
      loadexpression: string | null;
    };
  };
}

Output Data Structure

interface BlocklyOutputData {
  expression: string;          // Generated expression string
  javascriptCode: string;       // JavaScript code representation
  loadexpression: string;       // Serialized block configuration (JSON)
}

Available Blocks

Math Operations

• Addition: Add 2 or more numbers
• Subtraction: Subtract 2 or more numbers
• Multiplication: Multiply 2 or more numbers
• Division: Divide 2 or more numbers
• Max: Get maximum of 2 or more numbers
• Min: Get minimum of 2 or more numbers

Logical Operations

• If/Else: Conditional logic
• Comparison: Equal, Not Equal, Less Than, Greater Than, etc.
• Boolean: True/False values

Values

• Number: Numeric input
• String: Text input
• Variables: Custom lookup variables

Exported Components & Services

// Components
export { BlocklyExpression } from './lib/components/blockly-expression/blockly-expression';
export { PopUpTemplate } from './lib/components/pop-up-template/pop-up-template';

// Services
export { LoaderService } from './lib/services/loader.service';

// Modules
export { MaterialModule } from './lib/material.module';

Building the Library

# Build the library
ng build afrisure-blockly-expression

# Build output location
dist/afrisure-blockly-expression

Publishing to NPM

# Navigate to build output
cd dist/afrisure-blockly-expression

# Login to NPM (if not already logged in)
npm login

# Publish
npm publish --access public

Development

Project Structure

projects/afrisure-blockly-expression/
├── src/
│   ├── lib/
│   │   ├── components/
│   │   │   ├── blockly-expression/
│   │   │   │   ├── blockly-expression.ts
│   │   │   │   ├── blockly-expression.html
│   │   │   │   └── blockly-expression.scss
│   │   │   └── pop-up-template/
│   │   │       ├── pop-up-template.ts
│   │   │       ├── pop-up-template.html
│   │   │       └── pop-up-template.scss
│   │   ├── services/
│   │   │   └── loader.service.ts
│   │   └── material.module.ts
│   └── public-api.ts
├── package.json
├── ng-package.json
└── README.md

License

This library is part of the Afrisure Product Configuration project.

Support

For issues and feature requests, please contact the development team.

Version: 0.0.1
Author: Afrisure Development Team
Last Updated: January 2026