@nocobase/plugin-map 0.8.1-alpha.3

package/lib/server/fields/polygon.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PolygonField = void 0;
+
+function _database() {
+  const data = require("@nocobase/database");
+
+  _database = function _database() {
+    return data;
+  };
+
+  return data;
+}
+
+function _sequelize() {
+  const data = require("sequelize");
+
+  _sequelize = function _sequelize() {
+    return data;
+  };
+
+  return data;
+}
+
+var _helpers = require("../helpers");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+class Polygon extends _sequelize().DataTypes.ABSTRACT {
+  constructor(...args) {
+    super(...args);
+    this.key = 'Polygon';
+  }
+
+}
+
+class PolygonField extends _database().Field {
+  constructor(options, context) {
+    const name = options.name;
+    super(_objectSpread({
+      get() {
+        const value = this.getDataValue(name);
+
+        if ((0, _helpers.isPg)(context)) {
+          return (0, _helpers.toValue)(value);
+        } else if ((0, _helpers.isMysql)(context)) {
+          return (value === null || value === void 0 ? void 0 : value.coordinates[0].slice(0, -1)) || null;
+        } else {
+          return value;
+        }
+      },
+
+      set(value) {
+        var _value;
+
+        if (!((_value = value) === null || _value === void 0 ? void 0 : _value.length)) value = null;else if ((0, _helpers.isPg)(context)) {
+          value = (0, _helpers.joinComma)(value.map(item => (0, _helpers.joinComma)(item)));
+        } else if ((0, _helpers.isMysql)(context)) {
+          value = {
+            type: 'Polygon',
+            coordinates: [value.concat([value[0]])]
+          };
+        }
+        this.setDataValue(name, value);
+      }
+
+    }, options), context);
+  }
+
+  get dataType() {
+    if ((0, _helpers.isPg)(this.context)) {
+      return Polygon;
+    } else if ((0, _helpers.isMysql)(this.context)) {
+      return _sequelize().DataTypes.GEOMETRY('POLYGON');
+    } else {
+      return _sequelize().DataTypes.JSON;
+    }
+  }
+
+}
+
+exports.PolygonField = PolygonField;

package/lib/server/helpers/index.d.ts

@@ -0,0 +1,6 @@
+export declare const joinComma: (value: any[]) => string;
+export declare const toValue: (value?: string) => any;
+export declare const getDialect: (ctx: any) => any;
+export declare const isPg: (ctx: any) => boolean;
+export declare const isSqlite: (ctx: any) => boolean;
+export declare const isMysql: (ctx: any) => boolean;

package/lib/server/helpers/index.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toValue = exports.joinComma = exports.isSqlite = exports.isPg = exports.isMysql = exports.getDialect = void 0;
+
+const joinComma = value => {
+  if (!value) return null;
+  return `(${value.join(',')})`;
+};
+
+exports.joinComma = joinComma;
+
+const toValue = value => {
+  if (!value) return null;
+  return JSON.parse(value.replace(/\(/g, '[').replace(/\)/g, ']'));
+};
+
+exports.toValue = toValue;
+
+const getDialect = ctx => {
+  return (ctx.db || ctx.database).sequelize.getDialect();
+};
+
+exports.getDialect = getDialect;
+
+const isPg = ctx => {
+  return getDialect(ctx) === 'postgres';
+};
+
+exports.isPg = isPg;
+
+const isSqlite = ctx => {
+  return getDialect(ctx) === 'sqlite';
+};
+
+exports.isSqlite = isSqlite;
+
+const isMysql = ctx => {
+  return getDialect(ctx) === 'mysql';
+};
+
+exports.isMysql = isMysql;

package/lib/server/index.d.ts

@@ -0,0 +1 @@
+export { default } from './plugin';

