froggy - npm Package Compare versions

Comparing version 1.1.3 to 1.1.4

build/src/brick.js

@@ -36,3 +36,6 @@ import React from 'react';
         if (with_ui) {
-            res.ui = Object.assign({}, b.ui, { is_toolbox_brick: false, parent: parent, delegate: b.output ? undefined : parent });
+            res.ui = Object.assign({}, b.ui, { parent: parent, delegate: b.output ? undefined : parent });
+            delete res.ui.is_toolbox_brick;
+            delete res.ui.is_removing;
+            delete res.ui.is_ghost;
         }
@@ -114,2 +117,3 @@ if (b.next !== undefined) {
         };
+        props.brick_id_to_component[props.id] = this;
     }
@@ -124,3 +128,3 @@ render() {
         const inputs = this.props.inputs.length ?
-            React.createElement("div", Object.assign({}, events, { className: `${styles.inputs} ${this.props.show_hat ? styles.hat : ''}`, ref: this.props.brick_inputs_ref }), this.props.inputs) : null;
+            React.createElement("div", Object.assign({}, events, { className: `${styles.inputs} ${this.props.data.ui.show_hat ? styles.hat : ''}`, ref: this.props.brick_inputs_ref }), this.props.inputs) : null;
         const parts = this.props.parts.length ?
@@ -131,5 +135,5 @@ React.createElement("div", { className: styles.parts, ref: this.props.brick_parts_ref }, this.props.parts) : null;
         return React.createElement("div", Object.assign({ style: {
-                marginLeft: `${this.props.offset && this.props.offset.x || 0}px`,
-                marginTop: `${this.props.offset && this.props.offset.y || 0}px`,
-            }, className: `${styles.wrap} ${this.props.output ? `${styles.output} ${styles[BrickOutput[this.props.output]]}` : ''} ${this.props.is_removing ? styles.removing : ''} ${this.props.is_container ? styles.container : ''}  ${this.props.is_ghost ? styles.ghost : ''} ${this.props.active ? styles.active : ''}`, "data-id": this.props.id, ref: this.props.brick_ref }, this.props.children ? events : {}),
+                marginLeft: `${this.props.data.ui.offset && this.props.data.ui.offset.x || 0}px`,
+                marginTop: `${this.props.data.ui.offset && this.props.data.ui.offset.y || 0}px`,
+            }, className: `${styles.wrap} ${this.props.data.output ? `${styles.output} ${styles[BrickOutput[this.props.data.output]]}` : ''} ${this.props.data.ui.is_removing ? styles.removing : ''} ${this.props.is_container ? styles.container : ''}  ${this.props.data.ui.is_ghost ? styles.ghost : ''} ${this.props.active ? styles.active : ''}`, "data-id": this.props.id, ref: this.props.brick_ref }, this.props.children ? events : {}),
             inputs,
@@ -136,0 +140,0 @@ parts,

build/src/workspace.js

@@ -20,2 +20,83 @@ import React from 'react';
 }
