JSFiddle - React, Tailwind, and code Playground

by kassiomaia

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.7.1/svg.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/svg-pan-zoom.min.js"></script>
<div id="board">
</div>

CSS

body {
  background-color: black;
}

svg {
  background-color: white;
}

JavaScript

function ViewPort(w, h) {
	this.weight = w;
	this.height = h;
	return this;
}

function Grid(viewPort, daysShouldShow, starDate, endDate) {
	this.viewPort = viewPort;
	this.days = days;
	this.startDate = startDate;
	this.endDate = endDate;	
	this.columnSize = viewPort.weight / daysShouldShow;
	
	this.getColumnByDate = function(date) {
		
	};
}

function SVGBoard(w, h, cls) {
	var element_class_id = 'svg-pan-zoom_viewport'; 
  this.canvas = SVG('board').size(w, h);
  this.svg = this.canvas.node;
	this.body = this.canvas
		.group()
		.translate(0, 35);
  this.elements = this.body
		.group()
		.attr('class', element_class_id);
	
	svgPanZoom(this.svg, {
		viewportSelector: '.' + element_class_id,
		mouseWheelZoomEnabled: true,
		preventMouseEventsDefault: true,
		zoomScaleSensitivity: 0.4,
		minZoom: 0.3,
		maxZoom: 2,
		fit: false,
		center: false,
	});
	
	this.header = this.canvas.group();

	cls.render.bind(this)();
  return this;
}

var svgBoard = new SVGBoard(1500, 750, {
	render: function() {
		this.header
			.rect(1500, 35)
			.fill('white');
		
		var columnSize = 1500 / 30;
	
		for(var i=0;i<columnSize;i++) {
			var initialPosition = columnSize * i;
			var col = this.header.group().translate(initialPosition + 2, 0);
			col
				.rect(columnSize - 4, 35)
				.fill('white');
			col.text((i + 1).toString()).move(0, 35 / 4);
		}

		this.elements
			.rect(100, 100)
			.move(170, 170)
			.fill('#f03');

		this.elements
			.rect(50, 50)
			.move(70, 70)
			.fill('#a09');

		this.elements.circle(5).fill('#00');
	}
});