• [x] Add build script to compile to ES5 modules and UMD for web
• [x] Add publish script to build and publish NPM module
• [x] Add script to build demo or run demo in browser

@alyssaxuu note that you will need to choose a package name because "flowy" is already taken

Credit goes to #12 for the UMD build process.

One of the beauties of this project is to have minimum dependency, if we can use ES6 APIs to replace jQuery, it would be even more slim.

Like Element.querySelector over 1 element $('selector'), or Element.querySelectorAll() for multiple element $('selector').

This is a port to React.

• [x] Render HTML layout in React
• [x] Port all blocks to React components
• [x] Port event listeners to React lifecycle
• [x] Create adapter from React to Flowy engine
• [x] Implement minimizing left card
• [x] Improve highlighting blocks and toggle right card

This builds on the work in #37 and #38

In some cases, components may have two or more parents, which potentially could lead to these scenarios (not currently supported by flowy):

    +-------+ +-------+
    |       | |       |
    +-+---+-+ +---+---+
      |   |       |
      |   |       |
   +--+   +--+ +--+
   v         v v
+--+--+    +-+-+-+
|     |    |     |
+-----+    +-----+

    +-------+      +-------+
    |       |      |       |
    +-+---+-+      +---+---+
      |   |            |
      |   |            |
   +--+   +--+         |
   v         v         v
+--+--+   +--+--+   +--+--+
|     |   |     |   |     |
+-----+   +--+--+   +--+--+
             |         |
             |         |
             +--+   +--+
                v   v
              +-+---+-+
              |       |
              +-------+

Hi @alyssaxuu . I am trying to integrate the demo inside a modal. Sometimes I run into an alignment issue. Not sure exactly what is causing it because it seems to occur intermittently. When it happens it looks like this. Any idea what would be causing this ?

Thanks for the help.

Hello Alyssa: Congrat and thanks!!!! for your great plugin, I think best of this kind. I´m checking it and I got a problem with the drag performing after flowy. importing data: Data is displayed well but drag stopped working, I mean, when you click on an object this remains stocked in the mouse cursor and never is released. This issue happens under only one condition: on importing after start the page. I recycle output->import and works fine, I publish to database and read it rightaway and works fine, only happens when I restart and import the data from database. it is not a parsing problem, I tryed with a flowy.output string constant as data and when it is imported after page start the fails come out. Message in console is: TypeError: tempblock2 is undefined. You use two functions in main.js drag(block) and release() I "consoled" them inside with some text, and the problem is drag(block) never runs. I reclarify: this issue only happens after reloading the page and flowy.import data. Thanks in advance Alyssa for your help.

Hello, I have a Json , I want to Generate node Programmatically by using below JSON.

//---------------------DEMO JSON ---------------------------//
{
	"blockarr": [
		{
			"parent": -1,
			"id": 0
		},
		{
			"parent": 0,
			"id": 1
		}
	],
	"blocks": [
		{
			"id": 0,
			"parent": -1,
			"data": [
				{
					"name": "id",
					"value": ""
				},
				{
					"name": "name",
					"value": "RootNode"
				},
				{
					"name": "type",
					"value": "Base"
				},
				{
					"name": "blockid",
					"value": "0"
				}
			],
		},
		{
			"id": 1,
			"parent": 0,
			"data": [
				{
					"name": "id",
					"value": ""
				},
				{
					"name": "name",
					"value": "Childnode"
				},
				{
					"name": "type",
					"value": "Option"
				},
				{
					"name": "blockid",
					"value": "1"
				}
			],
		}
	]
}

//--------------- Its should appear like that-------------//

is it possible to it programmatically .

This is not an issue but more of a feature request, could there be a way to only allow certain types of blocks to attach to others, like in your demo only allow Actions and Loggers to be attached to a Trigger block. Thank you!

Having an error that if a Flowy configuration is saved at one browser resolution and imported at smaller resolution the arrows are not placed correctly on the virtual axis and blocks collide on snapping.

For instance I saved at a large resolution and imported at a smaller and all the arrows were placed above the blocks. When I click drag and snap a block and the rearrange occurs the blocks and arrows may overlap and or collide rendering the diagram unreadable.

Hello Alyssa,

First of all congratulations for this excellent work. It is very helpful.

I would like to know if you can confirm that the current code is not possible to do the actions as below:

• Conditional node
• That the process finalizes in one node.

As an example, I have added a picture with the nodes/actions that I think is not allowed currently. I have marked them in red.

Could you update the code with these actions?

I'm looking forward to hearing from you,

all my best,

José

This refactor maintains the same public API, while updating the internals.

• [x] Refactor string concatenation to string interpolation
• [x] Remove global variables and instead manage state on a simple object for clarity and flexibility
• [x] Add helper methods to consolidate common tasks
• [x] Simplify some logic for clarity

@alyssaxuu this is a subsequent update following #37

it would be super useful if there was an option to add text boxes in each blocks. i tried making one. tried to input some text into the text-box and whenever i drag and drop another block into the canvas, i just completely lose the existing text which was inserted. i am also attaching the image for your reference.

When dragging a block item to the canvas, everything works perfect.

However after you scroll the dragging does not follow your cursor, and when you drop the block item on the canvas it doesn't drop it near where your mouse is, it's like the block items drag on the window's default position rather than what you see after scroll

There has to be some provision for conditional snapping like If Else condition

I want one drag option of If Else condition which will already have two child blocks called Yes and No attached to one conditional Parent If block.

Can someone help me achieve this goal with the existing flowy code.

What i want is when i drag a single Block from the left on the Canvas it should attach two child blocks to it like "Yes" and "No"