Insert rules

Adding elements in the form editor is done by reading definitions based on element type and inserting the html after transforming it by adding id, names and connecting fields if any to the TDF.

We have 6 different element types: label, button, field, block, record and form. The label button and field can all be represented by using the name "element" as well so you do not need to make individual rules for each of them. The name "any" can be used to match any type, but a search will be done by specific first then any. Each of the elements have their own rules when it comes to how they behave. 

To make this as easy as possible to add new element, each of them have some defined rules to set using data attributes in the definition. The rules defines what the element should do when element of different types are dropped on them. All drop elements will be one of the 6 different types we have. The definition used are the one on the dropped element.

addinempty	If the element we try to drop the new element to is defined in this and it is emptry, we add the new element direct into it. Ex. data-addinempty="row column"  If the element we drop new element to is a emptry row or a empty column, we add the element direct to it
addto	This will look at the setting Before or After selected by the user. If the element type is one in the list the element will be added before or after this element

How to apply rules to an element

The structure of applying rules are hitelement-hitsubtype-todo.

Ex. of a simple label element that will add a label with a h1 text wit a . to give you an ancer to start editing from

<div id="t-label_h1" data-addinempty="block-any-direct record-any-withblock=t-block_row form-any-rec" \
     data-addto="element-any-add block-any-add record-any-withblock=t-block_row form-any-rec">
  <div id="{{NEWLABEL}}" data-elementtype="label" class="container-fluid"><h1>.</h1></div>
</div>

This has a addinempty and a addto definition. A rule always have 3 parts that have different meaning.

First element of rule

any	Match any element
block	Match on a block type element
button	Match on a button type element
element	Match on any button, label and field element.
field	Match on field element
form	Match on form element
label	Match on label element
record	Match on record element

Second part of the rule

This is the subtype of the first element. The any label can be used to match any element.

Button subtype

action	Match action with data-action="deactionname"
any	Match any
custom	onclick custom function
link	a link with a href

Label subtype

The label subtype is any tag in lower case that use used with the label or any.

Field subtype

The field is either input, select, textarea or any.

Block subtype

any	Will match any sub type element
column	Match an element with a col-x element
row	Match an element with a row class

Third part of rule

The third part is the action to do. Since there are different types for rules, we will describe each of them in a own section.

Add in empty rules

These rules apply if the element you drop to is empty. The reason  to have empty element rules are that some element should fill empty elements on drop and some should add surrounding blocks. To add these rules on a element locate the div with id="t-elmementtype_subtype" and add data-addinempty="the rules here" to it.

add	Add to end or before the hit element based on what is set for element insert in gui
direct	Overwrite the inner html in the element.
rec	Find a record from start or end of the form based in insert in gui, set it as the new drop to element and do a new insert action.
row	Find a row block based on where you are. Since the element it empty you would never apply a row rule to record or form, so we go up until we find a block of the subtype row and apply this the new drop to element and do a new insert action.
withblock	First add a block where you are and then add the current selection to the block with the rules of the block

Add to rules

These rules apply if the element to drop to is not empty. You need to make sure that any none empty element will be able to add the dropped element, if not you get a add fail and the element is not inserted. The selected element can then be dropped somewhere else instead. 

To add these rules on a element locate the div with id="t-elmementtype_subtype" and add data-addto="the rules here" to it.

add	Add to end or before the hit element based on what is set for element insert in gui
insert	Add to the start or end of your children based on insert rules set in gui
parent	Select one level up in the tree and do a new insert action.
rec	Find a record from start or end of the form based in insert in gui, set it as the new drop to element and do a new insert action.
row	The rules to find a row in addto rules are a little more complicated than the on in empty rules. If you get hit on form and record, you will then have to look into these structures for rows. Based on insert in gui the search for a block element will go from first block to last or last to first depending on what is set in gui. If you get a hit form any other element, we will start up in the structure until we find a block of subtype row.
withblock	First add a block where you are and then add the current selection to the block with the rules of the block

Examples of what happen when you drop a element

To exemplify how the rules are used we will add a few examples from the most advanced to the simples.

Drop h1 label on form with only a empty record

<div id="t-label_h1" data-addinempty="block-any-direct record-any-withblock=t-block_row form-any-rec" \
      data-addto="element-any-add block-any-add record-any-withblock=t-block_row form-any-rec">
   <div id="{{NEWLABEL}}" data-elementtype="label"><h1>.</h1></div>
</div>

The element dropped

<div data-elementtype="form" class="">
  <div class="container-fluid" data-elementtype="record" data-tablename="Test3" data-formdataaction="first">
  </div>
</div>

The for element that it is dropped into and the element hit is the div with data-elementtype="form"

We assumes that element insert is after. Rules that apply then is:

1. Label h1 dropped on form with on record object skipped addinempty rules and match form-any-rec in addto rules
2. The div with element type record is set as the drop target and the drop is restarted with that as target
3. The record is empty so addinempty rule is selected and the record-any-withblock=t-block_row is the matched one
4. A new drop with block t-block_row is done to the record target and the resulting element from that insert is set as the target for h1 label
5. The h1 label then matched a empty block of subtype row by the block-any-direct rule and add the h1 label into the block

The result is the drop target for the next example.

Drop text field on form with only record with a heading

<div id="t-field_text" data-addinempty="block-any-direct record-any-withblock=t-block_row form-any-rec" \
      data-addto="element-any-add block-any-add record-any-withblock=t-block_row form-any-rec">
    <div class="col-6" data-elementtype="field">
        <input type="text" id="{{NEWFIELD}}" class="form-control">
    </div>
</div>

The element dropped

<div data-elementtype="form">
  <div data-elementtype="record" data-tablename="Test3" data-formdataaction="first">
    <div data-elementtype="block">
      <div id="label1" data-elementtype="label"><h1>Form test no 3<br></h1></div>
    </div>
  </div>
</div>

The for element that it is dropped into (also result from previous example)

We assumes that element insert is after. When dropping the field of text, we hit the form element (that is we drop on the outside of the header). Rules that apply then is:

1. The text field is dropped on outside of the h1 element and the form div is hit. The form is not empty so we match a addto=form-any-rec
2. Next the record is matched and the field is restarted with that as a target
3. The record is no longer empty so we match the addto=record-any-withblock=t-block_row meaning we should add the block to the record, select it and restart text field with that, so what happens when we do insert the new t-block_row to record?
   1. A new insert element is selected an a new insert command is started with target record div. The insert element is t-block_row, and the target is the form element.
   2. The record is not empty so the input addto=record-any-insert is matched and the block is added to the end of children in record
   3. The new block is passed back as the insert element to text field
4. The text field now match block-any-direct and overwrites the inner html of the empty row

Drop a block into a record with on label in

<div id="t-block_row"  data-addinempty="block-col-row block-any-add record-any-direct form-any-rec" \
     data-addto="any-any-row  block-row-add record-any-insert form-any-rec">
  <div data-elementtype="block" class="row py-1">.</div>
</div>

The element dropped and it is dropped into the same element as previous example

We assumes that element insert is after. When dropping the field of text, we hit the form element (that is we drop on the outside of the header). Rules that apply then is:

1. The block row is dropped and the record div is hit. The record is not empty so we match a addto=record-any-insert that simply add the row into the form. It will be in front on on the back of the children elements depending on what the element insert is set to in the gui