[WIP]feat: 新增应用描述控件

packages/li-analysis-assets/package.json

@@ -50,7 +50,8 @@
     "classnames": "^2.3.1",
     "dayjs": "^1.11.7",
     "geotiff": "^2.1.0",
-    "lodash-es": "^4.17.21"
+    "lodash-es": "^4.17.21",
+    "quill": "^1.3.7"
   },
   "devDependencies": {
     "@ant-design/icons": "^5.0.1",

packages/li-analysis-assets/src/widgets/AppIntroductionControl/Component.tsx

@@ -0,0 +1,57 @@
+import { CustomControl } from '@antv/larkmap';
+import type { ImplementWidgetProps } from '@antv/li-sdk';
+import classNames from 'classnames';
+import { isEmpty } from 'lodash-es';
+import Quill from 'quill';
+import 'quill/dist/quill.snow.css';
+import React, { useEffect, useMemo, useRef } from 'react';
+import type { Properties } from './registerForm';
+import useStyle from './style';
+
+const CLS_PREFIX = 'li-analysis-app-introduction';
+
+export interface AppIntroductionControlProps extends Properties, ImplementWidgetProps {}
+
+const AppIntroductionControl: React.FC<AppIntroductionControlProps> = (props) => {
+  const { position, width, content } = props;
+  const styles = useStyle();
+  const informationRef = useRef<HTMLDivElement>(null);
+  const quillRef = useRef<Quill>();
+
+  const isEffectiveContent = useMemo(() => {
+    if (content && content.ops && Array.isArray(content.ops)) {
+      const isExist = content.ops.find((item: { insert?: any }) => item.insert !== '\n');
+      return isExist;
+    }
+
+    return false;
+  }, [content]);
+
+  useEffect(() => {
+    const quill = new Quill(informationRef.current!, {
+      modules: {},
+      theme: 'bubble',
+    });
+    quill.enable(false);
+    quillRef.current = quill;
+  }, []);
+
+  useEffect(() => {
+    if (quillRef.current && isEffectiveContent) {
+      // @ts-ignore
+      quillRef.current.setContents(content);
+    }
+  }, [isEffectiveContent]);
+
+  return (
+    <CustomControl
+      position={position}
+      className={classNames(styles.appIntroduction, CLS_PREFIX)}
+      style={{ display: isEmpty(isEffectiveContent) ? 'none' : 'block' }}
+    >
+      <div style={{ width }} ref={informationRef} />
+    </CustomControl>
+  );
+};
+
+export default AppIntroductionControl;

packages/li-analysis-assets/src/widgets/AppIntroductionControl/index.md

@@ -0,0 +1 @@
+## AppIntroductionControl

packages/li-analysis-assets/src/widgets/AppIntroductionControl/index.tsx

@@ -0,0 +1,20 @@
+import { implementWidget } from '@antv/li-sdk';
+import component from './Component';
+import registerForm from './registerForm';
+
+export default implementWidget({
+  version: 'v0.1',
+  metadata: {
+    name: 'AppIntroductionControl',
+    displayName: '应用描述控件',
+    description: '利用富文本编辑器，添加应用描述信息',
+    type: 'Auto',
+    category: 'MapControl',
+  },
+  defaultProperties: {
+    position: 'topright' as const,
+    width: 300,
+  },
+  component,
+  registerForm,
+});

packages/li-analysis-assets/src/widgets/AppIntroductionControl/registerForm.ts

@@ -0,0 +1,44 @@
+import type { PositionName } from '@antv/l7';
+import type { WidgetRegisterForm } from '@antv/li-sdk';
+import type { RichTextEditingType } from '@antv/li-p2';
+
+/**
+ * 属性面板生产的数据类型定义
+ */
+export type Properties = {
+  position?: PositionName;
+  width?: number;
+  content?: RichTextEditingType;
+};
+
+export default (): WidgetRegisterForm<Properties> => {
+  // 属性面板表单的 Schema 定义，来自表单库 formily 的 Schema
+  const schema = {
+    position: {
+      title: '放置方位',
+      type: 'string',
+      'x-decorator': 'FormItem',
+      'x-component': 'ControlPositionSelect',
+      default: 'topright',
+    },
+    width: {
+      title: '宽度',
+      type: 'string',
+      default: 300,
+      'x-decorator': 'FormItem',
+      'x-component': 'NumberPicker',
+      'x-component-props': {
+        addonAfter: 'px',
+        min: 0,
+        precision: 0,
+      },
+    },
+    content: {
+      type: 'any',
+      'x-decorator': 'FormItem',
+      'x-component': 'RichTextEditing',
+      'x-decorator-props': {},
+    },
+  };
+  return { schema };
+};

packages/li-analysis-assets/src/widgets/AppIntroductionControl/style.ts

@@ -0,0 +1,24 @@
+import { css } from '@emotion/css';
+import { theme } from 'antd';
+
+function useStyle() {
+  const { useToken } = theme;
+  const { token } = useToken();
+  const { colorBgContainer } = token;
+
+  return {
+    appIntroduction: css`
+      background-color: ${colorBgContainer};
+
+      .ql-editor {
+        overflow: hidden;
+      }
+
+      .ql-tooltip {
+        display: none;
+      }
+    `,
+  };
+}
+
+export default useStyle;

packages/li-analysis-assets/src/widgets/index.ts

@@ -1,6 +1,5 @@
 // organize-imports-ignore
 export { default as AnalysisLayout } from './AnalysisLayout';
-
 export { default as FilterWidget } from './FilterWidget';
 export { default as LegendWidget } from './LegendWidget';
 export { default as VectorTilesLoaderControl } from './VectorTilesLoaderControl';
@@ -13,5 +12,6 @@ export { default as MeasureControl } from './MeasureControl';
 export { default as TimeLine } from './TimeLine';
 export { default as SpreadSheetTable } from './SpreadSheetTable';
 export { default as AdministrativeSelectControl } from './AdministrativeSelectControl';
+export { default as AppIntroductionControl } from './AppIntroductionControl';
 export { default as SwipeControl } from './SwipeControl';
 export { default as FilterControl } from './FilterControl';

packages/li-editor/src/widgets/WidgetsPanel/WidgetAttribute/WidgetForm/SchemaField.tsx

@@ -1,4 +1,5 @@
 import {
+  RichTextEditing,
   ControlPositionSelect,
   FieldSelect,
   FormCollapse,
@@ -38,6 +39,7 @@ const SchemaField = createSchemaField({
     Space,
     FormGrid,
     ControlPositionSelect,
+    RichTextEditing,
     TimeGranularitySelect,
     FilterConfiguration,
   },

packages/li-p2/package.json

@@ -48,6 +48,7 @@
     "colorbrewer": "^1.5.3",
     "dayjs": "^1.11.7",
     "lodash-es": "^4.17.21",
+    "quill": "^1.3.7",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1"
   },
@@ -56,11 +57,14 @@
     "@antv/l7": "^2.17.2",
     "@antv/larkmap": "^1.4.11",
     "@types/lodash-es": "^4.17.6",
+    "@types/quill": "^2.0.14",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "antd": "^5.5.0",
     "dumi": "^1.1.46",
     "father": "^4.0.7",
+    "quill-image-resize-module": "^3.0.0",
+    "quill-image-upload": "^0.1.3",
     "rimraf": "^3.0.2",
     "typescript": "^4.7.4"
   },

packages/li-p2/src/components/Formily/RichTextEditing/Editor/index.css

@@ -0,0 +1,99 @@
+/* 字号样式 */
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='ft12']::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='ft12']::before {
+  content: '12px';
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='ft14']::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='ft14']::before {
+  content: '14px';
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='ft16']::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='ft16']::before {
+  content: '16px';
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='ft18']::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='ft18']::before {
+  content: '18px';
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='ft32']::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='ft32']::before {
+  content: '32px';
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='ft48']::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='ft48']::before {
+  content: '48px';
+}
+.ql-size-ft12 {
+  font-size: 10px;
+}
+
+.ql-size-ft14 {
+  font-size: 14px;
+}
+
+.ql-size-ft16 {
+  font-size: 16px;
+}
+
+.ql-size-ft18 {
+  font-size: 18px;
+}
+
+.ql-size-ft32 {
+  font-size: 32px;
+}
+
+.ql-size-ft48 {
+  font-size: 48px;
+}
+
+/* 标题样式 */
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
+  content: 'H1';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
+  content: 'H2';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
+  content: 'H3';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
+  content: 'H4';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
+  content: 'H5';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
+  content: 'H6';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item::before {
+  content: '常规';
+}
+
+/* 链接 */
+.ql-snow .ql-tooltip[data-mode='link']::before {
+  content: 'url：';
+}
+
+.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
+  content: '保存';
+}
+
+.ql-snow .ql-tooltip::before {
+  content: 'url：';
+}
+
+.ql-snow .ql-tooltip a.ql-action::after {
+  content: '修改';
+}
+
+.ql-snow .ql-tooltip a.ql-remove::before {
+  content: '删除';
+}