@onetype/framework 2.0.39 → 2.0.41

package/lib/items/transforms/interact/interact.js

@@ -1,276 +0,0 @@
-transforms.ItemAdd({
-    id: 'interact',
-    icon: 'gesture',
-    name: 'Interact',
-    description: 'Drag, resize, and gesture interactions. Make elements draggable, resizable, and interactive.',
-    js: [
-        'https://cdn.jsdelivr.net/npm/interactjs@1.10.27/dist/interact.min.js'
-    ],
-    config: {
-        'draggable': ['boolean', true],
-        'resizable': ['boolean', true],
-        'rotatable': ['boolean', false],
-        'inertia': ['boolean', true],
-        'restrict-to-parent': ['boolean', true],
-        'grid-x': ['number', 0],
-        'grid-y': ['number', 0],
-        'min-width': ['number', 50],
-        'min-height': ['number', 50],
-        'max-width': ['number', 0],
-        'max-height': ['number', 0],
-        'resize-from-edges': ['boolean', true],
-        'resize-from-corners': ['boolean', true],
-        'preserve-aspect-ratio': ['boolean', false]
-    },
-    code: function(data, node, transformer)
-    {
-        const id = 'interact-' + onetype.Generate(8);
-
-        this.setup = () =>
-        {
-            // Add interact class and unique identifier
-            node.classList.add('interact-element');
-            node.classList.add(id);
-
-            // Set initial position attributes
-            node.setAttribute('data-x', '0');
-            node.setAttribute('data-y', '0');
-            node.setAttribute('data-angle', '0');
-
-            // Add some default styles for visual feedback
-            node.style.touchAction = 'none';
-            node.style.userSelect = 'none';
-            node.style.position = 'relative';
-
-            // Get all children and make them non-interactive
-            const children = Array.from(node.children);
-            children.forEach(child =>
-            {
-                child.style.pointerEvents = 'auto';
-            });
-        };
-
-        this.draggable = () =>
-        {
-            if(!data['draggable'])
-            {
-                return;
-            }
-
-            const config = {
-                inertia: data['inertia'],
-                listeners: {
-                    move: this.dragMoveListener
-                }
-            };
-
-            // Add modifiers
-            config.modifiers = [];
-
-            // Restrict to parent
-            if(data['restrict-to-parent'])
-            {
-                config.modifiers.push(
-                    interact.modifiers.restrictRect({
-                        restriction: 'parent',
-                        endOnly: false
-                    })
-                );
-            }
-
-            // Grid snapping
-            const gridX = data['grid-x'];
-            const gridY = data['grid-y'];
-
-            if(gridX > 0 || gridY > 0)
-            {
-                config.modifiers.push(
-                    interact.modifiers.snap({
-                        targets: [
-                            interact.snappers.grid({ x: gridX || 1, y: gridY || 1 })
-                        ],
-                        range: Infinity,
-                        relativePoints: [{ x: 0, y: 0 }]
-                    })
-                );
-            }
-
-            // Apply draggable configuration
-            this.interactInstance.draggable(config);
-        };
-
-        this.resizable = () =>
-        {
-            if(!data['resizable'])
-            {
-                return;
-            }
-
-            const config = {
-                edges: {},
-                listeners: {
-                    move: this.resizeMoveListener
-                },
-                modifiers: []
-            };
-
-            // Configure resize edges
-            if(data['resize-from-edges'])
-            {
-                config.edges.left = true;
-                config.edges.right = true;
-                config.edges.top = true;
-                config.edges.bottom = true;
-            }
-
-            if(data['resize-from-corners'])
-            {
-                config.edges.left = true;
-                config.edges.right = true;
-                config.edges.top = true;
-                config.edges.bottom = true;
-            }
-
-            // Preserve aspect ratio
-            if(data['preserve-aspect-ratio'])
-            {
-                config.modifiers.push(
-                    interact.modifiers.aspectRatio({
-                        ratio: 'preserve',
-                        equalDelta: true
-                    })
-                );
-            }
-
-            // Restrict edges to parent
-            if(data['restrict-to-parent'])
-            {
-                config.modifiers.push(
-                    interact.modifiers.restrictEdges({
-                        outer: 'parent'
-                    })
-                );
-            }
-
-            // Size restrictions
-            const minWidth = data['min-width'];
-            const minHeight = data['min-height'];
-            const maxWidth = data['max-width'];
-            const maxHeight = data['max-height'];
-
-            const sizeRestrictions = {};
-
-            if(minWidth > 0 || minHeight > 0)
-            {
-                sizeRestrictions.min = {};
-                if(minWidth > 0) sizeRestrictions.min.width = minWidth;
-                if(minHeight > 0) sizeRestrictions.min.height = minHeight;
-            }
-
-            if(maxWidth > 0 || maxHeight > 0)
-            {
-                sizeRestrictions.max = {};
-                if(maxWidth > 0) sizeRestrictions.max.width = maxWidth;
-                if(maxHeight > 0) sizeRestrictions.max.height = maxHeight;
-            }
-
-            if(Object.keys(sizeRestrictions).length > 0)
-            {
-                config.modifiers.push(
-                    interact.modifiers.restrictSize(sizeRestrictions)
-                );
-            }
-
-            // Apply resizable configuration
-            this.interactInstance.resizable(config);
-        };
-
-        this.rotatable = () =>
-        {
-            if(!data['rotatable'])
-            {
-                return;
-            }
-
-            const config = {
-                listeners: {
-                    move: this.rotateMoveListener
-                }
-            };
-
-            // Apply gesturable configuration for rotation
-            this.interactInstance.gesturable(config);
-        };
-
-        // Event listener functions
-        this.dragMoveListener = (event) =>
-        {
-            const target = event.target;
-            const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
-            const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
-
-            target.style.transform = `translate(${x}px, ${y}px) rotate(${target.getAttribute('data-angle') || 0}deg)`;
-
-            target.setAttribute('data-x', x);
-            target.setAttribute('data-y', y);
-        };
-
-        this.resizeMoveListener = (event) =>
-        {
-            const target = event.target;
-            let x = parseFloat(target.getAttribute('data-x')) || 0;
-            let y = parseFloat(target.getAttribute('data-y')) || 0;
-
-            // Update element size
-            target.style.width = event.rect.width + 'px';
-            target.style.height = event.rect.height + 'px';
-
-            // Translate when resizing from top or left edges
-            x += event.deltaRect.left;
-            y += event.deltaRect.top;
-
-            target.style.transform = `translate(${x}px, ${y}px) rotate(${target.getAttribute('data-angle') || 0}deg)`;
-
-            target.setAttribute('data-x', x);
-            target.setAttribute('data-y', y);
-        };
-
-        this.rotateMoveListener = (event) =>
-        {
-            const target = event.target;
-            const currentAngle = parseFloat(target.getAttribute('data-angle')) || 0;
-            const newAngle = currentAngle + event.da;
-
-            const x = parseFloat(target.getAttribute('data-x')) || 0;
-            const y = parseFloat(target.getAttribute('data-y')) || 0;
-
-            target.style.transform = `translate(${x}px, ${y}px) rotate(${newAngle}deg)`;
-
-            target.setAttribute('data-angle', newAngle);
-        };
-
-        this.initialize = () =>
-        {
-            setTimeout(() =>
-            {
-                // Check if interact is available
-                if(typeof interact === 'undefined')
-                {
-                    console.error('Interact.js library not loaded');
-                    return;
-                }
-
-                // Initialize interact instance
-                this.interactInstance = interact(node);
-
-                // Apply configurations
-                this.draggable();
-                this.resizable();
-                this.rotatable();
-            }, 100);
-        };
-
-        this.setup();
-        this.initialize();
-    }
-});

