响应式布局，

example/src/App.js

@@ -80,6 +80,11 @@ export default () => {
   const heatmapRef = React.useRef(null);
   const [windowDim, setWindowDim] = React.useState([0, 0]);
 
+  const [autoScroll, setAutoScroll] = React.useState(true);
+  const toggleAutoScroll = (value) => {
+    setAutoScroll(value);
+  };
+
   // ------------ Load data -------------
   React.useEffect(() => {
     const ws = new WebSocket('ws://localhost:6789');
@@ -126,7 +131,7 @@ export default () => {
       {/*     <div ref={progressRef}> Downloading 0% ...</div> */}
       {/*   </div>} */}
 
-      <StockHeatmap ref={heatmapRef} width={windowDim[0]} height={windowDim[1]} />
+      <StockHeatmap ref={heatmapRef} width={windowDim[0]} height={windowDim[1]} autoScroll={autoScroll} toggleAutoScroll={toggleAutoScroll} />
 
       <div className="btnContainer">
         <button onClick={() => {
@@ -153,10 +158,12 @@ export default () => {
           if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60 * 60)
         }}>zoom 60 minutes
         </button>
-        <button onClick={() => {
-          if (heatmapRef.current !== null) heatmapRef.current.autoScroll = true
-        }}> play
-        </button>
+        {!autoScroll &&
+          <div className="playBtn" onClick={() => {
+            setAutoScroll(true)
+          }}> Play
+          </div>
+        }
         {/* <button onClick={() => { */}
         {/*   const HHmmss = window.prompt('Enter HH:mm:ss', '00:00:00'); */}
         {/*   let split = HHmmss.split(':'); */}

example/src/index.css

@@ -109,4 +109,20 @@ code {
 
 .btnContainer button {
   margin: 5px;
-}
+}
+.playBtn{
+  position: fixed;
+  right: 220px;
+  top: 50%;
+  transform: translateY(-50%);
+  border-radius: 50%;
+  width: 60px;
+  line-height: 55px;
+  height: 60px;
+  border: 1px solid black;
+  background: rgba(255, 255, 255, 0.8);
+}
+.playBtn:hover{
+  background: rgba(12, 116, 165, 0.8);
+
+}

src/index.js

@@ -34,7 +34,6 @@ export default class StockHeatmap extends React.Component {
   windowedData = [];
   windowLength = 40;
   windowPosition = 0;
-  autoScroll = true;
 
   mouse = {
     x: 0,
@@ -162,7 +161,7 @@ export default class StockHeatmap extends React.Component {
       this.moveDataWindow(this.windowPosition + moveDataPointsCount * (dragLength >= 0 ? -1 : 1));
 
       if (dragLength > 60) {
-        this.autoScroll = false
+        this.props.toggleAutoScroll(false)
       }
     } else {
       if (e.clientX < this.defaults.hmWidth() && e.clientY < this.defaults.hmHeight()) {
@@ -450,8 +449,8 @@ export default class StockHeatmap extends React.Component {
     if (this.windowedData.length > 0) {
       this.drawingContext.fillStyle = this.defaults.textOnBackground;
       this.drawingContext.fillText(`LTP:  ${this.windowedData[this.windowedData.length - 1].marketDepth.lastTradedPrice
-        }     LTQ:  ${this.windowedData[this.windowedData.length - 1].marketDepth.lastTradedQty
-        }`, 20 + w + 40, this.defaults.axisTickSize + this.defaults.xAxisTextPadding + 20);
+      }     LTQ:  ${this.windowedData[this.windowedData.length - 1].marketDepth.lastTradedQty
+      }`, 20 + w + 40, this.defaults.axisTickSize + this.defaults.xAxisTextPadding + 20);
     }
     this.drawingContext.fillStyle = this.defaults.textOnBackground;
     this.drawingContext.lineWidth = 1.2;
@@ -738,7 +737,7 @@ export default class StockHeatmap extends React.Component {
    */
   updateWindowedData = () => {
     // console.log('window data updated');
-    if (this.autoScroll) {
+    if (this.props.autoScroll) {
       this.moveDataWindow(this.data.length - this.windowLength - 1);
     }
   }
@@ -761,7 +760,7 @@ export default class StockHeatmap extends React.Component {
       this.windowPosition = position;
       if (this.windowPosition === this.data.length - this.windowLength - 1) {
         // enable auto scroll
-        this.autoScroll = true;
+        this.props.toggleAutoScroll(true);
       }
       // console.log('moveDataWindow = ', position, this.windowPosition, this.windowLength, this.data.length, this.autoScroll, this.windowedData);
       // update the map
@@ -788,14 +787,14 @@ export default class StockHeatmap extends React.Component {
     // console.log('heatmap rendered', width, height, this.data);
     return (
       <canvas ref={this.canvasRef} width={width || 300} height={height || 150} tabIndex={1}
-        style={{
-          display: 'block',
-          width: '100%',
-          height: '100%',
-          cursor: 'crosshair',
-          paddingRight: '3%',
-          boxSizing: "border-box"
-        }}></canvas>
+              style={{
+                display: 'block',
+                width: '100%',
+                height: '100%',
+                cursor: 'crosshair',
+                paddingRight: '3%',
+                boxSizing: "border-box"
+              }}></canvas>
     );
   }
 }