@hzab/form-render 1.3.3 → 1.4.0

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+# @hzab/form-render@1.4.0-beta
+
+break: location-list-picker 添加多区域规划
+fix: LocationListPicker 点位信息弹窗位置问题修复
+
 # @hzab/form-render@1.3.3
 
 fix: 富文本异步数据问题修复

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/form-render",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "description": "",
   "main": "src",
   "scripts": {
@@ -41,6 +41,7 @@
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@formily/core": "2.3.1",
     "@formily/react": "2.3.1",
+    "@turf/turf": "^6.5.0",
     "@formily/reactive-react": "2.3.1",
     "@wangeditor/editor-for-react": "^1.0.6",
     "ajv": "^8.12.0",
@@ -50,4 +51,4 @@
   "directories": {
     "lib": "lib"
   }
-}
+}

package/src/components/LocationListPicker/components/AddrList/index.less

@@ -9,6 +9,7 @@
     align-items: center;
     padding: 12px 24px;
     line-height: 1;
+    cursor: pointer;
 
     &.active {
       background: #f2f9ff;
@@ -39,6 +40,10 @@
       &:last-child {
         margin-right: none;
       }
+      &.disabled {
+        color: #999;
+        cursor: not-allowed;
+      }
     }
     .edit-btn {
       color: #0080ff;

package/src/components/LocationListPicker/components/AddrList/index.tsx

@@ -5,28 +5,53 @@ import "./index.less";
 import { useState } from "react";
 
 export const AddrList = (props) => {
-  const { list, ItemRender, onItemClick, onEdit, onDel, hasAction = true, activeId, onDelClick, onDelCancel } = props;
+  const {
+    readOnly,
+    disabled,
+    list,
+    ItemRender,
+    onItemClick,
+    onEdit,
+    onDel,
+    hasAction = true,
+    activeId,
+    onDelClick,
+    onDelCancel,
+  } = props;
 
   const CItemRender = ItemRender ?? LItemRender;
 
   return (
     <div className="addr-list">
       {list?.map((it, i) => {
+        const delCom = (
+          <DeleteOutlined
+            className={`action-btn del-btn ${disabled ? "disabled" : ""}`}
+            onClick={(e) => !disabled && onDelClick && onDelClick(it, i, e)}
+          />
+        );
         return (
           <div className={`addr-item ${activeId === it.id ? "active" : ""}`} key={it.id ?? i}>
             <div className="addr-item-content" onClick={(e) => onItemClick(it, i, e)}>
               <CItemRender item={it} index={i} />
             </div>
-            {hasAction && (
+            {!readOnly && hasAction && (
               <div className="action-box">
-                <EditOutlined className="action-btn edit-btn" onClick={(e) => onEdit && onEdit(it, i, e)} />
-                <Popconfirm
-                  title={"确认删除当前项？"}
-                  onConfirm={(e) => onDel && onDel(it, i, e)}
-                  onOpenChange={(open) => open === false && onDelCancel && onDelCancel(it, i)}
-                >
-                  <DeleteOutlined className="action-btn del-btn" onClick={(e) => onDelClick && onDelClick(it, i, e)} />
-                </Popconfirm>
+                <EditOutlined
+                  className={`action-btn edit-btn ${disabled ? "disabled" : ""}`}
+                  onClick={(e) => !disabled && onEdit && onEdit(it, i, e)}
+                />
+                {disabled ? (
+                  delCom
+                ) : (
+                  <Popconfirm
+                    title={"确认删除当前项？"}
+                    onConfirm={(e) => onDel && onDel(it, i, e)}
+                    onOpenChange={(open) => open === false && onDelCancel && onDelCancel(it, i)}
+                  >
+                    {delCom}
+                  </Popconfirm>
+                )}
               </div>
             )}
           </div>

package/src/components/LocationListPicker/components/Popup/index.less

@@ -1,5 +1,5 @@
 .popup-box {
-  position: absolute;
+  position: fixed;
   z-index: 9;
   min-width: 200px;
   padding: 20px;

package/src/components/LocationListPicker/components/Popup/index.tsx

@@ -1,4 +1,5 @@
 import { useRef, forwardRef, useImperativeHandle, useState } from "react";
+import { createPortal } from "react-dom";
 import { Button } from "antd";
 
 import FormRender from "@hzab/form-render";
@@ -61,26 +62,29 @@ export const Popup = forwardRef((props: IPopupProps, parentRef) => {
 
   const schema = mergeSchema(AddressSchema, formProps?.schema ?? RangeSchema);
 
-  return data ? (
-    <div className="popup-box" style={{ top: data?.top, left: data?.left }}>
-      <div className="popup-body">
-        {/* TODO: schema 中插入地址字段 text 格式 */}
-        <div>地址：{data?.address}</div>
-        <FormRender
-          ref={formRef}
-          {...formProps}
-          schema={schema}
-          initialValues={{ ...formProps?.initialValues, ...data }}
-        />
-      </div>
-      <div className="popup-footer">
-        <Button type="primary" onClick={onConfirm}>
-          确定
-        </Button>
-        <Button onClick={onCancel}>取消</Button>
-      </div>
-    </div>
-  ) : null;
+  return data
+    ? createPortal(
+        <div className="popup-box" style={{ top: data?.top, left: data?.left }}>
+          <div className="popup-body">
+            {/* TODO: schema 中插入地址字段 text 格式 */}
+            <div>地址：{data?.address}</div>
+            <FormRender
+              ref={formRef}
+              {...formProps}
+              schema={schema}
+              initialValues={{ ...formProps?.initialValues, ...data }}
+            />
+          </div>
+          <div className="popup-footer">
+            <Button type="primary" onClick={onConfirm}>
+              确定
+            </Button>
+            <Button onClick={onCancel}>取消</Button>
+          </div>
+        </div>,
+        document.body,
+      )
+    : null;
 });
 
 export default Popup;

package/src/components/LocationListPicker/index.less

@@ -2,24 +2,34 @@
   width: 100%;
   height: 722px;
   display: flex;
+
   .location-map-search {
     top: 12px;
     left: 12px;
   }
+
   .map-box {
     position: relative;
     width: 50%;
     min-height: 600px;
     margin-right: 12px;
+
     .location-list-picker-notice-bar {
       width: 120px;
       position: absolute;
       z-index: 9;
     }
+
+    .add-polygon-btn {
+      position: absolute;
+      top: 12px;
+      right: 112px;
+    }
+
     .add-btn {
       position: absolute;
       top: 12px;
       right: 12px;
     }
   }
-}
+}

package/src/components/LocationListPicker/index.tsx

@@ -2,7 +2,7 @@
 import { useEffect, useRef, useState } from "react";
 import { Button, message, Alert } from "antd";
 import { observer } from "@formily/react";
-
+import * as turf from "@turf/turf";
 import { nanoid } from "nanoid";
 
 import AddrList from "./components/AddrList";
@@ -19,17 +19,32 @@ import { iconCircle0080ff } from "./assets/icon";
 import "./index.less";
 
 export const LocationListPicker = observer((props) => {
-  const { value, listProps, popupProps, ItemRender, markerIconConf, isAutoSearch, onChange } = props;
+  const {
+    value,
+    readOnly,
+    disabled,
+    listProps,
+    popupProps,
+    ItemRender,
+    markerIconConf,
+    isAutoSearch,
+    /** 是否支持新增多边形 */
+    hasPolygon,
+    /** 是否支持新增点位 */
+    hasPoint = true,
+    onChange,
+  } = props;
 
   const [loading, setLoading] = useState(props.loading || false);
   const [showTip, setShowTip] = useState(false);
+  const [tipText, setTipText] = useState("点击选择地址");
   const [tipPosition, setTipPosition] = useState({});
   const [activeId, setActiveId] = useState();
-
   const mapDomRef = useRef();
   const mapUtilsRef = useRef<MapUtils>();
   const listRef = useRef(value);
   const statusRef = useRef();
+  const drawType = useRef("marker");
   const currentItemRef = useRef();
   const popupRef = useRef();
   const isEditingRef = useRef();
@@ -38,6 +53,7 @@ export const LocationListPicker = observer((props) => {
     return () => {
       // 取消监听
       mapUtilsRef.current?.off("click", onMapClick);
+      mapUtilsRef.current?.off("dblclick", onMapDbClick);
       mapDomRef.current.current.removeEventListener("mousemove", onMouseMove);
     };
   }, []);
@@ -52,28 +68,42 @@ export const LocationListPicker = observer((props) => {
         it.id = nanoid();
       }
     });
-    listRef.current = value;
+    listRef.current = value || [];
     renderMarker();
   }, [value]);
 
   function renderMarker() {
     listRef.current?.forEach((item) => {
-      mapUtilsRef.current.setMarker(item.longitude, item.latitude, {
-        ...item,
-        data: item,
-        onClick: onMarkerClick,
-      });
-      mapUtilsRef.current.setCircle(item.longitude, item.latitude, item.range, { ...item });
-      setInactiveMarkerIcon(item.id);
+      if (item.type === "polygon") {
+        mapUtilsRef.current.setPolygon({
+          ...item,
+          onClick: onPolygonClick,
+        });
+      } else {
+        mapUtilsRef.current.setMarker(item.longitude, item.latitude, {
+          ...item,
+          data: item,
+          onClick: onMarkerClick,
+        });
+        mapUtilsRef.current.setCircle(item.longitude, item.latitude, item.range, { ...item });
+      }
     });
+    clearActive();
   }
 
   function mapInit({ map, mapUtils, mapDomRef: _mapDomRef }) {
     mapDomRef.current = _mapDomRef;
     _mapDomRef.current.addEventListener("mousemove", onMouseMove);
     mapUtilsRef.current = mapUtils;
+    mapUtilsRef.current?.createPoly("Polygon");
     // 启动监听事件
     mapUtilsRef.current.on("click", onMapClick);
+    mapUtilsRef.current.on("dblclick", onMapDbClick);
+
+    mapUtilsRef.current.startPolygon({
+      onClick: onPolygonClick,
+    });
+
     renderMarker();
     mapUtilsRef.current.setFitView();
   }
@@ -83,18 +113,98 @@ export const LocationListPicker = observer((props) => {
       message.warn("请先完成上次操作");
       return;
     }
-    setInactiveMarkerIcon(activeId);
+    clearActive();
+    setTipText("点击选择地址");
+    setShowTip(true);
+    drawType.current = "marker";
+    statusRef.current = "add";
+  }
+
+  function onDrawClick() {
+    if (isEditingRef.current) {
+      message.warn("请先完成上次操作");
+      return;
+    }
+    isEditingRef.current = true;
+    setTipText("点击绘制区域 双击完成绘制");
+    setDrawPolygon();
     setShowTip(true);
+    drawType.current = "polygon";
     statusRef.current = "add";
   }
 
+  function setDrawPolygon() {
+    mapUtilsRef.current.setDrawPolygon({});
+  }
+
+  function setInactivePolygon(item) {
+    mapUtilsRef.current.setEditPolygon(item);
+  }
+
+  function onMapDbClick(e) {
+    if (drawType.current !== "polygon") {
+      return;
+    }
+    const graphical = mapUtilsRef.current.polyEditor?.PolygonEditor?.getTarget();
+    if (graphical) {
+      let points = [];
+      let center = [];
+      if (graphical.getPath().length > 0) {
+        const coordinate = graphical.getPath().map((item) => [item.lng, item.lat]);
+        points = coordinate;
+        center = getPolygonCenter(coordinate);
+      }
+      mapUtilsRef.current.polyEditor?.PolygonEditor?.close();
+      mapUtilsRef.current.polyEditor?.PolygonEditor?.setTarget();
+      handlePolygon({
+        type: "polygon",
+        id: graphical.id,
+        points,
+        longitude: center[0],
+        latitude: center[1],
+      });
+    }
+  }
+
+  function getPolygonCenter(coordinate) {
+    if (coordinate.length > 0) {
+      let features = turf.featureCollection(coordinate.map((item) => turf.point(item)));
+      let center = turf.center(features).geometry.coordinates;
+      return center;
+    }
+    return [];
+  }
+
+  async function handlePolygon(item) {
+    const status = statusRef.current;
+    const isAdd = status === "add";
+    const isEdit = status === "edit";
+    if (isAdd) {
+      currentItemRef.current = item;
+    }
+    // 接口获取地址
+    item.address = await getAddress(item.longitude, item.latitude);
+    const list = [...(listRef.current || [])];
+    if (isAdd) {
+      list.push(item);
+    } else if (isEdit) {
+      const idx = list.findIndex((it) => it.id === item.id);
+      list.splice(idx, 1, item);
+    }
+    onChange && onChange(list);
+    clearStatus();
+  }
+
   // 处理 marker、范围 绘制填写逻辑
   async function onMapClick(e) {
+    if (drawType.current !== "marker") {
+      return;
+    }
+
     const status = statusRef.current;
     const isAdd = status === "add";
     const isEdit = status === "edit";
     setShowTip(false);
-
     if (!isAdd && !isEdit) {
       return;
     }
@@ -110,7 +220,7 @@ export const LocationListPicker = observer((props) => {
       longitude: lng,
       latitude: lat,
       address: "",
-      range: null,
+      range: "",
       ...preItem,
     };
 
@@ -135,11 +245,16 @@ export const LocationListPicker = observer((props) => {
 
     // 根据经纬度获取弹窗位置
     const { x, y } = mapUtilsRef.current.map.lngLatToContainer([lng, lat]);
+    const mapDomRect = mapDomRef.current?.current?.getBoundingClientRect();
+    // 获取屏幕 x y
+    const screenX = mapDomRect?.left + x;
+    const screenY = mapDomRect?.top + y;
     let res = {};
     try {
       res = await popupRef.current?.onShow({
-        top: y,
-        left: x,
+        type: "marker",
+        top: screenY,
+        left: screenX,
         address: item.address,
         range: item.range,
         item,
@@ -164,7 +279,7 @@ export const LocationListPicker = observer((props) => {
 
     item = Object.assign(item, res);
 
-    const list = [...listRef.current];
+    const list = [...(listRef.current || [])];
 
     if (isAdd) {
       list.push(item);
@@ -177,35 +292,92 @@ export const LocationListPicker = observer((props) => {
     clearStatus();
   }
 
+  function onPolygonClick(e) {
+    if (!isEditingRef.current) {
+      drawType.current = "polygon";
+      const id = e.target.id;
+      clearEdit(id);
+      setActiveId(id);
+      setActivePolygon(e.target);
+    }
+  }
+
   function onMarkerClick(e, ...args) {
-    const { id } = e.target.getExtData() || {};
-    setActiveId((_id) => {
-      setInactiveMarkerIcon(_id);
-      return id;
+    clearActive();
+    if (!isEditingRef.current) {
+      setShowTip(false);
+      isEditingRef.current = false;
+      const { id } = e.target.getExtData() || {};
+      setActiveId(id);
+      setActiveMarkerIcon(id);
+    }
+  }
+
+  /**
+   * 选中态
+   * @param item
+   */
+  function setActivePolygon(item) {
+    clearActive();
+    const target = mapUtilsRef.current.polygonEnum[item.id];
+    const center = mapUtilsRef.current.getPolygonCenter(target.getPath()?.map((it) => [it.lng, it.lat]));
+    mapUtilsRef.current.setCenter(center?.[0], center?.[1]);
+    target?.setOptions({
+      strokeColor: "#403ef5",
+      strokeWeight: 4,
     });
-    setActiveMarkerIcon(id);
+  }
+
+  function clearActive() {
+    // 多边形清除选中态
+    Object.keys(mapUtilsRef.current.polygonEnum).forEach((key) => {
+      const item = mapUtilsRef.current.polygonEnum[key];
+      item?.setOptions({
+        strokeColor: "#1791fc",
+        strokeWeight: 2,
+      });
+    });
+    // Marker 清除选中态
+    Object.keys(mapUtilsRef.current.markers).forEach((key) => {
+      mapUtilsRef.current.setMarkerIcon(key, {
+        image: iconCircle0080ff,
+        size: [12, 12],
+        offset: [-6, -6],
+      });
+    });
+  }
+
+  function clearEdit(id) {
+    mapUtilsRef.current.polyEditor?.PolygonEditor?.close();
+    mapUtilsRef.current.polyEditor?.PolygonEditor?.setTarget();
   }
 
   function clearStatus(id) {
+    clearActive();
     isEditingRef.current = false;
     // 清除状态，解决重复创建的问题
     statusRef.current = null;
     // 编辑状态清除数据
     currentItemRef.current = null;
     setShowTip(false);
-    id && setInactiveMarkerIcon(id);
     popupRef.current.onCancel();
   }
 
   function onItemClick(item, i) {
+    drawType.current = item.type || "marker";
+    clearActive();
     clearStatus(item.id);
-    setInactiveMarkerIcon(activeId);
     setActiveId(item.id);
     const mapUtils = mapUtilsRef.current;
-    const marker = mapUtils.markers[item.id];
-    const position = marker?.getPosition();
-    position && mapUtils.setCenter(position.lng, position.lat);
-    setActiveMarkerIcon(item.id);
+    if (item.type == "polygon") {
+      // 选中态
+      setActivePolygon(item);
+    } else {
+      const marker = mapUtils.markers[item.id];
+      const position = marker?.getPosition();
+      position && mapUtils.setCenter(position.lng, position.lat);
+      setActiveMarkerIcon(item.id);
+    }
   }
 
   function setActiveMarkerIcon(id) {
@@ -216,55 +388,67 @@ export const LocationListPicker = observer((props) => {
     });
   }
 
-  function setInactiveMarkerIcon(id) {
-    mapUtilsRef.current.setMarkerIcon(id, {
-      image: iconCircle0080ff,
-      size: [12, 12],
-      offset: [-6, -6],
-    });
-  }
-
   function onEdit(item, i) {
     if (isEditingRef.current) {
       message.warn("请先完成上次操作");
       return;
     }
-    setInactiveMarkerIcon(activeId);
-    setActiveId(item.id);
+    clearActive();
+    drawType.current = item.type || "marker";
     setShowTip(true);
+    mapUtilsRef.current.setCenter(item.longitude, item.latitude, { immediately: true });
+    clearEdit(item.id);
+    // 多边形清除选中态
     statusRef.current = "edit";
     currentItemRef.current = item;
-    mapUtilsRef.current.setCenter(item.longitude, item.latitude, { immediately: true });
-    setActiveMarkerIcon(item.id);
-    onMapClick({
-      lnglat: {
-        lng: item.longitude,
-        lat: item.latitude,
-      },
-    });
+    if (item.type == "polygon") {
+      setTipText("点击绘制区域 双击完成绘制");
+      setInactivePolygon(item);
+      isEditingRef.current = true;
+    } else {
+      setTipText("点击选择地址");
+      setActiveMarkerIcon(item.id);
+      onMapClick({
+        lnglat: {
+          lng: item.longitude,
+          lat: item.latitude,
+        },
+      });
+    }
   }
 
   function onDelClick(item, i) {
-    setInactiveMarkerIcon(activeId);
-    setActiveId(item.id);
+    clearActive();
+    drawType.current = item.type || "marker";
     mapUtilsRef.current.setCenter(item.longitude, item.latitude, { immediately: true });
-    setActiveMarkerIcon(item.id);
+    if (item.type !== "polygon") {
+      setActiveId(item.id);
+      setActiveMarkerIcon(item.id);
+    }
   }
 
   function onDel(item, i) {
-    const list = [...listRef.current];
-    listRef.current?.splice(i, 1)
+    drawType.current = item.type || "marker";
+    const list = [...(listRef.current || [])];
+    listRef.current?.splice(i, 1);
     list?.splice(i, 1);
     onChange && onChange(list);
-    // 清除对应的 marker
-    mapUtilsRef.current.rmMarker(item.id);
-    // 清除对应的 circle
-    mapUtilsRef.current.rmCircle(item.id);
+    if (item.type === "polygon") {
+      mapUtilsRef.current.rmPolygon(item.id);
+    } else {
+      // 清除对应的 marker
+      mapUtilsRef.current.rmMarker(item.id);
+      // 清除对应的 circle
+      mapUtilsRef.current.rmCircle(item.id);
+    }
   }
 
   function onDelCancel(item, i) {
-    setInactiveMarkerIcon(item.id);
-    setActiveId(null);
+    drawType.current = item.type || "marker";
+    if (item.type !== "polygon") {
+      clearActive();
+      setActiveId(null);
+    }
   }
 
   function setPoint(lng, lat) {
@@ -287,17 +471,26 @@ export const LocationListPicker = observer((props) => {
     <div className="location-list-picker">
       <div className="map-box">
         <AMapCom init={mapInit} loading={loading} markerIconConf={markerIconConf} />
-        <MapSearch setPoint={setPoint} isAutoSearch={isAutoSearch} />
+        {!readOnly && !disabled && <MapSearch setPoint={setPoint} isAutoSearch={isAutoSearch} />}
         {showTip && (
-          <Alert className="location-list-picker-notice-bar" message={"点击选择地址"} type="info" style={tipPosition} />
+          <Alert className="location-list-picker-notice-bar" message={tipText} type="info" style={tipPosition} />
+        )}
+        {hasPolygon && !readOnly && (
+          <Button className="add-polygon-btn" onClick={onDrawClick} disabled={disabled}>
+            新增区域
+          </Button>
+        )}
+        {hasPoint !== false && !readOnly && (
+          <Button className="add-btn" onClick={onAddClick} disabled={disabled}>
+            新增地址
+          </Button>
         )}
-        <Button className="add-btn" onClick={onAddClick}>
-          新增地址
-        </Button>
         <Popup ref={popupRef} {...popupProps} />
       </div>
       <AddrList
         {...listProps}
+        readOnly={readOnly}
+        disabled={disabled}
         mapUtilsRef={mapUtilsRef}
         activeId={activeId}
         list={value}