formulize 🌒

View project on Github Download zip Reference doc

Latest version

beta

Basic

Advanced

👈 Drop your custom value

formulize supports custom property, check the insert()

❤️drag those box to above formulize

PI Custom operator (+) Variable (INT 3)

🤔 Get formula tree data

Also you can get parsed formula expression to calling $formulize.getData();
getData
JSON
The json data will be appeared when you click getData button. 
const result = $formulize.data('$formulize').getData();

// result.data is parsed formula tree
console.log(result.data);

⚡ Options

name type description default 
id: string
 string the identifier used class prefix 'formulize' 
text.formula: string
 string text for a default status 'formula' 
text.pass: string
 string text for a pass status(ms) 'pass' 
text.error: string
 string text for an error status 'error' 
import: <T>(data: any) => T
 function a pipeline function for convert imported data undefined 
export: <T>(data: any) => T
 function a pipeline function for convert exported data undefined

⚡ Methods

You can call the function to use 
$formulize.method()
name type description 
pick(position)
function
 pick the position (x, y), this function can move the current cursor 
setData(data)
function
 set formula expression data 
getData(extractor: (data: T)): T
function
 get a formula data, the data type is a Tree type 
selectRange(start: number, end: number)
function
 drag a range, the range parameter is index position of the expression unit 
selectAll()
function
 drag all in the formula 
clear()
function
 clear all expression in the formula 
blur()
function
 blur the cursor in the formula 
removeDrag()
function
 remove drag, dragged unit will be undragged 
insert(data: FormulizeData)
function
 insert data, data can be HTMLElement or JQuery 
insertData(data: string | string[] | any[])
function
 insert formal string or array data 
insertValue(value: string)
function
 insert a character 
validate(extractor?: (valid: boolean) => void): boolean
function
 validate current expression validation, if it is valid, will returns true

⚡ Event

All events also can use as 
$formulize.on('formulize.eventName', (event: Event, value: any) => {})
name type description 
input(value: Tree) => void
event
 when the formula expression is updated, this event will be called

📦 npm 

$ npm install formulize

📦 yarn 

$ yarn add formulize

😗 do star it!

If you enjoyed it, please just click the star into below github link

GitHub

📖 Example 


<div id="formulize"></div>
import { UI } from 'formulize';

const target = document.getElementById('formulize');
const formulize = new UI(target, {
    ...options
});

const data: Tree = {
    operator: '*',
    operand1: { value: { type: 'unit', unit: 1 } },
    operand2: { value: { type: 'unit', unit: 2 } }
};

formulize.setData(data);
import { UI } from 'formulize';

const target = document.getElementById('formulize');
const formulize = new UI(target, {
    ...options
});

const data = {
    operator: '*',
    operand1: { value: { type: 'unit', unit: 1 } },
    operand2: { value: { type: 'unit', unit: 2 } }
};

formulize.setData(data);
$(function() {
	$('#formulize').formulize({
        ...options
    });

    const formulize = $('#formulize').data('$formulize');
    const data = {
        operator: '*',
        operand1: { value: { type: 'unit', unit: 1 } },
        operand2: { value: { type: 'unit', unit: 2 } }
    };

    formulize.setData(data);

    // unrecommended way
    $('#formulize').setData(data);
});