add: scrollIntoView

zhangchen915 · Nov 9, 2019 · 085ee51 · 085ee51
1 parent 9151bc8
commit 085ee51
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 16 deletions.
diff --git a/src/components/PreviewCanvas.js b/src/components/PreviewCanvas.js
@@ -18,17 +18,23 @@ export class PreviewCanvas extends Component {
     componentDidUpdate() {
         let {font, path, fontSize, width, height} = this.props;
         this.ctx.clearRect(0, 0, width, height);
-        if(path) path.draw(this.ctx);
+        if (!path) return;
+        this.canvas.width = path.getBoundingBox().x2;
+        path.draw(this.ctx);
+        setTimeout(() => {
+            this.canvas.scrollIntoView({behavior: "smooth", block: "center", inline: "end"});
+        }, 0)
     }
 
     render() {
         let {width, height} = this.props;
         return (
-            <canvas
-                width={width * this.state.ratio}
-                height={height * this.state.ratio}
-                style={{width, height}}
-                ref={c => this.canvas = c} />
+            <div class="canvasWrap">
+                <canvas
+                    width={width * this.state.ratio}
+                    height={height * this.state.ratio}
+                    ref={c => this.canvas = c}/>
+            </div>
         );
     }
 }
diff --git a/src/components/style.scss b/src/components/style.scss
@@ -1,33 +1,69 @@
-.field{
+body {
+  width: 500px;
+}
+
+::-webkit-scrollbar {
+  width: 7px;
+  height: 7px;
+  padding: 1px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(#6200ee, .5);
+  border-radius: 20px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+  opacity: .3;
+  border-radius: 20px;
+}
+
+.field {
   width: 100%;
 }
 
-canvas{
+textarea {
+  resize: vertical;
+}
+
+.canvasWrap {
+  width: 100%;
+  overflow-x: auto;
+  margin: 20px 0;
+  box-sizing: border-box;
+}
+
+canvas {
   display: block;
-  margin: 20px auto;
+  margin: 0 auto;
 }
 
-.control{
+.control {
   display: flex;
   justify-content: space-between;
-  .fontSizeControl{
+
+  .fontSizeControl {
     flex: 1;
-    .slider{
+
+    .slider {
       width: 100%;
       margin-left: 20px;
       display: inline-block;
     }
   }
 }
 
-.footer{
+.footer {
   display: flex;
   justify-content: space-between;
-  .button{
-    &:first-child{
+
+  .button {
+    &:first-child {
       width: 62%;
     }
-    &:last-child{
+
+    &:last-child {
       width: 35%;
     }
   }