+class RootBrick extends React.Component {
+    constructor(props) {
+        super(props);
+        this.props.workspace.root_brick_id_to_component[this.props.root_brick.id] = this;
+    }
+    render() {
+        const root_brick = this.props.root_brick;
+        const workspace = this.props.workspace;
+        const init_brick_id_to_data = (data) => {
+            workspace.brick_id_to_data[data.id] = data;
+            workspace.brick_refs[data.id] = workspace.brick_refs[data.id] || React.createRef();
+            workspace.brick_inputs_refs[data.id] = workspace.brick_inputs_refs[data.id] || React.createRef();
+            workspace.brick_parts_refs[data.id] = workspace.brick_parts_refs[data.id] || React.createRef();
+            data.parts && data.parts.forEach(i => init_brick_id_to_data(i));
+            data.inputs && data.inputs.forEach(i => init_brick_id_to_data(i));
+            data.next && init_brick_id_to_data(data.next);
+        };
+        init_brick_id_to_data(root_brick);
+        const init_brick_instance = (brick) => {
+            const id = brick.id;
+            let child;
+            if (AtomicBrickEnum[brick.type]) {
+                if (brick.type === 'atomic_text') {
+                    return React.createElement("div", { key: brick.id, className: styles.atomicText },
+                        brick.ui.value[0] === ' ' ? React.createElement("div", { className: styles.atomicTextIndent }) : null,
+                        brick.ui.value);
+                }
+                const basic_fns = {
+                    onChange: (value) => {
+                        if (brick.output === BrickOutput.number) {
+                            brick.ui.value = parseFloat(value) || 0;
+                            workspace.update();
+                        }
+                        else {
+                            brick.ui.value = value;
+                        }
+                        workspace.root_bricks_on_change();
+                        return brick.ui.value;
+                    },
+                    show: (content, cb) => {
+                        workspace.mask_data.content = content;
+                        workspace.mask_data.visibility = true;
+                        workspace.mask_data.brick_id = brick.id;
+                        workspace.update(cb || (() => { }));
+                    },
+                    hide: () => {
+                        workspace.mask_data.visibility = false;
+                        workspace.mask_data.brick_id = undefined;
+                        workspace.update();
+                    },
+                };
+                const select_fns = Object.assign({}, basic_fns, { offset: () => {
+                        const offset = get_global_offset(workspace.brick_refs[brick.id].current);
+                        offset.y += 40;
+                        return offset;
+                    } });
+                const input_fns = Object.assign({}, basic_fns, { offset: () => {
+                        const offset = get_global_offset(workspace.brick_refs[brick.id].current);
+                        offset.x++;
+                        offset.y++;
+                        return offset;
+                    } });
+                const typeToInstance = {
+                    atomic_input_string: () => React.createElement(Input, Object.assign({ value: brick.ui.value.toString() }, input_fns, { editing: workspace.mask_data.visibility && workspace.mask_data.brick_id === brick.id })),
+                    atomic_input_number: () => typeToInstance.atomic_input_string(),
+                    atomic_dropdown: () => React.createElement(Select, Object.assign({ value: brick.ui.value, options: workspace.props.atomic_dropdown_menu[brick.ui.dropdown] }, select_fns)),
+                    atomic_boolean: () => typeToInstance.atomic_dropdown(),
+                    atomic_button: () => React.createElement("div", { key: brick.id, className: styles.atomicButtonWrap },
+                        React.createElement("div", { className: brick.ui.className, onClick: (e) => {
+                                e.stopPropagation();
+                                workspace.props.atomic_button_fns[brick.ui.value](workspace.brick_id_to_data, brick, () => workspace.update(() => workspace.root_bricks_on_change()));
+                            } })),
+                    atomic_param: () => React.createElement("div", { key: brick.id, className: styles.atomicParam }, brick.ui.value),
+                };
+                child = typeToInstance[brick.type]();
+            }
+            return (React.createElement(BrickComponent, { styles: styles, key: id, id: id, data: brick, brick_id_to_component: workspace.brick_id_to_component, active: id === workspace.active_brick_id, brick_ref: workspace.brick_refs[id], is_container: is_container(brick), brick_inputs_ref: workspace.brick_inputs_refs[id], brick_parts_ref: workspace.brick_parts_refs[id], on_drag_start: workspace.brick_on_drag_start, on_context_menu: workspace.brick_on_context_menu, parts: brick.parts ? brick.parts.map(i => init_brick_instance(i)) : [], inputs: brick.inputs ? brick.inputs.map(i => init_brick_instance(i)) : [], next: brick.next ? init_brick_instance(brick.next) : null, children: child }));
+        };
+        return init_brick_instance(root_brick);
+    }
+}
 export default class Workspace extends React.Component {
@@ -30,3 +111,2 @@ constructor(props) {
         };
-        this.ghost_bricks = {};
         this.brick_refs = {};
@@ -53,2 +133,4 @@ this.brick_inputs_refs = {};
         this.brick_id_to_data = {};
+        this.brick_id_to_component = {};
+        this.root_brick_id_to_component = {};
         this.update = this.forceUpdate;
@@ -183,4 +265,9 @@ this.brick_on_context_menu = (e) => {
             };
-            this.active_brick_needs_removing = offset.x < -this.froggy_offset.x + this.toolbox_ref.current.clientWidth;
-            let needs_update = false;
+            let workspace_needs_update = false;
+            let needs_update_size = false;
+            const active_brick_needs_removing = offset.x < -this.froggy_offset.x + this.toolbox_ref.current.clientWidth;
+            if (this.active_brick_needs_removing != active_brick_needs_removing) {
+                this.active_brick_needs_removing = active_brick_needs_removing;
+                this.brick_id_to_data[id].ui.is_removing = active_brick_needs_removing;
+            }
             const closest = this.inserting_candidates.reduce((m, i) => {
@@ -214,2 +301,3 @@ const current = this.brick_id_to_data[i];
                             });
+                            needs_update_size = true;
                         }
@@ -227,6 +315,6 @@ closest_brick.inputs = [brick_data];
                     }
