@nocobase/plugin-map 0.8.1-alpha.3

package/src/client/hooks/useMapConfiguration.ts

@@ -0,0 +1,15 @@
+import { useRequest } from "@nocobase/client";
+
+export const MapConfigurationResourceKey = 'map-configuration';
+
+export const useMapConfiguration = (type: string) => {
+  return useRequest({
+    resource: MapConfigurationResourceKey,
+    action: 'get',
+    params: {
+      type,
+    },
+  }).data?.data;
+}
+
+

package/src/client/index.tsx

@@ -0,0 +1,43 @@
+import {
+  CollectionManagerContext,
+  CurrentAppInfoProvider,
+  SchemaComponentOptions,
+  SettingsCenterProvider,
+} from '@nocobase/client';
+import React, { useContext } from 'react';
+import Configuration from './components/Configuration';
+import Map from './components/Map';
+import { interfaces } from './fields';
+import { Initialize } from './initialize';
+import { useMapTranslation } from './locales';
+
+export default React.memo((props) => {
+  const ctx = useContext(CollectionManagerContext);
+  const { t } = useMapTranslation();
+  return (
+    <CurrentAppInfoProvider>
+      <Initialize>
+        <SettingsCenterProvider
+          settings={{
+            'map-configuration': {
+              title: t('Map Manager'),
+              icon: 'EnvironmentOutlined',
+              tabs: {
+                configuration: {
+                  title: t('Configuration'),
+                  component: Configuration,
+                },
+              },
+            },
+          }}
+        >
+          <SchemaComponentOptions components={{ Map }}>
+            <CollectionManagerContext.Provider value={{ ...ctx, interfaces: { ...ctx.interfaces, ...interfaces } }}>
+              {props.children}
+            </CollectionManagerContext.Provider>
+          </SchemaComponentOptions>
+        </SettingsCenterProvider>
+      </Initialize>
+    </CurrentAppInfoProvider>
+  );
+});

package/src/client/initialize.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { registerField, registerGroup, useCurrentAppInfo } from '@nocobase/client';
+import { generateNTemplate } from './locales';
+import './locales';
+import { fields } from './fields';
+import { useEffect } from 'react';
+
+export const useRegisterInterface = () => {
+  const { data } = useCurrentAppInfo() || {};
+  useEffect(() => {
+    const dialect = data?.database.dialect;
+    if (!dialect) return;
+
+    registerGroup(fields[0].group, {
+      label: generateNTemplate('Map-based geometry'),
+      order: 51,
+    });
+
+    fields.forEach((field) => {
+      if (Array.isArray(field.dialects)) {
+        if (!field.dialects.includes(dialect)) {
+          return;
+        }
+      }
+      registerField(field.group, field.title, field);
+    });
+  }, [data]);
+};
+
+export const Initialize: React.FC = (props) => {
+  useRegisterInterface();
+  return <React.Fragment>{props.children}</React.Fragment>;
+};

package/src/client/locales/en-US.ts

@@ -0,0 +1,5 @@
+const locale = {
+
+}
+
+export default locale;

package/src/client/locales/index.ts

@@ -0,0 +1,22 @@
+import { i18n } from '@nocobase/client';
+import { useTranslation } from 'react-i18next';
+
+import enUS from './en-US';
+import zhCN from './zh-CN';
+
+export const NAMESPACE = 'map';
+
+i18n.addResources('zh-CN', NAMESPACE, zhCN);
+i18n.addResources('en-US', NAMESPACE, enUS);
+
+export function lang(key: string) {
+  return i18n.t(key, { ns: NAMESPACE });
+}
+
+export function generateNTemplate(key: string) {
+  return `{{t('${key}', { ns: '${NAMESPACE}' })}}`;
+}
+
+export function useMapTranslation() {
+  return useTranslation(NAMESPACE);
+}

package/src/client/locales/zh-CN.ts

