### Build and Run Project

Source: https://github.com/besley/slickflow/blob/master/source/sfd/ClientApp/README.md

Commands to build and start the project after installing dependencies.

```bash
npm start
```

--------------------------------

### Install Dependencies

Source: https://github.com/besley/slickflow/blob/master/source/sfd/ClientApp/README.md

Command to install all necessary project dependencies using npm.

```bash
npm install
```

--------------------------------

### Start Process Instance

Source: https://github.com/besley/slickflow/wiki/Slickflow-Quick-Start-Tutorial

Initiates a new process instance and creates associated task nodes. Requires a WorkflowService instance.

```csharp
IWorkflowService wfService = new WorkflowService( );
var wfResult = wfService.CreateRunner("10", "jack")
           .UseApp("PS-100", "Large-Car-Order", "PS-100-LX")
           .UseProcess("LargeOrderProcessCode")
           .Start();

```

--------------------------------

### Create Start Node

Source: https://github.com/besley/slickflow/wiki/Slickflow-Coding-Graphic-Model-User-Manual

Defines the starting point of a process flow. Specify the activity name and a unique activity code for the start node.

```csharp
pmb.Start("Start")
```

--------------------------------

### Start a Process Instance

Source: https://github.com/besley/slickflow/wiki/Slickflow-Quick-Start-Tutorial

Initiate a process instance using the WorkflowService. CreateRunner sets up the execution context, and UseProcess specifies the process definition.

```csharp
IWorkflowService wfService = new WorkflowService( );
var wfResult = wfService.CreateRunner("10", "jack")
             .UseApp("BS-100", "Delivery-Books", "BS-100-LX")
             .UseProcess(" BookSellerProcessCode ")
             .Start();
```

--------------------------------

### Start a Workflow Process Instance

Source: https://github.com/besley/slickflow/wiki/Slickflow-Quick-Start-Tutorial

Initiates a new process instance. This involves creating the instance and its initial task nodes.

```csharp
IWorkflowService wfService = new WorkflowService( );
var wfResult = wfService.CreateRunner("10", "jack")
          .UseApp("DS-100", "Leave-Request", "DS-100-LX")
          .UseProcess("LeaveRequestCode")
          .Start();
```

--------------------------------

### Start a Process Instance in C#

Source: https://github.com/besley/slickflow/blob/master/README.md

Use this snippet to initiate a new process instance within Slickflow. It requires specifying the workflow service, application details, and the process code.

```csharp
// Start a process instance
IWorkflowService wfService = new WorkflowService();
var startResult = wfService.CreateRunner("10", "Jack")
    .UseApp("DS-100", "Book-Order", "DS-100-LX")
    .UseProcess("PriceProcessCode")
    .Start();
```

--------------------------------

### Deploy Slickflow using Docker Compose

Source: https://github.com/besley/slickflow/blob/master/README.md

Pull all necessary images and start the services in detached mode using the provided Docker Compose file.

```bash
docker-compose -f docker-compose.hub.yml pull
docker-compose -f docker-compose.hub.yml up -d
```

--------------------------------

### Import PostgreSQL Schema and Data (Windows PowerShell)

Source: https://github.com/besley/slickflow/blob/master/database/README_Import_PostgreSQL_EN.md

Example using Windows PowerShell to import both the schema and data files for the Slickflow database. Ensure the database folder path is correct and adjust connection details.

```powershell
cd C:\slickflow\database

# Import schema
psql "postgresql://postgres:123456@127.0.0.1:5432/wfdbbpmn2?sslmode=disable" -f .\wfdbbpmn2_pgsql_schema.sql

# Import data
psql "postgresql://postgres:123456@127.0.0.1:5432/wfdbbpmn2?sslmode=disable" -f .\wfdbbpmn2_pgsql_data.sql
```

--------------------------------

### XML Extension Example

Source: https://github.com/besley/slickflow/blob/master/source/sfd/ClientApp/README.md

Shows how the 'magic:spell' property is persisted as an extension within the BPMN 2.0 document.

```xml
<?xml version="1.0" encoding="UTF-8"?>
<bpmn2:definitions ... xmlns:magic="http://magic" id="sample-diagram">
  <bpmn2:process id="Process_1">
    <bpmn2:startEvent id="StartEvent_1" magic:spell="WOOO ZAAAA" />
  </bpmn2:process>
  ...
</bpmn2:definitions>
```

--------------------------------

### Create Sequential Process

Source: https://github.com/besley/slickflow/wiki/Slickflow-Quick-Start-Tutorial

Use ProcessModelBuilder to create a sequential process with start, task, and end nodes. The Store() method saves the process definition.

```csharp
var pmb = ProcessModelBuilder.CreateProcess("BookSeller Process", "BookSeller Process Code", "1");
var process = pmb.Start("Start")
         .Task("Package Books", "PB001")
         .Task("Deliver Books", "DB001")
         .End("End")
         .Store();
```

--------------------------------

### Importing Vue Cron Editor Buefy

Source: https://github.com/besley/slickflow/blob/master/source/sfd/ClientApp/app/pages/cron/edit.html

Import the component and register it in your Vue application. This example shows how to include it as a component and set an initial cron expression.

```javascript
import VueCronEditorBuefy from 'vue-cron-editor-buefy'; // or include the vue-cron-editor-buefy.umd.js file and call:
// Vue.component("vue-cron-editor-buefy", window["vue-cron-editor-buefy"]);

export default {
  name: 'App',
  components: {
    VueCronEditorBuefy
  },
  data: () => ({
    cronExpression: "*/1 * * * *"
  }),
};
```

--------------------------------

### MagicPropertiesProvider Implementation

Source: https://github.com/besley/slickflow/blob/master/source/sfd/ClientApp/README.md

Defines a custom PropertiesProvider to add a 'magic' group to the properties panel, shown only for start events.

```javascript
function MagicPropertiesProvider(propertiesPanel, translate) {

  // Register our custom magic properties provider.
  // Use a lower priority to ensure it is loaded after the basic BPMN properties.
  propertiesPanel.registerProvider(LOW_PRIORITY, this);

  ... 

  this.getGroups = function(element) {

    ... 

    return function(groups) {

      // Add the "magic" group
      if(is(element, 'bpmn:StartEvent')) {
        groups.push(createMagicGroup(element, translate));
      }

      return groups;
    }
  };
}
```

