site update

Issue imixs#231

src/site/markdown/architecture/BPMN_EMF.md

@@ -87,13 +87,13 @@ After the EMF file is defined you can need to recreate the genmodel file. Choose
 
 and create a new file ‘bpmn.genmodel’. Choose the importer ‘ecoremodel’. 
 
-<img src="./images/emf-generator-01.png" />
+<img src="../images/emf-generator-01.png" />
 
 Click on load will verify the EMF model file created before.
 
 Next select both packages in the 'Package Selection' (the glsp-graph package includes the core elements form the GLSP project)
 
-<img src="./images/emf-generator-02.png" />
+<img src="../images/emf-generator-02.png" />
 
 Click on 'Finish' to generate the *.genmodel* file.
 
@@ -102,11 +102,11 @@ Click on 'Finish' to generate the *.genmodel* file.
 Now you can generate the java classes. Before you can start, you need to change some of the details of the new *.genfile*.  Open the *.genfile* and choose the root element of the bpmn graph elements. In the property view change the package name into `org.openbpmn.glsp`
 
 
-<img src="./images/emf-generator-03.png" />
+<img src="../images/emf-generator-03.png" />
 
 Next choose the root element of your glsp graph model. In the property view change the package name to `org.eclipse.glsp`. 
 
-<img src="./images/emf-generator-04.png" />
+<img src="../images/emf-generator-04.png" />
 
 
 Change the tag `modelDirectory` to `/open-bpmn.glsp-server/src/main/java-gen` - this will be the source location for the files

src/site/markdown/build/DOCKER.md

