feat(vue): [mind-map] mindmap

examples/sites/demos/pc/app/mind-map/basic-usage-composition-api.vue

@@ -0,0 +1,14 @@
+<template>
+  <tiny-mind-map class="mindmap" />
+</template>
+
+<script lang="ts" setup>
+import { MindMap as TinyMindMap } from '@opentiny/vue'
+</script>
+
+<style scoped>
+.mindmap {
+  width: 100%;
+  height: 300px;
+}
+</style>

examples/sites/demos/pc/app/mind-map/basic-usage.spec.ts

@@ -0,0 +1,36 @@
+import { test, expect } from '@playwright/test'
+
+test('基本使用', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('mind-map#basic-usage')
+
+  const root = page.locator('me-tpc').filter({ hasText: 'root' })
+  expect(root).not.toBeNull()
+  await expect(root).toHaveText('root')
+})
+test('追加节点', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('mind-map#basic-usage')
+
+  await page.locator('me-tpc').click()
+  await page.locator('.map-canvas').press('Tab')
+  await page.locator('me-tpc').filter({ hasText: 'root' }).click()
+  await page.locator('.map-canvas').press('Tab')
+  await expect(page.locator('me-main me-wrapper')).toHaveCount(2)
+})
+test('修改节点', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('mind-map#basic-usage')
+  await page.locator('me-tpc').dblclick()
+  await page.locator('#input-box').fill('root-new')
+  await page.locator('#input-box').press('Enter')
+})
+test('删除节点', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('mind-map#basic-usage')
+  await page.locator('me-tpc').click()
+  await page.locator('.map-canvas').press('Tab')
+  await page.locator('me-tpc').filter({ hasText: 'root' }).click()
+  await page.locator('.map-canvas').press('Tab')
+  await page.locator('me-tpc').nth(2).press('Delete')
+})

examples/sites/demos/pc/app/mind-map/basic-usage.vue

@@ -0,0 +1,20 @@
+<template>
+  <tiny-mind-map class="mindmap" />
+</template>
+
+<script lang="ts">
+import { MindMap } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyMindMap: MindMap
+  }
+}
+</script>
+
+<style scoped>
+.mindmap {
+  width: 100%;
+  height: 300px;
+}
+</style>

examples/sites/demos/pc/app/mind-map/event-composition-api.vue

@@ -0,0 +1,125 @@
+<template>
+  <tiny-mind-map
+    ref="mindmap"
+    class="mindmap"
+    @create="onCreate"
+    @operation="onOperation"
+    @select-node="onSelectNode"
+    @select-new-node="onSelectNewNode"
+    @select-nodes="onSelectNodes"
+    @unselect-node="onUnselectNode"
+    @unselect-nodes="onUnselectNodes"
+    @expand-node="onExpandNode"
+    v-model="exampleData"
+  />
+</template>
+
+<script setup>
+import { Notify, MindMap as TinyMindMap } from '@opentiny/vue'
+import { ref } from 'vue'
+
+const exmpleData = ref({
+  'nodeData': {
+    'id': 'c9ee6647385c42de',
+    'topic': '前端修仙指南',
+    'root': true,
+    'children': [
+      {
+        'topic': 'Handfirst html and css',
+        'id': 'c9ee977189f3b1f1'
+      },
+      {
+        'topic': '高程',
+        'id': 'c9ee9a4e8f3f83c5'
+      },
+      {
+        'topic': 'Javascript权威指南',
+        'id': 'c9ee9b8e87958282'
+      },
+      {
+        'topic': '算法 第四版',
+        'id': 'c9eea19c874d331f'
+      },
+      {
+        'topic': '大话数据结构',
+        'id': 'c9eea8d788441a71'
+      },
+      {
+        'topic': '算法导论',
+        'id': 'c9eeac4c84aaba37'
+      },
+      {
+        'topic': '编译原理',
+        'id': 'c9eeadee881cf229'
+      },
+      {
+        'topic': '宫水三叶的刷题日记',
+        'id': 'c9eec88a85d8ff76'
+      }
+    ]
+  }
+})
+const onCreate = () => {
+  Notify({
+    type: 'info',
+    message: '触发事件create',
+    duration: 1000
+  })
+}
+const onOperation = () => {
+  Notify({
+    type: 'info',
+    message: '触发事件operation',
+    duration: 1000
+  })
+}
+const onSelectNode = () => {
+  Notify({
+    type: 'info',
+    message: '触发事件selectNode',
+    duration: 1000
+  })
+}
+const onSelectNewNode = () => {
+  Notify({
+    type: 'info',
+    message: '触发事件selectNewNode',
+    duration: 1000
+  })
+}
+const onSelectNodes = () => {
+  Notify({
+    type: 'info',
+    message: '触发事件selectNodes',
+    duration: 1000
+  })
+}
+const onUnselectNode = () => {
+  Notify({
+    type: 'info',
+    message: '触发事件unselectNode',
+    duration: 1000
+  })
+}
+const onUnselectNodes = () => {
+  Notify({
+    type: 'info',
+    message: '触发事件unselectNodes',
+    duration: 1000
+  })
+}
+const onExpandNode = () => {
+  Notify({
+    type: 'info',
+    message: '触发事件expandNode',
+    duration: 1000
+  })
+}
+</script>
+
+<style scoped>
+.mindmap {
+  width: 100%;
+  height: 300px;
+}
+</style>

