Merge pull request #281 from ditrit/feature/add_properties

Feature: update documentation

Author: Zorin95670

changelog.md

@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html)
 
+## [Unreleased]
+
+## Added
+
+- Translation for plugin display name.
+
+## Changed
+
+- Use default file name `logo.svg` for plugin icon.
+
 ## [0.27.3] - 2024/08/08
 
 ## Fixed

guides/documentations/configuration.md

@@ -57,6 +57,10 @@ In this part, you will see how you can:
 - `keysBinding`: Define key binding for actions.
 - `i18n`: Define all specific translations of your plugin.
 
+## Logo of your plugin
+
+If you want a specific icon for your plugin, you have to add `logo.svg` inside folder `public/icons`.
+
 ## Tag your plugin
 
 To help users understand the usage of your plugin, you can tag it using two types of tags:
@@ -180,15 +184,20 @@ new DefaultConfiguration({
 })
 ```
 
-Currently, Leto-Modelizer utilizes only the parser error translations from the i18n object.
-Here is an example of how to add a specific translation key for parser errors:
+Currently, Leto-Modelizer uses :
+- A display name from the i18n object.
+- the parser error translations from the i18n object.
+
+Here is an example of default i18n object:
 
 ```js
 new DefaultConfiguration({
   i18n: {
     'en-us': {
+      displayName: 'Your plugin name.',
       parser: {
         error: {
+          // Add translations for parser here.
           test: 'test',
         },
       },

guides/documentations/essentials.md

@@ -27,11 +27,13 @@ ComponentAttributeDefinition.js, // Class that defines Component Attributes' dat
 ComponentDrawOption.js,          // Class that represents option for the Component drawing.
 ComponentLink.js,                // Class that links Components together.
 ComponentLinkDefinition.js,      // Class that defines of the link between Components.
+ComponentRenderer.js             // Class that render each components to draw the diagram.
+LinkRenderer.js                  // Class that render each links to draw the diagram.
 ParserLog.js,                    // Class that represents a parsing log. Used by the DefaultParser as default log.
 FileInformation.js,              // Class that represents the object to store all file information.
 FileInput.js,                    // Class that represents the object to store the file content.
 Tag.js,                          // Class that represents a tag in Leto-modelizer. Used by the DefaultConfiguration class.
-Variable.js,                     // Class that represents a variable in a file of a diagram. Used by the DefaultData class.
+Variable.js                      // Class that represents a variable in a file of a diagram. Used by the DefaultData class.
 ```
 
 | Plugin lifecycle |
@@ -41,7 +43,7 @@ Variable.js,                     // Class that represents a variable in a file o
 This is the default lifecycle of plugin usage in Leto Modelizer.
 
 As you can see, plugin-core can be divided in 5 distinct parts:
-- Metadata managment
+- Metadata management
 - Generate components from source files (Parser)
 - Generate source files from components (Renderer)
 - Draw diagrams
@@ -161,7 +163,11 @@ By default, the DefaultDrawer is using [D3 library](https://d3js.org/) to draw t
 
 ### Custom Layout
 
-We use the [Elk library](https://eclipse.dev/elk/) to automatically arrange all components with optimal position. Check out the ElkLayout Class to learn how Elk is used for generating a layout. We structured the code to be able to implement another way of managing the layout. Check out the DefaultLayout Class with `arrangeComponentsPosition` and `repositionComponent` methods that can be overridden to implement your own algorithm for automatic components layout.
+We use a custom algorithm to automatically arrange all components with optimal position.
+
+We structured the code to be able to implement another way of managing the layout.
+
+Check out the DefaultLayout Class with `generateComponentsLayout` and `resize` methods that can be overridden to implement your own algorithm for automatic components layout.
 
 ### Custom component template
 
@@ -222,10 +228,9 @@ Here you will find a diagram summarizing the key steps in the plugin-core proces
 ## Going further
 
 Components have the (internal) id and the external id.
-These two differs in their usage, the id is mostly used internally (drawing, links, etc...) and should never be changed once the component is created.
+These two differ in their usage, the id is mostly used internally (drawing, links, etc...) and should never be changed once the component is created.
 Whereas the external id (defaulted to the id's value), is used for all other purposes and this one is to be seen by the user of Leto-Modelizer.
-As the id is used for all internal matters, several components can have the same external id and it won't affect any links or anything else 
-(for an example see terrator-plugin).
+As the id is used for all internal matters, several components can have the same external id, and it won't affect any links or anything else (for an example see terrator-plugin).
 
 Here is a sum up:
 

guides/migrations/0.27.2_to_0.X.X.md

@@ -0,0 +1,40 @@
+# Migrate from version 0.27.2 to 0.X.X
+
+## Add translation for your plugin display name
+
+```js
+// Before:
+new DefaultConfiguration({
+  // (...)
+  i18n: {
+    'en-US': {
+      parser: {
+        error: {
+          // (...)
+        },
+      },
+    },
+  }
+})
+
+// After:
+new DefaultConfiguration({
+  // (...)
+  i18n: {
+    'en-US': {
+      displayName: 'Your plugin name',
+      parser: {
+        error: {
+          // (...)
+        },
+      },
+    },
+  }
+})
+```
+
+## Rename you plugin icon
+
+Before, you certainly have an `public/icons/plugin-name.svg` like `public/icons/terrator-plugin.svg` in terrator-plugin.
+
+Now, you have to rename it in `public/icons/logo.svg`.

guides/svg/template.md

@@ -110,6 +110,48 @@ This function will return the svg string of the specified icon name from resourc
 
 You have to add ` | safe ` in the templating, **otherwise the image won't be added to the final output**.
 
+### Add custom variable/function
+
+If you want to add custom variable or function, you can override these methods in `DefaultDrawer`:
+- `initComponentRenderer`: to customize component rendering.
+- `initLinkRenderer`: to customize link rendering.
+
+Here is an example of `DefaultDrawer` overriding:
+
+```js
+class CustomComponentRenderer extends ComponentRenderer {
+  getTemplateData(component) {
+    return {
+      ...super.getTemplateData(component),
+      // Your custom variable/function here
+      toto: 'toto',
+    };
+  }
+}
+
+class CustomLinkRenderer extends LinkRenderer {
+  getTemplateData(link) {
+    return {
+      ...super.getTemplateData(link),
+      // Your custom variable/function here
+      toto: 'toto',
+    };
+  }
+}
+
+class CustomDrawer extends DefaultDrawer {
+  initComponentRenderer(readOnly) {
+    return new CustomComponentRenderer(this.pluginData, this.viewport, readOnly);
+  }
+
+  initLinkRenderer(readOnly) {
+    return new CustomLinkRenderer(this.pluginData, this.viewport, readOnly);
+  }
+}
+```
+
+And then you can use `{{ toto }}` in your component/link template.
+
 ## Step by step
 
 ### 1. Create a valid definition for a component