Merge branch 'dev' into agora-integrationn

Author: FalkWolsky

.DS_Store

@@ -6,15 +6,19 @@ updates:
     directory: "/server/api-service"
     schedule:
       interval: "monthly"
+    target-branch: "dev"
   - package-ecosystem: "npm"
     directory: "/server/node-service"
     schedule:
       interval: "monthly"
+    target-branch: "dev"
   - package-ecosystem: "npm"
     directory: "/client"
     schedule:
       interval: "monthly"
+    target-branch: "dev"
   - package-ecosystem: "docker"
     directory: "/deploy/docker"
     schedule:
       interval: "monthly"
+    target-branch: "dev"

.github/dependabot.yml

@@ -4,3 +4,4 @@ stacks/
 client/.yarn/cache/*.zip
 server/node-service/.yarn/cache/*.zip
 .metadata/
+.DS_Store

.gitignore

@@ -6,7 +6,7 @@
 
 #### Use prebuilt docker image
 
-Simply run below command to start a backend server.
+Simply run the below command to start a backend server.
 
 ```bash
 docker run -d --name lowcoder -p 3000:3000 -v "$PWD/stacks:/lowcoder-stacks" lowcoderorg/lowcoder-ce
@@ -16,8 +16,8 @@ For more information, view our [docs](https://docs.lowcoder.cloud/lowcoder-docum
 
 #### Build Docker image from source
 
-1. Check out source code and change to source dir.
-2. Use the command below to build Docker image :
+1. Check out the source code and change to source dir.
+2. Use the command below to build a Docker image :
 
 ```bash
 docker build -f ./deploy/docker/Dockerfile -t lowcoder-dev .
@@ -31,6 +31,7 @@ docker run -d --name lowcoder-dev -p 3000:3000 -v "$PWD/stacks:/lowcoder-stacks"
 
 ### Start develop
 
+
 1. Check out source code.
 2. Change to **/client** dir in the source dir.
 

client/README.md

@@ -33,7 +33,7 @@
     "@types/qrcode.react": "^1.0.2",
     "@types/react-grid-layout": "^1.3.0",
     "@types/react-helmet": "^6.1.5",
-    "@types/react-resizable": "^1.7.4",
+    "@types/react-resizable": "^3.0.5",
     "@types/react-router-dom": "^5.3.2",
     "@types/shelljs": "^0.8.11",
     "@types/styled-components": "^5.1.19",

client/package.json

@@ -34,6 +34,7 @@ declare var LOWCODER_NODE_SERVICE_URL: string;
 declare var LOWCODER_SHOW_BRAND: string;
 declare var LOWCODER_CUSTOM_LOGO: string;
 declare var LOWCODER_CUSTOM_LOGO_SQUARE: string;
+declare var LOWCODER_CUSTOM_AUTH_WELCOME_TEXT: string;
 declare var REACT_APP_ENV: string;
 declare var REACT_APP_BUILD_ID: string;
 declare var REACT_APP_LOG_LEVEL: string;

client/packages/lowcoder-cli/client.d.ts

@@ -2,4 +2,5 @@ import config from "../../config/test/jest.config.js";
 
 export default {
   ...config,
+  setupFiles: [...config.setupFiles, 'jest-canvas-mock'],
 };

client/packages/lowcoder-comps/icons/mermaidchart.svg

@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-comps",
-  "version": "0.0.13",
+  "version": "0.0.17",
   "type": "module",
   "license": "MIT",
   "dependencies": {
@@ -15,6 +15,7 @@
     "@types/react-dom": "17",
     "big.js": "^6.2.1",
     "echarts-extension-gmap": "^1.6.0",
+    "echarts-wordcloud": "^2.1.0",
     "lowcoder-cli": "workspace:^",
     "lowcoder-sdk": "workspace:^",
     "mermaid": "^10.2.4",
@@ -29,16 +30,16 @@
         "name": "Chart",
         "icon": "./icons/icon-chart.svg",
         "layoutInfo": {
-          "w": 11,
-          "h": 35
+          "w": 15,
+          "h": 40
         }
       },
       "imageEditor": {
         "name": "Image Editor",
         "icon": "./icons/icon-chart.svg",
         "layoutInfo": {
           "w": 15,
-          "h": 60
+          "h": 40
         }
       },
       "calendar": {
@@ -48,6 +49,14 @@
           "w": 15,
           "h": 60
         }
+      },
+      "mermaid": {
+        "name": "Mermaid",
+        "icon": "./icons/mermaidchart.svg",
+        "layoutInfo": {
+          "w": 15,
+          "h": 40
+        }
       }
     }
   },
@@ -60,6 +69,7 @@
   },
   "devDependencies": {
     "jest": "29.3.0",
+    "jest-canvas-mock": "^2.5.2",
     "vite": "^4.3.9",
     "vite-tsconfig-paths": "^3.6.0"
   }

client/packages/lowcoder-comps/jest.config.js

