@onetype/framework 2.0.26 → 2.0.27

package/lib/items/transforms/chart/radar.js

@@ -1,157 +1,154 @@
-onetype.AddonReady('transforms', (transforms) =>
-{
-    transforms.ItemAdd({
-        id: 'ot-chart-radar',
-        icon: 'radar',
-        name: 'Radar Chart',
-        description: 'Spider/radar chart visualization. Display multivariate data in a radial layout.',
-        js: [
-            'https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js'
-        ],
-        config: {
-            'labels': ['array', ['Speed', 'Strength', 'Defense', 'Attack', 'Agility']],
-            'datasets': ['array', []],
-            'fill': ['boolean', true],
-            'options': ['object', {}]
-        },
-        code: function(data, item, compile, node, identifier)
+transforms.ItemAdd({
+    id: 'ot-chart-radar',
+    icon: 'radar',
+    name: 'Radar Chart',
+    description: 'Spider/radar chart visualization. Display multivariate data in a radial layout.',
+    js: [
+        'https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js'
+    ],
+    config: {
+        'labels': ['array', ['Speed', 'Strength', 'Defense', 'Attack', 'Agility']],
+        'datasets': ['array', []],
+        'fill': ['boolean', true],
+        'options': ['object', {}]
+    },
+    code: function(data, node, transformer)
+    {
+        this.setup = () =>
         {
-            this.setup = () =>
-            {
-                node.innerHTML = '';
-                node.classList.add('ot-chart-radar');
+            node.innerHTML = '';
+            node.classList.add('ot-chart-radar');
 
-                const canvas = document.createElement('canvas');
-                this.canvas = canvas;
-                node.appendChild(canvas);
-            };
+            const canvas = document.createElement('canvas');
+            this.canvas = canvas;
+            node.appendChild(canvas);
+        };
 
-            this.colors = () =>
-            {
-                const style = getComputedStyle(document.body);
+        this.colors = () =>
+        {
+            const style = getComputedStyle(document.body);
 
-                return {
-                    brand: style.getPropertyValue('--ot-brand').trim(),
-                    blue: style.getPropertyValue('--ot-blue').trim(),
-                    green: style.getPropertyValue('--ot-green').trim(),
-                    orange: style.getPropertyValue('--ot-orange').trim(),
-                    red: style.getPropertyValue('--ot-red').trim(),
-                    brandOpacity: style.getPropertyValue('--ot-brand-opacity').trim(),
-                    blueOpacity: style.getPropertyValue('--ot-blue-opacity').trim(),
-                    greenOpacity: style.getPropertyValue('--ot-green-opacity').trim(),
-                    orangeOpacity: style.getPropertyValue('--ot-orange-opacity').trim(),
-                    redOpacity: style.getPropertyValue('--ot-red-opacity').trim()
-                };
+            return {
+                brand: style.getPropertyValue('--ot-brand').trim(),
+                blue: style.getPropertyValue('--ot-blue').trim(),
+                green: style.getPropertyValue('--ot-green').trim(),
+                orange: style.getPropertyValue('--ot-orange').trim(),
+                red: style.getPropertyValue('--ot-red').trim(),
+                brandOpacity: style.getPropertyValue('--ot-brand-opacity').trim(),
+                blueOpacity: style.getPropertyValue('--ot-blue-opacity').trim(),
+                greenOpacity: style.getPropertyValue('--ot-green-opacity').trim(),
+                orangeOpacity: style.getPropertyValue('--ot-orange-opacity').trim(),
+                redOpacity: style.getPropertyValue('--ot-red-opacity').trim()
             };
+        };
 
-            this.datasets = () =>
-            {
-                const datasets = data['datasets'].value;
-                const colors = this.colors();
-                const palette = [colors.brand, colors.blue, colors.green, colors.orange, colors.red];
-                const paletteOpacity = [colors.brandOpacity, colors.blueOpacity, colors.greenOpacity, colors.orangeOpacity, colors.redOpacity];
-                const fill = data['fill'].value;
-
-                if(datasets.length === 0)
-                {
-                    return [{
-                        label: 'Sample Data',
-                        data: [75, 60, 85, 70, 80],
-                        backgroundColor: fill ? paletteOpacity[0] : 'transparent',
-                        borderColor: palette[0],
-                        borderWidth: 2,
-                        pointBackgroundColor: palette[0],
-                        pointBorderColor: '#fff',
-                        pointHoverBackgroundColor: '#fff',
-                        pointHoverBorderColor: palette[0]
-                    }];
-                }
-
-                return datasets.map((dataset, index) =>
-                {
-                    const color = palette[index % palette.length];
-                    const colorOpacity = paletteOpacity[index % paletteOpacity.length];
+        this.datasets = () =>
+        {
+            const datasets = data['datasets'];
+            const colors = this.colors();
+            const palette = [colors.brand, colors.blue, colors.green, colors.orange, colors.red];
+            const paletteOpacity = [colors.brandOpacity, colors.blueOpacity, colors.greenOpacity, colors.orangeOpacity, colors.redOpacity];
+            const fill = data['fill'];
 
-                    return {
-                        ...dataset,
-                        backgroundColor: dataset.backgroundColor || (fill ? colorOpacity : 'transparent'),
-                        borderColor: dataset.borderColor || color,
-                        borderWidth: dataset.borderWidth || 2,
-                        pointBackgroundColor: dataset.pointBackgroundColor || color,
-                        pointBorderColor: dataset.pointBorderColor || '#fff',
-                        pointHoverBackgroundColor: dataset.pointHoverBackgroundColor || '#fff',
-                        pointHoverBorderColor: dataset.pointHoverBorderColor || color
-                    };
-                });
-            };
+            if(datasets.length === 0)
+            {
+                return [{
+                    label: 'Sample Data',
+                    data: [75, 60, 85, 70, 80],
+                    backgroundColor: fill ? paletteOpacity[0] : 'transparent',
+                    borderColor: palette[0],
+                    borderWidth: 2,
+                    pointBackgroundColor: palette[0],
+                    pointBorderColor: '#fff',
+                    pointHoverBackgroundColor: '#fff',
+                    pointHoverBorderColor: palette[0]
+                }];
+            }
 
-            this.config = () =>
+            return datasets.map((dataset, index) =>
             {
-                const style = getComputedStyle(document.body);
-                const textColor = style.getPropertyValue('--ot-text-1').trim();
-                const gridColor = style.getPropertyValue('--ot-bg-3-border').trim();
+                const color = palette[index % palette.length];
+                const colorOpacity = paletteOpacity[index % paletteOpacity.length];
 
                 return {
-                    type: 'radar',
-                    data: {
-                        labels: data['labels'].value,
-                        datasets: this.datasets()
-                    },
-                    options: {
-                        responsive: true,
-                        maintainAspectRatio: false,
-                        plugins: {
-                            legend: {
-                                labels: {
-                                    color: textColor,
-                                    font: {
-                                        family: style.getPropertyValue('--ot-font-primary').trim()
-                                    }
+                    ...dataset,
+                    backgroundColor: dataset.backgroundColor || (fill ? colorOpacity : 'transparent'),
+                    borderColor: dataset.borderColor || color,
+                    borderWidth: dataset.borderWidth || 2,
+                    pointBackgroundColor: dataset.pointBackgroundColor || color,
+                    pointBorderColor: dataset.pointBorderColor || '#fff',
+                    pointHoverBackgroundColor: dataset.pointHoverBackgroundColor || '#fff',
+                    pointHoverBorderColor: dataset.pointHoverBorderColor || color
+                };
+            });
+        };
+
+        this.config = () =>
+        {
+            const style = getComputedStyle(document.body);
+            const textColor = style.getPropertyValue('--ot-text-1').trim();
+            const gridColor = style.getPropertyValue('--ot-bg-3-border').trim();
+
+            return {
+                type: 'radar',
+                data: {
+                    labels: data['labels'],
+                    datasets: this.datasets()
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            labels: {
+                                color: textColor,
+                                font: {
+                                    family: style.getPropertyValue('--ot-font-primary').trim()
                                 }
                             }
-                        },
-                        scales: {
-                            r: {
-                                angleLines: {
-                                    color: gridColor
-                                },
-                                grid: {
-                                    color: gridColor
-                                },
-                                pointLabels: {
-                                    color: textColor
-                                },
-                                ticks: {
-                                    color: textColor,
-                                    backdropColor: 'transparent'
-                                },
-                                beginAtZero: true
-                            }
-                        },
-                        ...data['options'].value
-                    }
-                };
+                        }
+                    },
+                    scales: {
+                        r: {
+                            angleLines: {
+                                color: gridColor
+                            },
+                            grid: {
+                                color: gridColor
+                            },
+                            pointLabels: {
+                                color: textColor
+                            },
+                            ticks: {
+                                color: textColor,
+                                backdropColor: 'transparent'
+                            },
+                            beginAtZero: true
+                        }
+                    },
+                    ...data['options']
+                }
             };
+        };
 
-            this.initialize = () =>
+        this.initialize = () =>
+        {
+            setTimeout(() =>
             {
-                setTimeout(() =>
+                if(typeof Chart === 'undefined')
                 {
-                    if(typeof Chart === 'undefined')
-                    {
-                        console.error('Chart.js library not loaded');
-                        return;
-                    }
+                    console.error('Chart.js library not loaded');
+                    return;
+                }
 
-                    const context = this.canvas.getContext('2d');
-                    this.instance = new Chart(context, this.config());
+                const context = this.canvas.getContext('2d');
+                this.instance = new Chart(context, this.config());
 
-                    node.chart = this.instance;
-                }, 100);
-            };
+                node.chart = this.instance;
+            }, 100);
+        };
 
-            this.setup();
-            this.initialize();
-        }
-    });
-});
+        this.setup();
+        this.initialize();
+    }
+});