@@ -0,0 +1,45 @@
+const locale = {
+  'Map-based geometry': '基于地图的几何图形',
+  'Map type': '地图类型',
+  'Point': '点',
+  'Line': '线',
+  'Circle': '圆',
+  'Polygon': '多边形',
+  'Access key': '访问密钥',
+  'securityJsCode or serviceHost': 'securityJsCode 或 serviceHost',
+  'AMap': '高德地图',
+  'Google Maps': '谷歌地图',
+  'Clear': '清空',
+  'Click to select the starting point and double-click to end the drawing': '点击选择起点，双击结束绘制',
+  'Clear the canvas': '清空画布',
+  'Are you sure to clear the canvas?': '您确定要清空画布吗？',
+  'Confirm': '确定',
+  'Cancel': '取消',
+  'Enter keywords to search': '输入地方名关键字搜索（必须包含省/市）',
+  'The AccessKey is incorrect, please check it': '访问密钥不正确，请检查',
+  'Please configure the AMap securityCode or serviceHost correctly': '请正确配置高德地图 securityCode 或 serviceHost',
+  'Map Manager': '地图管理',
+  'Configuration': '配置',
+  'Saved successfully': '保存成功',
+  'Saved failed': '保存失败',
+  'Edit': '编辑',
+  'Save': '保存',
+  'Please configure the AccessKey and SecurityJsCode first': '请先配置 AccessKey 和 SecurityJsCode',
+  'Go to the configuration page': '前往配置页面',
+  'Zoom': '缩放',
+  'Set default zoom level': '设置默认缩放级别',
+  'The default zoom level of the map': '地图默认缩放级别',
+  // Designer
+  'Edit field title': '编辑字段标题',
+  'Field title': '字段标题',
+  'Edit tooltip': '编辑提示信息',
+  'Delete field': '删除字段',
+  "Required": "必填",
+  'Pattern': '模式',
+  "Editable": "可编辑",
+  "Readonly": "只读（禁止编辑）",
+  "Easy-reading": "只读（阅读模式）",
+  "Edit description": "编辑描述",
+}
+
+export default locale;

package/src/index.ts

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

package/src/server/__tests__/fields.test.ts

@@ -0,0 +1,168 @@
+import Database from '@nocobase/database';
+import { mockDatabase } from '@nocobase/test';
+import { PointField, CircleField, PolygonField, LineStringField } from '../fields';
+
+const data = {
+  polygon: [
+    [114.081074, 22.563646],
+    [114.147335, 22.559207],
+    [114.134975, 22.531621],
+    [114.09103, 22.520045],
+    [114.033695, 22.575376],
+    [114.025284, 22.55461],
+    [114.033523, 22.533048],
+  ],
+  point: [114.048868, 22.554927],
+  circle: [114.058996, 22.549695, 4171],
+  lineString: [
+    [114.047323, 22.534158],
+    [114.120966, 22.544146],
+  ],
+};
+describe('fields', () => {
+  let db: Database;
+
+  beforeEach(async () => {
+    db = mockDatabase();
+    db.registerFieldTypes({
+      point: PointField,
+      circle: CircleField,
+      polygon: PolygonField,
+      lineString: LineStringField,
+    });
+  });
+
+  afterEach(async () => {
+    await db.close();
+  });
+
+  const createCollection = async () => {
+    const fields = [
+      {
+        type: 'point',
+        name: 'point',
+      },
+      {
+        type: 'polygon',
+        name: 'polygon',
+      },
+      {
+        type: 'circle',
+        name: 'circle',
+      },
+      {
+        type: 'lineString',
+        name: 'lineString',
+      },
+    ];
+    const Test = db.collection({
+      name: 'tests',
+      fields,
+    });
+
+    await db.sync();
+
+    return Test;
+  };
+  it('define', async () => {
+    const Test = await createCollection();
+    await Test.model.create();
+  });
+
+  it('create', async () => {
+    const Test = await createCollection();
+    const model = await Test.model.create(data);
+    expect(model.get()).toMatchObject(data);
+  });
+
+  it('find', async () => {
+    const Test = await createCollection();
+    await Test.model.create(data);
+    expect(await Test.model.findOne()).toMatchObject(data);
+  });
+
+  it('set and get', async () => {
+    const Test = await createCollection();
+    const model = await Test.model.create();
+    model.set('point', [1, 2]);
+    expect(model.get('point')).toMatchObject([1, 2]);
+    model.set('polygon', [
+      [3, 4],
+      [5, 6],
+    ]);
+    expect(model.get('polygon')).toMatchObject([
+      [3, 4],
+      [5, 6],
+    ]);
+    model.set('lineString', [[5, 6], [7, 8]]);
+    expect(model.get('lineString')).toMatchObject([[5, 6], [7, 8]]);
+    model.set('circle', [1, 2, 0.5]);
+    expect(model.get('circle')).toMatchObject([1, 2, 0.5]);
+  });
+
+  it('create and update', async () => {
+    const Test = await createCollection();
+    const model = await Test.model.create(data);
+    await model.save();
+    const findOne = () =>
+      db.getRepository('tests').findOne({
+        except: ['createdAt', 'updatedAt', 'id'],
+      });
+    expect(await findOne()).toMatchObject(data);
+
+    await model.update({
+      point: [1, 2],
+      polygon: null,
+    });
+
+    expect(await findOne()).toMatchInlineSnapshot(`
+      Object {
+        "circle": Array [
+          114.058996,
+          22.549695,
+          4171,
+        ],
+        "lineString": Array [
+          Array [
+            114.047323,
+            22.534158,
+          ],
+          Array [
+            114.120966,
+            22.544146,
+          ],
+        ],
+        "point": Array [
+          1,
+          2,
+        ],
+        "polygon": null,
+      }
+    `);
+  });
+
+  it('empty', async () => {
+    const Test = await createCollection();
+    const model = await Test.model.create({
+      circle: null,
+      lineString: null,
+      point: null,
+      polygon: null,
+    });
+    await model.save();
+
+    const findOne = () =>
+      db.getRepository('tests').findOne({
+        except: ['createdAt', 'updatedAt', 'id'],
+      });
+
+    expect(await findOne()).toMatchInlineSnapshot(`
+      Object {
+        "circle": null,
+        "lineString": null,
+        "point": null,
+        "polygon": null,
+      }
+    `);
+  });
+});