--------------------------------

### Create a Simple Sequence Flow Process

Source: https://github.com/besley/slickflow/wiki/Slickflow-Coding-Graphic-Model-User-Manual

Use ProcessModelBuilder to define a basic sequential workflow with start, task, and end nodes. This is the foundational step for creating process diagrams with code.

```csharp
using Slickflow.Graph;
using Slickflow.Engine.Common;
//firstly, create a process model builder
var pmb = ProcessModelBuilder.CreateProcess("BookSellerProcess", "BookSellerProcessCode", "3");
var process = pmb.Start("Start")
    .Task("Package Books", "003") 
    .Task("Deliver Books", "005") 
    .End("End")
    .Store();
```

--------------------------------

### Call Workflow Service API to Run Process

Source: https://github.com/besley/slickflow/wiki/Slickflow-Application-Code-Example

Demonstrates calling the WorkflowService API to get the next activity tree, determine performers, and run the process application.

```csharp
var result = new WfExecutedResult();
var wfService = new WorkflowService();
var nodeViewList = wfService.GetNextActivityTree(runner, conditions).ToList<NodeView>();
foreach (var node in nodeViewList)
{
    var performerList = wfService.GetPerformerList(node);       
    Dictionary<string, PerformerList> dict = new Dictionary<string, PerformerList>();
    dict.Add(node.ActivityGUID, performerList);
    runner.NextActivityPerformers = dict;
    result = wfService.RunProcessApp(session.Connection, runner, session.Transaction);
}
```

--------------------------------

### Initialize Expression Editor

Source: https://github.com/besley/slickflow/blob/master/source/sfd/ClientApp/app/pages/expression/editor.html

Initializes the expression editor, sets the current value if available, or starts fresh. It also sets up event handlers for adding expression groups.

```javascript
$(function () {
    if (typeof kresource !== 'undefined' && kresource.localize) {
        kresource.localize();
    }

    if (typeof window.expressionEditor !== 'undefined') {
        if (window.__expressionEditorCurrentValue) {
            window.expressionEditor.setExpression(window.__expressionEditorCurrentValue);
        } else {
            window.expressionEditor.init();
        }

        setTimeout(function() {
            $('#btn-add-group').off('click').on('click', function (e) {
                e.preventDefault();
                e.stopPropagation();
                if (typeof window.expressionEditor !== 'undefined' && window.expressionEditor.addExpressionGroup) {
                    window.expressionEditor.addExpressionGroup();
                } else {
                    if (typeof addExpressionGroup === 'function') {
                        addExpressionGroup();
                    }
                }
                return false;
            });
        }, 200);
    }
});
```

--------------------------------

### Sequence Workflow Pattern Test JSON

Source: https://github.com/besley/slickflow/wiki/Slickflow-JSON-Script-Test

This JSON file defines the structure for testing a sequence workflow. It includes details for starting, applying, signing, and confirming a form within the process.

```json
{
	"ProcessID": "3",
	"ProcessName": "Price Process",
	"ProcessGUID": "072af8c3-482a-4b1c-890b-685ce2fcc75d",
	"AppInstanceID": "SEQ-P-1099",
	//start process
	"Start": {
		"UserID": "10",
		"UserName": "Long",
		"AppName": "SamplePrice",
		"AppInstanceID": "SEQ-P-1099",
		"ProcessGUID": "072af8c3-482a-4b1c-890b-685ce2fcc75d"
	},
	//Sales Apply a form
	//run process
	"Apply": {
		"UserID": "10",
		"UserName": "Long",
		"AppName": "SamplePrice",
		"AppInstanceID": "SEQ-P-1099",
		"ProcessGUID": "072af8c3-482a-4b1c-890b-685ce2fcc75d",
		"NextActivityPerformers": {
			"eb833577-abb5-4239-875a-5f2e2fcb6d57": [
				{
					"UserID": 10,
					"UserName": "Long"
				}
			]
		}
	},
	//Sign the form
	//run process
	"Sign": {
		"UserID": "10",
		"UserName": "Long",
		"AppName": "SamplePrice",
		"AppInstanceID": "SEQ-P-1099",
		"ProcessGUID": "072af8c3-482a-4b1c-890b-685ce2fcc75d",
		"NextActivityPerformers": {
			"cab57060-f433-422a-a66f-4a5ecfafd54e": [
				{
					"UserID": 10,
					"UserName": "Long"
				}
			]
		}
	},
	//Confirm the form and complete the process
	//run process
	"Confirm": {
		"UserID": "10",
		"UserName": "Long",
		"AppName": "SamplePrice",
		"AppInstanceID": "SEQ-P-1099",
		"ProcessGUID": "072af8c3-482a-4b1c-890b-685ce2fcc75d",
		"NextActivityPerformers": {
			"b53eb9ab-3af6-41ad-d722-bed946d19792": [
				{
					"UserID": 10,
					"UserName": "Long"
				}
			]
		}
	}
}
```

--------------------------------

### Split Workflow Pattern Test JSON

Source: https://github.com/besley/slickflow/wiki/Slickflow-JSON-Script-Test

This JSON file is used for testing a split workflow pattern. It includes configurations for starting, storing, and HR review activities, along with conditions for routing.

```json
{
	"AppInstanceID": "10998",
	"ProcessID": "73",
	"ProcessName": "Office Process",
	"ProcessGUID": "3a8ce214-fd18-4fac-95c0-e7958bc1b2f8",
	//Apply a form
	//start process
	"Start": {
		"UserID": "10",
		"UserName": "Long",
		"AppName": "OfficeIn",
		"AppInstanceID": "10998",
		"ProcessGUID": "3a8ce214-fd18-4fac-95c0-e7958bc1b2f8"
	},
	//Store Review
	//run process
	"Store": {
		"AppName": "OfficeIn",
		"AppInstanceID": "10998",
		"ProcessGUID": "3a8ce214-fd18-4fac-95c0-e7958bc1b2f8",
		"UserID": "10",
		"UserName": "Long",
		"Conditions": { "surplus": "normal" },
		"NextActivityPerformers": {
			"c3cbb3cc-fa60-42ad-9a10-4ec2638aff49": [
				{
					"UserID": 10,
					"UserName": "Long"
				}
			]
		}
	},
	//HR Review, and complete the process
	//run process
	"HR": {
		"AppName": "OfficeIn",
		"AppInstanceID": "10998",
		"ProcessGUID": "3a8ce214-fd18-4fac-95c0-e7958bc1b2f8",
		"UserID": "10",
		"UserName": "Long",
		"NextActivityPerformers": {
			"30929bbb-c76e-4604-c956-f26feb4aa22e": [
				{
					"UserID": 10,
					"UserName": "Long"
				}
			]
		}
	}
}
```

