class ImposicionEsquemaDrawing { constructor(domItem) { this.item = domItem; this.params = { fitted: true } this.rectangleDimensions = { width: 50, height: 100, } this.rectangleCosidoDimensions = { width: 50 * 2, height: 100, } this.offsetX = this.rectangleDimensions.width + 20 this.offsetY = this.rectangleDimensions.height + 20 this.offsetCosidoX = this.rectangleCosidoDimensions.width + 20 this.offsetCosidoY = this.rectangleCosidoDimensions.height + 20 this.dw = null if (this.item.length > 0) { this.dw = new Two(this.params).appendTo(this.item[0]) } this.rows = 1 this.columns = 1 this.rotativa = false this.cosido = false this.drawingShapes = [] this.textShapes = [] this.vectorShapes = [] this.orientation = "H" this.drawSchema() } setMatrix(rows, columns) { this.rows = rows this.columns = columns } setOrientation(orientation) { this.orientation = orientation this.drawSchema() } setRotativa(rotativa) { this.rotativa = rotativa this.drawSchema() } setCosido(rotativa) { this.cosido = rotativa this.drawSchema() } setRows(rows) { this.rows = rows this.drawSchema() } setColumns(columns) { this.columns = columns this.drawSchema() } init() { } cutPaperForm() { this.textShapes.forEach((element, index) => { element.scale = new Two.Vector(1, -1) }) } mirror(element) { if (this.rotativa == false) { element.scale = new Two.Vector(1, -1) } } remove() { this.drawingShapes.forEach(element => { element.remove() }); this.textShapes.forEach(element => { element.remove() }); this.vectorShapes.forEach(element => { element.remove() }); } drawRows(y = 0) { for (let index = 0; index < this.columns; index++) { let rectangle = this.dw.makeRectangle(this.rectangleDimensions.width / 2 + this.offsetX * index, this.rectangleDimensions.height / 2 + y, this.rectangleDimensions.width, this.rectangleDimensions.height) let text = this.dw.makeText("A", this.rectangleDimensions.width / 2 + this.offsetX * index, this.rectangleDimensions.height / 2 + y) if ((index + 1) % 2) { this.mirror(text) } this.textShapes.push(text) this.drawingShapes.push(rectangle) } } drawRowsCosido(y = 0) { for (let index = 0; index < this.columns; index++) { let rectangle = this.dw.makeRectangle(this.rectangleCosidoDimensions.width / 2 + this.offsetCosidoX * index, this.rectangleCosidoDimensions.height / 2 + y, this.rectangleCosidoDimensions.width, this.rectangleCosidoDimensions.height) let textA = this.dw.makeText("N", this.rectangleCosidoDimensions.width / 4 + this.offsetCosidoX * index, this.rectangleCosidoDimensions.height / 2 + y) let textB = this.dw.makeText("1", this.rectangleCosidoDimensions.width * 3 / 4 + this.offsetCosidoX * index, this.rectangleCosidoDimensions.height / 2 + y) let line = this.dw.makeLine(rectangle.position.x, y, rectangle.position.x, this.rectangleCosidoDimensions.height + y) this.textShapes.push(textA) this.textShapes.push(textB) this.drawingShapes.push(rectangle) this.drawingShapes.push(line) } } drawOrientation() { let vector; if (this.orientation == "H") { vector = this.dw.makeArrow(0, (this.offsetY) * this.rows, (this.offsetX) * (this.columns), (this.offsetY) * this.rows) this.dw.renderer.setSize((this.offsetX) * this.columns, (this.offsetY) * this.rows) let width = (this.offsetX) * this.columns * 1.1 let height = (this.offsetY) * this.rows * 1.1 Two.SVGRenderer.Utils.setAttributes(this.dw.renderer.domElement, { viewBox: `0 0 ${width} ${height}` }) } else { vector = this.dw.makeArrow((this.offsetX) * this.columns, 0, (this.offsetX) * this.columns, (this.offsetY) * this.rows) this.dw.renderer.setSize((this.offsetX) * this.columns, (this.offsetY) * this.rows) let width = (this.offsetX) * this.columns * 1.1 let height = (this.offsetY) * this.rows * 1.1 Two.SVGRenderer.Utils.setAttributes(this.dw.renderer.domElement, { viewBox: `0 0 ${width} ${height}` }) } vector.linewidth = "3px" this.vectorShapes.push(vector) } drawOrientationCosido() { let vector; if (this.orientation == "H") { vector = this.dw.makeArrow(-this.rectangleDimensions.width / 2, (this.offsetCosidoY) * this.rows, (this.offsetCosidoX) * (this.columns), (this.offsetCosidoY) * this.rows) this.dw.renderer.setSize((this.offsetCosidoX) * this.columns, (this.offsetCosidoY) * this.rows) let width = (this.offsetCosidoX) * this.columns * 1.1 let height = (this.offsetCosidoY) * this.rows * 1.1 Two.SVGRenderer.Utils.setAttributes(this.dw.renderer.domElement, { viewBox: `0 0 ${width} ${height}` }) } else { vector = this.dw.makeArrow((this.offsetCosidoX) * this.columns, 0, (this.offsetCosidoX) * this.columns, (this.offsetCosidoY) * this.rows) this.dw.renderer.setSize((this.offsetCosidoX) * this.columns, (this.offsetCosidoY) * this.rows) let width = (this.offsetX) * this.columns * 1.1 let height = (this.offsetY) * this.rows * 1.1 Two.SVGRenderer.Utils.setAttributes(this.dw.renderer.domElement, { viewBox: `0 0 ${width} ${height}` }) } vector.linewidth = "3px" this.vectorShapes.push(vector) } drawSchema() { this.remove(); for (let index = 0; index < this.rows; index++) { if (this.cosido) { this.drawRowsCosido(this.offsetY * index) } else { this.drawRows(this.offsetY * index) } } if (this.cosido) { this.drawOrientationCosido() } else { this.drawOrientation() } this.dw.update() } getSVG() { if (this.dw) { return this.dw.renderer.domElement.outerHTML } else { return null } } } export default ImposicionEsquemaDrawing