@antv/infographic 0.2.2 → 0.2.4

package/lib/templates/list-zigzag.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.listZigzagTemplates = void 0;
+exports.listZigzagTemplates = {
+    'list-zigzag-up-compact-card': {
+        design: {
+            title: 'default',
+            structure: {
+                type: 'list-zigzag-up',
+            },
+            items: [
+                {
+                    type: 'compact-card',
+                },
+            ],
+        },
+        themeConfig: {
+            colorPrimary: '#17CA2C',
+        },
+    },
+    'list-zigzag-up-simple': {
+        design: {
+            title: 'default',
+            structure: {
+                type: 'list-zigzag-up',
+            },
+            items: [
+                {
+                    type: 'simple',
+                    usePaletteColor: true,
+                },
+            ],
+        },
+        themeConfig: {
+            colorPrimary: '#17CA2C',
+        },
+    },
+    'list-zigzag-down-compact-card': {
+        design: {
+            title: 'default',
+            structure: {
+                type: 'list-zigzag-down',
+            },
+            items: [
+                {
+                    type: 'compact-card',
+                },
+            ],
+        },
+        themeConfig: {
+            colorPrimary: '#17CA2C',
+        },
+    },
+    'list-zigzag-down-simple': {
+        design: {
+            title: 'default',
+            structure: {
+                type: 'list-zigzag-down',
+            },
+            items: [
+                {
+                    type: 'simple',
+                    usePaletteColor: true,
+                },
+            ],
+        },
+        themeConfig: {
+            colorPrimary: '#17CA2C',
+        },
+    },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/infographic",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "An Infographic Generation and Rendering Framework, bring words to life!",
   "keywords": [
     "antv",

package/src/designs/layouts/Align.tsx

@@ -38,13 +38,13 @@ export const AlignLayout = createLayout<AlignLayoutProps>(
       if (horizontal !== undefined) {
         switch (horizontal) {
           case 'left':
-            childProps.x = 0; // 相对容器
+            childProps.x = -bounds.x; // 相对容器边界
             break;
           case 'center':
-            childProps.x = (containerWidth - bounds.width) / 2;
+            childProps.x = (containerWidth - bounds.width) / 2 - bounds.x;
             break;
           case 'right':
-            childProps.x = containerWidth - bounds.width;
+            childProps.x = containerWidth - bounds.width - bounds.x;
             break;
         }
       } else if (childProps.x === undefined) {
@@ -56,13 +56,13 @@ export const AlignLayout = createLayout<AlignLayoutProps>(
       if (vertical !== undefined) {
         switch (vertical) {
           case 'top':
-            childProps.y = 0;
+            childProps.y = -bounds.y;
             break;
           case 'middle':
-            childProps.y = (containerHeight - bounds.height) / 2;
+            childProps.y = (containerHeight - bounds.height) / 2 - bounds.y;
             break;
           case 'bottom':
-            childProps.y = containerHeight - bounds.height;
+            childProps.y = containerHeight - bounds.height - bounds.y;
             break;
         }
       } else if (childProps.y === undefined) {

package/src/designs/layouts/Flex.tsx

@@ -136,6 +136,8 @@ export const FlexLayout = createLayout<FlexLayoutProps>(
         const bounds = lineBounds[childIndex];
         const childMainSize = isRow ? bounds.width : bounds.height;
         const childCrossSize = isRow ? bounds.height : bounds.width;
+        const mainOffset = isRow ? bounds.x : bounds.y;
+        const crossOffset = isRow ? bounds.y : bounds.x;
 
         let crossPos = currentCrossPos;
         if (hasContainerSize) {
@@ -155,14 +157,14 @@ export const FlexLayout = createLayout<FlexLayoutProps>(
         let x: number, y: number;
         if (isRow) {
           x = isReverse
-            ? containerWidth - currentMainPos - childMainSize
-            : currentMainPos;
-          y = crossPos;
+            ? containerWidth - currentMainPos - childMainSize - mainOffset
+            : currentMainPos - mainOffset;
+          y = crossPos - crossOffset;
         } else {
-          x = crossPos;
+          x = crossPos - crossOffset;
           y = isReverse
-            ? containerHeight - currentMainPos - childMainSize
-            : currentMainPos;
+            ? containerHeight - currentMainPos - childMainSize - mainOffset
+            : currentMainPos - mainOffset;
         }
 
         const clonedChild = cloneElement(child, { x, y });

package/src/designs/structures/chart-wordcloud.tsx

@@ -274,5 +274,5 @@ export const ChartWordCloud: ComponentType<ChartWordCloudProps> = (props) => {
 
 registerStructure('chart-wordcloud', {
   component: ChartWordCloud,
-  composites: ['item'],
+  composites: [],
 });