feat: 实现第一版

.github/workflows/gh-pages.yml

@@ -0,0 +1,20 @@
+name: github pages
+
+on:
+  push:
+    branches:
+      - "main"
+
+jobs:
+  deploy:
+    runs-on: ubuntu-18.04
+    steps:
+      - uses: actions/checkout@v2
+      - uses: c-hive/gha-yarn-cache@v2
+      - run: yarn install
+      - run: yarn docs:build
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./docs-dist

package.json

@@ -1,5 +1,4 @@
 {
-  "private": true,
   "name": "kityminder-react",
   "version": "1.0.0",
   "scripts": {
@@ -8,11 +7,15 @@
     "docs:deploy": "gh-pages -d docs-dist",
     "build": "father-build",
     "deploy": "npm run docs:build && npm run docs:deploy",
-    "release": "npm run build && npm publish",
+    "release": "standard-version",
+    "prepublishOnly": "npm run build",
     "prettier": "prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"",
     "test": "umi-test",
     "test:coverage": "umi-test --coverage"
   },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "typings": "dist/index.d.ts",
@@ -28,6 +31,8 @@
     ]
   },
   "dependencies": {
+    "kity": "^2.0.4",
+    "kityminder-core": "^1.4.50",
     "react": "^16.12.0 || ^17.0.0"
   },
   "devDependencies": {
@@ -37,6 +42,7 @@
     "gh-pages": "^3.0.0",
     "lint-staged": "^10.0.7",
     "prettier": "^2.2.1",
+    "standard-version": "^9.3.2",
     "yorkie": "^2.0.0"
   }
 }

src/index.css

@@ -0,0 +1,3 @@
+.km-view {
+  height: 500px;
+}

src/index.md