--------------------------------

### StartProcess

Source: https://github.com/besley/slickflow/wiki/Slickflow-Basic-Concept

Creates a new process instance and initializes the first activity to a ready state.

```APIDOC
## StartProcess

### Description
Creates a new process instance and initializes the first activity to a ready state.

### Method
Not specified (assumed to be a function call within an SDK or similar interface)

### Parameters
None explicitly documented.

### Request Example
```
StartProcess()
```

### Response
None explicitly documented.
```

--------------------------------

### Initialize Settings Module

Source: https://github.com/besley/slickflow/blob/master/source/sfd/ClientApp/app/pages/setting/index.html

Waits for the 'setting' module to be available and then initializes it. Includes a retry mechanism for dynamic loading scenarios.

```javascript
$(function () {
    kresource.localize();
    // Wait for setting module to be available (for dynamic loading scenarios)
    var initAttempts = 0;
    var maxAttempts = 50;
    var initInterval = setInterval(function () {
        initAttempts++;
        if (typeof window.setting !== 'undefined' && typeof window.setting.init === 'function') {
            window.setting.init(); // 初始化可拖动分隔条
            initResizableDivider();
            clearInterval(initInterval);
        } else if (initAttempts >= maxAttempts) {
            console.error("Setting module not available after timeout");
            clearInterval(initInterval);
        }
    }, 100);
});
```

--------------------------------

### Initialize Slickflow Client

Source: https://github.com/besley/slickflow/blob/master/source/sfd/ClientApp/app/index.html

Imports configuration and initializes the client application, waiting for dependencies like jQuery and kresource to load. Includes retry logic for loading.

```javascript
import kconfig from './config/kconfig.js'
window.kconfig = kconfig;

// 等待 jQuery 和 kresource 加载完成
// 由于 index.js 是 ES6 模块，需要等待模块加载完成
(function() {
    var maxRetries = 100; // 最多重试 100 次（约 5 秒）
    var retryCount = 0;

    function init() {
        if (typeof window.$ !== 'undefined' && typeof window.kresource !== 'undefined') {
            $(function () {
                kresource.localize();
            });
        } else if (retryCount < maxRetries) {
            // 如果还没加载完成，延迟重试
            retryCount++;
            setTimeout(init, 50);
        } else {
            console.warn('Waiting for jQuery or kresource to load...', {
                hasJQuery: typeof window.$ !== 'undefined',
                hasKresource: typeof window.kresource !== 'undefined'
            });
        }
    }

    // 等待页面和模块加载完成
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', function() {
            setTimeout(init, 100); // 额外延迟确保模块加载
        });
    } else {
        setTimeout(init, 100); // 额外延迟确保模块加载
    }
})();
```

--------------------------------

### Database Connection String for Database on Host

Source: https://github.com/besley/slickflow/blob/master/README.md

Configure the WfDBConnectionString environment variable to connect to a database running on the host machine.

```bash
-e WfDBConnectionString="Server=host.docker.internal;Port=5432;Database=wfdbbpmn2;User Id=postgres;Password=your-password;TimeZone=UTC;"
```

--------------------------------

### Create Process Model Builder

Source: https://github.com/besley/slickflow/wiki/Slickflow-Coding-Graphic-Model-User-Manual

Initializes the process model builder with essential process details. Provide the process name, a unique process code, and its version.

```csharp
var pmb = ProcessModelBuilder.CreateProcess("BookSellerProcess", "BookSellerProcessCode", "3");
```

--------------------------------

### Run a Process to the Next Step in C#

Source: https://github.com/besley/slickflow/blob/master/README.md

This code demonstrates how to advance a running process instance to its next defined step, specifying the current and next performer. Ensure the process and application details are correctly provided.

```csharp
// Run to next step
var runResult = wfService.CreateRunner("10", "Jack")
    .UseApp("DS-100", "Book-Order", "DS-100-LX")
    .UseProcess("PriceProcessCode")
    .NextStepInt("20", "Alice")
    .Run();
```

--------------------------------

### Create an OrSplit-OrJoin Process

Source: https://github.com/besley/slickflow/wiki/Slickflow-Quick-Start-Tutorial

Builds a process with an OrSplit gateway and an OrJoin gateway, suitable for decision-making scenarios like leave requests.

```csharp
var pmb = ProcessModelBuilder.CreateProcess("LeaveRequest", "LeaveRequestCode", "1");
var process = pmb.Start("Start")
         .Task("Fill Leave Days", "FLD001")
         .OrSplit("OrSplit")
         .Parallels(
                  () => pmb.Branch (
                     () => pmb.Task (
                              VertexBuilder.CreateTask("CEO Evaluate", "CEOE001"),
                              LinkBuilder.CreateTransition("days>=3")
                                 .AddCondition(ConditionTypeEnum.Expression, "Days>=3")
                              )
                      )
                 , () => pmb.Branch (
                     () => pmb.Task(
                              VertexBuilder.CreateTask ("Manager Evaluate", "ME001"),
                              LinkBuilder.CreateTransition ("days<3")
                                        .AddCondition(ConditionTypeEnum.Expression , "Days<3")
                              )
                      )
                  )
          .OrJoin("OrJoin")
          .Task("the Notify HR", "HRN001")
          .End("End")
          .Store();
```

--------------------------------

### User List Initialization

Source: https://github.com/besley/slickflow/blob/master/source/sfd/ClientApp/app/pages/user/list.html

JavaScript code to initialize localization and fetch the user list when the page loads.

```javascript
$(function () {
  kresource.localize();
  userlist.getUserList();
})
```

--------------------------------

