Merge pull request #3 from ozovalihasan/main-parts

Update the user interface
ozovalihasan · Jun 4, 2021 · 837b0b2 · 837b0b2
2 parents c774c3d + ef15b35
commit 837b0b2
Show file tree

Hide file tree

Showing 51 changed files with 13,907 additions and 1,466 deletions.
diff --git a/README.md b/README.md
@@ -33,9 +33,9 @@ Please check [live demo of EAD.](https://ead.ozovalihasan.com/)
 
 Preparing ERD is the first step of any Ruby on Rails project. But, implementing ERD to a Ruby on Rails project can be time-consuming and repetitive. 
 
-More, arrows are used to represent associations on ERD. It can be hard to follow these arrows if any entity has a lot of associations.
+More, arrows are used to represent associations on ERD. It can be hard to follow these arrows if any entity has a lot of relations.
 
-EAD is designed to solve these two problems. Firstly, EAD is using blocks moved by the drag-and-drop gesture. Any block can be collided and expanded. It allows reading associations by going from outer blocks to inner ones easily(this order may change for advanced blocks.).
+EAD is designed to solve these two problems. Firstly, EAD is using blocks moved by the drag-and-drop gesture. Any block can be collided and expanded. It allows reading associations by going from top to bottom easily(this order may change for advanced blocks.).
 
 Secondly, a JSON file can be produced by using EAD quickly and this JSON file can be implemented into a Ruby on Rails project by EAD gem. So, any project can be started with ready associations without consuming any time.
 
@@ -64,21 +64,26 @@ Then, there are two choices to use the generated JSON file;
 
 - If all files are generated as expected, run `bundle exec rails db:migrate`
 
-- Three [videos](https://drive.google.com/drive/folders/1PrS0zW3H-ZKMjhHDAXTN2vRz-flhLDdE?usp=sharing) are provided as example
-
 ### Features
 
+- All related buttons of a block is shown when the cursor is hovering on ![plus](./documents/images/plus.png).
 - Any block can be collided by using ![collide button](./documents/images/collide.png) and expanded ![expand button](./documents/images/expand.png).
 - Blocks in another block can be aligned vertically by using ![vertical button](./documents/images/align-vertical.png) and horizontally by using ![horizontal button](./documents/images/align-horizontal.png).
 - Any drop area can be chosen to work by using flag (checkbox without flag ![flag-uncheck](./documents/images/flag-uncheck.png) and with flag ![flag-check](./documents/images/flag-check.png) ).
   * Selected blocks' color is ![blue-selected](./documents/images/blue-selected.png).
 - All enabled blocks can be moved with a move cursor ![move-enable](./documents/images/move-enable.png). Disabled blocks cannot be moved(![move-disable](./documents/images/move-disable.png)). Also, each block can be moved with other blocks inside of them.
-  * Enabled blocks' color can be any of ![blue-1](./documents/images/blue-1.png) ![blue-2](./documents/images/blue-2.png) ![blue-3](./documents/images/blue-3.png).
+  * Enabled blocks' color can be any of ![blue-1](./documents/images/blue-1.png) ![orange](./documents/images/orange.png) ![white](./documents/images/white.png).
   * The color of disabled blocks and drop areas is ![gray](./documents/images/gray.png).
   * The color of coupled dragged blocks and drop areas is ![yellow](./documents/images/yellow.png).
   * The color of dragged blocks being removed is ![red](./documents/images/red.png).
-- All entities can be cloned by using ![clone](./documents/images/clone.png). The color of clone entities is ![orange](./documents/images/orange.png). 
-- EAD can be used in compact mode by clicking the 'Compact Mode' button. Compact mode hides buttons used rarely to provide a better working environment.
+- A clone of any entity can be added into the selected block by using ![clone](./documents/images/clone.png). The color of clone entities is ![orange](./documents/images/orange.png). If a clone button is shown next to a cloned block, another clone of the real block of the cloned block can be added into the selected block.
+- Any block can be added into the selected block by using ![departure](./documents/images/departure.png). An allowed block can be added into selected block by using ![arrival](./documents/images/arrival.png).
+- Any block can be deleted by using ![delete](./documents/images/delete.png).
+- 'has_many' association can be added by using ![has_many](./documents/images/has_many.png).
+- 'has_one' association can be added by using ![has_one](./documents/images/has_one.png).
+- ':through' association can be added by using ![through](./documents/images/through.png).
+- Any EAD file can be uploaded by hovering on "Upload EAD" and selecting a file.
+- EAD can be used in compact mode by clicking the 'Compact Mode' button. Compact mode hides almost all buttons to provide an presentation.
 - EAD can be reset to the initial state by clicking the 'Reset' button.
 - EAD can be saved to localStorage by clicking the 'Save' button.
 - EAD can be installed with data from localStorage by clicking the 'Install Saved Data' button.

diff --git a/documents/how-to-use.md b/documents/how-to-use.md
@@ -12,15 +12,14 @@ After reading this document, you will know:
 The Types of Associations
 -------------------------
 
-EAD supports five types of associations:
+EAD supports seven types of associations:
 
 * [`belongs_to`](#The-belongs_to-Association)
 * [`has_one`](#The-has_one-Association)
 * [`has_many`](#The-has_many-Association)
 * [`has_many :through`](#The-has_many-:through-Association)
 * [`has_one :through`](#The-has_one-:through-Association)
 
-
 In the remainder of this documentation, you'll learn how to declare and use the various forms of associations. But first, a quick introduction to the situations where each association type is appropriate.
 
 [`belongs_to`]: https://api.rubyonrails.org/classes/ActiveRecord/Associations/ClassMethods.html#method-i-belongs_to
@@ -336,101 +335,120 @@ end
 
 EAD has 'attribute' block to add an attribute to any entity.
 
-EAD has 'attribute container' block to put all attributes in an organized block. There is no difference between putting all attributes into an 'entity' block and an 'attribute block' in terms of gem and generated results.
-
-EAD has 'entity container' block to put all entities in an organized block. There is no difference between putting all entities into any block and an 'entity block' in terms of gem and generated results.
+EAD has 'entity container' block to put all entities in an organized block. Entities and their attributes can be defined in this container.
 
-## Entity Clones
+EAD has 'entities & associations' block to define any association. In this block, only [clone entities](#Clone-Entities) and associations can be used.
+## Clone Entities
 
-There is no difference between a clone and real entities if their names are the same for the gem.
+Clone entities can be added by selecting any 'entities & associations' or association block inside of 'entities & associations' block and clicking ![clone](./images/clone.png).
 
+![no selection EAD](./images/no-selection.png)
+![prepare clone EAD](./images/prepare-clone.png)
+![after clone EAD](./images/after-clone.png)
+![deselect block EAD](./images/deselect.png)
 ![same names of real and clone entities EAD](./images/clone-and-real.png)
 
-Clones are used to reference real entities.
+Entity clones are used to define associations between two entity.
+![has_many EAD](./images/has-many-ead.png)
+
+The color of entity(called 'real entity') is ![blue-1](./images/blue-1.png). 
+
+The color of clone entity is ![orange](./images/orange.png). 
+
 
+- Model and migration files are generated for same real and clone names;
 
-- Model and migration files are generated for name real and clone names;
+  ![has_many EAD](./images/has-many-ead.png)
 
-  ![same names of real and clone entities in an association EAD](./images/same-name-clone-real.png)
 
-  ```ruby
-  class User < ApplicationRecord
-    has_many :relations
+```ruby
+  class Author < ApplicationRecord
+    has_many :books
   end
 
-  class Relation < ApplicationRecord
-    belongs_to :user 
+
+  class Book < ApplicationRecord
+    belongs_to :author 
   end
 
-  class CreateUsers < ActiveRecord::Migration[6.1]
+
+  class CreateAuthors < ActiveRecord::Migration[6.1]
     def change
-      create_table :users do |t|
+      create_table :authors do |t|
+        t.string :name
 
         t.timestamps
       end
     end
   end
 
-  class CreateRelations < ActiveRecord::Migration[6.1]
+
+  class CreateBooks < ActiveRecord::Migration[6.1]
     def change
-      create_table :relations do |t|
-        t.references :user, null: false, foreign_key: true 
+      create_table :books do |t|
+        t.datetime :published_at
+        t.references :author, null: false, foreign_key: true 
 
         t.timestamps
       end
     end
   end
-  ```
+```
 
 - Model and migration files are generated for different real and clone entity names;
 
-  ![different names of real and clone entities in an association EAD](./images/different-name-clone-real.png)
+![different names of real and clone entities in an association EAD](./images/different-name-clone-real.png)
 
-  ```ruby
-  class User < ApplicationRecord
-    has_many :following_relations, class_name: "Relation", foreign_key: "famous_person_id"
+```ruby
+  class Author < ApplicationRecord
+    has_many :novels, class_name: "Book", foreign_key: "publisher_id"
   end
 
-  class Relation < ApplicationRecord
-    belongs_to :famous_person , class_name: "User"
+  class Book < ApplicationRecord
+    belongs_to :publisher , class_name: "Author"
   end
 
-  class CreateUsers < ActiveRecord::Migration[6.1]
+  class CreateAuthors < ActiveRecord::Migration[6.1]
     def change
-      create_table :users do |t|
+      create_table :authors do |t|
+        t.string :name
 
         t.timestamps
       end
     end
   end
 
-  class CreateRelations < ActiveRecord::Migration[6.1]
+  class CreateBooks < ActiveRecord::Migration[6.1]
     def change
-      create_table :relations do |t|
-        t.references :famous_person, null: false, foreign_key: { to_table: :users }
+      create_table :books do |t|
+        t.datetime :published_at
+        t.references :publisher, null: false, foreign_key: { to_table: :authors }
 
         t.timestamps
       end
     end
   end
-  ```
 
-## Delete Blocks
+```
 
-A dragged block is deleted if it is not paired with another block. They are shown with ![removed block](./images/red.png). 
-## Warnings
+## How to Add associations
 
-⚠️ The name of entities and attributes can be in any form like 'account_history', 'Account_history', 'Account_histories', 'account_histories', 'AccountHistory', and 'AccountHistories', but space between words is not allowed.
+- 'has_many' association can be added by using ![has_many](./images/has_many.png) or has_many block.
+- 'has_one' association can be added by using ![has_one](./images/has_one.png) or has_one block.
+- ':through' association can be added by using ![through](./images/through.png) or :through block.
 
-⚠️ EAD gem allows using only one ':through' block inside of 'entity' block. It is planned to fix this issue.
+![association buttons EAD](./images/association-buttons.png)
+![association blocks EAD](./images/association-blocks.png)
 
-⚠️⚠️⚠️ If any real entity is put into one of its clones, it may cause different problems(For example, deleting a real entity inside of one of its clones breaks EAD). It is planned to fix this issue with the next versions.
+## Delete Blocks
 
-## Suggested Approach
+A dragged block is deleted if it is not paired with another block. They are shown with ![removed block](./images/red.png). 
+Also, any block can be deleted by using ![delete](./images/delete.png).
+## Warnings
 
-It is highly suggested to put all real entities into one block and use clones for associations. But, this approach isn't mandatory.
+⚠️ The name of entities and attributes can be in any form like 'account_history', 'Account_history', 'Account_histories', 'account_histories', 'AccountHistory', and 'AccountHistories', but space between words is not allowed.
 
-![suggested approach EAD](./images/separate-blocks.png)
+⚠️ EAD allows using only one clone entity inside of any association block.
 
 ## Edge Cases
 

diff --git a/documents/images/after-clone.png b/documents/images/after-clone.png
diff --git a/documents/images/align-horizontal.png b/documents/images/align-horizontal.png
diff --git a/documents/images/align-vertical.png b/documents/images/align-vertical.png
diff --git a/documents/images/arrival.png b/documents/images/arrival.png
diff --git a/documents/images/association-blocks.png b/documents/images/association-blocks.png
diff --git a/documents/images/association-buttons.png b/documents/images/association-buttons.png
diff --git a/documents/images/blue-1.png b/documents/images/blue-1.png
diff --git a/documents/images/blue-2.png b/documents/images/blue-2.png
diff --git a/documents/images/blue-3.png b/documents/images/blue-3.png
diff --git a/documents/images/clone-and-real.png b/documents/images/clone-and-real.png
diff --git a/documents/images/clone.png b/documents/images/clone.png
diff --git a/documents/images/collide.png b/documents/images/collide.png
diff --git a/documents/images/delete.png b/documents/images/delete.png
diff --git a/documents/images/departure.png b/documents/images/departure.png
diff --git a/documents/images/deselect.png b/documents/images/deselect.png
diff --git a/documents/images/different-name-clone-real.png b/documents/images/different-name-clone-real.png
diff --git a/documents/images/expand.png b/documents/images/expand.png
diff --git a/documents/images/flag-check.png b/documents/images/flag-check.png
diff --git a/documents/images/flag-uncheck.png b/documents/images/flag-uncheck.png
diff --git a/documents/images/has-many-ead.png b/documents/images/has-many-ead.png
diff --git a/documents/images/has-many-through-ead.png b/documents/images/has-many-through-ead.png
diff --git a/documents/images/has-one-ead.png b/documents/images/has-one-ead.png
diff --git a/documents/images/has-one-through-ead.png b/documents/images/has-one-through-ead.png
diff --git a/documents/images/has_many.png b/documents/images/has_many.png
diff --git a/documents/images/has_one.png b/documents/images/has_one.png
diff --git a/documents/images/move-disable.png b/documents/images/move-disable.png
diff --git a/documents/images/move-enable.png b/documents/images/move-enable.png
diff --git a/documents/images/no-selection.png b/documents/images/no-selection.png
diff --git a/documents/images/plus.png b/documents/images/plus.png
diff --git a/documents/images/polymorphic-ead.png b/documents/images/polymorphic-ead.png
diff --git a/documents/images/prepare-clone.png b/documents/images/prepare-clone.png
diff --git a/documents/images/project.gif b/documents/images/project.gif
diff --git a/documents/images/same-entities-has-many-trough.png b/documents/images/same-entities-has-many-trough.png
diff --git a/documents/images/same-name-clone-real.png b/documents/images/same-name-clone-real.png
diff --git a/documents/images/self-joins-ead.png b/documents/images/self-joins-ead.png
diff --git a/documents/images/separate-blocks.png b/documents/images/separate-blocks.png
diff --git a/documents/images/through.png b/documents/images/through.png
diff --git a/documents/images/white.png b/documents/images/white.png