examples/sites/demos/pc/app/mind-map/event.spec.ts

@@ -0,0 +1,52 @@
+import { test, expect } from '@playwright/test'
+
+test('测试创建事件', async ({ page }) => {
+  await page.goto('mind-map#event')
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.getByText('触发事件create').isVisible()
+})
+
+test('测试operation事件', async ({ page }) => {
+  await page.goto('mind-map#event')
+  await page.locator('me-tpc').click()
+  await page.locator('.map-canvas').press('Tab')
+  await page.getByText('触发事件operation').first().isVisible()
+  // 新创建node时会触发selectNewNode事件
+  // 这个触发是符合逻辑的, 因为创建后的node的确是new-node
+  // 创建后会自动选择, 自然触发selectNewNode是符合逻辑的
+  await page.getByText('触发事件selectNewNode').first().isVisible()
+})
+test('测试select-node, select-nodes, select-new-node事件', async ({ page }) => {
+  await page.goto('mind-map#event')
+  await page.locator('me-tpc').filter({ hasText: 'root' }).click()
+  await page.locator('.map-canvas').press('Tab')
+  await page.locator('me-tpc').filter({ hasText: 'root' }).click()
+  await page.locator('.map-canvas').press('Tab')
+  await page.locator('me-tpc').filter({ hasText: 'root' }).click()
+  await page
+    .locator('me-tpc')
+    .nth(1)
+    .filter({ hasText: 'new node' })
+    .click({
+      modifiers: ['Control']
+    })
+  await page.getByText('触发事件selectNode').first().isVisible()
+  await page.getByAltText('触发事件selectNodes').isVisible()
+})
+test('测试 unselect-node,unselect-nodes', async ({ page }) => {
+  await page.goto('mind-map#event')
+  await page.locator('me-tpc').filter({ hasText: 'root' }).click()
+  await page.locator('.map-canvas').press('Tab')
+  await page.locator('me-tpc').filter({ hasText: 'root' }).click()
+  await page.locator('.map-canvas').press('Tab')
+
+  await page.locator('me-tpc').nth(2).click()
+  await page
+    .locator('me-tpc')
+    .nth(1)
+
+    .click({
+      modifiers: ['Control']
+    })
+  await page.locator('.map-canvas').click()
+})

examples/sites/demos/pc/app/mind-map/event.vue

@@ -0,0 +1,136 @@
+<template>
+  <tiny-mind-map
+    ref="mindmap"
+    class="mindmap"
+    @create="onCreate"
+    @operation="onOperation"
+    @select-node="onSelectNode"
+    @select-new-node="onSelectNewNode"
+    @select-nodes="onSelectNodes"
+    @unselect-node="onUnselectNode"
+    @unselect-nodes="onUnselectNodes"
+    @expand-node="onExpandNode"
+    v-model="exampleData"
+  />
+</template>
+
+<script lang="jsx">
+import { MindMap, Notify } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyMindMap: MindMap
+  },
+  data() {
+    return {
+      exampleData: {
+        'nodeData': {
+          'id': 'c9ee6647385c42de',
+          'topic': '前端修仙指南',
+          'root': true,
+          'children': [
+            {
+              'topic': 'Handfirst html and css',
+              'id': 'c9ee977189f3b1f1'
+            },
+            {
+              'topic': '高程',
+              'id': 'c9ee9a4e8f3f83c5'
+            },
+            {
+              'topic': 'Javascript权威指南',
+              'id': 'c9ee9b8e87958282'
+            },
+            {
+              'topic': '算法 第四版',
+              'id': 'c9eea19c874d331f'
+            },
+            {
+              'topic': '大话数据结构',
+              'id': 'c9eea8d788441a71'
+            },
+            {
+              'topic': '算法导论',
+              'id': 'c9eeac4c84aaba37'
+            },
+            {
+              'topic': '编译原理',
+              'id': 'c9eeadee881cf229'
+            },
+            {
+              'topic': '宫水三叶的刷题日记',
+              'id': 'c9eec88a85d8ff76'
+            }
+          ]
+        }
+      },
+      loading: false
+    }
+  },
+  methods: {
+    onCreate() {
+      Notify({
+        type: 'info',
+        message: '触发事件create',
+        duration: 1000
+      })
+    },
+    onOperation() {
+      Notify({
+        type: 'info',
+        message: '触发事件operation',
+        duration: 1000
+      })
+    },
+    onSelectNode() {
+      Notify({
+        type: 'info',
+        message: '触发事件selectNode',
+        duration: 1000
+      })
+    },
+    onSelectNewNode() {
+      Notify({
+        type: 'info',
+        message: '触发事件selectNewNode',
+        duration: 1000
+      })
+    },
+    onSelectNodes() {
+      Notify({
+        type: 'info',
+        message: '触发事件selectNodes',
+        duration: 1000
+      })
+    },
+    onUnselectNode() {
+      Notify({
+        type: 'info',
+        message: '触发事件unselectNode',
+        duration: 1000
+      })
+    },
+    onUnselectNodes() {
+      Notify({
+        type: 'info',
+        message: '触发事件unselectNodes',
+        duration: 1000
+      })
+    },
+    onExpandNode() {
+      Notify({
+        type: 'info',
+        message: '触发事件expandNode',
+        duration: 1000
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.mindmap {
+  width: 100%;
+  height: 300px;
+}
+</style>