### Initialize Process List and Fetch Data

Source: https://github.com/besley/slickflow/blob/master/source/sfd/ClientApp/app/pages/process/list.html

Initializes localization and retrieves the process list when the page loads. This is the primary client-side script for the process list page.

```javascript
$(function () { kresource.localize(); processlist.getProcessList(); });
```

--------------------------------

### Load Diagram Data

Source: https://github.com/besley/slickflow/blob/master/source/sfd/ClientApp/app/pages/diagram/index.html

Initializes the diagram by loading XML data based on AppInstanceId, ProcessId, and Version from URL parameters. This code should be executed when the page loads.

```javascript
$(function () {
    var appInstanceId = jshelper.getUrlParameter('AppInstanceId');
    var processId = jshelper.getUrlParameter('ProcessId');
    var version = jshelper.getUrlParameter('Version');
    kdiagram.loadXml(appInstanceId, processId, version);
});
```

--------------------------------

### Initialize Localization and Fetch Process List

Source: https://github.com/besley/slickflow/blob/master/source/sfd/ClientApp/app/pages/subprocess/list.html

Executes localization and fetches the process list when the DOM is ready. This is the primary JavaScript initialization for the page.

```javascript
$(function () {
  kresource.localize();
  processlist.getProcessList();
});
```

--------------------------------

### Run Slickflow All-in-One Docker Container

Source: https://github.com/besley/slickflow/blob/master/README.md

Deploy Slickflow using the all-in-one Docker image. This command pulls the latest image and runs it, mapping necessary ports and configuring the database connection via environment variables.

```bash
docker pull besley2096/slickflow-all:latest
docker run -d \
  -p 5000:5000 \
  -p 5001:5001 \
  -p 8090:8090 \
  -e WfDBConnectionType=PGSQL \
  -e WfDBConnectionString="Server=host.docker.internal;Port=5432;Database=wfdbbpmn2;User Id=postgres;Password=your-password;TimeZone=UTC;" \
  --name slickflow-all \
  besley2096/slickflow-all:latest
```

--------------------------------

### Create Basic Task Node

Source: https://github.com/besley/slickflow/wiki/Slickflow-Coding-Graphic-Model-User-Manual

Adds a standard task node to the process flow. Provide a descriptive activity name and a unique activity code for the task.

```csharp
pmb.Task("Package Books", "003")
```

--------------------------------

### Initialize Role List Page

Source: https://github.com/besley/slickflow/blob/master/source/sfd/ClientApp/app/pages/role/list.html

Initializes the role list page by calling localization and fetching the role list data. This is typically run on page load.

```javascript
$(function () { kresource.localize(); rolelist.getRoleList(); })
```

--------------------------------

### Initialize Localization

Source: https://github.com/besley/slickflow/blob/master/source/sfd/ClientApp/app/pages/process/create.html

Initializes localization for the client application when the DOM is ready. Ensure kresource is available in the global scope.

```javascript
$(function () { kresource.localize(); })
```

--------------------------------

### Run Slickflow WebTest Docker Container

Source: https://github.com/besley/slickflow/blob/master/README.md

Pull the latest Slickflow WebTest image and run it as a detached container. Configure the database connection using environment variables.

```bash
docker pull besley2096/slickflow-webtest:latest
docker run -d -p 5001:5001 \
  -e WfDBConnectionType=PGSQL \
  -e WfDBConnectionString="Server=host.docker.internal;Port=5432;Database=wfdbbpmn2;User Id=postgres;Password=your-password;TimeZone=UTC;" \
  --name slickflow-webtest \
  besley2096/slickflow-webtest:latest
```

--------------------------------

### Slickflow Template Initialization

Source: https://github.com/besley/slickflow/blob/master/source/sfd/ClientApp/app/pages/template/index.html

Initializes Slickflow localization and template functionalities. This script should be run after the DOM is ready.

```javascript
$(function () {
    kresource.localize();
    ktemplate.init();
});
```

--------------------------------

### Initialize Form List

Source: https://github.com/besley/slickflow/blob/master/source/sfd/ClientApp/app/pages/form/list.html

JavaScript code to initialize localization and retrieve the form list upon page load.

```javascript
$(function () { kresource.localize(); formlist.getFormList(); })
```

--------------------------------

### SendbackProcess

Source: https://github.com/besley/slickflow/wiki/Slickflow-Basic-Concept

Enables the current activity sponsor to send the process back to the previous step for re-execution by the previous sponsor.

```APIDOC
## SendbackProcess

### Description
Enables the current activity sponsor to send the process back to the previous step for re-execution by the previous sponsor.

### Method
Not specified (assumed to be a function call within an SDK or similar interface)

### Parameters
None explicitly documented.

### Request Example
```
SendbackProcess()
```

### Response
None explicitly documented.
```

--------------------------------

### Database Connection String for Database in Docker Container

Source: https://github.com/besley/slickflow/blob/master/README.md

Configure the WfDBConnectionString environment variable to connect to a database running within a Docker container.

```bash
-e WfDBConnectionString="Server=postgres;Port=5432;Database=wfdbbpmn2;User Id=postgres;Password=your-password;TimeZone=UTC;"
```

--------------------------------

### Create PostgreSQL Database

Source: https://github.com/besley/slickflow/blob/master/database/README_Import_PostgreSQL_EN.md

Creates a new PostgreSQL database for Slickflow. Adjust host, port, user, and database name as needed.

```bash
createdb -h 127.0.0.1 -p 5432 -U postgres wfdbbpmn2
```

--------------------------------

### Database Connection String for Remote Database

Source: https://github.com/besley/slickflow/blob/master/README.md

Configure the WfDBConnectionString environment variable to connect to a remote database server.

```bash
-e WfDBConnectionString="Server=192.168.1.100;Port=5432;Database=wfdbbpmn2;User Id=postgres;Password=your-password;TimeZone=UTC;"
```

--------------------------------

### Import PostgreSQL Schema

Source: https://github.com/besley/slickflow/blob/master/database/README_Import_PostgreSQL_EN.md

Imports the database schema structure into the target PostgreSQL database. Replace placeholders for password and database name.

```bash
psql "postgresql://postgres:YOUR_PASSWORD@127.0.0.1:5432/wfdbbpmn2?sslmode=disable" -f wfdbbpmn2_pgsql_schema.sql
```