-                    this.ghost_bricks = [];
+                    const root_id = closest_brick.root || closest_brick.id;
                     for_each_brick(brick_data, tail, (i) => {
-                        this.ghost_bricks[i.id] = true;
-                        i.root = closest_brick.root || closest_brick.id;
+                        i.ui.is_ghost = true;
+                        i.root = root_id;
                     });
@@ -237,3 +325,3 @@ brick_data.is_root = false;
                     brick_data.ui.offset.y = 0;
-                    needs_update = true;
+                    workspace_needs_update = true;
                 }
@@ -243,3 +331,2 @@ }
                 if (this.brick_is_inserting) {
-                    this.ghost_bricks = {};
                     this.brick_is_inserting = false;
@@ -249,3 +336,3 @@ if (!brick_data.is_root) {
                     }
-                    needs_update = true;
+                    workspace_needs_update = true;
                 }
@@ -263,7 +350,13 @@ }
                     this.root_bricks.push(target);
+                    workspace_needs_update = true;
                 }
-                needs_update = true;
+                else {
+                    this.brick_id_to_component[target.id].forceUpdate();
+                }
             }
-            if (needs_update) {
+            if (workspace_needs_update) {
                 this.update(() => {
+                    if (!needs_update_size) {
+                        return;
+                    }
                     this.inserting_candidates.forEach(i => {
@@ -282,6 +375,10 @@ this.inserting_candidates_local_offset[i] = get_global_offset(this.brick_refs[i].current, this.froggy_ref.current);
             }
+            if (this.brick_is_inserting) {
+                const active_brick = this.brick_id_to_data[this.active_brick_id];
+                const active_brick_tail = this.brick_id_to_data[this.active_brick_tail_id];
+                for_each_brick(active_brick, active_brick_tail, (i) => i.ui.is_ghost = false);
+            }
             this.active_brick_id = undefined;
             this.brick_is_dragging = false;
             this.clear_inserting_candidates();
-            this.ghost_bricks = {};
             this.update(() => this.root_bricks_on_change());
@@ -494,3 +591,5 @@ };
         if (clean_refs) {
+            delete this.root_brick_id_to_component[brick.id];
             for_each_brick(brick, undefined, (i) => {
+                delete this.brick_id_to_component[i.id];
                 delete this.brick_refs[i.id];
@@ -530,3 +629,6 @@ delete this.brick_inputs_refs[i.id];
         brick.root = undefined;
-        for_each_brick(brick, undefined, i => i.root = id);
+        for_each_brick(brick, undefined, i => {
+            i.root = id;
+            i.ui.is_ghost = false;
+        });
         this.root_bricks.push(brick);
@@ -536,6 +638,6 @@ brick.ui.offset = offset;
     }
-    update_size(id, proxy = undefined) {
-        const ref = this.brick_inputs_refs[proxy || id].current ||
-            this.brick_parts_refs[proxy || id].current ||
-            this.brick_refs[proxy || id].current;
+    update_size(id) {
+        const ref = this.brick_inputs_refs[id].current ||
+            this.brick_parts_refs[id].current ||
+            this.brick_refs[id].current;
         this.brick_id_to_size[id] = {
@@ -560,4 +662,4 @@ h: ref.clientHeight,
                         }, className: `${styles.category} ${i === this.toolbox.activeCategory ? styles.activeCategory : ''}` }, i))),
-                    React.createElement("div", { className: styles.toolboxBricks, ref: this.toolbox_bricks_ref }, this.toolbox.categories[this.toolbox.activeCategory].map(i => root_brick_to_brick_component(this, i)))),
-                this.root_bricks.map(i => root_brick_to_brick_component(this, i))),
+                    React.createElement("div", { className: styles.toolboxBricks, ref: this.toolbox_bricks_ref }, this.toolbox.categories[this.toolbox.activeCategory].map(i => React.createElement(RootBrick, { key: i.id, workspace: this, root_brick: i })))),
+                this.root_bricks.map(i => React.createElement(RootBrick, { key: i.id, workspace: this, root_brick: i }))),
             React.createElement("div", { className: styles.mask, ref: this.mask_ref, style: {
@@ -568,74 +670,1 @@ display: this.mask_data.visibility ? 'block' : 'none',
 }
-function root_brick_to_brick_component(workspace, root_brick) {
-    const init_brick_id_to_data = (data) => {
-        workspace.brick_id_to_data[data.id] = data;
-        workspace.brick_refs[data.id] = workspace.brick_refs[data.id] || React.createRef();
-        workspace.brick_inputs_refs[data.id] = workspace.brick_inputs_refs[data.id] || React.createRef();
-        workspace.brick_parts_refs[data.id] = workspace.brick_parts_refs[data.id] || React.createRef();
-        data.parts && data.parts.forEach(i => init_brick_id_to_data(i));
-        data.inputs && data.inputs.forEach(i => init_brick_id_to_data(i));
-        data.next && init_brick_id_to_data(data.next);
-    };
-    init_brick_id_to_data(root_brick);
-    const init_brick_instance = (brick) => {
-        const id = brick.id;
-        let child;
-        if (AtomicBrickEnum[brick.type]) {
-            if (brick.type === 'atomic_text') {
-                return React.createElement("div", { key: brick.id, className: styles.atomicText },
-                    brick.ui.value[0] === ' ' ? React.createElement("div", { className: styles.atomicTextIndent }) : null,
-                    brick.ui.value);
-            }
-            const basic_fns = {
-                onChange: (value) => {
-                    if (brick.output === BrickOutput.number) {
-                        brick.ui.value = parseFloat(value) || 0;
-                        workspace.update();
-                    }
-                    else {
-                        brick.ui.value = value;
-                    }
-                    workspace.root_bricks_on_change();
-                    return brick.ui.value;
-                },
-                show: (content, cb) => {
-                    workspace.mask_data.content = content;
-                    workspace.mask_data.visibility = true;
-                    workspace.mask_data.brick_id = brick.id;
-                    workspace.update(cb || (() => { }));
-                },
-                hide: () => {
-                    workspace.mask_data.visibility = false;
-                    workspace.mask_data.brick_id = undefined;
-                    workspace.update();
-                },
-            };
-            const select_fns = Object.assign({}, basic_fns, { offset: () => {
-                    const offset = get_global_offset(workspace.brick_refs[brick.id].current);
-                    offset.y += 40;
-                    return offset;
-                } });
-            const input_fns = Object.assign({}, basic_fns, { offset: () => {
-                    const offset = get_global_offset(workspace.brick_refs[brick.id].current);
-                    offset.x++;
-                    offset.y++;
-                    return offset;
-                } });
-            const typeToInstance = {
-                atomic_input_string: () => React.createElement(Input, Object.assign({ value: brick.ui.value.toString() }, input_fns, { editing: workspace.mask_data.visibility && workspace.mask_data.brick_id === brick.id })),
-                atomic_input_number: () => typeToInstance.atomic_input_string(),
-                atomic_dropdown: () => React.createElement(Select, Object.assign({ value: brick.ui.value, options: workspace.props.atomic_dropdown_menu[brick.ui.dropdown] }, select_fns)),
-                atomic_boolean: () => typeToInstance.atomic_dropdown(),
-                atomic_button: () => React.createElement("div", { key: brick.id, className: styles.atomicButtonWrap },
-                    React.createElement("div", { className: brick.ui.className, onClick: (e) => {
-                            e.stopPropagation();
-                            workspace.props.atomic_button_fns[brick.ui.value](workspace.brick_id_to_data, brick, () => workspace.update(() => workspace.root_bricks_on_change()));
-                        } })),
-                atomic_param: () => React.createElement("div", { key: brick.id, className: styles.atomicParam }, brick.ui.value),
-            };
-            child = typeToInstance[brick.type]();
-        }
-        return (React.createElement(BrickComponent, { styles: styles, key: id, id: id, is_removing: id === workspace.active_brick_id && workspace.active_brick_needs_removing, active: id === workspace.active_brick_id, is_ghost: workspace.ghost_bricks[id], offset: brick.is_root && brick.ui.offset, output: brick.output, show_hat: brick.ui.show_hat, brick_ref: workspace.brick_refs[id], is_container: is_container(brick), brick_inputs_ref: workspace.brick_inputs_refs[id], brick_parts_ref: workspace.brick_parts_refs[id], on_drag_start: workspace.brick_on_drag_start, on_context_menu: workspace.brick_on_context_menu, parts: brick.parts ? brick.parts.map(i => init_brick_instance(i)) : [], inputs: brick.inputs ? brick.inputs.map(i => init_brick_instance(i)) : [], next: brick.next ? init_brick_instance(brick.next) : null, children: child }));
-    };
-    return init_brick_instance(root_brick);
-}

package.json

 {
   "name": "froggy",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "repository": {
@@ -5,0 +5,0 @@ "type": "git",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

163964

increased by1.15%

Lines of code

3630

increased by0.61%

Worsened metrics

Number of package files

48

decreased by-4%

No dependency changes