Merge ef38a16 into e93d1ef

.github/workflows/release.yml

@@ -35,7 +35,7 @@ jobs:
           git commit -m "update by release action"
       - uses: ad-m/github-push-action@master
         with:
-          github_token: ${{secrets.ACCESS_TOKEN}}
+          github_token: ${{secrets.GITHUB_TOKEN}}
           directory: website/public
           branch: gh-pages
           force: true

package.json

@@ -13,6 +13,7 @@
     "bootstrap": "yarn",
     "dev": "lerna run dev --stream --parallel --no-bail --ignore=l7plot-website",
     "dev-l7lot": "lerna run dev --stream --scope=@antv/l7plot",
+    "dev-composite-layers": "lerna run dev --stream --scope=@antv/l7-composite-layers",
     "dev-component": "lerna run dev --stream --scope=@antv/l7plot-component",
     "dev-storybook": "lerna run dev --stream --scope=l7plot-storybook",
     "dev-website": "lerna run dev --stream --scope=l7plot-website",
@@ -24,6 +25,7 @@
     "test-cover": "jest --coverage",
     "build": "lerna run build --stream --scope=@antv/l7plot*",
     "build-l7lot": "lerna run build --stream --scope=@antv/l7plot",
+    "build-composite-layers": "lerna run build --stream --scope=@antv/l7-composite-layers",
     "build-component": "lerna run build --stream --scope=@antv/l7plot-component",
     "build-website": "lerna run build --stream --scope=l7plot-website",
     "bundle": "lerna run build:umd --stream --scope=@antv/l7plot",

packages/composite-layers/README.md

@@ -1,5 +1,5 @@
 <h1 align="center">Composite Layers</h1>
 
 <div align="center">
-Composite layers for @antv/l7、@antv/l7plot、@antv/dipper.
+Composite layers for @antv/l7、@antv/l7plot、@antv/larkmap、@antv/dipper.
 </div>

packages/composite-layers/__tests__/helper/layer.ts

@@ -0,0 +1,13 @@
+type PendingStyleAttributes = Array<{
+  attributeName: string;
+  attributeField: any;
+  attributeValues?: any;
+}>;
+
+export const getLayerStyleAttribute = (attributes: PendingStyleAttributes, attributeName: string) => {
+  const attribute = attributes
+    .slice()
+    .reverse()
+    .find((attributes) => attributes.attributeName === attributeName);
+  return attribute;
+};

packages/composite-layers/__tests__/unit/composite-layers/area-layer/index.test.ts