@@ -23,6 +23,7 @@ import {
   UICompBuilder,
   withDefault,
   withExposingConfigs,
+  withMethodExposing,
   withViewFn,
   ThemeContext,
   chartColorPalette,
@@ -46,6 +47,10 @@ let ChartTmpComp = (function () {
 })();
 
 ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
+  const apiKey = comp.children.mapApiKey.getView();
+  const mode = comp.children.mode.getView();
+  const onEvent = comp.children.onEvent.getView();
+
   const echartsCompRef = useRef<ReactECharts | null>();
   const [chartSize, setChartSize] = useState<ChartSize>();
   const [mapScriptLoaded, setMapScriptLoaded] = useState(false);
@@ -55,21 +60,24 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
     color: chartColorPalette,
     backgroundColor: "#fff",
   };
+
   let themeConfig = defaultChartTheme;
   try {
     themeConfig = theme?.theme.chart ? JSON.parse(theme?.theme.chart) : defaultChartTheme;
   } catch (error) {
     log.error('theme chart error: ', error);
   }
-  const onEvent = comp.children.onEvent.getView();
+
   useEffect(() => {
+    if(mode !== 'ui') return;
+    
     // bind events
     const echartsCompInstance = echartsCompRef?.current?.getEchartsInstance();
     if (!echartsCompInstance) {
       return _.noop;
     }
-    echartsCompInstance.on("selectchanged", (param: any) => {
-      const option: any = echartsCompInstance.getOption();
+    echartsCompInstance?.on("selectchanged", (param: any) => {
+      const option: any = echartsCompInstance?.getOption();
       //log.log("chart select change", param);
       if (param.fromAction === "select") {
         comp.dispatch(changeChildAction("selectedPoints", getSelectedPoints(param, option)));
@@ -80,8 +88,8 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
       }
     });
     // unbind
-    return () => echartsCompInstance.off("selectchanged");
-  }, [onEvent]);
+    return () => echartsCompInstance?.off("selectchanged");
+  }, [mode, onEvent]);
 
   const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren);
   const option = useMemo(() => {
@@ -96,27 +104,33 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
   }, [mapScriptLoaded])
 
   const loadGoogleMapsData = () => {
-    const echartsCompInstance = echartsCompRef?.current?.getEchartsInstance();
-    if (!echartsCompInstance) {
-      return _.noop;
-    }
-    echartsCompInstance.getModel().getComponent("gmap").getGoogleMap();
-  }
+    setTimeout(() => {
+      const echartsCompInstance = echartsCompRef?.current?.getEchartsInstance();
+      if (!echartsCompInstance) {
+        return _.noop;
+      }
 
-  const apiKey = comp.children.mapApiKey.getView();
-  const mode = comp.children.mode.getView();
+      let mapInstance = undefined;
+      mapInstance = echartsCompInstance?.getModel()?.getComponent("gmap")?.getGoogleMap();
+      comp.dispatch(changeChildAction("mapInstance", mapInstance));
+    }, 500)
+  }
+  
   useEffect(() => {
-    if(mode === 'map') {
-      const gMapScript = loadGoogleMapsScript('');
-      if(isMapScriptLoaded) {
-        loadGoogleMapsData();
-        return;
-      }
-      gMapScript.addEventListener('load', function () {
-        setMapScriptLoaded(true);
-        loadGoogleMapsData();
-      });
+    if( mode !== 'map') {
+      comp.dispatch(changeChildAction("mapInstance", undefined));
+      return;
     }
+
+    const gMapScript = loadGoogleMapsScript(apiKey);
+    if(isMapScriptLoaded) {
+      loadGoogleMapsData();
+      return;
+    }
+    gMapScript.addEventListener('load', function () {
+      setMapScriptLoaded(true);
+      loadGoogleMapsData();
+    });
   }, [mode, apiKey, option])
 
   return (
@@ -142,6 +156,7 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
           opts={{ locale: getEchartsLocale() }}
           option={option}
           theme={mode !== 'map' ? themeConfig : undefined}
+          mode={mode}
         />
       )}
     </ReactResizeDetector>
@@ -241,7 +256,7 @@ ChartTmpComp = class extends ChartTmpComp {
   }
 };
 
-const ChartComp = withExposingConfigs(ChartTmpComp, [
+let ChartComp = withExposingConfigs(ChartTmpComp, [
   depsConfig({
     name: "selectedPoints",
     desc: trans("chart.selectedPointsDesc"),
@@ -266,6 +281,17 @@ const ChartComp = withExposingConfigs(ChartTmpComp, [
   new NameConfig("title", trans("chart.titleDesc")),
 ]);
 
+ChartComp = withMethodExposing(ChartComp, [
+  {
+    method: {
+      name: "getMapInstance",
+    },
+    execute: (comp) => {
+      return comp.children.mapInstance.getView()
+    },
+  },
+])
+
 export const ChartCompWithDefault = withDefault(ChartComp, {
   xAxisKey: "date",
   series: [