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: [

client/packages/lowcoder-comps/package.json

@@ -4,6 +4,6 @@ const echartsUrlLocale = language === "zh" ? "zh" : "en";
 export const optionUrl = `https://echarts.apache.org/${echartsUrlLocale}/option.html`;
 export const examplesUrl = `https://echarts.apache.org/examples/${echartsUrlLocale}/index.html`;
 export const xAxisTypeUrl = `${optionUrl}#xAxis.type`;
-export const googleMapsApiUrl = `https://maps.googleapis.com/maps/api/js`;
+export const googleMapsApiUrl = `https://maps.googleapis.com/maps/api/js?v=3.exp`;
 export const mapOptionUrl = `https://github.com/plainheart/echarts-extension-gmap`;
 export const mapExamplesUrl = `https://codepen.io/plainheart/pen/VweLGbR`;

client/packages/lowcoder-comps/src/comps/chartComp/chartComp.tsx

@@ -1,5 +1,5 @@
 import { jsonControl, JSONObject, stateComp, toJSONObjectArray, toObject } from "lowcoder-sdk";
-import { withDefault, BooleanControl, StringControl, NumberControl, JSONObjectControl } from "lowcoder-sdk";
+import { withDefault, BooleanControl, StringControl, NumberControl, JSONObjectControl, FunctionControl } from "lowcoder-sdk";
 import { dropdownControl } from "lowcoder-sdk";
 import { eventHandlerControl } from "lowcoder-sdk";
 import { valueComp, withType } from "lowcoder-sdk";
@@ -225,6 +225,8 @@ export const chartUiModeChildren = {
 };
 
 const chartMapModeChildren = {
+  mapInstance: stateComp(),
+  getMapInstance: FunctionControl,
   mapApiKey: withDefault(StringControl, ''),
   mapZoomLevel: withDefault(NumberControl, 3),
   mapCenterLng: withDefault(NumberControl, 15.932644),

client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/chartUrls.tsx

@@ -52,7 +52,7 @@ export function transformData(
 }
 
 const notAxisChartSet: Set<CharOptionCompType> = new Set(["pie"] as const);
-export const echartsConfigOmitChildren = ["hidden", "selectedPoints", "onEvent"] as const;
+export const echartsConfigOmitChildren = ["hidden", "selectedPoints", "onEvent", "mapInstance"] as const;
 type EchartsConfigProps = Omit<ChartCompPropsType, typeof echartsConfigOmitChildren[number]>;
 
 export function isAxisChart(type: CharOptionCompType) {
@@ -141,7 +141,7 @@ export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSiz
         center: [mapCenterLng, mapCenterLat],
         zoom: mapZoomLevel,
         renderOnMoving: true,
-        // echartsLayerZIndex: 2019,
+        echartsLayerZIndex: 2019,
         roam: true
       },
       ...echartsOption,
@@ -261,12 +261,18 @@ export function getSelectedPoints(param: any, option: any) {
 }
 
 export function loadGoogleMapsScript(apiKey?: string) {
-  const mapsUrl = `${googleMapsApiUrl}?key=${apiKey}`;
+  const mapsUrl = `${googleMapsApiUrl}&key=${apiKey}`;
   const scripts = document.getElementsByTagName('script');
-  const scriptIndex = _.findIndex(scripts, (script) => script.src === mapsUrl);
+  // is script already loaded
+  let scriptIndex = _.findIndex(scripts, (script) => script.src.endsWith(mapsUrl));
   if(scriptIndex > -1) {
     return scripts[scriptIndex];
   }
+  // is script loaded with diff api_key, remove the script and load again
+  scriptIndex = _.findIndex(scripts, (script) => script.src.startsWith(googleMapsApiUrl));
+  if(scriptIndex > -1) {
+    scripts[scriptIndex].remove();
+  }
 
   const script = document.createElement("script");
   script.type = "text/javascript";

client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx

@@ -59,14 +59,20 @@ export default class EChartsReactCore extends PureComponent<EChartsReactProps> {
       !isEqual(prevProps.theme, this.props.theme) ||
       !isEqual(prevProps.opts, this.props.opts) ||
       !isEqual(prevProps.onEvents, this.props.onEvents) ||
-      this.props.option.gmap
+      !isEqual(prevProps.mode, this.props.mode)
+      // this.props.option.gmap
     ) {
       this.dispose();
 
       this.renderNewEcharts(); // re-render
       return;
     }
 
+    if(this.props.mode === "json") {
+      this.updateEChartsOption();
+      return;
+    }
+
     // when these props are not isEqual, update echarts
     const pickKeys = ["option", "notMerge", "lazyUpdate", "showLoading", "loadingOption"];
     if (!isEqual(_.pick(this.props, pickKeys), _.pick(prevProps, pickKeys))) {

client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts

@@ -1,4 +1,5 @@
 import * as echarts from "echarts";
+import "echarts-wordcloud";
 import { EChartsReactProps, EChartsInstance, EChartsOptionWithMap } from "./types";
 import EChartsReactCore from "./core";
 

client/packages/lowcoder-comps/src/comps/chartComp/reactEcharts/core.tsx

@@ -69,4 +69,8 @@ export type EChartsReactProps = {
    * should update echarts options
    */
   readonly shouldSetOption?: (prevProps: EChartsReactProps, props: EChartsReactProps) => boolean;
+  /** 
+   * echarts mode: ui | json | map 
+  */
+  readonly mode?: 'ui' | 'json' | 'map'
 };