--------------------------------

### Initialize Resizable Divider

Source: https://github.com/besley/slickflow/blob/master/source/sfd/ClientApp/app/pages/setting/index.html

Sets up a resizable divider for the layout, allowing users to adjust the width of the sidebar and content areas. It applies an initial 40/60 ratio and handles drag events.

```javascript
function initResizableDivider() {
    var $divider = $('#popupSetting .setting-divider');
    var $layout = $('#popupSetting .setting-layout');
    var $sidebar = $('#popupSetting .setting-sidebar');
    var $content = $('#popupSetting .setting-content');
    var isDragging = false;
    var startX = 0;
    var startSidebarWidth = 0;
    var layoutWidth = 0;

    // 初始比例 4:6（侧边栏40%，内容区60%）
    function applyInitialRatio() {
        var w = $layout.width();
        if (w > 0) {
            var dividerW = $divider.outerWidth() || 4;
            var sidebarW = Math.round(w * 0.4);
            var contentW = w - sidebarW - dividerW;
            $sidebar.css('width', sidebarW + 'px');
            $content.css('width', contentW + 'px');
        }
    }

    applyInitialRatio();
    setTimeout(applyInitialRatio, 50);

    $divider.on('mousedown', function(e) {
        isDragging = true;
        $divider.addClass('dragging');
        startX = e.pageX;
        layoutWidth = $layout.width();
        startSidebarWidth = $sidebar.outerWidth();
        // 防止文本选择
        $('body').css({
            'user-select': 'none',
            'cursor': 'col-resize'
        });
        e.preventDefault();
    });

    $(document).on('mousemove', function(e) {
        if (!isDragging) return;
        var diffX = e.pageX - startX;
        var newSidebarWidth = startSidebarWidth + diffX;
        var minSidebarWidth = 150;
        var maxSidebarWidth = layoutWidth * 0.6; // 最多占60%
        var dividerWidth = $divider.outerWidth();
        var minContentWidth = 300; // 限制宽度范围

        if (newSidebarWidth < minSidebarWidth) {
            newSidebarWidth = minSidebarWidth;
        } else if (newSidebarWidth > maxSidebarWidth) {
            newSidebarWidth = maxSidebarWidth;
        }

        // 计算内容区域可用宽度
        var availableContentWidth = layoutWidth - newSidebarWidth - dividerWidth;
        if (availableContentWidth < minContentWidth) {
            // 如果内容区域太小，调整侧边栏宽度
            newSidebarWidth = layoutWidth - minContentWidth - dividerWidth;
            if (newSidebarWidth < minSidebarWidth) {
                newSidebarWidth = minSidebarWidth;
            }
            availableContentWidth = layoutWidth - newSidebarWidth - dividerWidth;
        }

        $sidebar.css('width', newSidebarWidth + 'px');
        $content.css('width', availableContentWidth + 'px');
    });

    $(document).on('mouseup', function() {
        if (isDragging) {
            isDragging = false;
            $divider.removeClass('dragging');
            $('body').css({
                'user-select': '',
                'cursor': ''
            });
        }
    });
}
```

--------------------------------

### Run a Process to the Next Step

Source: https://github.com/besley/slickflow/wiki/Slickflow-Quick-Start-Tutorial

Advance a running process to its next step. Use OnTask to specify the current task and NextStepInt to define the next task and assignee.

```csharp
IWorkflowService wfService = new WorkflowService( );
var wfResult = wfService.CreateRunner("10", "jack")
        .UseApp("BS-100", "Delivery-Books", "BS-100-LX")
        .UseProcess("BookSellerProcessCode")
        .OnTask(8027) // TaskID
        .NextStepInt("20", "Alice")
        .Run();
```

--------------------------------

### Send Back a Process

Source: https://github.com/besley/slickflow/wiki/Slickflow-Quick-Start-Tutorial

Return a process to a previous step. The SendBack() method is used by the current task handler to send the process back, simplifying the selection when there's only one previous step.

```csharp
IWorkflowService wfService = new WorkflowService( );
var wfResult = wfService.CreateRunner("20", "Alice")
            .UseApp("BS-100", "Delivery-Books", "BS-100-LX")
            .UseProcess("BookSellerProcessCode")
            .PrevStepInt()
            .OnTask(8030) // TaskID
            .SendBack();
```

--------------------------------

### Store Process Diagram

Source: https://github.com/besley/slickflow/wiki/Slickflow-Coding-Graphic-Model-User-Manual

Serializes the constructed process diagram into XML format and stores it as a record in the database. This command finalizes the process definition.

```csharp
Pmb.Store();
```

--------------------------------

### Field List Initialization Script

Source: https://github.com/besley/slickflow/blob/master/source/sfd/ClientApp/app/pages/field/list.html

Initializes localization resources and the field list functionality when the DOM is ready.

```javascript
$(function () { kresource.localize(); fieldlist.init(); })
```

--------------------------------

### Import PostgreSQL Data

Source: https://github.com/besley/slickflow/blob/master/database/README_Import_PostgreSQL_EN.md

Inserts sample data into the Slickflow database after the schema has been imported. Sensitive data like API keys are excluded.

```bash
psql "postgresql://postgres:YOUR_PASSWORD@127.0.0.1:5432/wfdbbpmn2?sslmode=disable" -f wfdbbpmn2_pgsql_data.sql
```

--------------------------------

### JumpProcess

Source: https://github.com/besley/slickflow/wiki/Slickflow-Basic-Concept

Jumps forward or backward in a process to a specified activity, either statically defined or dynamically determined at runtime.

```APIDOC
## JumpProcess

### Description
Jumps forward or backward in a process to a specified activity, either statically defined or dynamically determined at runtime.

### Method
Not specified (assumed to be a function call within an SDK or similar interface)

### Parameters
None explicitly documented.

### Request Example
```
JumpProcess()
```

### Response
None explicitly documented.
```

--------------------------------

### Extend bpmn:BaseElement for Custom Property

Source: https://github.com/besley/slickflow/blob/master/source/sfd/ClientApp/README.md

Shows how to extend 'bpmn:BaseElement' instead of a specific element like 'bpmn:StartEvent' to make the custom property applicable to all BPMN elements.