package/src/server/actions/index.ts

@@ -0,0 +1,46 @@
+import { Context } from '@nocobase/actions';
+import { MapConfigurationCollectionName } from '../constants';
+
+export const getConfiguration = async (ctx: Context, next) => {
+  const {
+    params: { type },
+  } = ctx.action;
+
+  const repo = ctx.db.getRepository(MapConfigurationCollectionName);
+  const record = await repo.findOne({
+    filter: {
+      type,
+    },
+  });
+
+  ctx.body = record
+  return next();
+};
+
+export const setConfiguration = async (ctx: Context, next) => {
+  const {
+    params: values,
+  } = ctx.action;
+  const repo = ctx.db.getRepository(MapConfigurationCollectionName);
+  const record = await repo.findOne({
+    filter: {
+      type: values.type,
+    },
+  });
+
+  if (record) {
+    await repo.update({
+      values,
+      filter: {
+        type: values.type,
+      }
+    });
+  } else {
+    await repo.create({
+      values,
+    })
+  }
+
+  ctx.body = 'ok'
+  return next();
+};

package/src/server/collections/mapConfiguration.ts

@@ -0,0 +1,27 @@
+import { CollectionOptions } from "@nocobase/client";
+import { MapConfigurationCollectionName } from "../constants";
+
+export default {
+  name: MapConfigurationCollectionName,
+  title: '{{t("Map Manager")}}',
+  fields: [
+    {
+      title: 'Access key',
+      comment: '访问密钥',
+      name: 'accessKey',
+      type: 'string'
+    },
+    {
+      title: 'securityJsCode',
+      comment: 'securityJsCode or serviceHOST',
+      name: 'securityJsCode',
+      type: 'string'
+    },
+    {
+      title: 'Map type',
+      comment: '地图类型',
+      name: 'type',
+      type: 'string',
+    }
+  ]
+} as CollectionOptions

package/src/server/constants.ts

@@ -0,0 +1 @@
+export const MapConfigurationCollectionName = 'mapConfiguration';

package/src/server/fields/circle.ts

@@ -0,0 +1,50 @@
+import { BaseColumnFieldOptions, Field, FieldContext } from '@nocobase/database';
+import { DataTypes } from 'sequelize';
+import { isPg, toValue } from '../helpers';
+
+class Circle extends DataTypes.ABSTRACT {
+  key = 'Circle';
+}
+
+
+export class CircleField extends Field {
+  constructor(options?: any, context?: FieldContext) {
+    const { name } = options
+    super(
+      {
+        get() {
+          const value = this.getDataValue(name);
+          if (isPg(context)) {
+            if (typeof value === 'string') {
+              return toValue(`(${value})`)
+            }
+            return value ? [value.x, value.y, value.radius] : null
+          } else {
+            return value
+          }
+        },
+        set(value) {
+          if (!value?.length) value = null
+          else if (isPg(context)) {
+            value = value.join(',')
+          }
+          this.setDataValue(name, value)
+        },
+        ...options,
+      },
+      context,
+    );
+  }
+
+  get dataType() {
+    if (isPg(this.context)) {
+      return Circle;
+    } else {
+      return DataTypes.JSON
+    }
+  }
+}
+
+export interface CircleFieldOptions extends BaseColumnFieldOptions {
+  type: 'circle';
+}

package/src/server/fields/index.ts

@@ -0,0 +1,4 @@
+export * from './point'
+export * from './lineString'
+export * from './polygon'
+export * from './circle'

package/src/server/fields/lineString.ts