@@ -0,0 +1,44 @@
+# Docker
+
+Open-BPMN provides a Docker image to run the BPMN modeler as a Container in Docker or Kubernetes. 
+
+The Open-BPMN Docker image is based on the [official NodeJS image (node:16-buster)](https://hub.docker.com/_/node). The container image contains a prebuild appliction and exposes the port 3000
+
+In the Dockerfile we are using the entrypoint:
+
+	ENTRYPOINT [ "yarn", "start", "--hostname=0.0.0.0" ]
+
+setting the environment param `--hostname=0.0.0.0` is important to allow access form outside the container. Find more details also [here](https://dev.to/hagevvashi/don-t-forget-to-give-host-0-0-0-0-to-the-startup-option-of-webpack-dev-server-using-docker-1483) and [here](https://github.com/theia-ide/theia-apps/tree/master/theia-cpp-docker). 
+
+## Build
+
+To build the docker image from sources run:
+
+	$ docker build . -t imixs/open-bpmn
+
+
+## Run
+
+To run the docker image locally run:
+
+	$ docker run --name="open-bpmn" \
+	  --rm \
+      -p 3000:3000 \
+      imixs/open-bpmn
+      
+After starting the container the applicaiton is available on 
+
+	http://localhost:3000
+	      
+To stop the container run:
+
+	$ docker stop open-bpmn
+
+
+# Push to Docker-Hub
+
+To push the image manually to a docker repo:
+
+	$ docker build . -t imixs/open-bpmn:latest
+	$ docker push imixs/open-bpmn:latest
+

src/site/markdown/build/index.md

@@ -0,0 +1,50 @@
+
+# Build and Run
+
+To build the complete project run
+
+    $ ./build.sh
+
+This build script will build the server module with maven and the client modules with yarn. The script finally automatically starts the application.
+
+The Application can be started from a Web Browser
+
+    http://localhost:3000/
+
+**Note:** When you have installed Open-BPMN as an Extension in your VS-Code platform, you need to disable the extension before you start development!
+
+## Locally build for Development
+
+During development you can run the frontend and backend in separate tasks. This gives you more control over the CLient and the Backend Component.
+
+To build & start the GLSP Server only, run:
+
+    $ ./build.sh -b
+
+To build & start the GLSP Client only, run:
+
+    $ ./build.sh -f
+
+To start the GLSP Client without building, run:
+
+    $ ./build.sh -s
+
+For a full clean & reinstall of the GLSP Client (after upgrades), run:
+
+    $ ./build.sh -c -i
+
+You will find more details in the [Client Section](./open-bpmn.glsp-client/README.md) and the [Server Section](./open-bpmn.glsp-server/README.md).
+
+### NodeJS
+
+We use nodejs on Linux Debian during development. To manage version of nodejs in debian see: https://phoenixnap.com/kb/update-node-js-version
+
+For development with Eclipse Theia the expected version is ">=10.11.0 <17". For that reason we tested with following version 16.11.0. You can list all current versions [here](https://nodejs.org/en/download/releases/).
+
+In case you have install npm you can install a specific nodejs version with:
+
+    $ sudo n 16.11.0
+
+To install typescript run:
+
+    $ sudo npm install -g typescript

src/site/markdown/glsp-client/BPMN_PROPERTIES.md

@@ -0,0 +1,115 @@
+# The BPMN Properties Panel
+
+Open-BPMN provides a property panel within the diagram plane to be used to edit and update BPMN Element properties.
+
+<img src="../images/property_panel-01.png" />
+
+
+## JSONForms
+
+The `bpmn-property-panel.tsx` is implementing a `SelectionListener` to display the properties of a selected BPMN element.
+The input form which contains the different input elements is based on [JsonForms](https://jsonforms.io/). JsonForms expects three JSON schemata to describe the data elements and types:
+
+ * data - holds the values of the data items
+ * schema - describes the type of the data items
+ * uischema - contains layout information
+
+The schemata is generated server side by the corresponding BPMN Extension by implementing the method `buildPropertiesForm`
+
+
+	@Override
+	public void buildPropertiesForm(final BPMNBaseElement bpmnElement, final DataBuilder dataBuilder,
+            final SchemaBuilder schemaBuilder, final UISchemaBuilder uiSchemaBuilder) {
+            ....
+	}
+
+# Action Events
+
+The BPMN Property Panel reacts and produces different Action events to updated data in both directions.
+
+## The SelectionListener
+
+Mainly on the BPMN PropertyPanel reacts on the GLSP SelectionChanged event. If the selection changed and onyl one BPMN Element was selected In this case the panel refreshes the content for the Form Panel with the UISchema and Data provided by the selected element. Each BPMN Element provides the following arguments holding the corresponding JsonForms schema:
+
+* JSONFormsData - the data holding key/value pairs
+* JSONFormsSchema - the data schema
+* JSONFormsUISchema - the UI schema
+
+In addition the panel also computes the last selected category. This is used in the setState method to restore the last category if the element type has not changed.
+
+## The BPMNPropertyPanelToggleAction
+
+The `BPMNPropertyPanelToggleAction` is a custom action used by Open-BPMN to toggle the display state of the Property Panel. The panel either expands tis height to 50% or minimizes the panel. This is a client side action event triggered by custom menu commands defined for the Theia and VSCode integration.
+
+## The BPMNApplyPropertiesUpdateOperation
+
+The `BPMNApplyPropertiesUpdateOperation` is a client side custom action, that directly manipulates the BPMN model representation on server side. The action is send from the client property panel to the server each time the data in an input field changed (onchange).
+
+The action is handled on the server by the `BPMNApplyPropertiesUpdateOperationHandler` which is responsible for updating the model representation accordingly.
+
+The Action is providing the Element ID, a JSON data structure with the new/updated data and an optional category. The category can be used to update only parts on an BPMN element. This is to optimize the update performance as the data structure can become very complex or various BPMN elements.
+
+The update process is handled by the [Extension Mechanism](./BPMN_EXTENSIONS.md) in a transparent way. 
+
+## The BPMNPropertyPanelUpdateAction
+
+In some cases the `BPMNApplyPropertiesUpdateOperation` causes on the server side a more complex data update that requires an update of the property panel on the client side too. For example adding a new Signal or Diagram Definition is such a situation where the complete panel need to be updated on the client side.
+
+In this cases the server sends a `BPMNPropertyPanelUpdateAction` to the client. The BPMN Property Panel reacts on this kind of action and updates the panel content.
+
+# Custom Renderer SelectItemControl
+
+Most of the data to be displayed can be handled by JsonForms out of the box, so we only need to provide the corresponding schemata. But in some cases - e.g. the SignalEvent option or the Imixs-Workflow extensions - the corresponding input form is more complex. For this we implement a [custom renderer](https://jsonforms.io/docs/tutorial/custom-renderers) to provide an optimized input form.
+
+The `SelectItemControl` is a custom renderer for selectItems represented as RadioButtons, CheckBoxes or ComboBoxes.
+The control can handle single String values (represented as a Radio Button or ComboBox) or Arrays of Strings (represented as Checkboxes).
+
+In addition the renderer support label|value pairs separated by a | char.
+
+`My Value | val-1`
+
+This allows to separate the label and data value in one string.
+
+In addition the layout for Checkboxes and RadioButtons can be customized by the option `orientation=horizontal|vertical`.
+
+<img src="../images/property-panel-selectitem.png" />
+
+Even the user can select the option by the name, internally the value will be mapped to the id. 
+## UI Schema
+To set the UISchema using  a radio button:
+
+```java
+      Map<String, String> selectVertical = new HashMap<>();
+      selectVertical.put("format", "selectitem");
+      selectVertical.put("orientation", "vertical");
+	  uiSchemaBuilder //
+                    .addElement("keyownershipfields", "Owner", selectVertical)
+```
+
+To set the UISchema using  a comboBox:
+
+```java
+      Map<String, String> selectVertical = new HashMap<>();
+      selectVertical.put("format", "selectitemcombo");
+	  uiSchemaBuilder //
+                    .addElement("keyownershipfields", "Owner", selectVertical)
+```
+
+## Schema
+
+The schema defines the option list as `label | value` pairs
+
+```java
+	String[] enabledOption = { "Yes|true", "No|false" };
+	schemaBuilder.addProperty("myitem", "string", "", enabledOption);
+```
+
+## Data
+
+The data can be either a single string displayed as a radio-button or comboBox. Or a String Array displayed as check-boxes.
+
+```java
+ 	dataBuilder //
+			.addData("keyupdateacl",mystringValue) //
+			.addDataList("keyownershipfields",myValueList)) //
+```

src/site/markdown/glsp-client/BPMN_ROUTER.md

@@ -0,0 +1,9 @@
+# The BPMN Routing
+
+In Open-BPMN we use the [Sprotty Manhattan Router](https://github.com/eclipse/sprotty/blob/master/packages/sprotty/src/features/routing/manhattan-edge-router.ts) connecting BPMN elements with BPMN flows. We define some custom implementation to fullfil special requirements to BPMN diagrams like the rounded corners.
+
+<img src="../images/bpmn-routing-01.png" />
+
+## Rounded Corners
+
+To support rounding corners we define a custom `BPMNSequenceFlowView` based on the GLSP `PolylineEdgeViewWithGapsOnIntersections`. This custom View implementation computes rounded corners for the edges.