@nocobase/plugin-map 0.10.0-alpha.5 → 0.10.1-alpha.1

package/lib/client/components/GoogleMaps/Block.js

@@ -0,0 +1,377 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GoogleMapsBlock = void 0;
+function _icons() {
+  const data = require("@ant-design/icons");
+  _icons = function _icons() {
+    return data;
+  };
+  return data;
+}
+function _css() {
+  const data = require("@emotion/css");
+  _css = function _css() {
+    return data;
+  };
+  return data;
+}
+function _react() {
+  const data = require("@formily/react");
+  _react = function _react() {
+    return data;
+  };
+  return data;
+}
+function _client() {
+  const data = require("@nocobase/client");
+  _client = function _client() {
+    return data;
+  };
+  return data;
+}
+function _ahooks() {
+  const data = require("ahooks");
+  _ahooks = function _ahooks() {
+    return data;
+  };
+  return data;
+}
+function _antd() {
+  const data = require("antd");
+  _antd = function _antd() {
+    return data;
+  };
+  return data;
+}
+function _react2() {
+  const data = _interopRequireWildcard(require("react"));
+  _react2 = function _react2() {
+    return data;
+  };
+  return data;
+}
+var _constants = require("../../constants");
+var _locale = require("../../locale");
+var _Map = require("./Map");
+var _utils = require("./utils");
+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; }
+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) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+const OVERLAY_KEY = 'google-maps-overlay-id';
+const OVERLAY_SELECtED = 'google-maps-overlay-selected';
+const labelClass = (0, _css().css)`
+  margin-top: 6px;
+  padding: 2px 4px;
+  background: #fff;
+  border: 1px solid #0000f5;
+`;
+const GoogleMapsBlock = props => {
+  const _useProps = (0, _client().useProps)(props),
+    fieldNames = _useProps.fieldNames,
+    _useProps$dataSource = _useProps.dataSource,
+    dataSource = _useProps$dataSource === void 0 ? [] : _useProps$dataSource,
+    fixedBlock = _useProps.fixedBlock,
+    zoom = _useProps.zoom,
+    setSelectedRecordKeys = _useProps.setSelectedRecordKeys;
+  const _useCollection = (0, _client().useCollection)(),
+    getField = _useCollection.getField,
+    getPrimaryKey = _useCollection.getPrimaryKey;
+  const _ref = fieldNames || {
+      marker: 'id',
+      field: 'id'
+    },
+    markerName = _ref.marker,
+    fieldName = _ref.field;
+  const field = getField(fieldName);
+  const _useState = (0, _react2().useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isMapInitialization = _useState2[0],
+    setIsMapInitialization = _useState2[1];
+  const mapRef = (0, _react2().useRef)();
+  const _useState3 = (0, _react2().useState)(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    record = _useState4[0],
+    setRecord = _useState4[1];
+  const _useState5 = (0, _react2().useState)(''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    selectingMode = _useState6[0],
+    setSelecting = _useState6[1];
+  const _useMapTranslation = (0, _locale.useMapTranslation)(),
+    t = _useMapTranslation.t;
+  const compile = (0, _client().useCompile)();
+  const _useFilterAPI = (0, _client().useFilterAPI)(),
+    isConnected = _useFilterAPI.isConnected,
+    doFilter = _useFilterAPI.doFilter;
+  const _useState7 = (0, _react2().useState)(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    setPrevSelected = _useState8[1];
+  const selectingModeRef = (0, _react2().useRef)(selectingMode);
+  const selectionOverlayRef = (0, _react2().useRef)();
+  const overlaysRef = (0, _react2().useRef)([]);
+  selectingModeRef.current = selectingMode;
+  const setOverlayOptions = (overlay, state) => {
+    const selected = typeof state !== 'undefined' ? !state : overlay.get(OVERLAY_SELECtED);
+    overlay.set(OVERLAY_SELECtED, !selected);
+    overlay.setOptions(_objectSpread({}, selected ? {
+      icon: (0, _utils.getIcon)(_constants.defaultImage),
+      strokeColor: '#4e9bff',
+      fillColor: '#4e9bff'
+    } : {
+      icon: (0, _utils.getIcon)(_constants.selectedImage),
+      strokeColor: '#F18b62',
+      fillColor: '#F18b62'
+    }));
+  };
+  // selection
+  (0, _react2().useEffect)(() => {
+    if (selectingMode !== 'selection') {
+      return;
+    }
+    if (!mapRef.current.drawingManager) {
+      mapRef.current.drawingManager = mapRef.current.createDraw(true, {
+        editable: true,
+        draggable: true
+      });
+    }
+    const listenerSet = new Set();
+    mapRef.current.drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
+    mapRef.current.drawingManager.addListener('overlaycomplete', event => {
+      const polygon = event.overlay;
+      mapRef.current.drawingManager.setDrawingMode(null);
+      selectionOverlayRef.current = polygon;
+      const path = polygon.getPath();
+      ['insert_at', 'remove_at', 'set_at'].forEach(key => {
+        listenerSet.add(path.addListener(key, () => {}).remove);
+      });
+    });
+    return () => {
+      var _selectionOverlayRef$, _selectionOverlayRef$2;
+      listenerSet.forEach(i => {
+        i();
+      });
+      if (!mapRef.current) return;
+      (_selectionOverlayRef$ = selectionOverlayRef.current) === null || _selectionOverlayRef$ === void 0 ? void 0 : _selectionOverlayRef$.unbindAll();
+      (_selectionOverlayRef$2 = selectionOverlayRef.current) === null || _selectionOverlayRef$2 === void 0 ? void 0 : _selectionOverlayRef$2.setMap(null);
+      selectionOverlayRef.current = null;
+      mapRef.current.drawingManager.setDrawingMode(null);
+      mapRef.current.drawingManager.unbindAll();
+    };
+  }, [selectingMode]);
+  (0, _react2().useEffect)(() => {
+    if (selectingMode) {
+      return () => {
+        if (!selectingModeRef.current) {
+          overlaysRef.current.forEach(o => {
+            setOverlayOptions(o, false);
+          });
+        }
+      };
+    }
+  }, [selectingMode]);
+  const onSelectingComplete = (0, _ahooks().useMemoizedFn)(() => {
+    const overlay = selectionOverlayRef.current;
+    const overlays = overlaysRef.current;
+    const poly = google.maps.geometry.poly;
+    const selectedOverlays = overlays.filter(o => {
+      if (o === overlay || o.get(OVERLAY_KEY) === undefined) return;
+      if (o instanceof google.maps.Marker) {
+        return poly.containsLocation(o.getPosition(), overlay);
+      } else if (o instanceof google.maps.Circle) {
+        return poly.containsLocation(o.getCenter(), overlay);
+      } else {
+        return o.getPath().getArray().some(position => {
+          return poly.containsLocation(position, overlay);
+        });
+      }
+    });
+    const ids = selectedOverlays.map(o => {
+      setOverlayOptions(o, true);
+      return o.get(OVERLAY_KEY);
+    });
+    setSelectedRecordKeys(lastIds => ids.concat(lastIds));
+    overlay.unbindAll();
+    overlay.setMap(null);
+    mapRef.current.drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
+  });
+  (0, _react2().useEffect)(() => {
+    var _mapRef$current;
+    if (!field || !((_mapRef$current = mapRef.current) === null || _mapRef$current === void 0 ? void 0 : _mapRef$current.map)) return;
+    const overlays = dataSource.map(item => {
+      const data = item[fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.field];
+      if (!data) return;
+      const overlay = mapRef.current.setOverlay(field.type, data, {
+        strokeColor: '#4e9bff',
+        fillColor: '#4e9bff',
+        cursor: 'pointer',
+        label: {
+          className: labelClass,
+          fontFamily: 'inherit',
+          fontSize: '13px',
+          color: '#333',
+          text: (fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.marker) ? compile(item[markerName]) : undefined
+        }
+      });
+      overlay.set(OVERLAY_KEY, item[getPrimaryKey()]);
+      return overlay;
+    }).filter(Boolean);
+    overlaysRef.current = overlays;
+    mapRef.current.setFitView(overlays);
+    const events = overlays.map(o => {
+      const onClick = event => {
+        const overlay = o;
+        const id = overlay.get(OVERLAY_KEY);
+        if (!id) return;
+        const data = dataSource === null || dataSource === void 0 ? void 0 : dataSource.find(item => {
+          return id === item[getPrimaryKey()];
+        });
+        // 筛选区块模式
+        if (isConnected) {
+          setPrevSelected(prev => {
+            prev && clearSelected(overlay);
+            if (prev === o) {
+              clearSelected(overlay);
+              // 删除过滤参数
+              doFilter(null);
+              return null;
+            } else {
+              selectMarker(overlay);
+              doFilter(data[getPrimaryKey()], target => target.field || getPrimaryKey(), '$eq');
+            }
+            return overlay;
+          });
+          return;
+        }
+        if (data) {
+          setRecord(data);
+        }
+      };
+      o.addListener('click', onClick);
+      return () => o.unbindAll();
+    });
+    return () => {
+      overlays.forEach(ov => {
+        ov.setMap(null);
+        ov.unbindAll();
+      });
+      events.forEach(e => e());
+    };
+  }, [dataSource, isMapInitialization, markerName, field.type, isConnected]);
+  (0, _react2().useEffect)(() => {
+    setTimeout(() => {
+      setSelectedRecordKeys([]);
+    });
+  }, [dataSource]);
+  const mapRefCallback = instance => {
+    mapRef.current = instance;
+    setIsMapInitialization(!!(instance === null || instance === void 0 ? void 0 : instance.map) && !instance.errMessage);
+  };
+  return _react2().default.createElement("div", {
+    className: (0, _css().css)`
+        position: relative;
+        height: 100%;
+      `
+  }, isMapInitialization && _react2().default.createElement(_react2().default.Fragment, null, _react2().default.createElement("div", {
+    className: (0, _css().css)`
+              position: absolute;
+              left: 10px;
+              top: 10px;
+              z-index: 999;
+            `
+  }, _react2().default.createElement(_antd().Space, {
+    direction: "vertical"
+  }, _react2().default.createElement(_antd().Button, {
+    style: {
+      color: !selectingMode ? '#F18b62' : undefined,
+      borderColor: 'currentcolor'
+    },
+    onClick: e => {
+      e.stopPropagation();
+      setSelecting('');
+    },
+    icon: _react2().default.createElement(_icons().EnvironmentOutlined, null)
+  }), _react2().default.createElement(_antd().Button, {
+    style: {
+      color: selectingMode === 'selection' ? '#F18b62' : undefined,
+      borderColor: 'currentcolor'
+    },
+    onClick: e => {
+      e.stopPropagation();
+      setSelecting('selection');
+    },
+    icon: _react2().default.createElement(_icons().ExpandOutlined, null)
+  }), selectingMode === 'selection' ? _react2().default.createElement(_antd().Button, {
+    type: "primary",
+    icon: _react2().default.createElement(_icons().CheckOutlined, null),
+    title: t('Confirm selection'),
+    onClick: onSelectingComplete
+  }) : null)), _react2().default.createElement(MapBlockDrawer, {
+    record: record,
+    setVisible: setRecord
+  })), _react2().default.createElement(_Map.GoogleMapsComponent, _objectSpread(_objectSpread({}, props), {}, {
+    ref: mapRefCallback,
+    style: {
+      height: fixedBlock ? '100%' : null
+    },
+    zoom: zoom,
+    disabled: true,
+    block: true,
+    overlayCommonOptions: {
+      strokeColor: '#F18b62',
+      fillColor: '#F18b62'
+    }
+  })));
+};
+exports.GoogleMapsBlock = GoogleMapsBlock;
+const MapBlockDrawer = props => {
+  const setVisible = props.setVisible,
+    record = props.record;
+  const fieldSchema = (0, _react().useFieldSchema)();
+  const schema = (0, _react2().useMemo)(() => fieldSchema.reduceProperties((buf, current) => {
+    if (current.name === 'drawer') {
+      return current;
+    }
+    return buf;
+  }, null), [fieldSchema]);
+  return schema && _react2().default.createElement(_client().ActionContextProvider, {
+    value: {
+      visible: !!record,
+      setVisible
+    }
+  }, _react2().default.createElement(_client().RecordProvider, {
+    record: record
+  }, _react2().default.createElement(_react().RecursionField, {
+    schema: schema,
+    name: schema.name
+  })));
+};
+function clearSelected(target) {
+  if (target instanceof google.maps.Marker) {
+    return target.setIcon((0, _utils.getIcon)(_constants.defaultImage));
+  }
+  target.setOptions({
+    strokeColor: '#4e9bff',
+    fillColor: '#4e9bff'
+  });
+}
+function selectMarker(target) {
+  if (target instanceof google.maps.Marker) {
+    return target.setIcon((0, _utils.getIcon)(_constants.selectedImage));
+  }
+  target.setOptions({
+    strokeColor: '#F18b62',
+    fillColor: '#F18b62'
+  });
+}

package/lib/client/components/GoogleMaps/Map.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="google.maps" />
+import React from 'react';
+import { MapEditorType } from '../../types';
+export declare type OverlayOptions = google.maps.PolygonOptions & google.maps.MarkerOptions & google.maps.PolylineOptions;
+export declare const getDrawingMode: (type: MapEditorType) => "polygon" | "circle" | "marker" | "polyline";
+export interface GoogleMapsComponentProps {
+    value?: any;
+    onChange?: (value: number[]) => void;
+    disabled?: boolean;
+    mapType: string;
+    /**
+     * only ReadPretty
+     */
+    readonly: string;
+    zoom: number;
+    type: MapEditorType;
+    style?: React.CSSProperties;
+    overlayCommonOptions?: OverlayOptions;
+    block?: boolean;
+}
+export interface GoogleMapForwardedRefProps {
+    setOverlay: (t: MapEditorType, v: any, o?: OverlayOptions) => google.maps.MVCObject;
+    getOverlay: (t: MapEditorType, v: any, o?: OverlayOptions) => google.maps.MVCObject;
+    setFitView: (overlays: google.maps.MVCObject[]) => void;
+    createDraw: (onlyCreate?: boolean, additionalOptions?: OverlayOptions) => any;
+    map: google.maps.Map;
+    overlay: google.maps.MVCObject;
+    drawingManager: google.maps.drawing.DrawingManager;
+    errMessage?: string;
+}
+export declare const GoogleMapsComponent: React.ForwardRefExoticComponent<GoogleMapsComponentProps & React.RefAttributes<GoogleMapForwardedRefProps>>;