JSFiddle - React, Tailwind, and code Playground

by Xiaoma_0411

HTML

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<div class="container">
  <div id="toolpanel" class="fixed">
    <input id="btnWall" type="button" value="Wall" />
    <input id="btnSelect" type="button" value="Select" />
    <input id="btnClearAll" type="button" value="Clear All" />
  </div>
  <canvas id="canvas" class="flex-item" width="500" height="500"></canvas>

</div>

CSS

#toolpanel {
  border: 1px solid blue;
}

#toolpanel input {
  width: 100%;
  height: 4em;
  margin: 0.5em 0;
}

canvas {
  border: 1px solid red;
}

.container {
  display: flex;
}

.fixed {
  width: 100px;
}

.flex-item {
  flex-grow: 1;
}

JavaScript

var canvas = new fabric.Canvas('canvas', {
  selection: false
});
//=====================================================
// BackgroudGrid.js - Start
//=====================================================
var drawGrid = function(gridSize) {
  var grid = gridSize ? gridSize : 50;

  // create grid
  for (var i = 0; i < (600 / grid); i++) {
    canvas.add(new fabric.Line([i * grid, 0, i * grid, 600], {
      stroke: '#ccc',
      selectable: false,
      fpmType: 'grid' //Custom attribute to identify gridlines
    }));
    canvas.add(new fabric.Line([0, i * grid, 600, i * grid], {
      stroke: '#ccc',
      selectable: false,
      fpmType: 'grid'
    }));
  }
};
drawGrid();

var clearCanvas = function() {
  canvas.clear();
  drawGrid();
};
// snap to grid
var fnSnapper = function(options) {
  options.target.set({
    left: Math.round(options.target.left / grid) * grid,
    top: Math.round(options.target.top / grid) * grid
  });
};

//canvas.on('object:moving', fnSnapper);
//=====================================================
//BackgroudGrid.js - End
//=====================================================

//=====================================================
//Wall.js - Start
//=====================================================
var thicknessFactor = 5;
fabric.Wall = fabric.util.createClass(fabric.Line , {
  allowedSlant: 100,
  type: 'wall',
  initialize: function(element, options) {
    options = options || {};
    options.lockScalingX = true;
    options.lockScalingY = true;
    options.lockRotation = true;
    options.hasBorders = false;
    options.hasControls = false;
    options.strokeWidth = 2 * thicknessFactor;
    options.stroke = 'blue';
    //options.originX = 'top';
    //options.originY = 'left';
    options.perPixelTargetFind = true;

    this.callSuper('initialize', element, options);
    //options && this.set('name', options.name);
  },
  snapToGrid: function(fabric) {

    console.group('.snapToGrid() invoked...');
   ...