JSFiddle - React, Tailwind, and code Playground
by alexflav23
JavaScript
var baseurl = '/Cad/shapes/';
var js_c_drawing, activeObject = null;
$(document).ready(function () {
setDrawingCanvasCoords();
js_c_drawing = new fabric.Canvas('c_drawing');
js_c_drawing.calcOffset();
fabric.instances.push(js_c_drawing);
});
function setDrawingCanvasCoords() {
var wHeight = $(window).height() - 100;
var wWidth = $(window).width() - 164;
var drawingStyle = 'border:4px solid gray;top:20px;position:relative;background-color:black;' + 'width:' + wWidth + 'px; height:' + wHeight + 'px';
$("#divDrawing").attr('style', drawingStyle);
}
function showToolMenu(shapeMenu) {
var divShapesId = 'divShapes';
var divElement = $('#' + divShapesId);
var ele = document.getElementById('a' + shapeMenu);
elePosition = findPos(ele);
document.getElementById(divShapesId).style.left = elePosition[0] + 'px';
document.getElementById(divShapesId).style.top = elePosition[1] + (ele.offsetHeight) + 'px';
document.getElementById(divShapesId).style.zIndex = 100;
divElement.show();
var url = baseurl + shapeMenu;
$(divElement).load(url);
}
function hideToolMenu() {
var divShapesId = 'divShapes';
var divElement = $('#' + divShapesId);
document.getElementById(divShapesId).style.zIndex = 0;
divElement.hide(2000);
}
function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
curleft = obj.offsetLeft
curtop = obj.offsetTop
while (obj = obj.offsetParent) {
curleft += obj.offsetLeft
curtop += obj.offsetTop
}
}
return [curleft, curtop];
}
function...