package/lib/server/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _plugin.default;
+  }
+});
+
+var _plugin = _interopRequireDefault(require("./plugin"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/server/plugin.d.ts

@@ -0,0 +1,11 @@
+import { InstallOptions, Plugin } from '@nocobase/server';
+export declare class MapPlugin extends Plugin {
+    afterAdd(): void;
+    beforeLoad(): void;
+    load(): Promise<void>;
+    install(options?: InstallOptions): Promise<void>;
+    afterEnable(): Promise<void>;
+    afterDisable(): Promise<void>;
+    remove(): Promise<void>;
+}
+export default MapPlugin;

package/lib/server/plugin.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MapPlugin = void 0;
+
+function _server() {
+  const data = require("@nocobase/server");
+
+  _server = function _server() {
+    return data;
+  };
+
+  return data;
+}
+
+var _fields = require("./fields");
+
+function _path() {
+  const data = require("path");
+
+  _path = function _path() {
+    return data;
+  };
+
+  return data;
+}
+
+var _actions = require("./actions");
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+class MapPlugin extends _server().Plugin {
+  afterAdd() {}
+
+  beforeLoad() {
+    const fields = {
+      point: _fields.PointField,
+      polygon: _fields.PolygonField,
+      lineString: _fields.LineStringField,
+      circle: _fields.CircleField
+    };
+    this.db.registerFieldTypes(fields);
+  }
+
+  load() {
+    var _this = this;
+
+    return _asyncToGenerator(function* () {
+      yield _this.db.import({
+        directory: (0, _path().resolve)(__dirname, 'collections')
+      });
+
+      _this.app.resource({
+        name: 'map-configuration',
+        actions: {
+          get: _actions.getConfiguration,
+          set: _actions.setConfiguration
+        },
+        only: ['get', 'set']
+      });
+    })();
+  }
+
+  install(options) {
+    return _asyncToGenerator(function* () {})();
+  }
+
+  afterEnable() {
+    return _asyncToGenerator(function* () {})();
+  }
+
+  afterDisable() {
+    return _asyncToGenerator(function* () {})();
+  }
+
+  remove() {
+    return _asyncToGenerator(function* () {})();
+  }
+
+}
+
+exports.MapPlugin = MapPlugin;
+var _default = MapPlugin;
+exports.default = _default;

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@nocobase/plugin-map",
+  "version": "0.8.1-alpha.3",
+  "main": "lib/server/index.js",
+  "devDependencies": {
+    "@nocobase/server": "0.8.1-alpha.3",
+    "@nocobase/test": "0.8.1-alpha.3"
+  },
+  "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
+    "@amap/amap-jsapi-types": "^0.0.10",
+    "@emotion/css": "^11.7.1",
+    "@formily/react": "2.0.20",
+    "ahooks": "^3.7.2",
+    "antd": "~4.19.5",
+    "sequelize": "^6.26.0"
+  },
+  "gitHead": "e03df3df5962b99d9fbf5b6e33fbe2b23f14f3d3"
+}

package/server.d.ts

@@ -0,0 +1,4 @@
+// @ts-nocheck
+export * from './lib/server';
+export { default } from './lib/server';
+

package/server.js

@@ -0,0 +1,30 @@
+"use strict";
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _index = _interopRequireWildcard(require("./lib/server"));
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _index.default;
+  }
+});
+
+Object.keys(_index).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _index[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _index[key];
+    }
+  });
+});

package/src/client/components/AMap.tsx