@@ -0,0 +1,63 @@
+---
+title: Docs
+sidemenu: false
+---
+
+# kityminder-react
+
+基于 [kityminder-core](https://github.com/fex-team/kityminder-core) 和 [kity](https://github.com/fex-team/kity) 封装的用于渲染百度脑图 kv JSON 数据的 React 组件。
+
+## 安装
+
+yarn：
+
+```sh
+yarn add kityminder-react
+```
+
+npm：
+
+```sh
+npm install kityminder-react
+```
+
+## 示例
+
+```tsx
+/**
+ * defaultShowCode: true
+ */
+import React from 'react';
+import './index.css';
+import KityMinder from 'kityminder-react';
+
+export default () => (
+  <KityMinder
+    data={{
+      root: {
+        data: {
+          text: '百度产品',
+          image: 'https://www.baidu.com/img/bd_logo1.png?where=super',
+          imageSize: { width: 270, height: 129 },
+        },
+        children: [
+          { data: { text: '新闻' } },
+          { data: { text: '网页', priority: 1 } },
+          { data: { text: '贴吧', priority: 2 } },
+          { data: { text: '知道', priority: 2 } },
+          { data: { text: '音乐', priority: 3 } },
+          { data: { text: '图片', priority: 3 } },
+          { data: { text: '视频', priority: 3 } },
+          { data: { text: '地图', priority: 3 } },
+          { data: { text: '百科', priority: 3 } },
+          { data: { text: '更多', hyperlink: 'http://www.baidu.com/more' } },
+        ],
+      },
+    }}
+  />
+);
+```
+
+<API src="./index.tsx"></API>
+
+More skills for writing demo: https://d.umijs.org/guide/basic#write-component-demo

src/index.tsx

@@ -0,0 +1,38 @@
+import React, { useEffect, useRef } from 'react';
+import 'kity';
+import 'kityminder-core';
+import './kityminder-core.css';
+
+export interface IKityMinderProps {
+  /**
+   * @description 从百度脑图导出的 JSON 数据
+   * @default null
+   */
+  data: object;
+}
+
+export default ({ data }: IKityMinderProps) => {
+  const kityRef = useRef(null);
+
+  useEffect(() => {
+    if (kityRef.current) {
+      // 填充数据
+      // @ts-ignore
+      kityRef.current.append(JSON.stringify(data));
+      // 创建 km 实例
+      // @ts-ignore
+      var km = new kityminder.Minder();
+      km.setup(kityRef.current);
+      km.disable();
+      km.execCommand('hand');
+    }
+  }, [data]);
+
+  return (
+    <script
+      ref={kityRef}
+      type="application/kityminder"
+      minder-data-type="json"
+    ></script>
+  );
+};

src/kityminder-core.css

@@ -0,0 +1,93 @@
+.km-view {
+  font-family: "STHeitiSC-Light", "STHeiti", "Hei", "Heiti SC", "Microsoft Yahei", Arial, sans-serif;
+  -webkit-user-select: none;
+  user-select: none;
+  position:  relative;
+}
+
+.km-view .km-receiver {
+  position: absolute;
+  left: -99999px;
+  top: -99999px;
+  width: 20px;
+  height: 20px;
+  outline: none;
+  margin: 0;
+}
+
+.km-view image {
+  cursor: zoom-in;
+}
+
+.km-image-viewer {
+  position: fixed;
+  z-index: 99999;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, .75);
+}
+
+.km-image-viewer .km-image-viewer-container {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  text-align: center;
+  white-space: nowrap;
+  overflow: auto;
+}
+
+.km-image-viewer .km-image-viewer-container::before {
+  content: '';
+  display: inline-block;
+  height: 100%;
+  width: 0;
+  font-size: 0;
+  vertical-align: middle;
+}
+
+.km-image-viewer .km-image-viewer-container img {
+  cursor: zoom-out;
+  vertical-align: middle;
+}
+
+.km-image-viewer .km-image-viewer-container img.limited {
+  cursor: zoom-in;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.km-image-viewer .km-image-viewer-toolbar {
+  z-index: 1;
+  background: rgba(0, 0, 0, .75);
+  text-align: right;
+  transition: all .25s;
+}
+
+.km-image-viewer .km-image-viewer-toolbar.hidden {
+  transform: translate(0, -100%);
+  opacity: 0;
+}
+
+.km-image-viewer .km-image-viewer-btn {
+  cursor: pointer;
+  outline: 0;
+  border: 0;
+  width: 44px;
+  height: 44px;
+  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjY0IiBoZWlnaHQ9Ijg4IiB2aWV3Qm94PSIwIDAgMjY0IDg4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0aXRsZT5kZWZhdWx0LXNraW4gMjwvdGl0bGU+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48Zz48cGF0aCBkPSJNNjcuMDAyIDU5LjV2My43NjhjLTYuMzA3Ljg0LTkuMTg0IDUuNzUtMTAuMDAyIDkuNzMyIDIuMjItMi44MyA1LjU2NC01LjA5OCAxMC4wMDItNS4wOThWNzEuNUw3MyA2NS41ODUgNjcuMDAyIDU5LjV6IiBpZD0iU2hhcGUiIGZpbGw9IiNmZmYiLz48ZyBmaWxsPSIjZmZmIj48cGF0aCBkPSJNMTMgMjl2LTVoMnYzaDN2MmgtNXpNMTMgMTVoNXYyaC0zdjNoLTJ2LTV6TTMxIDE1djVoLTJ2LTNoLTN2LTJoNXpNMzEgMjloLTV2LTJoM3YtM2gydjV6IiBpZD0iU2hhcGUiLz48L2c+PGcgZmlsbD0iI2ZmZiI+PHBhdGggZD0iTTYyIDI0djVoLTJ2LTNoLTN2LTJoNXpNNjIgMjBoLTV2LTJoM3YtM2gydjV6TTcwIDIwdi01aDJ2M2gzdjJoLTV6TTcwIDI0aDV2MmgtM3YzaC0ydi01eiIvPjwvZz48cGF0aCBkPSJNMjAuNTg2IDY2bC01LjY1Ni01LjY1NiAxLjQxNC0xLjQxNEwyMiA2NC41ODZsNS42NTYtNS42NTYgMS40MTQgMS40MTRMMjMuNDE0IDY2bDUuNjU2IDUuNjU2LTEuNDE0IDEuNDE0TDIyIDY3LjQxNGwtNS42NTYgNS42NTYtMS40MTQtMS40MTRMMjAuNTg2IDY2eiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0xMTEuNzg1IDY1LjAzTDExMCA2My41bDMtMy41aC0xMHYtMmgxMGwtMy0zLjUgMS43ODUtMS40NjhMMTE3IDU5bC01LjIxNSA2LjAzeiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0xNTIuMjE1IDY1LjAzTDE1NCA2My41bC0zLTMuNWgxMHYtMmgtMTBsMy0zLjUtMS43ODUtMS40NjhMMTQ3IDU5bDUuMjE1IDYuMDN6IiBmaWxsPSIjZmZmIi8+PGc+PHBhdGggaWQ9IlJlY3RhbmdsZS0xMSIgZmlsbD0iI2ZmZiIgZD0iTTE2MC45NTcgMjguNTQzbC0zLjI1LTMuMjUtMS40MTMgMS40MTQgMy4yNSAzLjI1eiIvPjxwYXRoIGQ9Ik0xNTIuNSAyN2MzLjAzOCAwIDUuNS0yLjQ2MiA1LjUtNS41cy0yLjQ2Mi01LjUtNS41LTUuNS01LjUgMi40NjItNS41IDUuNSAyLjQ2MiA1LjUgNS41IDUuNXoiIGlkPSJPdmFsLTEiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIxLjUiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTUwIDIxaDV2MWgtNXoiLz48L2c+PGc+PHBhdGggZD0iTTExNi45NTcgMjguNTQzbC0xLjQxNCAxLjQxNC0zLjI1LTMuMjUgMS40MTQtMS40MTQgMy4yNSAzLjI1eiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0xMDguNSAyN2MzLjAzOCAwIDUuNS0yLjQ2MiA1LjUtNS41cy0yLjQ2Mi01LjUtNS41LTUuNS01LjUgMi40NjItNS41IDUuNSAyLjQ2MiA1LjUgNS41IDUuNXoiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIxLjUiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTA2IDIxaDV2MWgtNXoiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTA5LjA0MyAxOS4wMDhsLS4wODUgNS0xLS4wMTcuMDg1LTV6Ii8+PC9nPjwvZz48L2c+PC9zdmc+);
+}
+
+.km-image-viewer .km-image-viewer-toolbar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+.km-image-viewer .km-image-viewer-close {
+  background-position: 0 -44px;
+}