@@ -0,0 +1,56 @@
+import { BaseColumnFieldOptions, Field, FieldContext } from '@nocobase/database';
+import { DataTypes } from 'sequelize';
+import { isMysql, isPg, isSqlite, joinComma, toValue } from '../helpers';
+
+class LineString extends DataTypes.ABSTRACT {
+  key = 'Path';
+}
+
+export class LineStringField extends Field {
+  constructor(options?: any, context?: FieldContext) {
+    const { name } = options
+    super(
+      {
+        get() {
+          const value = this.getDataValue(name);
+          if (isPg(context)) {
+            return toValue(value)
+          } else if (isMysql(context)) {
+            return value?.coordinates || null
+          } else {
+            return value
+          }
+        },
+        set(value) {
+          if (!value?.length) value = null
+          else if (isPg(context)) {
+            value = joinComma(value.map(joinComma))
+          } else if (isMysql(context)) {
+            value = {
+              type: 'LineString',
+              coordinates: value
+            }
+          }
+          this.setDataValue(name, value)
+        },
+        ...options,
+      },
+      context,
+    );
+  }
+
+  get dataType() {
+    if (isPg(this.context)) {
+      return LineString
+    } if (isMysql(this.context)) {
+      return DataTypes.GEOMETRY('LINESTRING');
+    } else {
+      return DataTypes.JSON;
+    }
+  }
+
+}
+
+export interface LineStringOptions extends BaseColumnFieldOptions {
+  type: 'lineString';
+}

package/src/server/fields/point.ts

@@ -0,0 +1,59 @@
+import { BaseColumnFieldOptions, Field, FieldContext } from '@nocobase/database';
+import { DataTypes } from 'sequelize';
+import { isMysql, isPg, joinComma, toValue } from '../helpers';
+
+class Point extends DataTypes.ABSTRACT {
+  key = 'Point';
+}
+
+export class PointField extends Field {
+  constructor(options?: any, context?: FieldContext) {
+    const { name } = options
+    super(
+      {
+        get() {
+          const value = this.getDataValue(name);
+          if (isPg(context)) {
+            if (typeof value === 'string') {
+              return toValue(value)
+            }
+            return value ? [value.x, value.y] : null
+          } else if (isMysql(context)) {
+            return value?.coordinates || null
+          } else {
+            return value
+          }
+        },
+        set(value) {
+          if (!value?.length) value = null
+          else if (isPg(context)) {
+            value = joinComma(value)
+          } else if (isMysql(context)) {
+            value = {
+              type: 'Point',
+              coordinates: value
+            }
+          }
+          this.setDataValue(name, value)
+        },
+        ...options,
+      },
+      context,
+    );
+  }
+
+  get dataType() {
+    if (isPg(this.context)) {
+      return Point;
+    } if (isMysql(this.context)) {
+      return DataTypes.GEOMETRY('POINT');
+    } else {
+      return DataTypes.JSON;
+    }
+  }
+
+}
+
+export interface PointFieldOptions extends BaseColumnFieldOptions {
+  type: 'point';
+}

package/src/server/fields/polygon.ts

@@ -0,0 +1,56 @@
+import { BaseColumnFieldOptions, Field, FieldContext } from '@nocobase/database';
+import { DataTypes } from 'sequelize';
+import { isMysql, isPg, joinComma, toValue } from '../helpers';
+
+class Polygon extends DataTypes.ABSTRACT {
+  key = 'Polygon'
+}
+
+export class PolygonField extends Field {
+  constructor(options?: any, context?: FieldContext) {
+    const { name } = options
+    super(
+      {
+        get() {
+          const value = this.getDataValue(name)
+          if (isPg(context)) {
+            return toValue(value)
+          } else if (isMysql(context)) {
+            return value?.coordinates[0].slice(0, -1) || null
+          } else {
+            return value
+          }
+        },
+        set(value) {
+          if (!value?.length) value = null
+          else if (isPg(context)) {
+            value = joinComma(value.map((item: any) => joinComma(item)))
+          } else if (isMysql(context)) {
+            value = {
+              type: 'Polygon',
+              coordinates: [value.concat([value[0]])]
+            }
+          }
+          this.setDataValue(name, value)
+        },
+        ...options,
+      },
+      context,
+    );
+  }
+
+  get dataType() {
+    if (isPg(this.context)) {
+      return Polygon;
+    } else if (isMysql(this.context)) {
+      return DataTypes.GEOMETRY('POLYGON');
+    } else {
+      return DataTypes.JSON;
+    }
+  }
+
+}
+
+export interface PolygonFieldOptions extends BaseColumnFieldOptions {
+  type: 'polygon';
+}

package/src/server/helpers/index.ts

@@ -0,0 +1,25 @@
+export const joinComma = (value: any[]) => {
+  if (!value) return null
+  return `(${value.join(',')})`
+}
+
+export const toValue = (value?: string) => {
+  if (!value) return null
+  return JSON.parse(value.replace(/\(/g, '[').replace(/\)/g, ']'))
+}
+
+export const getDialect = (ctx) => {
+  return (ctx.db || ctx.database).sequelize.getDialect();
+};
+
+export const isPg = (ctx) => {
+  return getDialect(ctx) === 'postgres';
+};
+
+export const isSqlite = (ctx) => {
+  return getDialect(ctx) === 'sqlite';
+};
+
+export const isMysql = (ctx) => {
+  return getDialect(ctx) === 'mysql';
+};

package/src/server/index.ts

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