@@ -0,0 +1,369 @@
+import React from 'react';
+import { useEffect, useRef, useState } from 'react';
+import AMapLoader from '@amap/amap-jsapi-loader';
+import '@amap/amap-jsapi-types';
+import { useFieldSchema } from '@formily/react';
+import { useCollection } from '@nocobase/client';
+import { css } from '@emotion/css';
+import { Alert, Button, Modal } from 'antd';
+import { useMapTranslation } from '../locales';
+import Search from './Search';
+import { useMemoizedFn } from 'ahooks';
+import { useMapConfiguration } from '../hooks';
+import { useHistory } from 'react-router';
+import { SyncOutlined } from '@ant-design/icons';
+
+interface AMapComponentProps {
+  accessKey: string;
+  securityJsCode: string;
+  value: any;
+  onChange: (value: number[]) => void;
+  disabled?: boolean;
+  mapType: string;
+  zoom: number;
+}
+
+const methodMapping = {
+  point: {
+    mouseTool: 'marker',
+    propertyKey: 'position',
+    overlay: 'Marker',
+  },
+  polygon: {
+    mouseTool: 'polygon',
+    editor: 'PolygonEditor',
+    propertyKey: 'path',
+    overlay: 'Polygon',
+  },
+  lineString: {
+    mouseTool: 'polyline',
+    editor: 'PolylineEditor',
+    propertyKey: 'path',
+    overlay: 'Polyline',
+  },
+  circle: {
+    mouseTool: 'circle',
+    editor: 'CircleEditor',
+    transformOptions(value) {
+      return {
+        center: value.slice(0, 2),
+        radius: value[2],
+      };
+    },
+    overlay: 'Circle',
+  },
+};
+
+const AMapComponent: React.FC<AMapComponentProps> = (props) => {
+  const { accessKey, securityJsCode } = useMapConfiguration(props.mapType) || {};
+  const { value, onChange, disabled, zoom = 13 } = props;
+  const { t } = useMapTranslation();
+  const fieldSchema = useFieldSchema();
+  const aMap = useRef<any>();
+  const map = useRef<AMap.Map>();
+  const mouseTool = useRef<any>();
+  const [needUpdateFlag, forceUpdate] = useState([]);
+  const [errMessage, setErrMessage] = useState('');
+  const { getField } = useCollection();
+  const collectionField = getField(fieldSchema.name);
+  const type = collectionField?.interface;
+  const overlay = useRef<any>();
+  const editor = useRef(null);
+  const history = useHistory();
+  const id = useRef(`nocobase-map-${type}-${Date.now().toString(32)}`);
+
+  const [commonOptions] = useState<AMap.PolylineOptions & AMap.PolygonOptions>({
+    strokeWeight: 5,
+    strokeColor: '#4e9bff',
+    fillColor: '#4e9bff',
+    strokeOpacity: 1,
+  });
+
+  const toRemoveOverlay = useMemoizedFn(() => {
+    if (overlay.current) {
+      map.current?.remove(overlay.current);
+    }
+  });
+
+  const setTarget = useMemoizedFn(() => {
+    if (!disabled && type !== 'point' && editor.current) {
+      editor.current.setTarget(overlay.current);
+      editor.current.open();
+    }
+  });
+
+  const onMapChange = useMemoizedFn((target, onlyChange = false) => {
+    let nextValue = null;
+
+    if (type === 'point') {
+      const { lat, lng } = (target as AMap.Marker).getPosition();
+      nextValue = [lng, lat];
+    } else if (type === 'polygon' || type === 'lineString') {
+      nextValue = (target as AMap.Polygon).getPath().map((item) => [item.lng, item.lat]);
+      if (nextValue.length < 2) {
+        return;
+      }
+    } else if (type === 'circle') {
+      const center = target.getCenter();
+      const radius = target.getRadius();
+      nextValue = [center.lng, center.lat, radius];
+    }
+
+    if (!onlyChange) {
+      toRemoveOverlay();
+      overlay.current = target;
+      setTarget();
+    }
+    onChange(nextValue);
+  });
+
+  const createEditor = useMemoizedFn(() => {
+    const mapping = methodMapping[type as keyof typeof methodMapping];
+    if (mapping && 'editor' in mapping && !editor.current) {
+      editor.current = new aMap.current[mapping.editor](map.current);
+      editor.current.on('adjust', function ({ target }) {
+        onMapChange(target, true);
+      });
+      editor.current.on('move', function ({ target }) {
+        onMapChange(target, true);
+      });
+    }
+  });
+
+  const executeMouseTool = useMemoizedFn(() => {
+    if (!mouseTool.current || editor.current?.getTarget()) return;
+    const mapping = methodMapping[type as keyof typeof methodMapping];
+    if (!mapping) {
+      return;
+    }
+    mouseTool.current[mapping.mouseTool]({
+      ...commonOptions,
+    } as AMap.PolylineOptions);
+  });
+
+  const createMouseTool = useMemoizedFn(() => {
+    if (mouseTool.current) return;
+
+    mouseTool.current = new aMap.current.MouseTool(map.current);
+    mouseTool.current.on('draw', function ({ obj }) {
+      onMapChange(obj);
+    });
+
+    executeMouseTool();
+  });
+
+  const toCenter = (position, imm?: boolean) => {
+    if (map.current) {
+      map.current.setZoomAndCenter(18, position, imm);
+    }
+  };
+
+  const onReset = () => {
+    const ok = () => {
+      toRemoveOverlay();
+      if (editor.current) {
+        editor.current.setTarget();
+        editor.current.close();
+      }
+      onChange(null);
+    };
+    Modal.confirm({
+      title: t('Clear the canvas'),
+      content: t('Are you sure to clear the canvas?'),
+      okText: t('Confirm'),
+      cancelText: t('Cancel'),
+      onOk() {
+        ok();
+      },
+    });
+  };
+
+  const onFocusOverlay = () => {
+    if (overlay.current) {
+      map.current.setFitView([overlay.current]);
+    }
+  };
+
+  // 编辑时
+  useEffect(() => {
+    if (!aMap.current) return;
+    if (!value || overlay.current) {
+      return;
+    }
+    const mapping = methodMapping[type as keyof typeof methodMapping];
+    if (!mapping) {
+      return;
+    }
+    const options = { ...commonOptions };
+    if ('transformOptions' in mapping) {
+      Object.assign(options, mapping.transformOptions(value));
+    } else if ('propertyKey' in mapping) {
+      options[mapping.propertyKey] = value;
+    }
+    const nextOverlay = new aMap.current[mapping.overlay](options);
+
+    // 聚焦在编辑的位置
+    map.current.setFitView([nextOverlay]);
+
+    nextOverlay.setMap(map.current);
+    overlay.current = nextOverlay;
+
+    createEditor();
+    setTarget();
+  }, [value, needUpdateFlag, type, commonOptions]);
+
+  // 当在编辑时，关闭 mouseTool
+  useEffect(() => {
+    if (!mouseTool.current) return;
+
+    if (disabled) {
+      mouseTool.current?.close();
+      editor.current?.close();
+    } else {
+      executeMouseTool();
+      editor.current?.open();
+    }
+  }, [disabled]);
+
+  // AMap.MouseTool & AMap.XXXEditor
+  useEffect(() => {
+    if (!aMap.current || !type || disabled) return;
+    createMouseTool();
+    createEditor();
+  }, [disabled, needUpdateFlag, type]);
+
+  useEffect(() => {
+    if (!mouseTool.current || !editor.current) return;
+    const target = editor.current.getTarget();
+    if (target) {
+      mouseTool.current.close?.();
+    } else {
+      executeMouseTool();
+    }
+  }, [type, value]);
+
+  useEffect(() => {
+    if (!accessKey || map.current) return;
+
+    if (securityJsCode) {
+      (window as any)._AMapSecurityConfig = {
+        [securityJsCode.endsWith('_AMapService') ? 'serviceHOST' : 'securityJsCode']: securityJsCode,
+      };
+    }
+
+    AMapLoader.load({
+      key: accessKey,
+      version: '2.0',
+      plugins: ['AMap.MouseTool', 'AMap.PolygonEditor', 'AMap.PolylineEditor', 'AMap.CircleEditor'],
+    })
+      .then((amap) => {
+        setTimeout(() => {
+          map.current = new amap.Map(id.current, {
+            resizeEnable: true,
+            zoom,
+          } as AMap.MapOptions);
+          aMap.current = amap;
+          setErrMessage('');
+          forceUpdate([]);
+        }, Math.random() * 300);
+      })
+      .catch((err) => {
+        if (err.includes('多个不一致的 key')) {
+          setErrMessage(t('The AccessKey is incorrect, please check it'));
+        } else {
+          setErrMessage(err);
+        }
+      });
+
+    return () => {
+      map.current?.destroy();
+      aMap.current = null;
+      map.current = null;
+      mouseTool.current = null;
+      editor.current = null;
+    };
+  }, [accessKey, type, securityJsCode]);
+
+  if (!accessKey || errMessage) {
+    return (
+      <Alert
+        action={
+          <Button type="primary" onClick={() => history.push('/admin/settings/map-configuration/configuration')}>
+            {t('Go to the configuration page')}
+          </Button>
+        }
+        message={errMessage || t('Please configure the AccessKey and SecurityJsCode first')}
+        type="error"
+      />
+    );
+  }
+
+  return (
+    <div
+      className={css`
+        position: relative;
+      `}
+      id={id.current}
+      style={{
+        height: '500px',
+      }}
+    >
+      {/* bottom: 20px; right: 50%; transform: translateX(50%); z-index: 2; */}
+      <div
+        className={css`
+          position: absolute;
+          bottom: 80px;
+          right: 20px;
+          z-index: 10;
+        `}
+      >
+        <Button
+          onClick={onFocusOverlay}
+          disabled={!overlay.current}
+          type="primary"
+          shape="round"
+          size="large"
+          icon={<SyncOutlined />}
+        ></Button>
+      </div>
+      {!disabled ? (
+        <>
+          <Search toCenter={toCenter} aMap={aMap.current} />
+          <div
+            className={css`
+              position: absolute;
+              bottom: 20px;
+              left: 10px;
+              z-index: 2;
+              pointer-events: none;
+            `}
+          >
+            <Alert message={t('Click to select the starting point and double-click to end the drawing')} type="info" />
+          </div>
+          <div
+            className={css`
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              z-index: 2;
+            `}
+          >
+            <Button
+              disabled={!value}
+              style={{
+                height: '40px',
+              }}
+              onClick={onReset}
+              type="primary"
+              danger
+            >
+              {t('Clear')}
+            </Button>
+          </div>
+        </>
+      ) : null}
+    </div>
+  );
+};
+
+export default AMapComponent;