```json
...

{
  "name": "BewitchedStartEvent",
  "extends": [
    "bpmn:BaseElement"
  ],

  ...
}
```

--------------------------------

### Load Process Diagram

Source: https://github.com/besley/slickflow/wiki/Slickflow-Coding-Graphic-Model-User-Manual

Loads an existing process diagram from the database using its unique process code and version. This is used for maintenance and modification of existing processes.

```csharp
var pmb = ProcessModelBuilder.LoadProcess("BookSellerProcessCode", "3");
```

--------------------------------

### GetNextActivityTree

Source: https://github.com/besley/slickflow/wiki/Slickflow-Basic-Concept

Retrieves the route for the next steps in a process and allows selection of performers to continue execution.

```APIDOC
## GetNextActivityTree

### Description
Retrieves the route for the next steps in a process and allows selection of performers to continue execution.

### Method
Not specified (assumed to be a function call within an SDK or similar interface)

### Parameters
None explicitly documented.

### Request Example
```
GetNextActivityTree()
```

### Response
None explicitly documented.
```

--------------------------------

### Create Extended Task Node with Actions

Source: https://github.com/besley/slickflow/wiki/Slickflow-Coding-Graphic-Model-User-Manual

Configures a task node with additional properties like URL, roles, and event actions. This allows for more complex task definitions, including pre-event services.

```csharp
Pmb.Task(
    VertexBuilder.CreateTask("Task-001", "task001")
      .SetUrl("www.slickflow.com")
      .AddRole("TestRole")
      .AddAction(
        VertexBuilder.CreateAction(ActionTypeEnum.Event,
                FireTypeEnum.Before,
                "Slickflow.Module.External.OrderSubmitService"
         )
    )
```

--------------------------------

### Run Slickflow Backend API Docker Container

Source: https://github.com/besley/slickflow/blob/master/README.md

Pull the latest Slickflow API image and run it as a detached container. Configure the database connection using environment variables.

```bash
docker pull besley2096/slickflow-api:latest
docker run -d -p 5000:5000 \
  -e WfDBConnectionType=PGSQL \
  -e WfDBConnectionString="Server=host.docker.internal;Port=5432;Database=wfdbbpmn2;User Id=postgres;Password=your-password;TimeZone=UTC;" \
  --name slickflow-api \
  besley2096/slickflow-api:latest
```

--------------------------------

### Connect Nodes Command

Source: https://github.com/besley/slickflow/wiki/Slickflow-Coding-Graphic-Model-User-Manual

Establishes a connection between two task nodes in the process diagram. Use this to define the flow of execution between tasks. Ensure to call .Update() after execution.

```javascript
//connect two task node
pmb.Connect("003", "005")
   .Update ();
```

--------------------------------

### ReverseProcess

Source: https://github.com/besley/slickflow/wiki/Slickflow-Basic-Concept

Reverses a completed process instance, allowing the last sponsor to execute the process again.

```APIDOC
## ReverseProcess

### Description
Reverses a completed process instance, allowing the last sponsor to execute the process again.

### Method
Not specified (assumed to be a function call within an SDK or similar interface)

### Parameters
None explicitly documented.

### Request Example
```
ReverseProcess()
```

### Response
None explicitly documented.
```

--------------------------------

### Initialize MxGraph XML Import

Source: https://github.com/besley/slickflow/blob/master/source/sfd/ClientApp/app/pages/process/importmxgraph.html

Initializes the MxGraph XML import functionality. This code should be called after the DOM is ready and localization is complete.

```javascript
$(function () { kresource.localize(); processlist.initMxGraphXmlImport(); });
```

--------------------------------

### Run Process to Next Step

Source: https://github.com/besley/slickflow/wiki/Slickflow-Quick-Start-Tutorial

Advances a process from the current task to the next step. For parallel branches, multiple activities may be generated simultaneously.

```csharp
IWorkflowService wfService = new WorkflowService( );
var wfResult = wfService.CreateRunner("10", "jack")
         .UseApp("PS-100", "Large-Car-Order", "PS-100-LX")
         .UseProcess("LargeOrderProcessCode ")
         .OnTask(8033)
         .NextStepInt("20", "Alice")
         .Run();

```

--------------------------------

### Run Slickflow Frontend Designer Docker Container

Source: https://github.com/besley/slickflow/blob/master/README.md

Pull the latest Slickflow Designer image and run it as a detached container, exposing port 8090.

```bash
docker pull besley2096/slickflow-designer:latest
docker run -d -p 8090:8090 \
  --name slickflow-designer \
  besley2096/slickflow-designer:latest
```

--------------------------------

### Update Process Command

Source: https://github.com/besley/slickflow/wiki/Slickflow-Coding-Graphic-Model-User-Manual

Serializes the current process node and connection data into XML format and saves it to the database. This command is essential for persisting changes made to the process diagram.

```javascript
pmb.Update();
```

--------------------------------

### Send Back Previous Step in Workflow

Source: https://github.com/besley/slickflow/wiki/Slickflow-Quick-Start-Tutorial

Initiates a process return to the previous step. This is typically called by a to-do task handler.

```csharp
IWorkflowService wfService = new WorkflowService( );
var wfResult = wfService.CreateRunner("20", "Alice")
          .UseApp("PS-100", "Large-Car-Order", "PS-100-LX")
          .UseProcess("LargeOrderProcessCode ")
          .PrevStepInt()
          .OnTask(8038) // TaskID
          .SendBack();
```

--------------------------------

### Execute Code-Defined Workflow with WorkflowExecutor

Source: https://github.com/besley/slickflow/blob/master/README.md

Run a code-defined workflow using WorkflowExecutor. This pattern is suitable for ETL, backend orchestration, AI agents, and unit tests. It allows adding variables and running the process in memory.

```csharp
using Slickflow.Engine.Executor;
using Slickflow.Engine.Core.Result;

var result = await new WorkflowExecutor()
    .UseApp("OrderApp-001", "OrderApp")
    .UseProcess(wf)                      // Use code-defined workflow
    .AddVariable("OrderId", "ORD-2025-001")
    .AddVariable("Quantity", "3")
    .AddVariable("UnitPrice", "99.50")
    .Run();
```

