slidev-addon-infographic 1.0.2 → 1.0.4

package/README.md

@@ -2,17 +2,30 @@
 
 [@antv/infographic](https://infographic.antv.vision/) component for slidev
 
+## Usage Process
+
 ``` sh
 pnpm i slidev-addon-infographic --save
 ```
 
+Add the following to your `package.json`:
+
+``` json
+...
+  "slidev": {
+    "addons": [
+      "slidev-addon-infographic"
+    ]
+  }
+...
+```
+
 Add the following to your `slides.md`:
 
 ``` md
 ---
-layout: center
 addons:
-    - slidev-addon-infographic
+  - slidev-addon-infographic
 ---
 
 <RenderWhen
@@ -31,13 +44,33 @@ addons:
 </RenderWhen>
 ```
 
-- **Infographic component must be used with RenderWhen component to show infographic in slidev**
-- **The Infographic component must occupy the entire page or be contained within elements with dimensions**
-- **Temporarily supports exporting in PPTX and PNG formats**
+[RenderWhen](https://sli.dev/builtin/components#renderwhen)
+
+- **Infographic component must be used with RenderWhen component to show infographic in slidev.**
+- **If you want to export PDF format, please remove `visible` in `RenderWhen` component's `context` attribute.**
+
+1. **Infographic组件必须与RenderWhen组件一起使用，才能在幻灯片中显示信息图。**
+2. **如需导出 PDF 格式，请将 `RenderWhen` 组件的 `context` 属性中的 `visible` 去除。**
+
+## Parameter Description
+
+| Parameter | Description | Type | Default | Version |
+| --------- | ----------- | ---- | ------- | ------- |
+| data | Infographic data | string | - | 1.0.0 |
+| click | Whether to respond to [Slidev click animation](https://sli.dev/guide/animations#click-animation), If set to `true`, you need to add a [`clicks`](https://sli.dev/guide/animations#total) field in the `frontmatter` with the value being the number of clicks. | boolean | false | 1.0.4 |
+
+- **Note: `click` is primarily used for demonstrating effects, and it is recommended to turn it off when exporting.**
+- **Note: After setting `click` to `true` and adding the `clicks` count, you need to click yourself to confirm the effect.**
+
+| 参数 | 描述 | 类型 | 默认值 | 版本 |
+| ---- | ---- | ---- | ------ | ---- |
+| data | 信息图数据 | string | - | 1.0.0 |
+| click | 是否响应[Slidev点击动画](https://cn.sli.dev/guide/animations#click-animation)，如果设置为 `true`，需要在 `frontmatter` 中添加 [`clicks`](https://cn.sli.dev/guide/animations#total) 字段，值为点击次数。 | boolean | false | 1.0.4 |
+
+1. **注意：`click` 主要用于演示效果，导出时建议关闭。**
+2. **注意：设置 `click` 为 `true` 后，并添加 `clicks` 点击次数之后的效果需要自行点击确认。**
 
-1. **Infographic组件必须与RenderWhen组件一起使用，才能在幻灯片中显示信息图**
-2. **Infographic组件必须占用整个页面或被包含在带尺寸的元素中**
-3. **暂时支持导出 PPTX, PNG 格式**
+## Slidev
 
 Edit the [slides.md](./slides.md) to see the changes.
 

package/components/Infographic.vue

@@ -3,48 +3,170 @@
 </template>
 
 <script setup>
-import { useDarkMode } from '@slidev/client'
+import { useDarkMode, useNav } from '@slidev/client'
 import {ref, watch, onMounted, onUnmounted} from 'vue'
 import {Infographic} from '@antv/infographic'
 
-const props = defineProps(['data'])
+const props = defineProps({
+  data: {
+    type: String,
+    default: '',
+  },
+  click: {
+    type: Boolean,
+    default: false,
+  }
+})
 
 const containerRef = ref(null)
-let infographic = null
+let infographic = ref(null)
 const { isDark } = useDarkMode()
+const nav = useNav()
+const parseStringRef = ref(null)
 
-function initInfographic(data) {
-  if (infographic) infographic.destroy()
-  infographic = new Infographic({
+function initInfographic() {
+  if (infographic.value) infographic.value.destroy()
+  infographic.value = new Infographic({
     container: containerRef.value,
     width: '100%',
     height: '100%',
   })
-  data && infographic.render(data)
+  if (!props.data) return
+  if (props.click) {
+    if (!parseStringRef.value) parseStringRef.value = parseString(props.data)
+    const clickNum = nav.currentRoute.value.query.clicks || 0
+    infographic.value.render(`${parseStringRef.value.strNoData}
+${parseStringRef.value.strDataNoItems}
+  items
+    ${parseStringRef.value.itemsArray.slice(0, Math.min(clickNum * 1 + 1, parseStringRef.value.itemsArray.length)).join('\n')}`)
+  } else {
+    infographic.value.render(props.data)
+  }
 }
 
 onMounted(() => {
-  initInfographic(props.data)
+  initInfographic()
 })
 
 onUnmounted(() => {
-  if (infographic) {
-    infographic.destroy()
+  if (infographic.value) {
+    infographic.value.destroy()
   }
 })
 
 watch(() => props.data, (newData) => {
-  newData && initInfographic(newData)
+  if (newData) {
+    parseStringRef.value = null
+    initInfographic()
+  }
+})
+
+watch(() => props.click, (val) => {
+  parseStringRef.value = null
+  initInfographic()
 })
+
+watch(() => nav.currentRoute.value.query.clicks, () => {
+  initInfographic()
+})
+
 watch(() => isDark.value, (newDark) => {
   if (newDark) {
-    infographic.update({
+    infographic.value.update({
       theme: 'dark',
     })
   } else {
-    infographic.update({
+    infographic.value.update({
       theme: 'light',
     })
   }
 })
+
+/**
+ * 精准拆分字符串为指定的三个部分
+ * @param {string} str - 原始字符串
+ * @returns {object} 包含strNoData、strDataNoItems、itemsArray三个结果
+ */
+function parseString(str) {
+  const lines = str.split('\n')
+  let strNoDataLines = []       // 行集合（非data内容）
+  let strDataNoItemsLines = []       // 行集合（data内除items外）
+  let itemsLines = []      // items的原始行集合
+  let inDataBlock = false
+  let inItemsBlock = false
+  let currentItemBuffer = []
+  let dataLineSpaceNum = 0
+  let itemsLineSpaceNum = 0
+
+  lines.forEach(line => {
+    if (line.trim() === 'data') {
+      inDataBlock = true
+      dataLineSpaceNum = line.search(/\S/)
+      strDataNoItemsLines.push(line)
+      return
+    }
+
+    if (!inDataBlock) {
+      strNoDataLines.push(line)
+      return
+    }
+
+    if (inDataBlock) {
+      if (line.trim() === 'items') {
+        itemsLineSpaceNum = line.search(/\S/)
+        inItemsBlock = true
+        return
+      }
+
+      if (!inItemsBlock) {
+        strDataNoItemsLines.push(line)
+        return
+      }
+
+      const curLineSpaceNum = line.search(/\S/)
+      if (curLineSpaceNum <= itemsLineSpaceNum) {
+        inItemsBlock = false
+        if (curLineSpaceNum <= dataLineSpaceNum) {
+          inDataBlock = false
+          strNoDataLines.push(line)
+        } else {
+          strDataNoItemsLines.push(line)
+        }
+        return
+      }
+
+      // 处理items区块内的内容
+      if (inItemsBlock) {
+        itemsLines.push(line)
+        return
+      }
+    }
+  })
+
+  const itemsArray = []
+  itemsLines.forEach(line => {
+    const curLineSpaceNum = line.search(/\S/)
+    if (line.trim().startsWith('- label') && curLineSpaceNum === itemsLineSpaceNum + 2) {
+      if (currentItemBuffer.length > 0) {
+        itemsArray.push(currentItemBuffer.join('\n'))
+        currentItemBuffer = []
+      }
+    }
+    if (line.trim() !== '') {
+      currentItemBuffer.push(line)
+    }
+  })
+  if (currentItemBuffer.length > 0) {
+    itemsArray.push(currentItemBuffer.join('\n'))
+  }
+
+  const strNoData = strNoDataLines.join('\n')
+  const strDataNoItems = strDataNoItemsLines.join('\n')
+
+  return {
+    strNoData,
+    strDataNoItems,
+    itemsArray
+  }
+}
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-addon-infographic",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "type": "module",
   "author": "fxss5201",
   "description": "@antv/infographic component for slidev",