@@ -0,0 +1,139 @@
+import { getLayerStyleAttribute } from '../../../helper/layer';
+import { AreaLayer } from '../../../../src/composite-layers/area-layer';
+
+describe('area layer', () => {
+  const layer = new AreaLayer({
+    source: { data: [] },
+    fillColor: {
+      field: 'adcode',
+      value: ['rgb(239,243,255)', 'rgb(189,215,231)', 'rgb(8,81,156)'],
+    },
+    opacity: 1,
+    strokeColor: 'rgb(93,112,146)',
+    lineWidth: 0.6,
+    lineOpacity: 1,
+    label: {
+      field: 'label',
+      style: {
+        fill: '#fff',
+        opacity: 0.6,
+        fontSize: 12,
+        textAnchor: 'top',
+        textOffset: [0, 20],
+        spacing: 1,
+        padding: [5, 5],
+        stroke: '#ffffff',
+        strokeWidth: 0.3,
+        strokeOpacity: 1.0,
+      },
+    },
+    state: {
+      active: {
+        fillColor: 'red',
+        strokeColor: 'green',
+        lineWidth: 1.5,
+        lineOpacity: 0.8,
+      },
+      select: {
+        fillColor: 'red',
+        strokeColor: 'yellow',
+        lineWidth: 1.5,
+        lineOpacity: 0.8,
+      },
+    },
+  });
+
+  it('type', () => {
+    expect(layer.type).toBe('areaLayer');
+    expect(layer.fillLayer.type).toBe('polygonLayer');
+    expect(layer.strokeLayer.type).toBe('lineLayer');
+    expect(layer.highlightStrokeLayer.type).toBe('lineLayer');
+    expect(layer.selectFillLayer.type).toBe('polygonLayer');
+    expect(layer.selectStrokeLayer.type).toBe('lineLayer');
+    expect(layer.labelLayer.type).toBe('textLayer');
+  });
+
+  it('color', () => {
+    expect(getLayerStyleAttribute(layer.fillLayer.layer['pendingStyleAttributes'], 'color')).toEqual({
+      attributeName: 'color',
+      attributeField: 'adcode',
+      attributeValues: ['rgb(239,243,255)', 'rgb(189,215,231)', 'rgb(8,81,156)'],
+    });
+  });
+
+  it('shape', () => {
+    expect(getLayerStyleAttribute(layer.fillLayer.layer['pendingStyleAttributes'], 'shape')).toEqual({
+      attributeName: 'shape',
+      attributeField: 'fill',
+    });
+    expect(getLayerStyleAttribute(layer.strokeLayer.layer['pendingStyleAttributes'], 'shape')).toEqual({
+      attributeName: 'shape',
+      attributeField: 'line',
+    });
+  });
+
+  it('label', () => {
+    expect(getLayerStyleAttribute(layer.labelLayer.layer['pendingStyleAttributes'], 'size')).toEqual({
+      attributeName: 'size',
+      attributeField: 12,
+    });
+    expect(getLayerStyleAttribute(layer.labelLayer.layer['pendingStyleAttributes'], 'color')).toEqual({
+      attributeName: 'color',
+      attributeField: '#fff',
+    });
+    expect(getLayerStyleAttribute(layer.labelLayer.layer['pendingStyleAttributes'], 'shape')).toEqual({
+      attributeName: 'shape',
+      attributeField: 'label',
+      attributeValues: 'text',
+    });
+    expect(layer.labelLayer.layer['rawConfig']).toMatchObject({
+      opacity: 0.6,
+      textAnchor: 'top',
+      textOffset: [0, 20],
+      spacing: 1,
+      padding: [5, 5],
+      stroke: '#ffffff',
+      strokeWidth: 0.3,
+      strokeOpacity: 1.0,
+    });
+  });
+
+  it('style', () => {
+    expect(layer.fillLayer.layer['rawConfig']).toMatchObject({ opacity: 1 });
+
+    expect(layer.strokeLayer.layer['rawConfig']).toMatchObject({ opacity: 1 });
+    expect(getLayerStyleAttribute(layer.strokeLayer.layer['pendingStyleAttributes'], 'color')).toEqual({
+      attributeName: 'color',
+      attributeField: 'rgb(93,112,146)',
+    });
+    expect(getLayerStyleAttribute(layer.strokeLayer.layer['pendingStyleAttributes'], 'size')).toEqual({
+      attributeName: 'size',
+      attributeField: 0.6,
+    });
+  });
+
+  it('state', () => {
+    expect(layer.fillLayer.layer['needUpdateConfig'].enableHighlight).toBeTruthy();
+    expect(layer.fillLayer.layer['needUpdateConfig'].enableSelect).toBeFalsy();
+
+    expect(getLayerStyleAttribute(layer.highlightStrokeLayer.layer['pendingStyleAttributes'], 'color')).toEqual({
+      attributeName: 'color',
+      attributeField: 'green',
+    });
+    expect(getLayerStyleAttribute(layer.highlightStrokeLayer.layer['pendingStyleAttributes'], 'size')).toEqual({
+      attributeName: 'size',
+      attributeField: 1.5,
+    });
+    expect(layer.highlightStrokeLayer.layer['rawConfig']).toMatchObject({ opacity: 0.8 });
+
+    expect(getLayerStyleAttribute(layer.selectStrokeLayer.layer['pendingStyleAttributes'], 'color')).toEqual({
+      attributeName: 'color',
+      attributeField: 'yellow',
+    });
+    expect(getLayerStyleAttribute(layer.selectStrokeLayer.layer['pendingStyleAttributes'], 'size')).toEqual({
+      attributeName: 'size',
+      attributeField: 1.5,
+    });
+    expect(layer.selectStrokeLayer.layer['rawConfig']).toMatchObject({ opacity: 0.8 });
+  });
+});

packages/composite-layers/__tests__/unit/composite-layers/scatter-layer/index.test.ts

