Docs/poptip label item

docs/assets/examples/en/character/poptip.md

@@ -0,0 +1,184 @@
+---
+category: examples
+group: character
+title: poptip
+keywords: poptip
+order: 1-0
+cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory/poptip.gif
+---
+
+# PopTip Element
+
+`PopTip` is an annotation element used to add a bubble at a specific position to display detailed information. The design of `PopTip` is flexible and diverse, supporting the display of tips in different directions. This means developers can choose the direction of the bubble display, such as top, bottom, left, or right, based on specific needs and interface design, ensuring that the tip information does not obstruct important interface elements and users can easily access the information they need.
+
+Moreover, `PopTip` can be customized, such as adjusting colors, fonts, sizes, etc., to maintain consistency with the overall interface style. This makes `PopTip` a very practical tool widely used in scenarios such as data visualization, form filling, navigation tips, providing users with a richer and more user-friendly interactive experience.
+
+## Code Demo
+
+```javascript livedemo template=vstory
+// 注册所有需要的内容
+VStory.registerAll();
+// 注册PopTip
+VStory.registerPopTip();
+VStory.registerPopTipAction();
+
+const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#18253A' });
+const player = new VStory.Player(story);
+story.init(player);
+
+const panelStyle = {
+  shadowColor: 'rgba(0, 0, 0, 0.1)',
+  shadowBlur: 10,
+  shadowOffsetX: 4,
+  shadowOffsetY: 4,
+  fill: 'white',
+  cornerRadius: 4,
+  size: 9
+};
+const commonStyle = {
+  content: '$123,45',
+  position: 'tl',
+  padding: { top: 6, bottom: 6, left: 6, right: 6 },
+  contentStyle: {
+    fontSize: 12,
+    fill: '#08979c'
+  }
+};
+
+const p1 = {
+  ...commonStyle,
+  panel: {
+    ...panelStyle
+  }
+};
+const p2 = {
+  ...commonStyle,
+  triangleMode: 'concise',
+  panel: {
+    ...panelStyle,
+    cornerRadius: 0
+  }
+};
+const p3 = {
+  ...commonStyle,
+  triangleMode: 'concise',
+  panel: {
+    ...panelStyle,
+    fill: false,
+    stroke: 'white',
+    cornerRadius: 0,
+    size: 0
+  }
+};
+const p4 = {
+  ...commonStyle,
+  position: 'top',
+  panel: {
+    ...panelStyle,
+    square: true,
+    cornerRadius: 100,
+    size: 12
+  }
+};
+
+const p5 = {
+  content: '123,45',
+  padding: { top: 3, bottom: 3, left: 12, right: 6 },
+  position: 'tl',
+  contentStyle: {
+    fontSize: 12,
+    fill: '#08979c'
+  },
+  panel: {
+    ...panelStyle,
+    cornerRadius: [0, 20, 20, 0]
+  },
+  logoSymbol: {
+    symbolType: 'circle',
+    fill: 'red',
+    size: 'auto'
+  },
+  logoText: '$',
+  logoTextStyle: {
+    fill: 'white',
+    fontSize: 12
+  }
+};
+
+const p6 = {
+  content: '123,45',
+  position: 'tl',
+  padding: { top: 3, bottom: 3, left: 13, right: 8 },
+  contentStyle: {
+    fontSize: 12,
+    fill: '#08979c'
+  },
+  panel: {
+    ...panelStyle,
+    cornerRadius: [0, 0, 6, 0],
+    cornerType: 'bevel',
+    size: 0
+  },
+  logoSymbol: {
+    symbolType: 'rect',
+    fill: 'red',
+    size: [20, 'auto'],
+    cornerType: 'bevel'
+  },
+  logoText: '🤡',
+  logoTextStyle: {
+    fill: 'white',
+    fontSize: 12
+  }
+};
+
+[p1, p2, p3, p4, p5, p6].forEach((item, index) => {
+  story.addCharacter(
+    {
+      type: 'PopTip',
+      id: `poptip-${index}`,
+      zIndex: 1,
+      position: {
+        top: 100 + Math.floor(index / 3) * 120,
+        left: 50 + (index % 3) * 120
+      },
+      options: {
+        graphic: item
+      }
+    },
+    {
+      sceneId: 'defaultScene',
+      actions: [
+        {
+          startTime: 0,
+          action: 'appear',
+          payload: [
+            {
+              animation: {
+                duration: 300,
+                easing: 'quadOut',
+                wave: 0.3
+              }
+            }
+          ]
+        },
+        {
+          startTime: 1000,
+          action: 'disappear',
+          payload: {
+            animation: {
+              duration: 300,
+              easing: 'aIn3'
+            }
+          }
+        }
+      ]
+    }
+  );
+});
+
+player.play(1);
+
+window['story'] = story;
+window['vstory'] = story;
+```

docs/assets/examples/en/character/story-label-item.md