package/lib/items/transforms/chart/scatter.js

@@ -1,152 +1,149 @@
-onetype.AddonReady('transforms', (transforms) =>
-{
-    transforms.ItemAdd({
-        id: 'ot-chart-scatter',
-        icon: 'scatter_plot',
-        name: 'Scatter Plot',
-        description: 'Scatter plot for correlation data. Show relationship between two variables with points.',
-        js: [
-            'https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js'
-        ],
-        config: {
-            'datasets': ['array', []],
-            'options': ['object', {}]
-        },
-        code: function(data, item, compile, node, identifier)
+transforms.ItemAdd({
+    id: 'ot-chart-scatter',
+    icon: 'scatter_plot',
+    name: 'Scatter Plot',
+    description: 'Scatter plot for correlation data. Show relationship between two variables with points.',
+    js: [
+        'https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js'
+    ],
+    config: {
+        'datasets': ['array', []],
+        'options': ['object', {}]
+    },
+    code: function(data, node, transformer)
+    {
+        this.setup = () =>
         {
-            this.setup = () =>
-            {
-                node.innerHTML = '';
-                node.classList.add('ot-chart-scatter');
+            node.innerHTML = '';
+            node.classList.add('ot-chart-scatter');
 
-                const canvas = document.createElement('canvas');
-                this.canvas = canvas;
-                node.appendChild(canvas);
-            };
+            const canvas = document.createElement('canvas');
+            this.canvas = canvas;
+            node.appendChild(canvas);
+        };
 
-            this.colors = () =>
-            {
-                const style = getComputedStyle(document.body);
+        this.colors = () =>
+        {
+            const style = getComputedStyle(document.body);
 
-                return {
-                    brand: style.getPropertyValue('--ot-brand').trim(),
-                    blue: style.getPropertyValue('--ot-blue').trim(),
-                    green: style.getPropertyValue('--ot-green').trim(),
-                    orange: style.getPropertyValue('--ot-orange').trim(),
-                    red: style.getPropertyValue('--ot-red').trim()
-                };
+            return {
+                brand: style.getPropertyValue('--ot-brand').trim(),
+                blue: style.getPropertyValue('--ot-blue').trim(),
+                green: style.getPropertyValue('--ot-green').trim(),
+                orange: style.getPropertyValue('--ot-orange').trim(),
+                red: style.getPropertyValue('--ot-red').trim()
             };
+        };
 
-            this.datasets = () =>
-            {
-                const datasets = data['datasets'].value;
-                const colors = this.colors();
-                const palette = [colors.brand, colors.blue, colors.green, colors.orange, colors.red];
-
-                if(datasets.length === 0)
-                {
-                    return [{
-                        label: 'Sample Data',
-                        data: [
-                            {x: 10, y: 20},
-                            {x: 15, y: 35},
-                            {x: 20, y: 30},
-                            {x: 25, y: 45},
-                            {x: 30, y: 40},
-                            {x: 35, y: 55}
-                        ],
-                        backgroundColor: palette[0],
-                        borderColor: palette[0],
-                        borderWidth: 1,
-                        pointRadius: 5
-                    }];
-                }
-
-                return datasets.map((dataset, index) =>
-                {
-                    const color = palette[index % palette.length];
+        this.datasets = () =>
+        {
+            const datasets = data['datasets'];
+            const colors = this.colors();
+            const palette = [colors.brand, colors.blue, colors.green, colors.orange, colors.red];
 
-                    return {
-                        ...dataset,
-                        backgroundColor: dataset.backgroundColor || color,
-                        borderColor: dataset.borderColor || color,
-                        borderWidth: dataset.borderWidth || 1,
-                        pointRadius: dataset.pointRadius || 5
-                    };
-                });
-            };
+            if(datasets.length === 0)
+            {
+                return [{
+                    label: 'Sample Data',
+                    data: [
+                        {x: 10, y: 20},
+                        {x: 15, y: 35},
+                        {x: 20, y: 30},
+                        {x: 25, y: 45},
+                        {x: 30, y: 40},
+                        {x: 35, y: 55}
+                    ],
+                    backgroundColor: palette[0],
+                    borderColor: palette[0],
+                    borderWidth: 1,
+                    pointRadius: 5
+                }];
+            }
 
-            this.config = () =>
+            return datasets.map((dataset, index) =>
             {
-                const style = getComputedStyle(document.body);
-                const textColor = style.getPropertyValue('--ot-text-1').trim();
-                const gridColor = style.getPropertyValue('--ot-bg-3-border').trim();
+                const color = palette[index % palette.length];
 
                 return {
-                    type: 'scatter',
-                    data: {
-                        datasets: this.datasets()
-                    },
-                    options: {
-                        responsive: true,
-                        maintainAspectRatio: false,
-                        plugins: {
-                            legend: {
-                                labels: {
-                                    color: textColor,
-                                    font: {
-                                        family: style.getPropertyValue('--ot-font-primary').trim()
-                                    }
+                    ...dataset,
+                    backgroundColor: dataset.backgroundColor || color,
+                    borderColor: dataset.borderColor || color,
+                    borderWidth: dataset.borderWidth || 1,
+                    pointRadius: dataset.pointRadius || 5
+                };
+            });
+        };
+
+        this.config = () =>
+        {
+            const style = getComputedStyle(document.body);
+            const textColor = style.getPropertyValue('--ot-text-1').trim();
+            const gridColor = style.getPropertyValue('--ot-bg-3-border').trim();
+
+            return {
+                type: 'scatter',
+                data: {
+                    datasets: this.datasets()
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            labels: {
+                                color: textColor,
+                                font: {
+                                    family: style.getPropertyValue('--ot-font-primary').trim()
                                 }
                             }
-                        },
-                        scales: {
-                            x: {
-                                type: 'linear',
-                                position: 'bottom',
-                                ticks: { color: textColor },
-                                grid: { color: gridColor },
-                                title: {
-                                    display: true,
-                                    text: 'X Axis',
-                                    color: textColor
-                                }
-                            },
-                            y: {
-                                type: 'linear',
-                                ticks: { color: textColor },
-                                grid: { color: gridColor },
-                                title: {
-                                    display: true,
-                                    text: 'Y Axis',
-                                    color: textColor
-                                }
+                        }
+                    },
+                    scales: {
+                        x: {
+                            type: 'linear',
+                            position: 'bottom',
+                            ticks: { color: textColor },
+                            grid: { color: gridColor },
+                            title: {
+                                display: true,
+                                text: 'X Axis',
+                                color: textColor
                             }
                         },
-                        ...data['options'].value
-                    }
-                };
+                        y: {
+                            type: 'linear',
+                            ticks: { color: textColor },
+                            grid: { color: gridColor },
+                            title: {
+                                display: true,
+                                text: 'Y Axis',
+                                color: textColor
+                            }
+                        }
+                    },
+                    ...data['options']
+                }
             };
+        };
 
-            this.initialize = () =>
+        this.initialize = () =>
+        {
+            setTimeout(() =>
             {
-                setTimeout(() =>
+                if(typeof Chart === 'undefined')
                 {
-                    if(typeof Chart === 'undefined')
-                    {
-                        console.error('Chart.js library not loaded');
-                        return;
-                    }
+                    console.error('Chart.js library not loaded');
+                    return;
+                }
 
-                    const context = this.canvas.getContext('2d');
-                    this.instance = new Chart(context, this.config());
+                const context = this.canvas.getContext('2d');
+                this.instance = new Chart(context, this.config());
 
-                    node.chart = this.instance;
-                }, 100);
-            };
+                node.chart = this.instance;
+            }, 100);
+        };
 
-            this.setup();
-            this.initialize();
-        }
-    });
-});
+        this.setup();
+        this.initialize();
+    }
+});

