feat(layer): point layer

antvis · Oct 29, 2019 · 3da72c8 · 3da72c8
1 parent 9c5766d
commit 3da72c8
Show file tree

Hide file tree

Showing 33 changed files with 7,892 additions and 2,035 deletions.
diff --git a/.storybook/config.ts b/.storybook/config.ts
@@ -9,7 +9,7 @@ addParameters({
     showSearchBox: false,
     panelPosition: 'bottom',
     hierarchySeparator: /\./,
-    hierarchyRootSeparator: /\|/,
+    // hierarchyRootSeparator: /\|/,
     enableShortcuts: true,
     theme: create({
       base: 'light',

diff --git a/babel.config.js b/babel.config.js
@@ -22,7 +22,6 @@ module.exports = (api) => {
       '@babel/preset-typescript',
     ],
     plugins: [
-      '@babel/plugin-proposal-optional-chaining',
       [
         '@babel/plugin-proposal-decorators',
         {
@@ -36,6 +35,7 @@ module.exports = (api) => {
           loose: true,
         }
       ],
+      '@babel/plugin-proposal-optional-chaining',
       '@babel/plugin-syntax-dynamic-import',
       '@babel/plugin-transform-modules-commonjs',
       [

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,8 +1,8 @@
 {
   "private": true,
   "devDependencies": {
-    "@babel/cli": "^7.5.5",
-    "@babel/core": "^7.5.5",
+    "@babel/cli": "^7.6.4",
+    "@babel/core": "^7.6.4",
     "@babel/plugin-proposal-optional-chaining": "^7.6.0",
     "@babel/preset-env": "^7.5.5",
     "@babel/preset-react": "^7.0.0",
@@ -21,11 +21,10 @@
     "@types/enzyme-adapter-react-16": "^1.0.3",
     "@types/jest": "^24.0.18",
     "@types/node": "^12.7.3",
-    "@types/storybook__addon-knobs": "^5.0.1",
     "@types/storybook__react": "^4.0.2",
     "@types/supercluster": "^5.0.1",
     "awesome-typescript-loader": "^5.2.1",
-    "babel-jest": "^24.8.0",
+    "babel-jest": "^24.9.0",
     "babel-loader": "^8.0.6",
     "babel-plugin-const-enum": "^0.0.2",
     "babel-plugin-css-modules-transform": "^1.6.2",
@@ -110,5 +109,8 @@
     "commitizen": {
       "path": "cz-conventional-changelog"
     }
+  },
+  "dependencies": {
+    "@babel/plugin-proposal-decorators": "^7.6.0"
   }
 }
diff --git a/packages/core/src/services/config/ConfigService.ts b/packages/core/src/services/config/ConfigService.ts
@@ -22,9 +22,21 @@ const defaultGlobalConfig: Partial<IGlobalConfig> = {
     'rgb(33,102,172)',
     'rgb(5,48,97)',
   ],
-  size: 10000,
+  size: 10,
   shape: 'circle',
   scales: {},
+  shape2d: [
+    'circle',
+    'triangle',
+    'square',
+    'pentagon',
+    'hexagon',
+    'octogon',
+    'hexagram',
+    'rhombus',
+    'vesica',
+  ],
+  shape3d: ['cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'],
 };
 
 // @see https://github.com/epoberezkin/ajv#options

diff --git a/packages/core/src/services/layer/ILayerService.ts b/packages/core/src/services/layer/ILayerService.ts
@@ -1,4 +1,5 @@
 import { SyncBailHook, SyncHook } from 'tapable';
+import { IGlobalConfigService } from '../config/IConfigService';
 import { IModel } from '../renderer/IModel';
 import { IMultiPassRenderer } from '../renderer/IMultiPassRenderer';
 import { ISource, ISourceCFG } from '../source/ISourceService';
@@ -14,6 +15,8 @@ export interface ILayerGlobalConfig {
   colors: string[];
   size: number;
   shape: string;
+  shape2d: string[];
+  shape3d: string[];
   scales: {
     [key: string]: IScale;
   };
@@ -31,6 +34,7 @@ export interface ILayer {
   name: string; // 代表 Layer 的类型
   // visible: boolean;
   // zIndex: number;
+  configService: IGlobalConfigService;
   plugins: ILayerPlugin[];
   hooks: {
     init: SyncBailHook<void, boolean | void>;

diff --git a/packages/core/src/services/layer/IStyleAttributeService.ts b/packages/core/src/services/layer/IStyleAttributeService.ts
@@ -33,6 +33,24 @@ export interface IScale {
   domain?: any[];
 }
 
+export enum StyleScaleType {
+  CONSTANT = 'constant',
+  VARIABLE = 'variable',
+}
+export interface IScaleOption {
+  field?: string;
+  type: ScaleTypes;
+  ticks?: any[];
+  nice?: boolean;
+  format?: () => any;
+  domain?: any[];
+}
+export interface IStyleScale {
+  scale: any;
+  field: string;
+  type: StyleScaleType;
+  option: IScaleOption | undefined;
+}
 export enum AttributeType {
   Attribute,
   InstancedAttribute,
@@ -45,7 +63,7 @@ export interface IEncodeFeature {
   shape?: string | number;
   pattern?: string;
   id?: number;
-  coordinates: Position[][];
+  coordinates: Position | Position[] | Position[][];
 }
 
 export interface IVertexAttributeDescriptor
@@ -62,6 +80,8 @@ export interface IVertexAttributeDescriptor
     feature: IEncodeFeature,
     featureIdx: number,
     vertex: number[],
+    attributeIdx: number,
+    normal: number[],
   ) => number[];
 }
 
@@ -78,6 +98,8 @@ export interface IStyleAttributeInitializationOptions {
   scale?: {
     field: StyleAttributeField;
     values: unknown[];
+    names: string[];
+    type: StyleScaleType;
     callback?: (...args: any[]) => [];
     scalers?: Array<{
       field: string;
@@ -111,6 +133,7 @@ export type Triangulation = (
   vertices: number[];
   indices: number[];
   size: number;
+  normals?: number[];
 };
 
 export interface IStyleAttributeUpdateOptions {

diff --git a/packages/core/src/services/layer/StyleAttribute.ts b/packages/core/src/services/layer/StyleAttribute.ts
@@ -1,19 +1,25 @@
 import { isNil } from 'lodash';
-import { IStyleAttribute } from '../layer/IStyleAttributeService';
+import {
+  IStyleAttribute,
+  StyleScaleType,
+} from '../layer/IStyleAttributeService';
 import { IAttribute } from '../renderer/IAttribute';
 import { IBuffer } from '../renderer/IBuffer';
 import {
   AttributeType,
   IEncodeFeature,
   IFeatureRange,
   IStyleAttributeInitializationOptions,
+  IStyleScale,
   IVertexAttributeDescriptor,
 } from './IStyleAttributeService';
 
 export default class StyleAttribute implements IStyleAttribute {
   public name: string;
   public type: AttributeType;
   public scale?: {
+    type: StyleScaleType.CONSTANT;
+    names: string[];
     field: string | string[];
     values: unknown[];
     callback?: (...args: any[]) => [];

diff --git a/packages/core/src/services/layer/StyleAttributeService.ts b/packages/core/src/services/layer/StyleAttributeService.ts
@@ -37,6 +37,7 @@ export default class StyleAttributeService implements IStyleAttributeService {
     elements: Array<{
       featureIdx: number;
       vertices: number[];
+      normals: number[];
       offset: number;
     }>;
   } = {
@@ -105,7 +106,7 @@ export default class StyleAttributeService implements IStyleAttributeService {
     const attributeToUpdate = this.attributes.find(
       (attribute) => attribute.name === attributeName,
     );
-    if (attributeToUpdate) {
+    if (attributeToUpdate && attributeToUpdate.descriptor) {
       const { descriptor } = attributeToUpdate;
       const { update, buffer, size = 0 } = descriptor;
       const bytesPerElement = bytesPerElementMap[buffer.type || gl.FLOAT];
@@ -122,7 +123,7 @@ export default class StyleAttributeService implements IStyleAttributeService {
         // 以 byte 为单位计算 buffer 中的偏移
         const bufferOffsetInBytes = offset * size * bytesPerElement;
         const updatedBufferData = featuresToUpdate
-          .map(({ featureIdx, vertices }) => {
+          .map(({ featureIdx, vertices, normals }, attributeIdx) => {
             const verticesNumForCurrentFeature =
               vertices.length / sizePerElement;
             const featureData: number[] = [];
@@ -131,6 +132,9 @@ export default class StyleAttributeService implements IStyleAttributeService {
               vertexIdx < verticesNumForCurrentFeature;
               vertexIdx++
             ) {
+              const normal = normals
+                ? normals!.slice(vertexIdx * 3, vertexIdx * 3 + 3)
+                : [];
               featureData.push(
                 ...update(
                   features[featureIdx],
@@ -139,6 +143,8 @@ export default class StyleAttributeService implements IStyleAttributeService {
                     vertexIdx * sizePerElement,
                     vertexIdx * sizePerElement + sizePerElement,
                   ),
+                  attributeIdx,
+                  normal,
                 ),
               );
             }
@@ -168,21 +174,25 @@ export default class StyleAttributeService implements IStyleAttributeService {
     elements: IElements;
   } {
     const descriptors = this.attributes.map((attr) => attr.descriptor);
-
     let verticesNum = 0;
     const vertices: number[] = [];
     const indices: number[] = [];
+    const normals: number[] = [];
     let size = 3;
 
     features.forEach((feature, featureIdx) => {
       // 逐 feature 进行三角化
       const {
         indices: indicesForCurrentFeature,
         vertices: verticesForCurrentFeature,
+        normals: normalsForCurrentFeature,
         size: vertexSize,
       } = triangulation(feature);
       indices.push(...indicesForCurrentFeature.map((i) => i + verticesNum));
       vertices.push(...verticesForCurrentFeature);
+      if (normalsForCurrentFeature) {
+        normals.push(...normalsForCurrentFeature);
+      }
       size = vertexSize;
       const verticesNumForCurrentFeature =
         verticesForCurrentFeature.length / vertexSize;
@@ -192,6 +202,7 @@ export default class StyleAttributeService implements IStyleAttributeService {
       this.featureLayout.elements.push({
         featureIdx,
         vertices: verticesForCurrentFeature,
+        normals: normalsForCurrentFeature as number[],
         offset: verticesNum,
       });
 
@@ -204,7 +215,11 @@ export default class StyleAttributeService implements IStyleAttributeService {
         vertexIdx++
       ) {
         descriptors.forEach((descriptor, attributeIdx) => {
-          if (descriptor.update) {
+          if (descriptor && descriptor.update) {
+            const normal = normalsForCurrentFeature?.slice(
+              vertexIdx * 3,
+              vertexIdx * 3 + 3,
+            )|| [];
             (descriptor.buffer.data as number[]).push(
               ...descriptor.update(
                 feature,
@@ -213,14 +228,15 @@ export default class StyleAttributeService implements IStyleAttributeService {
                   vertexIdx * vertexSize,
                   vertexIdx * vertexSize + vertexSize,
                 ),
+                vertexIdx, // 当前顶点所在feature索引
+                normal,
                 // TODO: 传入顶点索引 vertexIdx
               ),
             );
-          }
-        });
-      }
-    });
-
+          } // end if
+        }); // end for each
+      } // end for
+    }); // end features for Each
     const {
       createAttribute,
       createBuffer,
@@ -232,18 +248,20 @@ export default class StyleAttributeService implements IStyleAttributeService {
     } = {};
 
     descriptors.forEach((descriptor, attributeIdx) => {
-      // IAttribute 参数透传
-      const { buffer, update, name, ...rest } = descriptor;
+      if (descriptor) {
+        // IAttribute 参数透传
+        const { buffer, update, name, ...rest } = descriptor;
 
-      const vertexAttribute = createAttribute({
-        // IBuffer 参数透传
-        buffer: createBuffer(buffer),
-        ...rest,
-      });
-      attributes[descriptor.name || ''] = vertexAttribute;
+        const vertexAttribute = createAttribute({
+          // IBuffer 参数透传
+          buffer: createBuffer(buffer),
+          ...rest,
+        });
+        attributes[descriptor.name || ''] = vertexAttribute;
 
-      // 在 StyleAttribute 上保存对 VertexAttribute 的引用
-      this.attributes[attributeIdx].vertexAttribute = vertexAttribute;
+        // 在 StyleAttribute 上保存对 VertexAttribute 的引用
+        this.attributes[attributeIdx].vertexAttribute = vertexAttribute;
+      }
     });
 
     const elements = createElements({

diff --git a/packages/layers/package.json b/packages/layers/package.json
@@ -32,6 +32,7 @@
     "gl-matrix": "^3.1.0",
     "gl-vec2": "^1.3.0",
     "lodash": "^4.17.15",
+    "merge-json-schemas": "1.0.0",
     "polyline-miter-util": "^1.0.1",
     "tapable": "^2.0.0-beta.8"
   },