--------------------------------

### RunProcessApp

Source: https://github.com/besley/slickflow/wiki/Slickflow-Basic-Concept

Continues the execution of a process until the last activity is completed.

```APIDOC
## RunProcessApp

### Description
Continues the execution of a process until the last activity is completed.

### Method
Not specified (assumed to be a function call within an SDK or similar interface)

### Parameters
None explicitly documented.

### Request Example
```
RunProcessApp()
```

### Response
None explicitly documented.
```

--------------------------------

### User List CSS Styling

Source: https://github.com/besley/slickflow/blob/master/source/sfd/ClientApp/app/pages/user/list.html

Custom CSS rules for styling the user list table header and selected rows.

```css
.ag-header-cell {
  background-color: #49afcd;
}
.ag-row-selected {
  background-color: #bde2e5;
}
```

--------------------------------

### Integrate Custom Moddle Extension and Properties Provider

Source: https://github.com/besley/slickflow/blob/master/source/sfd/ClientApp/README.md

Configures the BpmnModeler to include the custom moddle descriptor and properties provider. This ensures the properties panel recognizes and displays the custom properties.

```javascript
import BpmnModeler from 'bpmn-js/lib/Modeler';

import {
  BpmnPropertiesPanelModule,
  BpmnPropertiesProviderModule
} from 'bpmn-js-properties-panel';

import magicPropertiesProviderModule from './provider/magic';
import magicModdleDescriptor from './descriptors/magic';

const bpmnModeler = new BpmnModeler({
  container: '#js-canvas',
  propertiesPanel: {
    parent: '#js-properties-panel'
  },
  additionalModules: [
    BpmnPropertiesPanelModule,
    BpmnPropertiesProviderModule,
    magicPropertiesProviderModule
  ],
  moddleExtensions: {
    magic: magicModdleDescriptor
  }
});
```

--------------------------------

### Run a Process with Conditional Branching

Source: https://github.com/besley/slickflow/wiki/Slickflow-Quick-Start-Tutorial

Initiates a workflow runner and specifies conditions for branching. Use this to route tasks based on variable values like 'Days' of leave.

```csharp
IWorkflowService wfService = new WorkflowService( );
var wfResult = wfService.CreateRunner("10", "jack")
      .UseApp("DS-100", "Leave-Request", "DS-100-LX")
      .UseProcess("LeaveRequestCode")
      .OnTask(8017)
      .IfCondition("Days", "3")
      .NextStepInt("20", "Alice")
      .Run();
```

--------------------------------

### Model a Simple Sequence Workflow in C#

Source: https://github.com/besley/slickflow/blob/master/README.md

Define a basic sequential workflow directly in code using the Workflow class. This is an alternative to designer-based modeling for simple processes.

```csharp
using Slickflow.Graph.Model;

// create a simple sequence process diagram by hand code rather than an HTML designer
var wf = new Workflow("simple-process-name", "simple-process-code");

wf.Start("Start")
  .Task("Task1")
  .Task("Task2")
  .End("End");
```

--------------------------------

### Form List Styling

Source: https://github.com/besley/slickflow/blob/master/source/sfd/ClientApp/app/pages/form/list.html

CSS rules for styling the header and selected rows in the form list.

```css
.ag-header-cell { background-color: #49afcd }
.ag-row-selected { background-color: #bde2e5 }
```

--------------------------------

### Define Workflow Programmatically with Slickflow.Graph

Source: https://github.com/besley/slickflow/blob/master/README.md

Use the Workflow class to build BPMN-style flows in C#. Supports various node types including ServiceTask, RagService, and LlmService. Use BuildInMemory() for in-memory process entities.

```csharp
using Slickflow.Graph.Model;

var wf = new Workflow("Order Process", "OrderProcess_Code");

wf.Start("Start")
  .ServiceTask("Validate Order", "Validate001", "ValidateOrder")   // LocalMethod
  .ServiceTask("Calculate Amount", "Calc001", "CalcAmount")       // LocalMethod
  .RagService("RAG Reply", "RAG001")                              // RAG AI node
  .LlmService("LLM Enrich", "LLM001")                             // General LLM node
  .ServiceTask<SaveOrderService>("Save Order", "Save001")         // Local service class
  .End("End");
```

--------------------------------

### CSS for Process List Header

Source: https://github.com/besley/slickflow/blob/master/source/sfd/ClientApp/app/pages/subprocess/list.html

Applies a background color to the header cells in the process list.

```css
.ag-header-cell {
  background-color: #49afcd;
}
```

--------------------------------

### WithdrawProcess

Source: https://github.com/besley/slickflow/wiki/Slickflow-Basic-Concept

Allows the sponsor of a previous activity to withdraw the process to that step for re-execution.

```APIDOC
## WithdrawProcess

### Description
Allows the sponsor of a previous activity to withdraw the process to that step for re-execution.

### Method
Not specified (assumed to be a function call within an SDK or similar interface)

### Parameters
None explicitly documented.

### Request Example
```
WithdrawProcess()
```

### Response
None explicitly documented.
```

--------------------------------

### Withdraw a Process

Source: https://github.com/besley/slickflow/wiki/Slickflow-Quick-Start-Tutorial

Initiate a process withdrawal from the current task. The Withdraw() method effectively returns the process to a previous state, typically used when an error is detected.

```csharp
IWorkflowService wfService = new WorkflowService( );
var wfResult = wfService.CreateRunner("20", "Alice")
           .UseApp("BS-100", "Delivery-Books", "BS-100-LX")
           .UseProcess("BookSellerProcessCode ")
           .OnTask(8027) // TaskID
           .Withdraw( );
```

--------------------------------

### Add Branch/Merge Command

Source: https://github.com/besley/slickflow/wiki/Slickflow-Coding-Graphic-Model-User-Manual

Covers a split/join pattern into the canvas, creating branches and tasks. This command is used to structure parallel or conditional flows within a process. Ensure to call .Update() after execution.

```javascript
//cover a split/join pattern into canvas
pmb.Cover("003", "005",
      VertexBuilder.CreateSplit(GatewayDirectionEnum.AndSplit,"AndSplit", "AndSplicCode"), 
      VertexBuilder.CreateJoin(GatewayDirectionEnum.AndJoin, "AndJoin", "AndJoinCode"), 
      VertexBuilder.CreateTask("branchTask001", "b001"),
      VertexBuilder.CreateTask("branchTask002", "b002")
   )
   .Update();
```

