Initial BPMN

lowcoder-org · sjhoeksma · Feb 24, 2024 · Feb 24, 2024 · Feb 24, 2024 · Feb 24, 2024
commit ba8eb1600575e6bb15b424ad1dc35f26f86dc906
diff --git a/lowcoder-comp-bpmn-io/.gitignore b/lowcoder-comp-bpmn-io/.gitignore
@@ -0,0 +1,3 @@
+.yarn/cache
+node_modules/
+lowcoder-comp-bpmn-io-*.tgz
diff --git a/lowcoder-comp-bpmn-io/.yarn/install-state.gz b/lowcoder-comp-bpmn-io/.yarn/install-state.gz
diff --git a/lowcoder-comp-bpmn-io/icons/bpmn.svg b/lowcoder-comp-bpmn-io/icons/bpmn.svg
diff --git a/lowcoder-comp-bpmn-io/images/bpmn-js.gif b/lowcoder-comp-bpmn-io/images/bpmn-js.gif
diff --git a/lowcoder-comp-bpmn-io/index.html b/lowcoder-comp-bpmn-io/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Lowcoder Plugin Preview</title>
+    <style>
+      #root {
+        height: 100vh;
+      }
+      #root-loader {
+        height: 100vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root">
+      <div id="root-loader">Loading...</div>
+    </div>
+    <script src="index.tsx" type="module"></script>
+  </body>
+</html>
diff --git a/lowcoder-comp-bpmn-io/index.tsx b/lowcoder-comp-bpmn-io/index.tsx
@@ -0,0 +1,19 @@
+import { createRoot } from 'react-dom/client';
+import { CompIDE } from "lowcoder-sdk";
+import { name, version, lowcoder } from "./package.json";
+import compMap from "./src/index";
+import "lowcoder-sdk/dist/style.css";
+
+function CompDevApp() {
+  return (
+    <CompIDE
+      compMap={compMap}
+      packageName={name}
+      packageVersion={version}
+      compMeta={lowcoder.comps}
+    />
+  );
+}
+const container = document.querySelector("#root") as Element | DocumentFragment;
+const root = createRoot(container);
+root.render(<CompDevApp />);
diff --git a/lowcoder-comp-bpmn-io/package.json b/lowcoder-comp-bpmn-io/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "lowcoder-comp-bpmn-io",
+  "version": "0.0.5",
+  "type": "module",
+  "license": "MIT",
+  "dependencies": {
+    "@observablehq/runtime": "^5.9.7",
+    "@types/react": "18",
+    "@types/react-dom": "18",
+    "bpmn-js": "^17.0.2",
+    "lowcoder-cli": "^0.0.30",
+    "lowcoder-sdk": "^2.3.1",
+    "prop-types": "^15.8.1",
+    "react": "18",
+    "react-dom": "18",
+    "react-resize-detector": "^10.0.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.4"
+  },
+  "lowcoder": {
+    "description": "A https://bpmn.io Lowcoder Component Plugin",
+    "comps": {
+      "bpmn": {
+        "name": "bpmn",
+        "icon": "./icons/bpmn.svg",
+        "description": "BPMN Component",
+        "layoutInfo": {
+          "w": 24,
+          "h": 60
+        }
+      }
+    }
+  },
+  "scripts": {
+    "start": "vite",
+    "build": "lowcoder-cli build",
+    "build_publish": "lowcoder-cli build --publish"
+  }
+}
diff --git a/lowcoder-comp-bpmn-io/src/BpmnComp.tsx b/lowcoder-comp-bpmn-io/src/BpmnComp.tsx
@@ -0,0 +1,191 @@
+import {
+  UICompBuilder,
+  NameConfig,
+  BoolControl,
+  stringSimpleControl,
+  JSONObjectControl,
+  Section,
+  withDefault,
+  withExposingConfigs,
+  eventHandlerControl,
+  styleControl,
+  stringExposingStateControl,
+  AutoHeightControl,
+} from "lowcoder-sdk";
+import styles from "./styles.module.css";
+import { trans } from "./i18n/comps";
+import { Bpmn } from "./vendors";
+import { useResizeDetector } from "react-resize-detector";
+import { useState } from "react";
+
+
+export const CompStyles = [
+  {	
+    name: "margin",	
+    label: trans("style.margin"),
+    margin: "margin",	
+  },
+  {	
+    name: "padding",	
+    label: trans("style.padding"),
+    padding: "padding",	
+  },
+  {	
+    name: "textSize",
+    label: trans("style.textSize"),
+    textSize: "textSize",	
+  },
+  {	
+    name: "backgroundColor",
+    label: trans("style.backgroundColor"),
+    backgroundColor: "backgroundColor",	
+  },
+  {	
+    name: "border",
+    label: trans("style.border"),
+    border: "border",	
+  },
+  {
+    name : "radius",
+    label : trans("style.borderRadius"),
+    radius : "radius",
+  },
+  {
+    name : "borderWidth",
+    label : trans("style.borderWidth"),
+    borderWidth : "borderWidth",
+  }
+] as const;
+
+
+let BpmnComp = (function () {
+  //Function to prevent unneeded redraws
+  var _skipRedraw = false
+  const skipRedraw = function(){
+    var ret = _skipRedraw
+    _skipRedraw = false
+    return ret
+  }
+
+  const childrenMap = {
+    autoHeight: withDefault(AutoHeightControl, "fixed"),
+    styles: styleControl(CompStyles),
+    xml : stringExposingStateControl("xml"),
+    values: withDefault(JSONObjectControl),
+    svgDownload : withDefault(BoolControl,false),
+    imageName : stringSimpleControl(""), 
+    designer : withDefault(BoolControl,false),
+    showLogo : withDefault(BoolControl,true),
+    onEvent: eventHandlerControl([
+      {
+        label: "onChange",
+        value: "change",
+        description: "Triggers when bpmn data changes",
+      },
+    ] as const),
+  };
+
+  return new UICompBuilder(childrenMap, (props: {
+    onEvent: any;
+    styles: { backgroundColor: any; border: any; radius: any; borderWidth: any; 
+              margin: any; padding: any; textSize: any; };
+    xml: any;
+    values: object | null | undefined;
+    svgDownload: boolean;
+    imageName : string;
+    designer: boolean;
+    showLogo : boolean;
+    autoHeight: boolean;
+  }) => {
+  const handleDataChange = (xml: string) => {
+    if (props.onEvent) {
+      _skipRedraw = true //We should not redraw the component
+      props.xml.onChange(xml);
+      props.onEvent("change");
+      return false
+    }
+  };
+  const [dimensions, setDimensions] = useState({ width: 480, height: 280 });
+  const { width, height, ref: conRef } = useResizeDetector({onResize: () =>{
+    const container = conRef.current;
+    if(!container || !width || !height) return;
+
+    if(props.autoHeight) {
+      setDimensions({
+        width,
+        height: dimensions.height,
+      })
+      return;
+    }
+
+    setDimensions({
+      width,
+      height,
+    })
+  }});
+
+  return (
+    <div className={styles.wrapper} style={{
+      height: "100%",
+      width: "100%",
+      backgroundColor: `${props.styles.backgroundColor}`,
+      borderColor: `${props.styles.border}`,
+      borderRadius: `${props.styles.radius}`,
+      borderWidth: `${props.styles.borderWidth}`,
+      margin: `${props.styles.margin}`,
+      padding: `${props.styles.padding}`,
+      fontSize: `${props.styles.textSize}`,
+    }}>
+      <Bpmn
+        xml={props.xml.value}
+        height={dimensions.height}
+        width={dimensions.width}
+        values={props.values}
+        svgDownload={props.svgDownload}
+        imageName={props.imageName}
+        designer={props.designer}
+        showLogo={props.showLogo}
+        onDataChange={handleDataChange}
+        skipRedraw={skipRedraw}
+      />
+    </div>
+  );
+})
+.setPropertyViewFn((children: any) => {
+  return (
+    <>
+      <Section name="Config">
+        {children.xml.propertyView({ label: "xml" })}
+        {children.values.propertyView({ label: "values" })}
+        {children.svgDownload.propertyView({ label: "Download Image" })}
+        {children.imageName.propertyView({ label: "Download Name" })}
+        {children.designer.propertyView({ label: "Designer mode" })}
+        <a href="https://forum.bpmn.io/t/license-questions/85">Hide <b>BPMN.io logo</b> only if you are entitled</a>
+        {children.showLogo.propertyView({ label: "Show BPMN.io logo" })}
+      </Section>
+      <Section name="Interaction">
+        {children.onEvent.propertyView()}
+      </Section>
+      <Section name="Styles">
+        {children.styles.getPropertyView()}
+      </Section>
+    </>
+  );
+})
+.build();
+})();
+
+BpmnComp = class extends BpmnComp {
+  autoHeight(): boolean {
+    return this.children.autoHeight.getView();
+  }
+};
+
+export default withExposingConfigs(BpmnComp, [
+   new NameConfig("xml", trans("component.xml")),
+   new NameConfig("values", trans("component.values")),
+   new NameConfig("svgDownload", trans("component.svgDownload")),
+   new NameConfig("imageName", trans("component.imageName")),
+   new NameConfig("designer", trans("component.designer")),
+   new NameConfig("showLogo", trans("component.showLogo")),
+]);
diff --git a/lowcoder-comp-bpmn-io/src/README.md b/lowcoder-comp-bpmn-io/src/README.md
@@ -0,0 +1,35 @@
+# Using Lowcoder Component Plugin
+
+## Prerequisites
+Before you start, ensure you have a running Lowcoder installation. Alternatively, you can use it online at [https://app.lowcoder.cloud](https://app.lowcoder.cloud).
+
+## Steps to Use the Plugin
+1. **Open the App Editor**: Navigate to the App Editor within your Lowcoder application.
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/main/images/App%20Editor%20%7C%20Main%20Screeen%20clean.png" alt="Lowcoder App Editor">
+</p>
+
+1. **Access Components Panel**: In the App Editor, locate the right panel where components are listed.
+
+2. **Switch to Extensions**: Find and switch on the "Extensions" toggle. This option allows you to add additional components to your project.
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/main/images/App%20Editor%20%7C%20Import%20Component%20Plugin%201.png" alt="Lowcoder App Editor">
+</p>
+
+3. **Load the Plugin**: Here you have the option to load a Lowcoder Component Plugin from NPM. For example, to load the "hill charts" plugin, type `lowcoder-comp-hillcharts` in the provided field.
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/main/images/App%20Editor%20%7C%20Import%20Component%20Plugin%202.png" alt="Lowcoder App Editor">
+</p>
+
+4. **Start Using the Plugin**: After loading the plugin, it will be available for use within your Lowcoder project. You can now integrate and customize the component as per your application's needs.
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/main/images/App%20Editor%20%7C%20Import%20Component%20Plugin%203.png" alt="Lowcoder App Editor">
+</p>
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/main/images/App%20Editor%20%7C%20Import%20Component%20Plugin%204.png" alt="Lowcoder App Editor">
+</p>
diff --git a/lowcoder-comp-bpmn-io/src/app-env.d.ts b/lowcoder-comp-bpmn-io/src/app-env.d.ts
@@ -0,0 +1,3 @@
+/// <reference types="lowcoder-cli/client" />
+
+declare module "lowcoder-sdk";
diff --git a/lowcoder-comp-bpmn-io/src/i18n/comps/index.tsx b/lowcoder-comp-bpmn-io/src/i18n/comps/index.tsx
@@ -0,0 +1,30 @@
+import { getI18nObjects, getValueByLocale, Translator } from "lowcoder-sdk";
+import * as localeData from "./locales";
+import { I18nObjects } from "./locales/types";
+
+export const { trans, language } = new Translator<typeof localeData.en>(
+  localeData,
+  REACT_APP_LANGUAGES
+);
+
+export const i18nObjs = getI18nObjects<I18nObjects>(localeData, REACT_APP_LANGUAGES);
+
+export function getEchartsLocale() {
+  return getValueByLocale("EN", (locale) => {
+    switch (locale.language) {
+      case "en":
+        return "EN";
+      case "zh":
+        return "ZH";
+    }
+  });
+}
+
+export function getCalendarLocale() {
+  switch (language) {
+    case "zh":
+      return "zh-cn";
+    default:
+      return "en-gb";
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		/// <reference types="lowcoder-cli/client" />

		declare module "lowcoder-sdk";