feat: adjust display & compress roadmap.jpeg & fix tiny bug

10wen · Jul 13, 2020 · a1ca75e · a1ca75e
1 parent dab6e75
commit a1ca75e
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 65 deletions.
diff --git a/README.md b/README.md
@@ -1,8 +1,8 @@
-# Front-End-Roadmap 🧶🦌
+# Front End Roadmap 🧶🦌
 
 🚀[访问路线](https://objtube.github.io/front-end-roadmap/#/)
 
-📺[Up主视频讲解前端学习路线](https://www.bilibili.com/video/BV1ZZ4y1H7rU/)
+📺[Up 主视频讲解前端学习路线](https://www.bilibili.com/video/BV1ZZ4y1H7rU/)
 
 ![路线图](./roadmap.jpeg)
 
@@ -11,4 +11,4 @@
 1. 点击卡片可以进入到具体的页面，查看学习资料
 2. 提供路线图下载的功能
 3. 路线根据学习阶段进行了分级，可以查看每个阶段应该掌握的技术点
-4. 可以关闭标签的标注（标注来着个人的看法，如不喜欢可以关掉）
+4. 可以关闭标签的标注（标注来着个人的看法，如不喜欢可以关掉）
diff --git a/roadmap.jpeg b/roadmap.jpeg
diff --git a/src/components/header/index.js b/src/components/header/index.js
@@ -2,7 +2,7 @@ import React from "react";
 import LOGO from "../../assets/logo.jpeg";
 export default function Header() {
   return (
-    <div div className="header">
+    <div className="header">
       <div className="top">
         <img
           src={LOGO}
@@ -14,7 +14,7 @@ export default function Header() {
         <span className="github-button">
           <iframe
             src="https://ghbtns.com/github-btn.html?user=objtube&repo=front-end-roadmap&type=star&count=true&size=large"
-            frameborder="0"
+            frameBorder="0"
             scrolling="0"
             width="170"
             height="30"

diff --git a/src/page/index/drawRoadmap.js b/src/page/index/drawRoadmap.js
@@ -170,13 +170,21 @@ export function makeSubLine(c1, c2) {
   return line;
 }
 
+
+let canvas = null;
 export default function drawRoadmap(id, roadmap, isShowTag) {
-  const canvas = new fabric.Canvas(id, {
-    containerClass: "roadmap-canvas",
-    selection: false,
-    interactive: false,
-    hoverCursor: "pointer",
-  });
+
+  if(canvas){
+    canvas.clear();
+  }else{
+    canvas = new fabric.Canvas(id, {
+      containerClass: "roadmap-canvas",
+      selection: false,
+      interactive: false,
+      hoverCursor: "pointer",
+    });
+  }
+
   const arr = [];
   const lines = [];
   // 上一个绘制的主轴的卡片

diff --git a/src/page/index/index.js b/src/page/index/index.js
@@ -8,29 +8,40 @@ import drawRoadmap from "./drawRoadmap";
 import * as roadMap from "./roadmap";
 import "./style.css";
 
+const defaultHeight = 5000;
+
 const options = [
-  { value: "all", label: "完整路线" },
-  { value: "p1", label: "👶🏻 阶段1" },
-  { value: "p2", label: "👦🏻 阶段2" },
-  { value: "p3", label: "👨🏻 阶段3" },
+  { value: "all", label: "完整路线", canvasHeight: 5000 },
+  { value: "p1", label: "👶🏻 阶段1", canvasHeight: 2000 },
+  { value: "p2", label: "👦🏻 阶段2", canvasHeight: 3000 },
+  { value: "p3", label: "👨🏻 阶段3", canvasHeight: 2000 },
   //   { value: "p10000", label: "👴🏻 养生路线" },  // 这个也挺重要的，哈哈！(手动狗头
 ];
 
 function Index() {
+
   const history = useHistory();
+
   const [process, setProcess] = useState("all");
+  const [height, setHeight] = useState(defaultHeight);
   const [showTag, setShowTag] = useState(true);
+
   useEffect(() => {
-    const canvas = drawRoadmap(`roadmap-${process}`, roadMap[process], showTag);
+    const canvas = drawRoadmap(`roadmapCanvas`, roadMap[process], showTag);
     canvas.on("mouse:down", (options) => {
       if (options.target && options.target.link) {
         history.push(`/guide${options.target.link}`);
       }
     });
   }, [history, process, showTag]);
 
-  const onSelectProcess = useCallback(({ value }) => {
+  const onSelectProcess = useCallback(({ value, canvasHeight }) => {
     setProcess(value);
+    // setHeight(canvasHeight); // TODO: canvas x,y 固定的，看怎么动态？
+  }, []);
+
+  const onShowTag = useCallback((value) => {
+    setShowTag(value);
   }, []);
 
   const onDownloadImg = useCallback(() => {
@@ -43,9 +54,6 @@ function Index() {
     });
   }, []);
 
-  const onShowTag = useCallback((value) => {
-    setShowTag(value);
-  }, []);
   return (
     <div className="roadmap-container">
       <div className="process-select-container">
@@ -86,44 +94,9 @@ function Index() {
             </div>
           </div>
         )}
-        {process === "all" && showTag && (
-          <div>
-            <canvas id="roadmap-all" height="5000px" width="1000px"></canvas>
-          </div>
-        )}
-        {process === "all" && !showTag && (
-          <div>
-            <canvas id="roadmap-all" height="5000px" width="1000px"></canvas>
-          </div>
-        )}
-        {process === "p1" && showTag && (
-          <div>
-            <canvas id="roadmap-p1" height="5000px" width="1000px"></canvas>
-          </div>
-        )}
-        {process === "p1" && !showTag && (
-          <div>
-            <canvas id="roadmap-p1" height="5000px" width="1000px"></canvas>
-          </div>
-        )}
-        {process === "p2" && !showTag && (
-          <div>
-            <canvas id="roadmap-p2" height="5000px" width="1000px"></canvas>
-          </div>
-        )}
-        {process === "p2" && showTag && (
-          <div>
-            <canvas id="roadmap-p2" height="5000px" width="1000px"></canvas>
-          </div>
-        )}
-        {process === "p3" && !showTag && (
-          <div>
-            <canvas id="roadmap-p3" height="5000px" width="1000px"></canvas>
-          </div>
-        )}
-        {process === "p3" && showTag && (
+        {(
           <div>
-            <canvas id="roadmap-p3" height="5000px" width="1000px"></canvas>
+            <canvas id={`roadmapCanvas`} height={`${height}px`} width="1000px"></canvas>
           </div>
         )}
       </div>

diff --git a/src/page/index/roadmap.js b/src/page/index/roadmap.js
@@ -32,11 +32,11 @@ export const all = [
       [
         c("浏览器如何运行？", 160, 160),
         c("浏览器差异/兼容性", 160, 160, {}, [
-          c("Chrome", 0, 100),
-          c("Safari", 0, 100),
-          c("Firefox", 0, 100),
+          c("Chrome", 0, 120),
+          c("Safari", 0, 120),
+          c("Firefox", 0, 120),
           c("Android Browser", 0, 120),
-          c("iOS Safari", 0, 100),
+          c("iOS Safari", 0, 120),
         ]),
       ],
       [
@@ -367,10 +367,10 @@ export const all = [
         ]),
       ],
       [
-        c("跨端解决方案", 700, 100, {}, [
-          c("Taro", 890, 100, { tag: TAG.recommand }),
-          c("uni-app", 890, 100, { tag: TAG.recommand }),
-          c("Chameleon", 890, 100, { tag: TAG.optional }),
+        c("跨端解决方案", 660, 100, {}, [
+          c("Taro", 850, 100, { tag: TAG.recommand }),
+          c("uni-app", 850, 100, { tag: TAG.recommand }),
+          c("Chameleon", 850, 100, { tag: TAG.optional }),
         ]),
       ],
     ],