--------------------------------

### Process Edit Page JavaScript

Source: https://github.com/besley/slickflow/blob/master/source/sfd/ClientApp/app/pages/process/edit.html

Initializes localization and loads the process list. Handles carousel item selection by adding a 'carousel-item-select' class and storing the selected template type.

```javascript
$(function () { kresource.localize(); processlist.loadProcess(); $(".carousel-inner>.carousel-item").on("click", function () { $.each($(".carousel-inner>.carousel-item"), function (o, e) { $(this).removeClass("carousel-item-select"); }); $(this).addClass("carousel-item-select"); processlist.mprocessTemplateType = $(this).data("template"); }); })
```

--------------------------------

### Send Back a Process Task

Source: https://github.com/besley/slickflow/wiki/Slickflow-Quick-Start-Tutorial

Initiates a workflow runner and sends the current task back to the previous step. This is useful for returning a task to a prior handler, potentially only within a specific branch of a parallel gateway.

```csharp
IWorkflowService wfService = new WorkflowService( );
var wfResult = wfService.CreateRunner("20", "Alice")
      .UseApp("DS-100", "Leave-Request", "DS-100-LX")
      .UseProcess("LeaveRequestCode ")
      .PrevStepInt()
      .OnTask(8020) // TaskID
      .SendBack();
```

--------------------------------

### Create Parallel Branch Flow Chart

Source: https://github.com/besley/slickflow/wiki/Slickflow-Quick-Start-Tutorial

Defines a parallel branching process with two branches using AndSplit and AndJoin gateways. Node attributes are set directly in the code.

```csharp
var pmb = ProcessModelBuilder.CreateProcess(" LargeOrderProcess ", " LargeOrderProcess Code ");
var process = pmb.Start("Start")
           .Task("Large Order Received", "LOR001")
           .AndSplit("AndSplit")
           .Parallels(
               () => pmb.Branch (
                    () => pmb.Task ("Engineering Review", "ER001")
                  )
                  , ( ) => pmb.Branch (
                    () => pmb.Task ("Design Review", "DR001")
                  )
                )
           .AndJoin("AndJoin")
           .Task("Management Approve", "MA001")
           .End("End")
           .Store();

```

--------------------------------

### Create Parallel Branches and Join Node

Source: https://github.com/besley/slickflow/wiki/Slickflow-Coding-Graphic-Model-User-Manual

Defines a process flow with multiple parallel branches, each containing task nodes, and a subsequent join node to merge them. This is used for implementing branching logic.

```csharp
pmb.Split("split")
    .Parallels(
      ()=>pmb.Branch(
      ()=>pmb.Task("task-010", "task010"),
      ()=>pmb.Task("task-011", "task011")
     )
     ,() => pmb.Branch(
      () => pmb.Task("task-020", "task020"),
      () => pmb.Task("task-021", "task021")
     )
     )
     .Join("join")
```

--------------------------------

### Insert Node into Graphic Model

Source: https://github.com/besley/slickflow/wiki/Slickflow-Coding-Graphic-Model-User-Manual

Inserts a new task node before a specified existing node. The new node is kept on the process connection.

```csharp
//insert a new task node named task004 before task 003(Package Books)
pmb.Insert("003", ActivityTypeEnum.TaskNode, "task004", "004")
```

--------------------------------

### Fork New Branch from Node

Source: https://github.com/besley/slickflow/wiki/Slickflow-Coding-Graphic-Model-User-Manual

Adds a new branch path from a specified node. If the node has no subsequent node, it behaves like an 'Add' operation. If it does, a new node is added adjacently.

```csharp
//fork a new Task 555 from task zzz
pmb.Fork("zzz-code", ActivityTypeEnum.TaskNode, "yyy", "555")
```

--------------------------------

### Create End Node

Source: https://github.com/besley/slickflow/wiki/Slickflow-Coding-Graphic-Model-User-Manual

Defines the termination point of a process flow. Specify the activity name and a unique activity code for the end node.

```csharp
pmb.End("End")
```

--------------------------------

### Create Magic Group Function

Source: https://github.com/besley/slickflow/blob/master/source/sfd/ClientApp/README.md

Defines the 'Magic properties' group, including importing custom property entries like 'SpellProps'.

```javascript
// Import your custom property entries.
// The entry is a text input field with logic attached to create,
// update and delete the "spell" property.
import spellProps from './parts/SpellProps';

// Create the custom magic group
function createMagicGroup(element, translate) {

  // create a group called "Magic properties".
  const magicGroup = {
    id: 'magic',
    label: translate('Magic properties'),
    entries: spellProps(element)
  };

  return magicGroup
}
```

--------------------------------

### Bind Workflow Service Register Interface

Source: https://github.com/besley/slickflow/wiki/Slickflow-Application-Code-Example

Binds the IWfServiceRegister interface to a service class, allowing for workflow runner registration.

```csharp
public partial class ProductOrderService : ServiceBase, IProductOrderService, IWfServiceRegister
{
    #region IWorkflowRegister members
    public WfAppRunner WfAppRunner
    {
        get;
        set;
    }
    public void RegisterWfAppRunner(WfAppRunner runner)
    {
        WfAppRunner = runner;
    }
    #endregion
}
```

--------------------------------

### Define Custom Moddle Extension

Source: https://github.com/besley/slickflow/blob/master/source/sfd/ClientApp/README.md

Defines a new type 'BewitchedStartEvent' extending 'bpmn:StartEvent' with a custom 'spell' property. This descriptor is used by moddle to recognize and handle custom XML elements and attributes.

```json
{
  "name": "Magic",
  "prefix": "magic",
  "uri": "http://magic",
  "xml": {
    "tagAlias": "lowerCase"
  },
  "associations": [],
  "types": [
    {
      "name": "BewitchedStartEvent",
      "extends": [
        "bpmn:StartEvent"
      ],
      "properties": [
        {
          "name": "spell",
          "isAttr": true,
          "type": "String"
        },
      ]
    },
  ]
}
```