package/lib/items/transforms/codeflask/codeflask.js

@@ -1,5 +1,3 @@
-onetype.AddonReady('transforms', (transforms) =>
-{
 	transforms.ItemAdd({
 		id: 'codeflask',
 		icon: 'code',
@@ -15,14 +13,14 @@ onetype.AddonReady('transforms', (transforms) =>
 			'readonly': ['boolean', false],
 			'onUpdate': ['function']
 		},
-		code: function(data, item, compile, node, identifier)
+		code: function(data, node, transformer)
 		{
 			this.setup = () =>
 			{
 				node.classList.add('codeflask-editor');
 				node.classList.add('codeflask-editor-' + identifier);
 
-				const initialValue = data['value'].value || node.textContent || '';
+				const initialValue = data['value'] || node.textContent || '';
 				node.innerHTML = '';
 
 				this.container = document.createElement('div');
@@ -36,17 +34,17 @@ onetype.AddonReady('transforms', (transforms) =>
 			{
 				const style = document.createElement('style');
 				style.textContent = `
-					.codeflask-editor-${identifier}
+					.codeflask-editor-${id}
 					{
 						height: 100%;
 						width: 100%;
 					}
-					.codeflask-editor-${identifier} .codeflask-container
+					.codeflask-editor-${id} .codeflask-container
 					{
 						height: 100%;
 						width: 100%;
 					}
-					.codeflask-editor-${identifier} .codeflask
+					.codeflask-editor-${id} .codeflask
 					{
 						height: 100%;
 					}
@@ -66,9 +64,9 @@ onetype.AddonReady('transforms', (transforms) =>
 					}
 
 					const flask = new CodeFlask(this.container, {
-						language: data['language'].value || 'markup',
-						lineNumbers: data['line-numbers'].value !== false,
-						readonly: data['readonly'].value === true
+						language: data['language'] || 'markup',
+						lineNumbers: data['line-numbers'] !== false,
+						readonly: data['readonly'] === true
 					});
 
 					flask.updateCode(this.initialValue);
@@ -77,7 +75,7 @@ onetype.AddonReady('transforms', (transforms) =>
 
 					flask.onUpdate((code) =>
 					{
-						// const onUpdate = data['onUpdate'].value;
+						// const onUpdate = data['onUpdate'];
 						// if(typeof onUpdate === 'function')
 						// {
 						// 	onUpdate({value: code, node});
@@ -96,4 +94,4 @@ onetype.AddonReady('transforms', (transforms) =>
 			this.initialize();
 		}
 	});
-});
+