@@ -0,0 +1,136 @@
+import { getLayerStyleAttribute } from '../../../helper/layer';
+import { ScatterLayer } from '../../../../src/composite-layers/scatter-layer';
+
+describe('scatter layer', () => {
+  const layer = new ScatterLayer({
+    source: { data: [], parser: { type: 'json', x: 'x', y: 'y' } },
+    radius: 12,
+    // dotType: 'circle',
+    fillColor: '#fff',
+    opacity: 1,
+    strokeColor: 'red',
+    lineOpacity: 0.8,
+    lineWidth: 1,
+    label: {
+      field: 'label',
+      style: {
+        fill: '#fff',
+        opacity: 0.6,
+        fontSize: 12,
+        textAnchor: 'top',
+        textOffset: [0, 20],
+        spacing: 1,
+        padding: [5, 5],
+        stroke: '#ffffff',
+        strokeWidth: 0.3,
+        strokeOpacity: 1.0,
+      },
+    },
+    state: {
+      active: {
+        fillColor: 'red',
+        strokeColor: 'green',
+        lineWidth: 1.5,
+        lineOpacity: 0.8,
+      },
+      select: {
+        fillColor: 'red',
+        strokeColor: 'yellow',
+        lineWidth: 1.5,
+        lineOpacity: 0.8,
+      },
+    },
+  });
+
+  it('type', () => {
+    expect(layer.type).toBe('scatterLayer');
+    expect(layer.fillLayer.type).toBe('pointLayer');
+    expect(layer.highlightStrokeLayer.type).toBe('pointLayer');
+    expect(layer.selectFillLayer.type).toBe('pointLayer');
+    expect(layer.selectStrokeLayer.type).toBe('pointLayer');
+    expect(layer.labelLayer.type).toBe('textLayer');
+  });
+
+  it('size', () => {
+    expect(getLayerStyleAttribute(layer.fillLayer.layer['pendingStyleAttributes'], 'size')).toEqual({
+      attributeName: 'size',
+      attributeField: 12,
+    });
+  });
+
+  it('color', () => {
+    expect(getLayerStyleAttribute(layer.fillLayer.layer['pendingStyleAttributes'], 'color')).toEqual({
+      attributeName: 'color',
+      attributeField: '#fff',
+    });
+  });
+
+  it('shape', () => {
+    expect(getLayerStyleAttribute(layer.fillLayer.layer['pendingStyleAttributes'], 'shape')).toEqual({
+      attributeName: 'shape',
+      attributeField: 'circle',
+    });
+  });
+
+  it('label', () => {
+    expect(getLayerStyleAttribute(layer.labelLayer.layer['pendingStyleAttributes'], 'size')).toEqual({
+      attributeName: 'size',
+      attributeField: 12,
+    });
+    expect(getLayerStyleAttribute(layer.labelLayer.layer['pendingStyleAttributes'], 'color')).toEqual({
+      attributeName: 'color',
+      attributeField: '#fff',
+    });
+    expect(getLayerStyleAttribute(layer.labelLayer.layer['pendingStyleAttributes'], 'shape')).toEqual({
+      attributeName: 'shape',
+      attributeField: 'label',
+      attributeValues: 'text',
+    });
+    expect(layer.labelLayer.layer['rawConfig']).toMatchObject({
+      opacity: 0.6,
+      textAnchor: 'top',
+      textOffset: [0, 20],
+      spacing: 1,
+      padding: [5, 5],
+      stroke: '#ffffff',
+      strokeWidth: 0.3,
+      strokeOpacity: 1.0,
+    });
+  });
+
+  it('style', () => {
+    expect(layer.fillLayer.layer['rawConfig']).toMatchObject({
+      opacity: 1,
+      strokeWidth: 1,
+      stroke: 'red',
+      strokeOpacity: 0.8,
+    });
+  });
+
+  it('state', () => {
+    expect(layer.fillLayer.layer['needUpdateConfig'].enableHighlight).toBeTruthy();
+    expect(layer.fillLayer.layer['needUpdateConfig'].enableSelect).toBeFalsy();
+
+    expect(getLayerStyleAttribute(layer.highlightStrokeLayer.layer['pendingStyleAttributes'], 'size')).toEqual({
+      attributeName: 'size',
+      attributeField: 12,
+    });
+    expect(layer.highlightStrokeLayer.layer['rawConfig']).toMatchObject({
+      opacity: 0,
+      strokeWidth: 1.5,
+      stroke: 'green',
+      strokeOpacity: 0.8,
+    });
+
+    expect(getLayerStyleAttribute(layer.selectStrokeLayer.layer['pendingStyleAttributes'], 'size')).toEqual({
+      attributeName: 'size',
+      attributeField: 12,
+    });
+    expect(layer.selectStrokeLayer.layer['rawConfig']).toMatchObject({
+      opacity: 0,
+      strokeWidth: 1.5,
+      stroke: 'yellow',
+      strokeOpacity: 0.8,
+    });
+  });
+});

packages/composite-layers/__tests__/unit/core-layers/heatmap-layer/index.test.ts

@@ -0,0 +1,54 @@
+import { getLayerStyleAttribute } from '../../../helper/layer';
+import { HeatmapLayer } from '../../../../src/core-layers/heatmap-layer';
+
+describe('heatmap layer', () => {
+  const layer = new HeatmapLayer({
+    source: { data: [], parser: { type: 'json', x: 'x', y: 'y' } },
+    shape: 'heatmap',
+    size: {
+      field: 'mag',
+      value: [0, 1],
+    },
+    style: {
+      intensity: 3,
+      radius: 20,
+      opacity: 1,
+      rampColors: {
+        colors: ['#FF4818', '#F7B74A', '#FFF598', '#F27DEB', '#8C1EB2', '#421EB2'],
+        positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
+      },
+    },
+  });
+
+  it('type', () => {
+    expect(layer.type).toBe('heatmapLayer');
+    expect(layer.layer.type).toBe('HeatMapLayer');
+  });
+
+  it('size', () => {
+    expect(getLayerStyleAttribute(layer.layer['pendingStyleAttributes'], 'size')).toEqual({
+      attributeName: 'size',
+      attributeField: 'mag',
+      attributeValues: [0, 1],
+    });
+  });
+
+  it('shape', () => {
+    expect(getLayerStyleAttribute(layer.layer['pendingStyleAttributes'], 'shape')).toEqual({
+      attributeName: 'shape',
+      attributeField: 'heatmap',
+    });
+  });
+
+  it('style', () => {
+    expect(layer.layer['rawConfig']).toMatchObject({
+      intensity: 3,
+      radius: 20,
+      opacity: 1,
+      rampColors: {
+        colors: ['#FF4818', '#F7B74A', '#FFF598', '#F27DEB', '#8C1EB2', '#421EB2'],
+        positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
+      },
+    });
+  });
+});