package/lib/items/transforms/particles/particles.js

@@ -1,328 +0,0 @@
-transforms.ItemAdd({
-    id: 'particles',
-    icon: 'blur_on',
-    name: 'Particles',
-    description: 'Animated particle effects background. Create interactive particle systems with customizable behaviors.',
-    js: [
-        'https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js'
-    ],
-    config: {
-        'preset': ['string', 'default'],
-        'particle-number': ['number', 80],
-        'particle-color': ['string', '#ffffff'],
-        'particle-opacity': ['number', 0.5],
-        'particle-size': ['number', 3],
-        'particle-size-random': ['boolean', true],
-        'particle-shape': ['string', 'circle'],
-        'line-linked': ['boolean', true],
-        'line-color': ['string', '#ffffff'],
-        'line-opacity': ['number', 0.4],
-        'line-width': ['number', 1],
-        'line-distance': ['number', 150],
-        'move-enable': ['boolean', true],
-        'move-speed': ['number', 6],
-        'move-direction': ['string', 'none'],
-        'move-random': ['boolean', false],
-        'move-straight': ['boolean', false],
-        'move-bounce': ['boolean', false],
-        'move-attract': ['boolean', false],
-        'interactivity-hover': ['boolean', true],
-        'interactivity-click': ['boolean', true],
-        'hover-mode': ['string', 'repulse'],
-        'click-mode': ['string', 'push'],
-        'retina-detect': ['boolean', true]
-    },
-    code: function(data, node, transformer)
-    {
-        const id = 'particles-' + onetype.Generate(8);
-
-        this.setup = () =>
-        {
-            node.classList.add('particles');
-            node.classList.add(id);
-
-            const particlesId = 'particles-' + identifier;
-            node.id = particlesId;
-
-            const children = Array.from(node.children);
-
-            if(children.length > 0)
-            {
-                const contentWrapper = document.createElement('div');
-                contentWrapper.className = 'particles-content';
-
-                children.forEach(child =>
-                {
-                    contentWrapper.appendChild(child);
-                });
-
-                node.appendChild(contentWrapper);
-            }
-
-            this.particlesId = particlesId;
-        };
-
-        this.styles = () =>
-        {
-            const style = document.createElement('style');
-
-            style.textContent = `
-                .particles-${id} {
-                    position: relative;
-                    width: 100%;
-                    height: 100%;
-                }
-                .particles-${id} canvas {
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    width: 100%;
-                    height: 100%;
-                    pointer-events: auto;
-                }
-                .particles-${id} .particles-content {
-                    position: relative;
-                    z-index: 1;
-                }
-            `;
-
-            document.head.appendChild(style);
-        };
-
-        this.presets = () =>
-        {
-            const preset = data['preset'];
-
-            const presets = {
-                'snow': {
-                    particleNumber: 100,
-                    particleColor: '#ffffff',
-                    particleOpacity: 0.8,
-                    particleSize: 4,
-                    moveSpeed: 2,
-                    moveDirection: 'bottom',
-                    lineLinked: false
-                },
-                'stars': {
-                    particleNumber: 200,
-                    particleColor: '#ffffff',
-                    particleOpacity: 1,
-                    particleSize: 2,
-                    moveSpeed: 0.5,
-                    lineLinked: false,
-                    particleSizeRandom: true
-                },
-                'bubbles': {
-                    particleNumber: 40,
-                    particleColor: '#ffffff',
-                    particleOpacity: 0.4,
-                    particleSize: 8,
-                    moveSpeed: 3,
-                    moveDirection: 'top',
-                    lineLinked: false,
-                    particleShape: 'circle'
-                },
-                'network': {
-                    particleNumber: 60,
-                    particleColor: '#0066cc',
-                    particleOpacity: 0.6,
-                    lineLinked: true,
-                    lineColor: '#0066cc',
-                    lineOpacity: 0.3,
-                    moveSpeed: 4
-                }
-            };
-
-            if(presets[preset])
-            {
-                return presets[preset];
-            }
-
-            return null;
-        };
-
-        this.config = () =>
-        {
-            const presetConfig = this.presets();
-
-            const particleNumber = presetConfig?.particleNumber || data['particle-number'];
-            const particleColor = presetConfig?.particleColor || data['particle-color'];
-            const particleOpacity = presetConfig?.particleOpacity || data['particle-opacity'];
-            const particleSize = presetConfig?.particleSize || data['particle-size'];
-            const particleSizeRandom = presetConfig?.particleSizeRandom ?? data['particle-size-random'];
-            const particleShape = presetConfig?.particleShape || data['particle-shape'];
-            const lineLinked = presetConfig?.lineLinked ?? data['line-linked'];
-            const lineColor = presetConfig?.lineColor || data['line-color'];
-            const lineOpacity = presetConfig?.lineOpacity || data['line-opacity'];
-            const lineWidth = data['line-width'];
-            const lineDistance = data['line-distance'];
-            const moveSpeed = presetConfig?.moveSpeed || data['move-speed'];
-            const moveDirection = presetConfig?.moveDirection || data['move-direction'];
-            const moveRandom = data['move-random'];
-            const moveStraight = data['move-straight'];
-            const moveBounce = data['move-bounce'];
-            const moveAttract = data['move-attract'];
-
-            const config = {
-                particles: {
-                    number: {
-                        value: particleNumber,
-                        density: {
-                            enable: true,
-                            value_area: 800
-                        }
-                    },
-                    color: {
-                        value: particleColor
-                    },
-                    shape: {
-                        type: particleShape,
-                        stroke: {
-                            width: 0,
-                            color: '#000000'
-                        }
-                    },
-                    opacity: {
-                        value: particleOpacity,
-                        random: false,
-                        anim: {
-                            enable: false,
-                            speed: 1,
-                            opacity_min: 0.1,
-                            sync: false
-                        }
-                    },
-                    size: {
-                        value: particleSize,
-                        random: particleSizeRandom,
-                        anim: {
-                            enable: false,
-                            speed: 40,
-                            size_min: 0.1,
-                            sync: false
-                        }
-                    },
-                    line_linked: {
-                        enable: lineLinked,
-                        distance: lineDistance,
-                        color: lineColor,
-                        opacity: lineOpacity,
-                        width: lineWidth
-                    },
-                    move: {
-                        enable: data['move-enable'],
-                        speed: moveSpeed,
-                        direction: moveDirection,
-                        random: moveRandom,
-                        straight: moveStraight,
-                        out_mode: 'out',
-                        bounce: moveBounce,
-                        attract: {
-                            enable: moveAttract,
-                            rotateX: 600,
-                            rotateY: 1200
-                        }
-                    }
-                },
-                interactivity: {
-                    detect_on: 'canvas',
-                    events: {
-                        onhover: {
-                            enable: data['interactivity-hover'],
-                            mode: data['hover-mode']
-                        },
-                        onclick: {
-                            enable: data['interactivity-click'],
-                            mode: data['click-mode']
-                        },
-                        resize: true
-                    },
-                    modes: {
-                        grab: {
-                            distance: 400,
-                            line_linked: {
-                                opacity: 1
-                            }
-                        },
-                        bubble: {
-                            distance: 400,
-                            size: 40,
-                            duration: 2,
-                            opacity: 8,
-                            speed: 3
-                        },
-                        repulse: {
-                            distance: 200,
-                            duration: 0.4
-                        },
-                        push: {
-                            particles_nb: 4
-                        },
-                        remove: {
-                            particles_nb: 2
-                        }
-                    }
-                },
-                retina_detect: data['retina-detect']
-            };
-
-            return config;
-        };
-
-        this.initialize = () =>
-        {
-            setTimeout(() =>
-            {
-                if(typeof particlesJS === 'undefined')
-                {
-                    console.error('Particles.js library not loaded');
-                    return;
-                }
-
-                particlesJS(this.particlesId, this.config());
-
-                node._particlesInstance = {
-                    refresh: () =>
-                    {
-                        if(window.pJSDom && window.pJSDom.length > 0)
-                        {
-                            window.pJSDom.forEach(instance =>
-                            {
-                                if(instance.pJS && instance.pJS.canvas && instance.pJS.canvas.el)
-                                {
-                                    if(instance.pJS.canvas.el.parentNode && instance.pJS.canvas.el.parentNode.id === this.particlesId)
-                                    {
-                                        instance.pJS.fn.vendors.destroypJS();
-                                        window.pJSDom = window.pJSDom.filter(item => item !== instance);
-                                    }
-                                }
-                            });
-                        }
-                        particlesJS(this.particlesId, this.config());
-                    },
-                    update: (newConfig) =>
-                    {
-                        if(window.pJSDom && window.pJSDom.length > 0)
-                        {
-                            window.pJSDom.forEach(instance =>
-                            {
-                                if(instance.pJS && instance.pJS.canvas && instance.pJS.canvas.el)
-                                {
-                                    if(instance.pJS.canvas.el.parentNode && instance.pJS.canvas.el.parentNode.id === this.particlesId)
-                                    {
-                                        Object.assign(instance.pJS.particles, newConfig.particles);
-                                        instance.pJS.fn.particlesRefresh();
-                                    }
-                                }
-                            });
-                        }
-                    }
-                };
-            }, 0);
-        };
-
-        this.setup();
-        this.styles();
-        this.initialize();
-    }
-});