@@ -0,0 +1,156 @@
+---
+category: examples
+group: character
+title: story-label-item
+keywords: story-label-item
+order: 1-0
+cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory/label-item.gif
+---
+
+# Narrative Label Element
+
+`story-label-item` is a labeling element specifically designed to add explanatory text or information at specific locations. Unlike traditional ways of displaying information directly around the target, `story-label-item` connects the explanation to its corresponding target element through an additional connecting line. This design allows the label to be flexibly placed within a larger area around the target, without being limited to the edges of the target.
+
+This flexibility not only enhances the aesthetics of the interface but also effectively avoids information overlap or obstruction, ensuring that users can clearly see the labeled content while browsing. Specifically, `story-label-item` can choose the best position to display the label based on the layout and design requirements of the interface, whether it is above, below, to the left, or to the right of the target, or even further away, as long as it clearly points to the target through the connecting line.
+
+Furthermore, `story-label-item` supports various styles and customization options. Developers can adjust its appearance according to specific application scenarios to ensure coordination with the overall design style. This makes `story-label-item` a very practical tool, widely used in data visualization, user instructions, interactive design, and many other fields, providing users with a more intuitive and friendly information delivery experience.
+
+## Code Demo
+
+```javascript livedemo template=vstory
+// 注册所有需要的内容
+VStory.registerAll();
+// 注册PopTip
+VStory.registerLabelItem();
+VStory.registerLabelItemAction();
+
+const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#18253A' });
+const player = new VStory.Player(story);
+story.init(player);
+
+const l1 = {
+  contentOffsetX: 200,
+  contentOffsetY: -60,
+  titleSpace: [0, 3],
+  titleTop: 'Powered By VisActor'
+};
+const l2 = {
+  contentOffsetX: 200,
+  contentOffsetY: -60,
+  titleSpace: [0, 3],
+  titleTop: 'Powered By VisActor',
+  titleBottom: 'this is the VStory label',
+  titleBottomStyle: {
+    fontSize: 10
+  }
+};
+const l3 = {
+  contentOffsetX: 200,
+  contentOffsetY: -60,
+  titleSpace: [6, 6],
+  titleTop: 'Powered By VisActor',
+  titleTopStyle: {
+    fontSize: 12,
+    fill: 'black'
+  },
+  titleTopPanelStyle: {
+    fill: 'white',
+    visible: true,
+    padding: { top: 3, bottom: 3 }
+  }
+};
+
+const l4 = {
+  contentOffsetX: 200,
+  contentOffsetY: -60,
+  titleSpace: [6, 6],
+  titleTop: 'Powered By VisActor',
+  titleTopStyle: {
+    fontSize: 12,
+    fill: 'black'
+  },
+  titleBottom: 'this is the VStory label',
+  titleBottomStyle: {
+    fontSize: 10,
+    fill: 'black'
+  },
+  titleTopPanelStyle: {
+    fill: 'white',
+    visible: true,
+    padding: { top: 3, bottom: 3 }
+  },
+  titleBottomPanelStyle: {
+    fill: 'white',
+    visible: true,
+    padding: { top: 3, bottom: 6 }
+  }
+};
+
+const l5 = {
+  contentOffsetX: 200,
+  contentOffsetY: -60,
+  titleTop: 'Powered By VisActor',
+  titleTopStyle: {
+    fontSize: 12
+  },
+  titleTopPanelStyle: {
+    stroke: 'white',
+    visible: true
+    // padding: { top: 3, bottom: 3 }
+  },
+  theme: 'simple'
+};
+
+[l1, l2, l3, l4, l5, l1, l2, l3, l4, l5].forEach((item, index) => {
+  story.addCharacter(
+    {
+      type: 'LabelItem',
+      id: `label-item-${index}`,
+      zIndex: 1,
+      position: {
+        top: 100 + Math.floor(index / 3) * 100,
+        left: 50 + (index % 3) * 230
+      },
+      options: {
+        graphic: item
+      }
+    },
+    {
+      sceneId: 'defaultScene',
+      actions: [
+        {
+          startTime: 0,
+          action: 'appear',
+          payload: [
+            {
+              animation: {
+                duration: 1000,
+                easing: 'cubicIn',
+                symbolStartOuterType: Math.floor(index / 5) === 0 ? 'scale' : 'clipRange',
+                titleType: Math.floor(index / 5) === 0 ? 'move' : 'typewriter',
+                titlePanelType: index === 4 ? 'stroke' : 'scale'
+              }
+            }
+          ]
+        },
+        {
+          startTime: 2000,
+          action: 'disappear',
+          payload: {
+            animation: {
+              duration: 700,
+              easing: 'cubicIn',
+              mode: Math.floor(index / 5) === 0 ? 'default' : 'scale'
+            }
+          }
+        }
+      ]
+    }
+  );
+});
+
+player.play(1);
+
+window['story'] = story;
+window['vstory'] = story;
+```

docs/assets/examples/en/works-show/unit-infographic.md → docs/assets/examples/en/infographic/unit-infographic.md

@@ -1,17 +1,17 @@
 ---
 category: examples
-group: works-show
+group: infographic
 title: unit-infographic
 keywords: unit-infographic
 order: 1-0
 cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory/unit-infographic.png
 ---
 
-# `Unit Visualization Infographic` Work Display
+# Showcase of `Unit Infographic`
 
-This work is a unit visualization infographic work, showing VStory's ability in making infographic templates.
+This work is a unit visualization infographic showcasing VStory's ability to create infographic templates.
 
-## Code Demonstration
+## Code Demo
 
 ```javascript livedemo template=vstory
 // 注册所有需要的内容