diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 0000000..8c9cc19 --- /dev/null +++ b/.gitmodules @@ -0,0 +1,3 @@ +[submodule "external/minecraft-data"] + path = external/minecraft-data + url = https://github.com/PrismarineJS/minecraft-data.git diff --git a/README.md b/README.md index b8326c9..32a8a94 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ # minecraft-artifier-js JavaScript/Node.js Web Converter from image to Minecraft blocks.
-Can open and save 1.12 and lower .schematics of Minecraft. +Can open and save 1.20 and lower .schematics of Minecraft. Public part of minecraftart.netlify.com diff --git a/app/index.html b/app/index.html index 094564c..3ede317 100644 --- a/app/index.html +++ b/app/index.html @@ -1,399 +1,534 @@ - - Minecraft Art To Block - - - - + + Minecraft Art To Block + + + + + <%=require('./modal.html')%> - <%=require('./modal.html')%> +
+
+
+
Loading...
+
+
-
-
-
-
- Loading... -
-
+
+
+
Drag and drop your image/.schematic file here
+
+ or + +
+
+
+ +
+
+
+
-
-
-
Drag and drop your image/.schematic file here
-
- or - -
-
-
-
-
+ - - - -
+
+
+
+
All
+
All blocks
+
-
-
Open - -
-
Save - -
-
Replace - -
-
Settings - +
+
-
- - -
Convert to commands..
-
Help -
-
- FAQ -
-
- Keyboard/mouse controls -
-
-
+ + +
+ +
+
+ +
+
+
+ History: +
+
+ Open +
+
+
+
+ +
+
...
+
+
+ - + + diff --git a/app/index.js b/app/index.js index ed95128..f624bcb 100644 --- a/app/index.js +++ b/app/index.js @@ -1,273 +1,314 @@ -'use strict' +"use strict"; -import './style.css' -import 'bulma/css/bulma.css' +import "./style.css"; +import "bulma/css/bulma.css"; -import ConvertWorker from 'worker-loader!./models/convert.js' -import MineartCanvas from './models/canvas.js' +import ConvertWorker from "worker-loader!./models/convert.js"; +import MineartCanvas from "./models/canvas.js"; -const blocks = require('../static/baked_blocks.json') +const blocks = require("../static/baked_blocks.json"); blocks.forEach((item) => { - item.src = require('../static/textures/' + item.texture_image) - delete item.texture_image -}) + item.src = require("../static/textures/" + item.texture_image); + delete item.texture_image; +}); const store = { - blocksDefault: blocks, - convertWorker: new ConvertWorker(), - mineartCanvas: new MineartCanvas(), - canvasTemp: document.createElement('canvas'), - localStorage: window.localStorage, - uploadedType: null, - uploadedImage: new Image(), - uploadedImageName: null, - minecraftVersion: 12, - waitForLoaded: { - arr: null, - width: null, - height: null - }, - isSaved: true, - leftClick: false, - findBlockById(id) { - return this.blocksDefault.find((item) => { - if (item.id === id) { - return true - } - }) + blocksDefault: blocks, + convertWorker: new ConvertWorker(), + mineartCanvas: new MineartCanvas(), + canvasTemp: document.createElement("canvas"), + localStorage: window.localStorage, + uploadedType: null, + uploadedImage: new Image(), + uploadedImageName: null, + minecraftVersion: 20, + waitForLoaded: { + arr: null, + width: null, + height: null, + }, + isSaved: true, + leftClick: false, + findBlockById(id) { + return this.blocksDefault.find((item) => { + if (item.id === id) { + return true; + } + }); + }, + findBlockByGameId(blockId, dataId) { + const dataIrrelevant = [ + 18, 99, 100, 202, 216, 235, 236, 237, 238, 239, 240, 241, 242, 243, 244, + 245, 246, 247, 248, 249, 250, + ]; + const dataAxis = [17, 162]; + return this.blocksDefault.find((item) => { + if (dataAxis.indexOf(blockId) >= 0 && dataId >= 4) { + let tempDataId = dataId % 4; + if ( + item.block_id === blockId && + item.data_id === tempDataId && + item.axis + ) { + return true; + } + } else if (dataIrrelevant.indexOf(blockId) >= 0) { + if (item.block_id === blockId) { + return true; + } + } else if ( + item.block_id === blockId && + item.data_id === dataId && + !item.axis + ) { + return true; + } + }); + }, + showLoading() { + document.querySelector(".loading-overlay").classList.add("is-active"); + }, + hideLoading() { + document.querySelector(".loading-overlay").classList.remove("is-active"); + }, + startScreen: require("./screens/start.js").output, + settingsScreen: require("./screens/settings.js").output, + editorScreen: require("./screens/editor.js").output, + convertScreen: require("./screens/convert.js").output, + modals: { + items: {}, + $root: document.querySelector(".modal"), + $closeBtn: document.querySelector(".modal-close"), + init() { + const modalList = document.querySelectorAll('div[id^="modal-"]'); + modalList.forEach((item) => { + const id = item.id.match(/(modal\-)(.*)/)[2]; + this.items[id] = item; + }); }, - findBlockByGameId(blockId, dataId) { - const dataIrrelevant = [18, 99, 100, 202, 216, 235, 236, 237, 238, 239, 240, 241, 242, 243, 244, 245, 246, 247, 248, 249, 250] - const dataAxis = [17, 162] - return this.blocksDefault.find((item) => { - if (dataAxis.indexOf(blockId) >= 0 && dataId >= 4) { - let tempDataId = dataId % 4 - if (item.block_id === blockId && item.data_id === tempDataId && item.axis) { - return true - } - } else if (dataIrrelevant.indexOf(blockId) >= 0) { - if (item.block_id === blockId) { - return true - } - } else if (item.block_id === blockId && item.data_id === dataId && !item.axis) { - return true - } - }) + openModal(name) { + this.$root.classList.add("is-active"); + for (let key in this.items) { + this.items[key].classList.add("hidden"); + } + this.items[name].classList.remove("hidden"); + store.editorScreen.closeTopbarMenus(); }, - showLoading() { - document.querySelector('.loading-overlay').classList.add('is-active') + closeModal() { + this.$root.classList.remove("is-active"); + for (let key in this.items) { + const video = this.items[key].querySelector("iframe"); + if (video) { + video.src = video.src; + } + this.items[key].classList.add("hidden"); + } }, - hideLoading() { - document.querySelector('.loading-overlay').classList.remove('is-active') + }, + errors: { + items: {}, + init() { + const errorList = document.querySelectorAll('div[id^="error-"]'); + errorList.forEach((item) => { + const id = item.id.match(/(error\-)(.*)/)[2]; + this.items[id] = item; + item.classList.add("hidden"); + }); }, - startScreen: require('./screens/start.js').output, - settingsScreen: require('./screens/settings.js').output, - editorScreen: require('./screens/editor.js').output, - convertScreen: require('./screens/convert.js').output, - modals: { - items: {}, - $root: document.querySelector('.modal'), - $closeBtn: document.querySelector('.modal-close'), - init() { - const modalList = document.querySelectorAll('div[id^="modal-"]') - modalList.forEach((item) => { - const id = item.id.match(/(modal\-)(.*)/)[2] - this.items[id] = item - }) - }, - openModal(name) { - this.$root.classList.add('is-active') - for (let key in this.items) { - this.items[key].classList.add('hidden') - } - this.items[name].classList.remove('hidden') - store.editorScreen.closeTopbarMenus() - }, - closeModal() { - this.$root.classList.remove('is-active') - for (let key in this.items) { - const video = this.items[key].querySelector('iframe') - if (video) { - video.src = video.src - } - this.items[key].classList.add('hidden') - } + triggerError(id, text, timeout) { + if (this.items[id]) { + if (!this.items[id].classList.contains("hidden")) { + clearTimeout(this.items[id].timeout); + this.items[id].timeout = null; } + this.items[id].querySelector(".warning-body").innerHTML = text; + this.items[id].classList.remove("hidden"); + this.items[id].timeout = setTimeout(() => { + this.items[id].classList.add("hidden"); + this.items[id].timeout = null; + }, timeout); + } else { + console.error("No error id!"); + } }, - errors: { - items: {}, - init() { - const errorList = document.querySelectorAll('div[id^="error-"]') - errorList.forEach((item) => { - const id = item.id.match(/(error\-)(.*)/)[2] - this.items[id] = item - item.classList.add('hidden') - }) - }, - triggerError(id, text, timeout) { - if (this.items[id]) { - if (!this.items[id].classList.contains('hidden')) { - clearTimeout(this.items[id].timeout) - this.items[id].timeout = null - } - this.items[id].querySelector('.warning-body').innerHTML = text - this.items[id].classList.remove('hidden') - this.items[id].timeout = setTimeout(() => { - this.items[id].classList.add('hidden') - this.items[id].timeout = null - }, timeout) - } else { - console.error('No error id!') - } - }, - closeError(id) { - if (this.items[id]) { - if (this.items[id].classList.contains('hidden')) { return } - this.items[id].classList.add('hidden') - if (this.items[id].timeout) { - clearTimeout(this.items[id].timeout) - this.items[id].timeout = null - } - } else { - console.error('No error id!') - } + closeError(id) { + if (this.items[id]) { + if (this.items[id].classList.contains("hidden")) { + return; } - }, - setEventListeners() { - this.convertWorker.onmessage = (e) => { - if (document.readyState !== 'complete') { - store.waitForLoaded.arr = e.data - store.waitForLoaded.width = store.canvasTemp.width - store.waitForLoaded.height = store.canvasTemp.height - return - } - store.hideLoading() - this.settingsScreen.changeToEditorScreen() - this.mineartCanvas.init(store.editorScreen.$canvas) - this.mineartCanvas.setImageSizes(store.canvasTemp.width, store.canvasTemp.height) - this.mineartCanvas.open(e.data) - store.editorScreen.setEyedrop(1) - store.editorScreen.setBrushSize(3) - store.editorScreen.resetScreen() + this.items[id].classList.add("hidden"); + if (this.items[id].timeout) { + clearTimeout(this.items[id].timeout); + this.items[id].timeout = null; } + } else { + console.error("No error id!"); + } + }, + }, + setEventListeners() { + this.convertWorker.onmessage = (e) => { + if (document.readyState !== "complete") { + store.waitForLoaded.arr = e.data; + store.waitForLoaded.width = store.canvasTemp.width; + store.waitForLoaded.height = store.canvasTemp.height; + return; + } + store.hideLoading(); + this.settingsScreen.changeToEditorScreen(); + this.mineartCanvas.init(store.editorScreen.$canvas); + this.mineartCanvas.setImageSizes( + store.canvasTemp.width, + store.canvasTemp.height + ); + this.mineartCanvas.open(e.data); + store.editorScreen.setEyedrop(1); + store.editorScreen.setBrushSize(3); + store.editorScreen.resetScreen(); + }; - this.modals.$closeBtn.onclick = () => { - this.modals.closeModal() - } + this.modals.$closeBtn.onclick = () => { + this.modals.closeModal(); + }; - window.addEventListener("load", function(event) { - if (store.waitForLoaded.arr !== null) { - store.settingsScreen.changeToEditorScreen() - store.mineartCanvas.init(store.editorScreen.$canvas) - store.mineartCanvas.setImageSizes(store.waitForLoaded.width, store.waitForLoaded.height) - store.mineartCanvas.open(store.waitForLoaded.arr) - store.waitForLoaded = null - store.hideLoading() - } - }); + window.addEventListener("load", function (event) { + if (store.waitForLoaded.arr !== null) { + store.settingsScreen.changeToEditorScreen(); + store.mineartCanvas.init(store.editorScreen.$canvas); + store.mineartCanvas.setImageSizes( + store.waitForLoaded.width, + store.waitForLoaded.height + ); + store.mineartCanvas.open(store.waitForLoaded.arr); + store.waitForLoaded = null; + store.hideLoading(); + } + }); - document.addEventListener("DOMContentLoaded", function(event) { - document.body.style.display = 'block' - }); + document.addEventListener("DOMContentLoaded", function (event) { + document.body.style.display = "block"; + }); - document.addEventListener('keydown', (e) => { - if (document.activeElement.tagName === 'INPUT' || document.querySelector('section.editor-screen').classList.contains('hidden')) { - return - } - if (store.leftClick) { return } - store.editorScreen.closeTopbarMenus() - switch (e.which) { - case 17: - store.mineartCanvas.setTool('clicker') - store.mineartCanvas.render() - break - case 80: - document.querySelector('.editor-tools input[value="pencil"]').click() - break - case 66: - document.querySelector('.editor-tools input[value="brush"]').click() - break - case 85: - document.querySelector('.editor-tools input[value="bucket"]').click() - break - case 69: - document.querySelector('.editor-tools input[value="eyedropper"]').click() - break - case 90: - if (e.ctrlKey) { - store.editorScreen.undoOnce() - } else { - document.querySelector('.editor-tools input[value="zoom"]').click() - } - break - case 89: - if (e.ctrlKey) { - store.editorScreen.redoOnce() - } - break - case 71: - document.querySelector('.editor-tools input[value="grab"]').click() - break - case 79: - store.editorScreen.$settingsOriginal.click() - break - case 37: - store.mineartCanvas.moveOffset(1, 0) - break - case 38: - store.mineartCanvas.moveOffset(0, 1) - break - case 39: - store.mineartCanvas.moveOffset(-1, 0) - break - case 40: - store.mineartCanvas.moveOffset(0, -1) - break - case 219: - if (store.editorScreen.currentTool === 'pencil' || store.editorScreen.currentTool === 'brush') { - store.editorScreen.$brushMinus.click() - } - break - case 221: - if (store.editorScreen.currentTool === 'pencil' || store.editorScreen.currentTool === 'brush') { - store.editorScreen.$brushPlus.click() - } - break - } - }) + document.addEventListener("keydown", (e) => { + if ( + document.activeElement.tagName === "INPUT" || + document + .querySelector("section.editor-screen") + .classList.contains("hidden") + ) { + return; + } + if (store.leftClick) { + return; + } + store.editorScreen.closeTopbarMenus(); + switch (e.which) { + case 17: + store.mineartCanvas.setTool("clicker"); + store.mineartCanvas.render(); + break; + case 80: + document.querySelector('.editor-tools input[value="pencil"]').click(); + break; + case 66: + document.querySelector('.editor-tools input[value="brush"]').click(); + break; + case 85: + document.querySelector('.editor-tools input[value="bucket"]').click(); + break; + case 69: + document + .querySelector('.editor-tools input[value="eyedropper"]') + .click(); + break; + case 90: + if (e.ctrlKey) { + store.editorScreen.undoOnce(); + } else { + document.querySelector('.editor-tools input[value="zoom"]').click(); + } + break; + case 89: + if (e.ctrlKey) { + store.editorScreen.redoOnce(); + } + break; + case 71: + document.querySelector('.editor-tools input[value="grab"]').click(); + break; + case 79: + store.editorScreen.$settingsOriginal.click(); + break; + case 37: + store.mineartCanvas.moveOffset(1, 0); + break; + case 38: + store.mineartCanvas.moveOffset(0, 1); + break; + case 39: + store.mineartCanvas.moveOffset(-1, 0); + break; + case 40: + store.mineartCanvas.moveOffset(0, -1); + break; + case 219: + if ( + store.editorScreen.currentTool === "pencil" || + store.editorScreen.currentTool === "brush" + ) { + store.editorScreen.$brushMinus.click(); + } + break; + case 221: + if ( + store.editorScreen.currentTool === "pencil" || + store.editorScreen.currentTool === "brush" + ) { + store.editorScreen.$brushPlus.click(); + } + break; + } + }); - document.addEventListener('keyup', (e) => { - if (document.activeElement.tagName === 'INPUT' || document.querySelector('section.editor-screen').classList.contains('hidden')) { - return - } - if (store.leftClick) { return } - switch (e.which) { - case 17: - store.mineartCanvas.setTool(store.editorScreen.currentTool) - break - } - }) + document.addEventListener("keyup", (e) => { + if ( + document.activeElement.tagName === "INPUT" || + document + .querySelector("section.editor-screen") + .classList.contains("hidden") + ) { + return; + } + if (store.leftClick) { + return; + } + switch (e.which) { + case 17: + store.mineartCanvas.setTool(store.editorScreen.currentTool); + break; + } + }); - document.addEventListener('mousedown', (e) => { - store.leftClick = true - }) + document.addEventListener("mousedown", (e) => { + store.leftClick = true; + }); - document.addEventListener('mouseup', (e) => { - store.leftClick = false - }) - } -} + document.addEventListener("mouseup", (e) => { + store.leftClick = false; + }); + }, +}; -store.mineartCanvas.setBlocks(blocks) +store.mineartCanvas.setBlocks(blocks); blocks.sort((a, b) => { - return a.h - b.h + a.s - b.s + b.l - a.l; -}) + return a.h - b.h + a.s - b.s + b.l - a.l; +}); -store.startScreen.init(store) -store.settingsScreen.init(store) -store.editorScreen.init(store) -store.convertScreen.init(store) -store.errors.init() -store.modals.init() -store.setEventListeners() -store.editorScreen.fillBlockList() +store.startScreen.init(store); +store.settingsScreen.init(store); +store.editorScreen.init(store); +store.convertScreen.init(store); +store.errors.init(); +store.modals.init(); +store.setEventListeners(); +store.editorScreen.fillBlockList(); diff --git a/app/modal.html b/app/modal.html index c71c19f..a98a18b 100644 --- a/app/modal.html +++ b/app/modal.html @@ -1,50 +1,62 @@
-
-
- - - diff --git a/app/models/canvas.js b/app/models/canvas.js index 6277a0c..8fc44ae 100644 --- a/app/models/canvas.js +++ b/app/models/canvas.js @@ -1,1730 +1,2159 @@ -import SchematicsHelper from './schematics.js' +import SchematicsHelper from "./schematics.js"; function MineartCanvas() { - var $root - - const canvasMain = document.createElement('canvas') - const ctxMain = canvasMain.getContext('2d') - - const canvasOverlay = document.createElement('canvas') - const ctxOverlay = canvasOverlay.getContext('2d') - - const canvasTemp = document.createElement('canvas') - const ctxTemp = canvasTemp.getContext('2d') - - const canvasInit = document.createElement('canvas') - const ctxInit = canvasInit.getContext('2d') - - const _URL = window.URL || window.webkitURL - - const thisRoot = this - - const store = { - blocksDb: [], - getBlockById(id) { - if (id == 0) { - return null - } - return this.blocksDb[id - 1] - }, - initFlag: false, - imageConvertedHex: null, - imageConvertedHexBackup: null, - imageWidth: null, - imageHeight: null, - canvasWidth: null, - canvasHeight: null, - baseCellSize: 16, - boundingRect: null, - originalImage: { - img: new Image(), - x: null, - y: null, - width: null, - height: null - }, - groups: null, - offset: { - bounds: { - x: null, - y: null - }, - x: 0, - y: 0, - translate(x, y) { - let imageSizeX = store.imageWidth * store.baseCellSize * store.scale.current - let imageSizeY = store.imageHeight * store.baseCellSize * store.scale.current - if (x > this.bounds.x) { x = this.bounds.x } - if (y > this.bounds.y) { y = this.bounds.y } - if (x + imageSizeX - store.canvasWidth < -this.bounds.x) { - x = -imageSizeX + store.canvasWidth - this.bounds.x - } - if (y + imageSizeY - store.canvasHeight < -this.bounds.y) { - y = -imageSizeY + store.canvasHeight - this.bounds.y - } - this.x = Math.round(x) - this.y = Math.round(y) - } - }, - scale: { - current: 0.0625, - options: [0.0625, 0.125, 0.25, 0.5, 1, 2, 4], - cacheFrom: 1, - scaleUp() { - let indexOfCurrent = this.options.indexOf(this.current) - if ( indexOfCurrent < this.options.length - 1 ) { - this.current = this.options[indexOfCurrent + 1] - return true - } - return false - }, - scaleDown() { - let indexOfCurrent = this.options.indexOf(this.current) - if ( indexOfCurrent > 0 ) { - this.current = this.options[indexOfCurrent - 1] - return true - } - return false - } - }, - history: { - log: [], - currentPos: -1, - lastMaxPos: -1, - maxStates: 100, - offset: 0 - }, - interface: { - eyedropCurrent: 1, - toolCurrent: 'pencil', - brushSize: 9, - selection: { - start: null, - end: null - }, - rulerSize: 25, - cursor: '' - }, - events: { - cached: new CustomEvent('cached'), - history: new CustomEvent('history') - }, - controls: { - mouse: { - localX: null, - localY: null, - grabbed: false, - leftClick: false, - startX: 0, - startY: 0, - oldOffsetX: null, - oldOffsetY: null, - lastMouseX: null, - lastMouseY: null - } - }, - settings: { - maxBrushSize: 25, - showGrid: false, - showRulers: true, - showOriginal: false, - showDebugDrawGroups: false, - minecraftVersion: 12, - drawGroupsCurrent: 0, - gridColor: '#ff4778' - }, - debug: { //delete in prod!!! - showTempCanvas: false, - renderAllPainted: false, - renderTime: { - '0.0625': 0, - '0.125': 0, - '0.25': 0, - '0.5': 0, - '1': 0, - '2': 0, - '4': 0 - }, - savedStartHistory: null, - drawGroups: [] - } + var $root; + + const canvasMain = document.createElement("canvas"); + const ctxMain = canvasMain.getContext("2d"); + + const canvasOverlay = document.createElement("canvas"); + const ctxOverlay = canvasOverlay.getContext("2d"); + + const canvasTemp = document.createElement("canvas"); + const ctxTemp = canvasTemp.getContext("2d"); + + const canvasInit = document.createElement("canvas"); + const ctxInit = canvasInit.getContext("2d"); + + const _URL = window.URL || window.webkitURL; + + const thisRoot = this; + + const store = { + blocksDb: [], + getBlockById(id) { + if (id == 0) { + return null; + } + return this.blocksDb[id - 1]; + }, + initFlag: false, + imageConvertedHex: null, + imageConvertedHexBackup: null, + imageWidth: null, + imageHeight: null, + canvasWidth: null, + canvasHeight: null, + baseCellSize: 16, + boundingRect: null, + originalImage: { + img: new Image(), + x: null, + y: null, + width: null, + height: null, + }, + groups: null, + offset: { + bounds: { + x: null, + y: null, + }, + x: 0, + y: 0, + translate(x, y) { + let imageSizeX = + store.imageWidth * store.baseCellSize * store.scale.current; + let imageSizeY = + store.imageHeight * store.baseCellSize * store.scale.current; + if (x > this.bounds.x) { + x = this.bounds.x; + } + if (y > this.bounds.y) { + y = this.bounds.y; + } + if (x + imageSizeX - store.canvasWidth < -this.bounds.x) { + x = -imageSizeX + store.canvasWidth - this.bounds.x; + } + if (y + imageSizeY - store.canvasHeight < -this.bounds.y) { + y = -imageSizeY + store.canvasHeight - this.bounds.y; + } + this.x = Math.round(x); + this.y = Math.round(y); + }, + }, + scale: { + current: 0.0625, + options: [0.0625, 0.125, 0.25, 0.5, 1, 2, 4], + cacheFrom: 1, + scaleUp() { + let indexOfCurrent = this.options.indexOf(this.current); + if (indexOfCurrent < this.options.length - 1) { + this.current = this.options[indexOfCurrent + 1]; + return true; + } + return false; + }, + scaleDown() { + let indexOfCurrent = this.options.indexOf(this.current); + if (indexOfCurrent > 0) { + this.current = this.options[indexOfCurrent - 1]; + return true; + } + return false; + }, + }, + history: { + log: [], + currentPos: -1, + lastMaxPos: -1, + maxStates: 100, + offset: 0, + }, + interface: { + eyedropCurrent: 1, + toolCurrent: "pencil", + brushSize: 9, + selection: { + start: null, + end: null, + }, + rulerSize: 25, + cursor: "", + }, + events: { + cached: new CustomEvent("cached"), + history: new CustomEvent("history"), + }, + controls: { + mouse: { + localX: null, + localY: null, + grabbed: false, + leftClick: false, + startX: 0, + startY: 0, + oldOffsetX: null, + oldOffsetY: null, + lastMouseX: null, + lastMouseY: null, + }, + }, + settings: { + maxBrushSize: 25, + showGrid: false, + showRulers: true, + showOriginal: false, + showDebugDrawGroups: false, + minecraftVersion: 20, + drawGroupsCurrent: 0, + gridColor: "#ff4778", + }, + debug: { + //delete in prod!!! + showTempCanvas: false, + renderAllPainted: false, + renderTime: { + 0.0625: 0, + 0.125: 0, + 0.25: 0, + 0.5: 0, + 1: 0, + 2: 0, + 4: 0, + }, + savedStartHistory: null, + drawGroups: [], + }, + }; + + /* PRIVATE METHODS */ + ////////////////////////////////////// + + this._isEmptyObject = (obj) => { + for (let key in obj) { + return false; } + return true; + }; - /* PRIVATE METHODS */ - ////////////////////////////////////// + this._setCursor = (str) => { + canvasOverlay.setAttribute("data-cursor", str); + }; - this._isEmptyObject = (obj) => { - for (let key in obj) { - return false; - } - return true; + this._checkIfReady = () => { + if (store.blocksDb.length === 0) { + return false; } - - this._setCursor = (str) => { - canvasOverlay.setAttribute('data-cursor', str) + return true; + }; + + this._getPosFromInt = (int) => { + return { + x: int % store.imageWidth, + y: Math.floor(int / store.imageWidth), + }; + }; + + this._getIntFromPos = (x, y) => { + return y * store.imageWidth + x; + }; + + this._getCornersOfVisible = () => { + let topLeftX = Math.floor( + -store.offset.x / store.baseCellSize / store.scale.current + ); + let topLeftY = Math.floor( + -store.offset.y / store.baseCellSize / store.scale.current + ); + let bottomRightX = + Math.floor( + (store.canvasWidth - store.offset.x) / + store.baseCellSize / + store.scale.current + ) + 1; + let bottomRightY = + Math.floor( + (store.canvasHeight - store.offset.y) / + store.baseCellSize / + store.scale.current + ) + 1; + + if (topLeftX < 0) { + topLeftX = 0; } - - this._checkIfReady = () => { - if (store.blocksDb.length === 0) { return false } - return true + if (topLeftY < 0) { + topLeftY = 0; } - - this._getPosFromInt = (int) => { - return { - x: int % store.imageWidth, - y: Math.floor(int / store.imageWidth) - } + if (bottomRightX < 0) { + bottomRightX = 0; } - - this._getIntFromPos = (x, y) => { - return y * store.imageWidth + x + if (bottomRightY < 0) { + bottomRightY = 0; } - this._getCornersOfVisible = () => { - let topLeftX = Math.floor((-store.offset.x) / store.baseCellSize / store.scale.current) - let topLeftY = Math.floor((-store.offset.y) / store.baseCellSize / store.scale.current) - let bottomRightX = Math.floor((store.canvasWidth - store.offset.x) / store.baseCellSize / store.scale.current) + 1 - let bottomRightY = Math.floor((store.canvasHeight - store.offset.y) / store.baseCellSize / store.scale.current) + 1 - - if (topLeftX < 0) { - topLeftX = 0 - } - if (topLeftY < 0) { - topLeftY = 0 - } - if (bottomRightX < 0) { - bottomRightX = 0 - } - if (bottomRightY < 0) { - bottomRightY = 0 - } - - return { - topLeftX: topLeftX, - topLeftY: topLeftY, - bottomRightX: bottomRightX, - bottomRightY: bottomRightY - } + return { + topLeftX: topLeftX, + topLeftY: topLeftY, + bottomRightX: bottomRightX, + bottomRightY: bottomRightY, + }; + }; + + this._getBlockIdByPosition = (x, y) => { + if (!store.imageConvertedHex) { + return null; } - - this._getBlockIdByPosition = (x, y) => { - if (!store.imageConvertedHex) { - return null - } - if (x < 0 || x >= store.imageWidth || y < 0 || y >= store.imageHeight) { - return null - } - - if (store.history.currentPos !== -1) { - return store.imageConvertedHex[y * store.imageWidth + x] - } else { - return store.imageConvertedHexBackup[y * store.imageWidth + x] - } + if (x < 0 || x >= store.imageWidth || y < 0 || y >= store.imageHeight) { + return null; } - this._checkIfInSelection = (int) => { - if (store.interface.selection.start === null || store.interface.selection.start === null) { return true } - let tempStart, tempEnd - if (store.interface.selection.start < store.interface.selection.end) { - tempStart = store.interface.selection.start - tempEnd = store.interface.selection.end - } else { - tempStart = store.interface.selection.end - tempEnd = store.interface.selection.start - } - if (int < tempStart || int > tempEnd) { return false } - let startModulo = tempStart % store.imageWidth - let endModulo = tempEnd % store.imageWidth - let intModulo = int % store.imageWidth - if (intModulo < startModulo || intModulo > endModulo) { return false } - return true - } - - this._createMainBlobImage = (str) => { - for (let i = 0; i < store.imageConvertedHex.length; i++) { - let x = i % store.imageWidth - let y = Math.floor(i / store.imageWidth) - if (store.imageConvertedHex[i] > 0) { - let imageForCanvas = store.getBlockById(store.imageConvertedHex[i]).image - ctxTemp.drawImage(imageForCanvas, - x * store.baseCellSize, - y * store.baseCellSize, - store.baseCellSize, - store.baseCellSize) - ctxInit.drawImage(imageForCanvas, - x * store.baseCellSize, - y * store.baseCellSize, - store.baseCellSize, - store.baseCellSize) - } - } + if (store.history.currentPos !== -1) { + return store.imageConvertedHex[y * store.imageWidth + x]; + } else { + return store.imageConvertedHexBackup[y * store.imageWidth + x]; } - - this._fakePaint = (x, y, id) => { - if (x < 0 || x >= store.imageWidth ) { return } - if (y < 0 || y >= store.imageHeight ) { return } - - if (id !== 0) { - let imageForCanvas = store.getBlockById(id).image - - ctxMain.clearRect(x * store.baseCellSize * store.scale.current + store.offset.x, - y * store.baseCellSize * store.scale.current + store.offset.y, - store.scale.current * store.baseCellSize, - store.scale.current * store.baseCellSize) - - ctxMain.drawImage(imageForCanvas, - x * store.baseCellSize * store.scale.current + store.offset.x, - y * store.baseCellSize * store.scale.current + store.offset.y, - store.scale.current * store.baseCellSize, - store.scale.current * store.baseCellSize) - - ctxTemp.clearRect(x * store.baseCellSize, - y * store.baseCellSize, - store.baseCellSize, - store.baseCellSize) - - ctxTemp.drawImage(imageForCanvas, - x * store.baseCellSize, - y * store.baseCellSize, - store.baseCellSize, - store.baseCellSize) - } else { - ctxMain.clearRect(x * store.baseCellSize * store.scale.current + store.offset.x, - y * store.baseCellSize * store.scale.current + store.offset.y, - store.scale.current * store.baseCellSize, - store.scale.current * store.baseCellSize) - - ctxTemp.clearRect(x * store.baseCellSize, - y * store.baseCellSize, - store.baseCellSize, - store.baseCellSize) - } + }; + + this._checkIfInSelection = (int) => { + if ( + store.interface.selection.start === null || + store.interface.selection.start === null + ) { + return true; } - - this._bucket = (x, y, id) => { - if (x < 0 || y < 0) { return } - if (x >= store.imageWidth || y >= store.imageHeight) { return } - const startPos = this._getIntFromPos(x, y) - if (!thisRoot._checkIfInSelection(startPos)) { return } - - const startId = store.imageConvertedHex[startPos] - const tempArr = [startPos] - const history = { - current: {}, - before: {} - } - - for (let i = 0; i < tempArr.length; i++) { - let offsets = [ - {x: 0, y: 0}, - {x: 0, y: store.imageWidth}, - {x: 0, y: -store.imageWidth} - ] - if (tempArr[i] % store.imageWidth !== 0) { - offsets.push({x: -1, y: 0}) - } - if ((tempArr[i] + 1) % store.imageWidth !== 0) { - offsets.push({x: 1, y: 0}) - } - - offsets.forEach((item) => { - let posOffset = tempArr[i] + item.x + item.y - if (store.imageConvertedHex[posOffset] === startId && history.current[posOffset] === undefined && thisRoot._checkIfInSelection(posOffset)) { - history.current[posOffset] = id - history.before[posOffset] = store.imageConvertedHex[posOffset] - store.imageConvertedHex[posOffset] = id - const pos = thisRoot._getPosFromInt(posOffset) - thisRoot._fakePaint(pos.x, pos.y, id) - tempArr.push(posOffset) - } - }) - } - thisRoot._addToHistory('bucket', history) + let tempStart, tempEnd; + if (store.interface.selection.start < store.interface.selection.end) { + tempStart = store.interface.selection.start; + tempEnd = store.interface.selection.end; + } else { + tempStart = store.interface.selection.end; + tempEnd = store.interface.selection.start; } - - this._addToHistory = (type, data) => { - for (let i = store.history.currentPos; i < store.history.lastMaxPos; i++) { - store.history.log.pop() - } - - if (store.history.currentPos === -1) { - store.history.offset = 0 - } - - if (store.history.log.length === store.history.maxStates) { - store.history.log.shift() - store.history.offset++ - } - - store.history.currentPos++ - store.history.lastMaxPos = store.history.currentPos - store.history.log.push({ - type: type, - data: data - }) - - const event = store.events.history - event.details = { - pos: store.history.currentPos, - type: type - } - $root.dispatchEvent(event) + if (int < tempStart || int > tempEnd) { + return false; } - - this._undoBack = (pos) => { - pos += -store.history.offset - const tempSum = {} - for (let i = store.history.currentPos - store.history.offset; i > pos; i--) { - const logStep = store.history.log[i] - for (let key in logStep.data.before) { - tempSum[key] = logStep.data.before[key] - } - } - for (let key in tempSum) { - let xBlock = key % store.imageWidth - let yBlock = Math.floor(key / store.imageWidth) - this._fakePaint(xBlock, yBlock, tempSum[key]) - store.imageConvertedHex[key] = tempSum[key] - } + let startModulo = tempStart % store.imageWidth; + let endModulo = tempEnd % store.imageWidth; + let intModulo = int % store.imageWidth; + if (intModulo < startModulo || intModulo > endModulo) { + return false; } - - this._undoForward = (pos) => { - pos += -store.history.offset - const tempSum = {} - for (let i = store.history.currentPos - store.history.offset; i <= pos; i++) { - if (i === -1) { continue } - const logStep = store.history.log[i] - for (let key in logStep.data.current) { - tempSum[key] = logStep.data.current[key] - } - } - for (let key in tempSum) { - let xBlock = key % store.imageWidth - let yBlock = Math.floor(key / store.imageWidth) - this._fakePaint(xBlock, yBlock, tempSum[key]) - store.imageConvertedHex[key] = tempSum[key] - } + return true; + }; + + this._createMainBlobImage = (str) => { + for (let i = 0; i < store.imageConvertedHex.length; i++) { + let x = i % store.imageWidth; + let y = Math.floor(i / store.imageWidth); + if (store.imageConvertedHex[i] > 0) { + let imageForCanvas = store.getBlockById( + store.imageConvertedHex[i] + ).image; + ctxTemp.drawImage( + imageForCanvas, + x * store.baseCellSize, + y * store.baseCellSize, + store.baseCellSize, + store.baseCellSize + ); + ctxInit.drawImage( + imageForCanvas, + x * store.baseCellSize, + y * store.baseCellSize, + store.baseCellSize, + store.baseCellSize + ); + } } + }; - this._undoTo = (pos) => { - pos = parseInt(pos) - if (pos === store.history.currentPos) { return } - - if (pos === -1) { - this._undoBack(store.history.offset) - store.history.currentPos = pos - this.render() - return - } else if (store.history.currentPos === -1) { - store.history.currentPos = store.history.offset - this.render() - } - - if (store.history.currentPos - pos > 0) { - this._undoBack(pos) - } else { - this._undoForward(pos) - } - - store.history.currentPos = pos + this._fakePaint = (x, y, id) => { + if (x < 0 || x >= store.imageWidth) { + return; } - - this._convertToGroups = () => { - const catchedBlocks = {} - const groups = [] - let hex - if (store.history.currentPos === -1) { - hex = store.imageConvertedHexBackup - } else { - hex = store.imageConvertedHex - } - - for (let i = 0; i < hex.length; i++) { - let targetPos = Math.floor((hex.length - i - 1) / store.imageWidth) * store.imageWidth + (i % store.imageWidth) - - if (catchedBlocks[targetPos]) { continue } - catchedBlocks[targetPos] = true - - let targetBlock = hex[targetPos] - if (targetBlock === 0) { - catchedBlocks[targetPos] = true - continue - } - - let targetWidth = 1 - let targetHeight = 1 - - while (true) { - let tempPos = targetPos + targetWidth - if (hex[tempPos] === targetBlock && !catchedBlocks[tempPos]) { - catchedBlocks[tempPos] = true - targetWidth++ - } else { - break - } - if ((targetPos + targetWidth) % store.imageWidth === 0) { break } - } - - while (true) { - let tempPos = targetPos - targetHeight * store.imageWidth - if (hex[tempPos] === targetBlock && !catchedBlocks[tempPos]) { - catchedBlocks[tempPos] = true - targetHeight++ - } else { - break - } - } - - if (targetWidth === 1 && targetHeight === 1) { - groups.push([targetPos]) - continue - } - - let tempHeight = targetHeight - let startBlockGroup = targetPos - for (let w = 0; w < targetWidth; w++) { - for (let h = 0; h < tempHeight; h++) { - let shiftPos = targetPos - h * store.imageWidth + w + 1 - if (hex[shiftPos] === targetBlock) { - catchedBlocks[shiftPos] = true - if (w + 1 === targetWidth && h + 1 === tempHeight) { - if (startBlockGroup === targetPos + targetWidth - 1 + (tempHeight - 1) * store.imageWidth) { - groups.push([startBlockGroup]) - } else { - groups.push([startBlockGroup, targetPos + targetWidth - 1 - (tempHeight - 1) * store.imageWidth]) - } - } - } else { - if (startBlockGroup === targetPos + w + (tempHeight - 1) * store.imageWidth) { - groups.push([startBlockGroup]) - } else { - groups.push([startBlockGroup, targetPos + w - (tempHeight - 1) * store.imageWidth]) - } - startBlockGroup = targetPos + w + 1 - tempHeight = h - break - } - } - } - } - - store.groups = groups - return + if (y < 0 || y >= store.imageHeight) { + return; } - this._convertPosToRelCoords = (pos, facing, offset) => { - let output, offsetX = 0, offsetY = 0, offsetZ = 0 - const x = pos.x + 1, - y = store.imageHeight - pos.y - 1 - if (offset) { - offsetX = offset.x || 0, - offsetY = offset.y || 0, - offsetZ = offset.z || 0 - } - - switch (facing) { - case 'east': - output = `~${x + offsetX} ~${y + offsetY} ~${offsetZ}` - break - case 'south': - output = `~${offsetX} ~${y + offsetY} ~${x + offsetZ}` - break - case 'west': - output = `~${offsetX - x} ~${y + offsetY} ~${offsetZ}` - break - case 'north': - output = `~${offsetX} ~${y + offsetY} ~${offsetZ - x}` - break - } - return output.replace(new RegExp('~0', 'g'), '~') + if (id !== 0) { + let imageForCanvas = store.getBlockById(id).image; + + ctxMain.clearRect( + x * store.baseCellSize * store.scale.current + store.offset.x, + y * store.baseCellSize * store.scale.current + store.offset.y, + store.scale.current * store.baseCellSize, + store.scale.current * store.baseCellSize + ); + + ctxMain.drawImage( + imageForCanvas, + x * store.baseCellSize * store.scale.current + store.offset.x, + y * store.baseCellSize * store.scale.current + store.offset.y, + store.scale.current * store.baseCellSize, + store.scale.current * store.baseCellSize + ); + + ctxTemp.clearRect( + x * store.baseCellSize, + y * store.baseCellSize, + store.baseCellSize, + store.baseCellSize + ); + + ctxTemp.drawImage( + imageForCanvas, + x * store.baseCellSize, + y * store.baseCellSize, + store.baseCellSize, + store.baseCellSize + ); + } else { + ctxMain.clearRect( + x * store.baseCellSize * store.scale.current + store.offset.x, + y * store.baseCellSize * store.scale.current + store.offset.y, + store.scale.current * store.baseCellSize, + store.scale.current * store.baseCellSize + ); + + ctxTemp.clearRect( + x * store.baseCellSize, + y * store.baseCellSize, + store.baseCellSize, + store.baseCellSize + ); } + }; - this._convertGroupToCommand = (group, facing, offset) => { - let block = store.getBlockById(store.imageConvertedHex[group[0]]) - let gameId - if (block === null) { - block = { - game_id: 'minecraft:air' - } - } - if (store.settings.minecraftVersion === 13) { - gameId = block['game_id_13'] - } else { - gameId = block.game_id - } - if (block.axis) { - if (store.settings.minecraftVersion < 13 && block.version < 13) { - const dataAxis = parseInt(gameId.match(/\d$/)[0]) - if (facing === 'west' || facing === 'east') { - gameId = gameId.replace(/\d$/, dataAxis + 8) - } else if (facing === 'north' || facing === 'south') { - gameId = gameId.replace(/\d$/, dataAxis + 4) - } - } else { - if (facing === 'west' || facing === 'east') { - gameId = gameId + '[axis=z]' - } else if (facing === 'north' || facing === 'south') { - gameId = gameId + '[axis=x]' - } - } - } - const output = [] - group.forEach((item) => { - const pos = this._getPosFromInt(item) - output.push(this._convertPosToRelCoords(pos, facing, offset)) - }) - if (output.length === 1) { - return `setblock ${output[0]} ${gameId}` - } else { - return `fill ${output[0]} ${output[1]} ${gameId}` - } + this._bucket = (x, y, id) => { + if (x < 0 || y < 0) { + return; + } + if (x >= store.imageWidth || y >= store.imageHeight) { + return; + } + const startPos = this._getIntFromPos(x, y); + if (!thisRoot._checkIfInSelection(startPos)) { + return; } - this._setPosOnOpen = () => { - const canvasWidth = store.canvasWidth + store.interface.rulerSize - const canvasHeight = store.canvasHeight - store.interface.rulerSize - for (let i = store.scale.options.length - 1; i >= 0; i--) { - if (store.imageWidth * store.scale.options[i] * store.baseCellSize < canvasWidth && store.imageHeight * store.scale.options[i] * store.baseCellSize < canvasHeight) { - store.scale.current = store.scale.options[i] - break - } - } - store.offset.x = canvasWidth / 2 - store.imageWidth / 2 * store.scale.current * store.baseCellSize - store.offset.y = canvasHeight / 2 - store.imageHeight / 2 * store.scale.current * store.baseCellSize - } - - this._setEventListeners = function() { - let tempFakePaintedPoints = {} - - function bresenhamLine(x0, y0, x1, y1, skipEveryN, callback) { - var dx = Math.abs(x1-x0); - var dy = Math.abs(y1-y0); - var sx = (x0 < x1) ? 1 : -1; - var sy = (y0 < y1) ? 1 : -1; - var err = dx-dy; - let i = 0 - - while(true) { - if ((x0==x1) && (y0==y1)) { - callback(x0, y0) - break - } - var e2 = 2*err; - if (e2 >-dy){ err -= dy; x0 += sx; } - if (e2 < dx){ err += dx; y0 += sy; } - if (i % skipEveryN === 0) { - callback(x0, y0) - } - i++ - } - } - - function draw(x, y) { - let size = store.interface.brushSize % 2 === 0 ? store.interface.brushSize + 1 : store.interface.brushSize - let radius = Math.floor(size / 2) - let totalBlocks = Math.pow(size, 2) - let startPointX = x - radius - let startPointY = y - radius - - for (let i = 0; i < totalBlocks; i++) { - let xBlock = startPointX + (i % size) - let yBlock = startPointY + Math.floor(i / size) - if (xBlock < 0 || xBlock >= store.imageWidth || yBlock < 0 || yBlock >= store.imageHeight) { continue } - - if (store.interface.selection.start !== null) { - if (!thisRoot._checkIfInSelection(thisRoot._getIntFromPos(xBlock,yBlock))) { continue } - } - - if (thisRoot.getTool() === 'brush') { - const row = Math.ceil((i + 1) / size) - const col = i % size + 1 - const offsetX = Math.abs(col - radius - 1) - const offsetY = Math.abs(row - radius - 1) - if (Math.sqrt(Math.pow(offsetX, 2) + Math.pow(offsetY, 2)) > radius + 0.5) { - continue - } - } - - thisRoot._fakePaint(xBlock, yBlock, thisRoot.getEyedrop()) - tempFakePaintedPoints[yBlock * store.imageWidth + xBlock] = thisRoot.getEyedrop() - } - } - - canvasOverlay.addEventListener('mousemove', function(e) { - if (!thisRoot._checkIfReady()) { return } - store.controls.mouse.localX = Math.round(e.clientX - store.boundingRect.x - store.controls.mouse.startX) - store.controls.mouse.localY = Math.round(e.clientY - store.boundingRect.y - store.controls.mouse.startY) - let xBlock = (Math.floor((store.controls.mouse.localX - store.offset.x) / (store.baseCellSize * store.scale.current))) - let yBlock = (Math.floor((store.controls.mouse.localY - store.offset.y) / (store.baseCellSize * store.scale.current))) - - if (store.controls.mouse.grabbed) { - store.offset.translate(store.controls.mouse.localX + store.controls.mouse.oldOffsetX, store.controls.mouse.localY + store.controls.mouse.oldOffsetY) - thisRoot._renderMainCanvas() - thisRoot._renderOverlayCanvas() - } - if (store.controls.mouse.leftClick && (thisRoot.getTool() === 'pencil' || thisRoot.getTool() === 'brush')) { - //start the bresenham algorithm with the callback - const skipEveryN = Math.ceil(store.interface.brushSize / 2) - bresenhamLine(store.controls.mouse.lastMouseX, store.controls.mouse.lastMouseY, xBlock, yBlock, skipEveryN, draw) - - store.controls.mouse.lastMouseX = xBlock - store.controls.mouse.lastMouseY = yBlock - } - - if (store.controls.mouse.leftClick && thisRoot.getTool() === 'selection') { - let tempX = xBlock - let tempY = yBlock - - if (xBlock < 0) { tempX = 0 } - if (yBlock < 0) { tempY = 0 } - if (xBlock >= store.imageWidth ) { tempX = store.imageWidth - 1 } - if (yBlock >= store.imageHeight ) { tempY = store.imageHeight - 1 } - - store.interface.selection.end = thisRoot._getIntFromPos(tempX, tempY) - } - thisRoot._renderOverlayCanvas() - }) - - canvasOverlay.addEventListener('mousedown', function(e) { - if (!thisRoot._checkIfReady()) { return } - if (e.which === 1) { - const tool = thisRoot.getTool() - let xBlock = (Math.floor((store.controls.mouse.localX - store.offset.x) / (store.baseCellSize * store.scale.current))) - let yBlock = (Math.floor((store.controls.mouse.localY - store.offset.y) / (store.baseCellSize * store.scale.current))) - store.controls.mouse.leftClick = true - - if (tool === 'brush' || tool === 'pencil' || tool === 'bucket') { - if (store.history.currentPos === -1) { - ctxTemp.clearRect(0, 0, canvasTemp.width, canvasTemp.height) - ctxTemp.drawImage(canvasInit, 0, 0) - store.imageConvertedHex.set(store.imageConvertedHexBackup, 0) - } - } - - if (tool === 'brush' || tool === 'pencil') { - if (e.shiftKey) { - bresenhamLine(store.controls.mouse.lastMouseX, store.controls.mouse.lastMouseY, xBlock, yBlock, 1, draw) - } else { - draw(xBlock, yBlock) - } - } - - store.controls.mouse.lastMouseX = xBlock - store.controls.mouse.lastMouseY = yBlock - - if (tool === 'eyedropper') { - let id = thisRoot._getBlockIdByPosition(xBlock, yBlock) - thisRoot.setEyedrop(id) - } - - if (tool === 'selection') { - let tempX = xBlock - let tempY = yBlock - - if (xBlock < 0) { tempX = 0 } - if (yBlock < 0) { tempY = 0 } - if (xBlock >= store.imageWidth ) { tempX = store.imageWidth - 1 } - if (yBlock >= store.imageHeight ) { tempY = store.imageHeight - 1 } - store.interface.selection.start = thisRoot._getIntFromPos(tempX, tempY) - store.interface.selection.end = thisRoot._getIntFromPos(tempX, tempY) - } - - if (tool === 'zoom') { - if (store.scale.scaleUp()) { - let x = Math.floor(store.controls.mouse.localX - store.offset.x) - let y = Math.floor(store.controls.mouse.localY - store.offset.y) - store.offset.translate(store.offset.x - x, store.offset.y - y) - thisRoot.render() - } - } - - if (tool === 'grab') { - store.controls.mouse.grabbed = true - store.controls.mouse.startX = e.clientX - store.boundingRect.x - store.controls.mouse.startY = e.clientY - store.boundingRect.y - store.controls.mouse.oldOffsetX = store.offset.x - store.controls.mouse.oldOffsetY = store.offset.y - thisRoot._setCursor('grabbing') - } - - if (tool === 'bucket') { - thisRoot._bucket(xBlock, yBlock, thisRoot.getEyedrop()) - } - } - if (e.which === 2) { - e.preventDefault() - store.controls.mouse.grabbed = true - store.controls.mouse.startX = e.clientX - store.boundingRect.x - store.controls.mouse.startY = e.clientY - store.boundingRect.y - store.controls.mouse.oldOffsetX = store.offset.x - store.controls.mouse.oldOffsetY = store.offset.y - thisRoot._setCursor('grabbing') - } - if (e.which === 3) { - if (thisRoot.getTool() === 'zoom') { - e.preventDefault() - if (store.scale.scaleDown()) { - let x = Math.floor(store.controls.mouse.localX - store.offset.x) - let y = Math.floor(store.controls.mouse.localY - store.offset.y) - store.offset.translate(store.offset.x + x / 2, store.offset.y + y / 2) - thisRoot.render() - } - } - } - }) - - document.addEventListener('mouseup', function(e) { - if (!thisRoot._checkIfReady()) { return } - store.controls.mouse.grabbed = false - store.controls.mouse.leftClick = false - store.controls.mouse.startX = 0 - store.controls.mouse.startY = 0 - - if (!thisRoot._isEmptyObject(tempFakePaintedPoints)) { - const history = { - current: {}, - before: {} - } - for (let i in tempFakePaintedPoints) { - history.current[i] = tempFakePaintedPoints[i] - history.before[i] = store.imageConvertedHex[i] - store.imageConvertedHex[i] = tempFakePaintedPoints[i] - } - thisRoot._addToHistory(thisRoot.getTool(), history) - tempFakePaintedPoints = {} - } - - if (store.interface.selection.start === store.interface.selection.end) { - store.interface.selection.start = null - store.interface.selection.end = null - thisRoot._renderOverlayCanvas() - } - - thisRoot._setCursor(store.interface.cursor) - }) - - canvasOverlay.addEventListener("wheel", (e) => { - if (!thisRoot._checkIfReady()) { return } - if (store.controls.mouse.leftClick) { return } - if (store.controls.mouse.grabbed) { return } - e.preventDefault() - if (e.deltaY < 0) { - if (store.scale.scaleUp()) { - let x = Math.floor(store.controls.mouse.localX - store.offset.x) - let y = Math.floor(store.controls.mouse.localY - store.offset.y) - store.offset.translate(store.offset.x - x, store.offset.y - y) - } - } - - if (e.deltaY > 0) { - if (store.scale.scaleDown()) { - let x = Math.floor(store.controls.mouse.localX - store.offset.x) - let y = Math.floor(store.controls.mouse.localY - store.offset.y) - store.offset.translate(store.offset.x + x / 2, store.offset.y + y / 2) - } - } - thisRoot._renderMainCanvas() - thisRoot._renderOverlayCanvas() - }) - - canvasOverlay.addEventListener('contextmenu', (e) => { - e.preventDefault() - }) - - window.addEventListener('resize', (e) => { - thisRoot.setBoundingRect() - }) - - window.addEventListener('scroll', (e) => { - thisRoot.setBoundingRect() - }) - } - - this._renderOverlayCanvas = () => { - - function renderRulers() { - let rulerFillStyle = 'white', - fontStyle = '12px Helvetica' - - let drawRulerEveryNBlocks - switch (store.scale.current) { - case 4: - drawRulerEveryNBlocks = 10 - break - case 2: - drawRulerEveryNBlocks = 10 - break - case 1: - drawRulerEveryNBlocks = 10 - break - case 0.5: - drawRulerEveryNBlocks = 10 - break - case 0.25: - drawRulerEveryNBlocks = 50 - break - case 0.125: - drawRulerEveryNBlocks = 50 - break - case 0.0625: - drawRulerEveryNBlocks = 100 - break - } - - if (store.imageHeight >= 1000) { - store.interface.rulerSize = 36 - } - - ctxOverlay.beginPath() - ctxOverlay.globalAlpha = 1 - ctxOverlay.fillStyle = rulerFillStyle - ctxOverlay.rect(0, store.canvasHeight - store.interface.rulerSize, store.canvasWidth, store.interface.rulerSize) - ctxOverlay.fill() - ctxOverlay.rect(0, 0, store.interface.rulerSize, store.canvasHeight) - ctxOverlay.fill() - - ctxOverlay.font = fontStyle; - ctxOverlay.fillStyle = 'black' - ctxOverlay.strokeStyle = 'black' - ctxOverlay.lineWidth = 1 - // gets lastleft/lastright visible n/coordsX and draws everything between them - - for (let i = Math.ceil(-store.offset.x / store.scale.current / 16 / drawRulerEveryNBlocks) * drawRulerEveryNBlocks; - i <= Math.floor((-store.offset.x + store.canvasWidth) / store.scale.current / 16 / drawRulerEveryNBlocks) * drawRulerEveryNBlocks; - i += drawRulerEveryNBlocks) { - ctxOverlay.beginPath() - ctxOverlay.moveTo(i * store.scale.current * 16 + store.offset.x + 0.5, store.canvasHeight) - ctxOverlay.lineTo(i * store.scale.current * 16 + store.offset.x + 0.5, store.canvasHeight - store.interface.rulerSize) - ctxOverlay.stroke() - ctxOverlay.fillText(i, i * store.scale.current * 16 + store.offset.x + 2, store.boundingRect.height - 10) - } - - for (let i = Math.floor((store.offset.y / 16 / store.scale.current + store.imageHeight) / drawRulerEveryNBlocks) * drawRulerEveryNBlocks; - i >= Math.floor(((store.offset.y - store.canvasHeight) / 16 / store.scale.current + store.imageHeight) / drawRulerEveryNBlocks) * drawRulerEveryNBlocks; - i -= drawRulerEveryNBlocks) { - ctxOverlay.beginPath() - ctxOverlay.moveTo(0, (store.imageHeight - i) * 16 * store.scale.current + store.offset.y + 0.5) // + 0.5 for just the right thickness - ctxOverlay.lineTo(store.interface.rulerSize, (store.imageHeight - i) * 16 * store.scale.current + store.offset.y + 0.5) - ctxOverlay.stroke() - ctxOverlay.fillText(i, 1, (store.imageHeight - i) * 16 * store.scale.current + store.offset.y - 3) - } - - ctxOverlay.rect(0, store.canvasHeight - store.interface.rulerSize, store.interface.rulerSize, store.interface.rulerSize) - ctxOverlay.fill() - } - - function renderGrid() { - let lineWidthBig = 2, - lineWidthSmallOpacity = 0, - strokeStyle = store.settings.gridColor - - let mainGridLineEveryN - switch (store.scale.current) { - case 4: - lineWidthBig = 3 - lineWidthSmallOpacity = 1 - mainGridLineEveryN = 10 - break - case 2: - lineWidthBig = 3 - lineWidthSmallOpacity = 0.75 - mainGridLineEveryN = 10 - break - case 1: - lineWidthSmallOpacity = 0.25 - mainGridLineEveryN = 10 - break - case 0.5: - mainGridLineEveryN = 10 - break - case 0.25: - mainGridLineEveryN = 50 - break - case 0.125: - mainGridLineEveryN = 50 - break - case 0.0625: - mainGridLineEveryN = 50 - break - } + const startId = store.imageConvertedHex[startPos]; + const tempArr = [startPos]; + const history = { + current: {}, + before: {}, + }; + + for (let i = 0; i < tempArr.length; i++) { + let offsets = [ + { x: 0, y: 0 }, + { x: 0, y: store.imageWidth }, + { x: 0, y: -store.imageWidth }, + ]; + if (tempArr[i] % store.imageWidth !== 0) { + offsets.push({ x: -1, y: 0 }); + } + if ((tempArr[i] + 1) % store.imageWidth !== 0) { + offsets.push({ x: 1, y: 0 }); + } + + offsets.forEach((item) => { + let posOffset = tempArr[i] + item.x + item.y; + if ( + store.imageConvertedHex[posOffset] === startId && + history.current[posOffset] === undefined && + thisRoot._checkIfInSelection(posOffset) + ) { + history.current[posOffset] = id; + history.before[posOffset] = store.imageConvertedHex[posOffset]; + store.imageConvertedHex[posOffset] = id; + const pos = thisRoot._getPosFromInt(posOffset); + thisRoot._fakePaint(pos.x, pos.y, id); + tempArr.push(posOffset); + } + }); + } + thisRoot._addToHistory("bucket", history); + }; - ctxOverlay.lineWidth = lineWidthBig - ctxOverlay.strokeStyle = strokeStyle + this._addToHistory = (type, data) => { + for (let i = store.history.currentPos; i < store.history.lastMaxPos; i++) { + store.history.log.pop(); + } - let topOfGridVertical = -store.offset.y >= 0 ? 0 : store.offset.y - let bottomOfGridVertical = store.offset.y + store.imageHeight * 16 * store.scale.current - let topOfGridHorizontal = store.offset.x < 0 ? 0 : store.offset.x - let bottomOfGridHorizontal = store.offset.x + store.imageWidth * 16 * store.scale.current + if (store.history.currentPos === -1) { + store.history.offset = 0; + } - if (bottomOfGridVertical > store.canvasHeight) { - bottomOfGridVertical = store.canvasHeight - } - if (bottomOfGridHorizontal > store.canvasWidth) { - bottomOfGridHorizontal = store.canvasWidth - } + if (store.history.log.length === store.history.maxStates) { + store.history.log.shift(); + store.history.offset++; + } - let startOfRenderGridHorizontal = Math.ceil((store.offset.y - store.canvasHeight) / 16 / store.scale.current + store.imageHeight) - let endOfRenderGridHorizontal = Math.floor(store.offset.y / 16 / store.scale.current + store.imageHeight) + store.history.currentPos++; + store.history.lastMaxPos = store.history.currentPos; + store.history.log.push({ + type: type, + data: data, + }); + + const event = store.events.history; + event.details = { + pos: store.history.currentPos, + type: type, + }; + $root.dispatchEvent(event); + }; + + this._undoBack = (pos) => { + pos += -store.history.offset; + const tempSum = {}; + for ( + let i = store.history.currentPos - store.history.offset; + i > pos; + i-- + ) { + const logStep = store.history.log[i]; + for (let key in logStep.data.before) { + tempSum[key] = logStep.data.before[key]; + } + } + for (let key in tempSum) { + let xBlock = key % store.imageWidth; + let yBlock = Math.floor(key / store.imageWidth); + this._fakePaint(xBlock, yBlock, tempSum[key]); + store.imageConvertedHex[key] = tempSum[key]; + } + }; + + this._undoForward = (pos) => { + pos += -store.history.offset; + const tempSum = {}; + for ( + let i = store.history.currentPos - store.history.offset; + i <= pos; + i++ + ) { + if (i === -1) { + continue; + } + const logStep = store.history.log[i]; + for (let key in logStep.data.current) { + tempSum[key] = logStep.data.current[key]; + } + } + for (let key in tempSum) { + let xBlock = key % store.imageWidth; + let yBlock = Math.floor(key / store.imageWidth); + this._fakePaint(xBlock, yBlock, tempSum[key]); + store.imageConvertedHex[key] = tempSum[key]; + } + }; - let startOfRenderGridVertical = Math.ceil(-store.offset.x / 16 / store.scale.current) - let endOfRenderGridVertical = Math.floor((-store.offset.x + store.canvasWidth) / store.scale.current / 16) + this._undoTo = (pos) => { + pos = parseInt(pos); + if (pos === store.history.currentPos) { + return; + } - if (startOfRenderGridHorizontal <= 0) { - startOfRenderGridHorizontal = 0 - } - if (endOfRenderGridHorizontal >= store.imageHeight) { - endOfRenderGridHorizontal = store.imageHeight - } + if (pos === -1) { + this._undoBack(store.history.offset); + store.history.currentPos = pos; + this.render(); + return; + } else if (store.history.currentPos === -1) { + store.history.currentPos = store.history.offset; + this.render(); + } - if (startOfRenderGridVertical <= 0) { - startOfRenderGridVertical = 0 - } - if (endOfRenderGridVertical >= store.imageWidth) { - endOfRenderGridVertical = store.imageWidth - } + if (store.history.currentPos - pos > 0) { + this._undoBack(pos); + } else { + this._undoForward(pos); + } - for (let i = startOfRenderGridHorizontal + 1; i <= endOfRenderGridHorizontal; i += 1) { - ctxOverlay.beginPath() - ctxOverlay.globalAlpha = 1 - if (i % mainGridLineEveryN === 0 && i !== store.imageHeight) { - ctxOverlay.lineWidth = lineWidthBig - ctxOverlay.moveTo(topOfGridHorizontal, (store.imageHeight - i) * store.scale.current * 16 + store.offset.y) - ctxOverlay.lineTo(bottomOfGridHorizontal, (store.imageHeight - i) * store.scale.current * 16 + store.offset.y) - } else if (lineWidthSmallOpacity > 0) { - ctxOverlay.globalAlpha = lineWidthSmallOpacity - ctxOverlay.lineWidth = 1 - ctxOverlay.moveTo(topOfGridHorizontal, (store.imageHeight - i) * store.scale.current * 16 + store.offset.y + 0.5) - ctxOverlay.lineTo(bottomOfGridHorizontal, (store.imageHeight - i) * store.scale.current * 16 + store.offset.y + 0.5) - } - ctxOverlay.stroke() - } + store.history.currentPos = pos; + }; + + this._convertToGroups = () => { + const catchedBlocks = {}; + const groups = []; + let hex; + if (store.history.currentPos === -1) { + hex = store.imageConvertedHexBackup; + } else { + hex = store.imageConvertedHex; + } - for (let i = startOfRenderGridVertical + 1; i <= endOfRenderGridVertical; i += 1) { - ctxOverlay.beginPath() - ctxOverlay.globalAlpha = 1 - if (i % mainGridLineEveryN === 0 && i !== store.imageWidth) { - ctxOverlay.lineWidth = lineWidthBig - ctxOverlay.moveTo(i * store.scale.current * 16 + store.offset.x, topOfGridVertical) - ctxOverlay.lineTo(i * store.scale.current * 16 + store.offset.x, bottomOfGridVertical) - } else if (lineWidthSmallOpacity > 0) { - ctxOverlay.globalAlpha = lineWidthSmallOpacity - ctxOverlay.lineWidth = 1 - ctxOverlay.moveTo(i * store.scale.current * 16 + store.offset.x, topOfGridVertical + 0.5) - ctxOverlay.lineTo(i * store.scale.current * 16 + store.offset.x, bottomOfGridVertical + 0.5) - } - ctxOverlay.stroke() - } + for (let i = 0; i < hex.length; i++) { + let targetPos = + Math.floor((hex.length - i - 1) / store.imageWidth) * store.imageWidth + + (i % store.imageWidth); + + if (catchedBlocks[targetPos]) { + continue; + } + catchedBlocks[targetPos] = true; + + let targetBlock = hex[targetPos]; + if (targetBlock === 0) { + catchedBlocks[targetPos] = true; + continue; + } + + let targetWidth = 1; + let targetHeight = 1; + + while (true) { + let tempPos = targetPos + targetWidth; + if (hex[tempPos] === targetBlock && !catchedBlocks[tempPos]) { + catchedBlocks[tempPos] = true; + targetWidth++; + } else { + break; } - - function renderBrush() { - let size = store.interface.brushSize % 2 === 0 ? store.interface.brushSize + 1 : store.interface.brushSize - let brushSize = size * store.baseCellSize * store.scale.current - ctxOverlay.beginPath() - - if (thisRoot.getTool() === 'pencil') { - let xBlock = (Math.floor((store.controls.mouse.localX - store.offset.x) / (store.baseCellSize * store.scale.current))) - let yBlock = (Math.floor((store.controls.mouse.localY - store.offset.y) / (store.baseCellSize * store.scale.current))) - ctxOverlay.rect((xBlock - Math.floor(store.interface.brushSize / 2)) * store.baseCellSize * store.scale.current + store.offset.x, - (yBlock - Math.floor(store.interface.brushSize / 2)) * store.baseCellSize * store.scale.current + store.offset.y, - brushSize, - brushSize) - } - - if (thisRoot.getTool() === 'brush') { - ctxOverlay.arc(store.controls.mouse.localX, - store.controls.mouse.localY, - brushSize / 2, - 0,2*Math.PI); - } - - ctxOverlay.globalAlpha = 1 - ctxOverlay.strokeStyle = "white" - ctxOverlay.lineWidth = 3 - ctxOverlay.stroke() - ctxOverlay.stroke() - ctxOverlay.strokeStyle = "black" - ctxOverlay.lineWidth = 1 - ctxOverlay.stroke() - ctxOverlay.stroke() + if ((targetPos + targetWidth) % store.imageWidth === 0) { + break; } + } - function renderSelection() { - if (store.interface.selection.start === null || store.interface.selection.end === null) { return } - if (store.interface.selection.start === store.interface.selection.end) { return } - - var startPos = thisRoot._getPosFromInt(store.interface.selection.start) - var endPos = thisRoot._getPosFromInt(store.interface.selection.end) - - const tempStart = { - x: startPos.x <= endPos.x ? startPos.x : endPos.x, - y: startPos.y <= endPos.y ? startPos.y : endPos.y - } - - const tempEnd = { - x: startPos.x > endPos.x ? startPos.x : endPos.x, - y: startPos.y > endPos.y ? startPos.y : endPos.y + while (true) { + let tempPos = targetPos - targetHeight * store.imageWidth; + if (hex[tempPos] === targetBlock && !catchedBlocks[tempPos]) { + catchedBlocks[tempPos] = true; + targetHeight++; + } else { + break; + } + } + + if (targetWidth === 1 && targetHeight === 1) { + groups.push([targetPos]); + continue; + } + + let tempHeight = targetHeight; + let startBlockGroup = targetPos; + for (let w = 0; w < targetWidth; w++) { + for (let h = 0; h < tempHeight; h++) { + let shiftPos = targetPos - h * store.imageWidth + w + 1; + if (hex[shiftPos] === targetBlock) { + catchedBlocks[shiftPos] = true; + if (w + 1 === targetWidth && h + 1 === tempHeight) { + if ( + startBlockGroup === + targetPos + + targetWidth - + 1 + + (tempHeight - 1) * store.imageWidth + ) { + groups.push([startBlockGroup]); + } else { + groups.push([ + startBlockGroup, + targetPos + + targetWidth - + 1 - + (tempHeight - 1) * store.imageWidth, + ]); + } } - - ctxOverlay.beginPath(); - ctxOverlay.rect(tempStart.x * store.baseCellSize * store.scale.current + store.offset.x, - tempStart.y * store.baseCellSize * store.scale.current + store.offset.y, - (tempEnd.x - tempStart.x + 1) * store.baseCellSize * store.scale.current, - (tempEnd.y - tempStart.y + 1) * store.baseCellSize * store.scale.current) - if (store.scale.current > 0.125) { - ctxOverlay.lineWidth = 3 + } else { + if ( + startBlockGroup === + targetPos + w + (tempHeight - 1) * store.imageWidth + ) { + groups.push([startBlockGroup]); } else { - ctxOverlay.lineWidth = 2 + groups.push([ + startBlockGroup, + targetPos + w - (tempHeight - 1) * store.imageWidth, + ]); } - ctxOverlay.strokeStyle = "white" - ctxOverlay.stroke() - ctxOverlay.stroke() - ctxOverlay.setLineDash([7, 7]) - ctxOverlay.strokeStyle = "black" - ctxOverlay.stroke() - ctxOverlay.stroke() - } - - const renderList = { - 'RENDER_BRUSH': renderBrush, - 'RENDER_RULERS': renderRulers, - 'RENDER_SELECTION': renderSelection, - 'RENDER_GRID': renderGrid - } - - function renderHelper(list) { - ctxOverlay.globalAlpha = 1 - ctxOverlay.save() - ctxOverlay.clearRect(0, 0, store.canvasWidth, store.canvasHeight) - list.forEach((item) => { - if (renderList[item]) { - renderList[item]() - ctxOverlay.restore() - } - }) - } - - const renderArray = ['RENDER_SELECTION'] - - if (store.settings.showGrid) { - renderArray.push('RENDER_GRID') - } - - if ((this.getTool() === 'pencil' || this.getTool() === 'brush') && !store.controls.mouse.grabbed) { - renderArray.push('RENDER_BRUSH') - } - - if (store.settings.showRulers) { - renderArray.push('RENDER_RULERS') + startBlockGroup = targetPos + w + 1; + tempHeight = h; + break; + } } + } + } - renderHelper(renderArray) - } - - this._renderMainCanvas = () => { - - function renderMain() { - function renderByLoop() { - const visibleCorners = thisRoot._getCornersOfVisible() - const topLeftX = visibleCorners.topLeftX - const topLeftY = visibleCorners.topLeftY - const bottomRightX = visibleCorners.bottomRightX - const bottomRightY = visibleCorners.bottomRightY - let hexBlock, source - if (store.history.currentPos === -1) { - source = store.imageConvertedHexBackup - } else { - source = store.imageConvertedHex - } - - for (let y = topLeftY; y <= bottomRightY; y++) { - for (let x = topLeftX; x <= bottomRightX; x++) { - if (x < store.imageWidth && y < store.imageHeight) { - hexBlock = source[y * store.imageWidth + x] - if (hexBlock > 0) { - let imageForCanvas = store.getBlockById(hexBlock).image - ctxMain.drawImage(imageForCanvas, - x * store.baseCellSize * store.scale.current + store.offset.x, - y * store.baseCellSize * store.scale.current + store.offset.y, - store.scale.current * store.baseCellSize, - store.scale.current * store.baseCellSize) - } - } - } - } - } - - function renderByCache() { - let visible = thisRoot._getCornersOfVisible() - let offsetX = store.offset.x > 0 ? store.offset.x : store.offset.x % (16 * store.scale.current) - let offsetY = store.offset.y > 0 ? store.offset.y : store.offset.y % (16 * store.scale.current) - let source - if (store.history.currentPos === -1) { - source = canvasInit - } else { - source = canvasTemp - } - ctxMain.drawImage(source, - visible.topLeftX * 16, - visible.topLeftY * 16, - (visible.bottomRightX - visible.topLeftX) * 16, - (visible.bottomRightY - visible.topLeftY) * 16, - offsetX, - offsetY, - (visible.bottomRightX - visible.topLeftX) * 16 * store.scale.current, - (visible.bottomRightY - visible.topLeftY) * 16 * store.scale.current) - } + store.groups = groups; + return; + }; + + this._convertPosToRelCoords = (pos, facing, offset) => { + let output, + offsetX = 0, + offsetY = 0, + offsetZ = 0; + const x = pos.x + 1, + y = store.imageHeight - pos.y - 1; + if (offset) { + (offsetX = offset.x || 0), + (offsetY = offset.y || 0), + (offsetZ = offset.z || 0); + } - if (store.scale.current > store.scale.cacheFrom) { - renderByLoop() - } else { - renderByCache() - } - } + switch (facing) { + case "east": + output = `~${x + offsetX} ~${y + offsetY} ~${offsetZ}`; + break; + case "south": + output = `~${offsetX} ~${y + offsetY} ~${x + offsetZ}`; + break; + case "west": + output = `~${offsetX - x} ~${y + offsetY} ~${offsetZ}`; + break; + case "north": + output = `~${offsetX} ~${y + offsetY} ~${offsetZ - x}`; + break; + } + return output.replace(new RegExp("~0", "g"), "~"); + }; + + this._convertGroupToCommand = (group, facing, offset) => { + let block = store.getBlockById(store.imageConvertedHex[group[0]]); + let gameId; + if (block === null) { + block = { + game_id: "minecraft:air", + }; + } + if (store.settings.minecraftVersion >= 13) { + gameId = block["game_id_13"]; + } else { + gameId = block.game_id; + } + if (block.axis) { + if (store.settings.minecraftVersion < 13 && block.version < 13) { + const dataAxis = parseInt(gameId.match(/\d$/)[0]); + if (facing === "west" || facing === "east") { + gameId = gameId.replace(/\d$/, dataAxis + 8); + } else if (facing === "north" || facing === "south") { + gameId = gameId.replace(/\d$/, dataAxis + 4); + } + } else { + if (facing === "west" || facing === "east") { + gameId = gameId + "[axis=z]"; + } else if (facing === "north" || facing === "south") { + gameId = gameId + "[axis=x]"; + } + } + } + const output = []; + group.forEach((item) => { + const pos = this._getPosFromInt(item); + output.push(this._convertPosToRelCoords(pos, facing, offset)); + }); + if (output.length === 1) { + return `setblock ${output[0]} ${gameId}`; + } else { + return `fill ${output[0]} ${output[1]} ${gameId}`; + } + }; + + this._setPosOnOpen = () => { + const canvasWidth = store.canvasWidth + store.interface.rulerSize; + const canvasHeight = store.canvasHeight - store.interface.rulerSize; + for (let i = store.scale.options.length - 1; i >= 0; i--) { + if ( + store.imageWidth * store.scale.options[i] * store.baseCellSize < + canvasWidth && + store.imageHeight * store.scale.options[i] * store.baseCellSize < + canvasHeight + ) { + store.scale.current = store.scale.options[i]; + break; + } + } + store.offset.x = + canvasWidth / 2 - + (store.imageWidth / 2) * store.scale.current * store.baseCellSize; + store.offset.y = + canvasHeight / 2 - + (store.imageHeight / 2) * store.scale.current * store.baseCellSize; + }; + + this._setEventListeners = function () { + let tempFakePaintedPoints = {}; + + function bresenhamLine(x0, y0, x1, y1, skipEveryN, callback) { + var dx = Math.abs(x1 - x0); + var dy = Math.abs(y1 - y0); + var sx = x0 < x1 ? 1 : -1; + var sy = y0 < y1 ? 1 : -1; + var err = dx - dy; + let i = 0; + + while (true) { + if (x0 == x1 && y0 == y1) { + callback(x0, y0); + break; + } + var e2 = 2 * err; + if (e2 > -dy) { + err -= dy; + x0 += sx; + } + if (e2 < dx) { + err += dx; + y0 += sy; + } + if (i % skipEveryN === 0) { + callback(x0, y0); + } + i++; + } + } - function renderOriginal() { - ctxMain.drawImage(store.originalImage.img, - store.originalImage.x, - store.originalImage.y, - store.originalImage.width, - store.originalImage.height, - store.offset.x, - store.offset.y, - store.imageWidth * store.baseCellSize * store.scale.current, - store.imageHeight * store.baseCellSize * store.scale.current) - } + function draw(x, y) { + let size = + store.interface.brushSize % 2 === 0 + ? store.interface.brushSize + 1 + : store.interface.brushSize; + let radius = Math.floor(size / 2); + let totalBlocks = Math.pow(size, 2); + let startPointX = x - radius; + let startPointY = y - radius; + + for (let i = 0; i < totalBlocks; i++) { + let xBlock = startPointX + (i % size); + let yBlock = startPointY + Math.floor(i / size); + if ( + xBlock < 0 || + xBlock >= store.imageWidth || + yBlock < 0 || + yBlock >= store.imageHeight + ) { + continue; + } + + if (store.interface.selection.start !== null) { + if ( + !thisRoot._checkIfInSelection( + thisRoot._getIntFromPos(xBlock, yBlock) + ) + ) { + continue; + } + } + + if (thisRoot.getTool() === "brush") { + const row = Math.ceil((i + 1) / size); + const col = (i % size) + 1; + const offsetX = Math.abs(col - radius - 1); + const offsetY = Math.abs(row - radius - 1); + if ( + Math.sqrt(Math.pow(offsetX, 2) + Math.pow(offsetY, 2)) > + radius + 0.5 + ) { + continue; + } + } + + thisRoot._fakePaint(xBlock, yBlock, thisRoot.getEyedrop()); + tempFakePaintedPoints[yBlock * store.imageWidth + xBlock] = + thisRoot.getEyedrop(); + } + } - function renderBackground() { - ctxMain.fillStyle = 'rgba(100, 100, 100, 0.45)' - ctxMain.fillRect(0, 0, store.canvasWidth, store.canvasHeight) - ctxMain.clearRect(store.offset.x, - store.offset.y, - store.imageWidth * store.baseCellSize * store.scale.current, - store.imageHeight * store.baseCellSize * store.scale.current) - } + canvasOverlay.addEventListener("mousemove", function (e) { + if (!thisRoot._checkIfReady()) { + return; + } + store.controls.mouse.localX = Math.round( + e.clientX - store.boundingRect.x - store.controls.mouse.startX + ); + store.controls.mouse.localY = Math.round( + e.clientY - store.boundingRect.y - store.controls.mouse.startY + ); + let xBlock = Math.floor( + (store.controls.mouse.localX - store.offset.x) / + (store.baseCellSize * store.scale.current) + ); + let yBlock = Math.floor( + (store.controls.mouse.localY - store.offset.y) / + (store.baseCellSize * store.scale.current) + ); + + if (store.controls.mouse.grabbed) { + store.offset.translate( + store.controls.mouse.localX + store.controls.mouse.oldOffsetX, + store.controls.mouse.localY + store.controls.mouse.oldOffsetY + ); + thisRoot._renderMainCanvas(); + thisRoot._renderOverlayCanvas(); + } + if ( + store.controls.mouse.leftClick && + (thisRoot.getTool() === "pencil" || thisRoot.getTool() === "brush") + ) { + //start the bresenham algorithm with the callback + const skipEveryN = Math.ceil(store.interface.brushSize / 2); + bresenhamLine( + store.controls.mouse.lastMouseX, + store.controls.mouse.lastMouseY, + xBlock, + yBlock, + skipEveryN, + draw + ); + + store.controls.mouse.lastMouseX = xBlock; + store.controls.mouse.lastMouseY = yBlock; + } + + if ( + store.controls.mouse.leftClick && + thisRoot.getTool() === "selection" + ) { + let tempX = xBlock; + let tempY = yBlock; + + if (xBlock < 0) { + tempX = 0; + } + if (yBlock < 0) { + tempY = 0; + } + if (xBlock >= store.imageWidth) { + tempX = store.imageWidth - 1; + } + if (yBlock >= store.imageHeight) { + tempY = store.imageHeight - 1; + } + + store.interface.selection.end = thisRoot._getIntFromPos(tempX, tempY); + } + thisRoot._renderOverlayCanvas(); + }); + + canvasOverlay.addEventListener("mousedown", function (e) { + if (!thisRoot._checkIfReady()) { + return; + } + if (e.which === 1) { + const tool = thisRoot.getTool(); + let xBlock = Math.floor( + (store.controls.mouse.localX - store.offset.x) / + (store.baseCellSize * store.scale.current) + ); + let yBlock = Math.floor( + (store.controls.mouse.localY - store.offset.y) / + (store.baseCellSize * store.scale.current) + ); + store.controls.mouse.leftClick = true; + + if (tool === "brush" || tool === "pencil" || tool === "bucket") { + if (store.history.currentPos === -1) { + ctxTemp.clearRect(0, 0, canvasTemp.width, canvasTemp.height); + ctxTemp.drawImage(canvasInit, 0, 0); + store.imageConvertedHex.set(store.imageConvertedHexBackup, 0); + } + } + + if (tool === "brush" || tool === "pencil") { + if (e.shiftKey) { + bresenhamLine( + store.controls.mouse.lastMouseX, + store.controls.mouse.lastMouseY, + xBlock, + yBlock, + 1, + draw + ); + } else { + draw(xBlock, yBlock); + } + } + + store.controls.mouse.lastMouseX = xBlock; + store.controls.mouse.lastMouseY = yBlock; + + if (tool === "eyedropper") { + let id = thisRoot._getBlockIdByPosition(xBlock, yBlock); + thisRoot.setEyedrop(id); + } + + if (tool === "selection") { + let tempX = xBlock; + let tempY = yBlock; + + if (xBlock < 0) { + tempX = 0; + } + if (yBlock < 0) { + tempY = 0; + } + if (xBlock >= store.imageWidth) { + tempX = store.imageWidth - 1; + } + if (yBlock >= store.imageHeight) { + tempY = store.imageHeight - 1; + } + store.interface.selection.start = thisRoot._getIntFromPos( + tempX, + tempY + ); + store.interface.selection.end = thisRoot._getIntFromPos(tempX, tempY); + } + + if (tool === "zoom") { + if (store.scale.scaleUp()) { + let x = Math.floor(store.controls.mouse.localX - store.offset.x); + let y = Math.floor(store.controls.mouse.localY - store.offset.y); + store.offset.translate(store.offset.x - x, store.offset.y - y); + thisRoot.render(); + } + } + + if (tool === "grab") { + store.controls.mouse.grabbed = true; + store.controls.mouse.startX = e.clientX - store.boundingRect.x; + store.controls.mouse.startY = e.clientY - store.boundingRect.y; + store.controls.mouse.oldOffsetX = store.offset.x; + store.controls.mouse.oldOffsetY = store.offset.y; + thisRoot._setCursor("grabbing"); + } + + if (tool === "bucket") { + thisRoot._bucket(xBlock, yBlock, thisRoot.getEyedrop()); + } + } + if (e.which === 2) { + e.preventDefault(); + store.controls.mouse.grabbed = true; + store.controls.mouse.startX = e.clientX - store.boundingRect.x; + store.controls.mouse.startY = e.clientY - store.boundingRect.y; + store.controls.mouse.oldOffsetX = store.offset.x; + store.controls.mouse.oldOffsetY = store.offset.y; + thisRoot._setCursor("grabbing"); + } + if (e.which === 3) { + if (thisRoot.getTool() === "zoom") { + e.preventDefault(); + if (store.scale.scaleDown()) { + let x = Math.floor(store.controls.mouse.localX - store.offset.x); + let y = Math.floor(store.controls.mouse.localY - store.offset.y); + store.offset.translate( + store.offset.x + x / 2, + store.offset.y + y / 2 + ); + thisRoot.render(); + } + } + } + }); + + document.addEventListener("mouseup", function (e) { + if (!thisRoot._checkIfReady()) { + return; + } + store.controls.mouse.grabbed = false; + store.controls.mouse.leftClick = false; + store.controls.mouse.startX = 0; + store.controls.mouse.startY = 0; + + if (!thisRoot._isEmptyObject(tempFakePaintedPoints)) { + const history = { + current: {}, + before: {}, + }; + for (let i in tempFakePaintedPoints) { + history.current[i] = tempFakePaintedPoints[i]; + history.before[i] = store.imageConvertedHex[i]; + store.imageConvertedHex[i] = tempFakePaintedPoints[i]; + } + thisRoot._addToHistory(thisRoot.getTool(), history); + tempFakePaintedPoints = {}; + } + + if (store.interface.selection.start === store.interface.selection.end) { + store.interface.selection.start = null; + store.interface.selection.end = null; + thisRoot._renderOverlayCanvas(); + } + + thisRoot._setCursor(store.interface.cursor); + }); + + canvasOverlay.addEventListener("wheel", (e) => { + if (!thisRoot._checkIfReady()) { + return; + } + if (store.controls.mouse.leftClick) { + return; + } + if (store.controls.mouse.grabbed) { + return; + } + e.preventDefault(); + if (e.deltaY < 0) { + if (store.scale.scaleUp()) { + let x = Math.floor(store.controls.mouse.localX - store.offset.x); + let y = Math.floor(store.controls.mouse.localY - store.offset.y); + store.offset.translate(store.offset.x - x, store.offset.y - y); + } + } + + if (e.deltaY > 0) { + if (store.scale.scaleDown()) { + let x = Math.floor(store.controls.mouse.localX - store.offset.x); + let y = Math.floor(store.controls.mouse.localY - store.offset.y); + store.offset.translate( + store.offset.x + x / 2, + store.offset.y + y / 2 + ); + } + } + thisRoot._renderMainCanvas(); + thisRoot._renderOverlayCanvas(); + }); + + canvasOverlay.addEventListener("contextmenu", (e) => { + e.preventDefault(); + }); + + window.addEventListener("resize", (e) => { + thisRoot.setBoundingRect(); + }); + + window.addEventListener("scroll", (e) => { + thisRoot.setBoundingRect(); + }); + }; + + this._renderOverlayCanvas = () => { + function renderRulers() { + let rulerFillStyle = "white", + fontStyle = "12px Helvetica"; + + let drawRulerEveryNBlocks; + switch (store.scale.current) { + case 4: + drawRulerEveryNBlocks = 10; + break; + case 2: + drawRulerEveryNBlocks = 10; + break; + case 1: + drawRulerEveryNBlocks = 10; + break; + case 0.5: + drawRulerEveryNBlocks = 10; + break; + case 0.25: + drawRulerEveryNBlocks = 50; + break; + case 0.125: + drawRulerEveryNBlocks = 50; + break; + case 0.0625: + drawRulerEveryNBlocks = 100; + break; + } + + if (store.imageHeight >= 1000) { + store.interface.rulerSize = 36; + } + + ctxOverlay.beginPath(); + ctxOverlay.globalAlpha = 1; + ctxOverlay.fillStyle = rulerFillStyle; + ctxOverlay.rect( + 0, + store.canvasHeight - store.interface.rulerSize, + store.canvasWidth, + store.interface.rulerSize + ); + ctxOverlay.fill(); + ctxOverlay.rect(0, 0, store.interface.rulerSize, store.canvasHeight); + ctxOverlay.fill(); + + ctxOverlay.font = fontStyle; + ctxOverlay.fillStyle = "black"; + ctxOverlay.strokeStyle = "black"; + ctxOverlay.lineWidth = 1; + // gets lastleft/lastright visible n/coordsX and draws everything between them + + for ( + let i = + Math.ceil( + -store.offset.x / store.scale.current / 16 / drawRulerEveryNBlocks + ) * drawRulerEveryNBlocks; + i <= + Math.floor( + (-store.offset.x + store.canvasWidth) / + store.scale.current / + 16 / + drawRulerEveryNBlocks + ) * + drawRulerEveryNBlocks; + i += drawRulerEveryNBlocks + ) { + ctxOverlay.beginPath(); + ctxOverlay.moveTo( + i * store.scale.current * 16 + store.offset.x + 0.5, + store.canvasHeight + ); + ctxOverlay.lineTo( + i * store.scale.current * 16 + store.offset.x + 0.5, + store.canvasHeight - store.interface.rulerSize + ); + ctxOverlay.stroke(); + ctxOverlay.fillText( + i, + i * store.scale.current * 16 + store.offset.x + 2, + store.boundingRect.height - 10 + ); + } + + for ( + let i = + Math.floor( + (store.offset.y / 16 / store.scale.current + store.imageHeight) / + drawRulerEveryNBlocks + ) * drawRulerEveryNBlocks; + i >= + Math.floor( + ((store.offset.y - store.canvasHeight) / 16 / store.scale.current + + store.imageHeight) / + drawRulerEveryNBlocks + ) * + drawRulerEveryNBlocks; + i -= drawRulerEveryNBlocks + ) { + ctxOverlay.beginPath(); + ctxOverlay.moveTo( + 0, + (store.imageHeight - i) * 16 * store.scale.current + + store.offset.y + + 0.5 + ); // + 0.5 for just the right thickness + ctxOverlay.lineTo( + store.interface.rulerSize, + (store.imageHeight - i) * 16 * store.scale.current + + store.offset.y + + 0.5 + ); + ctxOverlay.stroke(); + ctxOverlay.fillText( + i, + 1, + (store.imageHeight - i) * 16 * store.scale.current + + store.offset.y - + 3 + ); + } + + ctxOverlay.rect( + 0, + store.canvasHeight - store.interface.rulerSize, + store.interface.rulerSize, + store.interface.rulerSize + ); + ctxOverlay.fill(); + } - function renderGroups() { - if (store.debug.drawGroups[0] === undefined) { return } - const groups = store.debug.drawGroups[store.settings.drawGroupsCurrent] - groups.forEach((item) => { - if (item.length === 1) { - const pos = thisRoot._getPosFromInt(item[0]) - ctxMain.fillStyle = "red" - ctxMain.fillRect( - pos.x * store.baseCellSize * store.scale.current + store.offset.x, - pos.y * store.baseCellSize * store.scale.current + store.offset.y, - store.scale.current * store.baseCellSize, - store.scale.current * store.baseCellSize) - } else { - const startPos = thisRoot._getPosFromInt(item[0]) - const endPos = thisRoot._getPosFromInt(item[1]) - ctxMain.strokeRect( - startPos.x * store.baseCellSize * store.scale.current + store.offset.x, - endPos.y * store.baseCellSize * store.scale.current + store.offset.y, - (endPos.x - startPos.x + 1) * store.scale.current * store.baseCellSize, - (startPos.y - endPos.y + 1) * store.scale.current * store.baseCellSize) - } - }) - } - - const renderList = { - 'RENDER_MAIN': renderMain, - 'RENDER_ORIGINAL': renderOriginal, - 'RENDER_BACKGROUND': renderBackground, - 'RENDER_GROUPS': renderGroups - } + function renderGrid() { + let lineWidthBig = 2, + lineWidthSmallOpacity = 0, + strokeStyle = store.settings.gridColor; + + let mainGridLineEveryN; + switch (store.scale.current) { + case 4: + lineWidthBig = 3; + lineWidthSmallOpacity = 1; + mainGridLineEveryN = 10; + break; + case 2: + lineWidthBig = 3; + lineWidthSmallOpacity = 0.75; + mainGridLineEveryN = 10; + break; + case 1: + lineWidthSmallOpacity = 0.25; + mainGridLineEveryN = 10; + break; + case 0.5: + mainGridLineEveryN = 10; + break; + case 0.25: + mainGridLineEveryN = 50; + break; + case 0.125: + mainGridLineEveryN = 50; + break; + case 0.0625: + mainGridLineEveryN = 50; + break; + } + + ctxOverlay.lineWidth = lineWidthBig; + ctxOverlay.strokeStyle = strokeStyle; + + let topOfGridVertical = -store.offset.y >= 0 ? 0 : store.offset.y; + let bottomOfGridVertical = + store.offset.y + store.imageHeight * 16 * store.scale.current; + let topOfGridHorizontal = store.offset.x < 0 ? 0 : store.offset.x; + let bottomOfGridHorizontal = + store.offset.x + store.imageWidth * 16 * store.scale.current; + + if (bottomOfGridVertical > store.canvasHeight) { + bottomOfGridVertical = store.canvasHeight; + } + if (bottomOfGridHorizontal > store.canvasWidth) { + bottomOfGridHorizontal = store.canvasWidth; + } + + let startOfRenderGridHorizontal = Math.ceil( + (store.offset.y - store.canvasHeight) / 16 / store.scale.current + + store.imageHeight + ); + let endOfRenderGridHorizontal = Math.floor( + store.offset.y / 16 / store.scale.current + store.imageHeight + ); + + let startOfRenderGridVertical = Math.ceil( + -store.offset.x / 16 / store.scale.current + ); + let endOfRenderGridVertical = Math.floor( + (-store.offset.x + store.canvasWidth) / store.scale.current / 16 + ); + + if (startOfRenderGridHorizontal <= 0) { + startOfRenderGridHorizontal = 0; + } + if (endOfRenderGridHorizontal >= store.imageHeight) { + endOfRenderGridHorizontal = store.imageHeight; + } + + if (startOfRenderGridVertical <= 0) { + startOfRenderGridVertical = 0; + } + if (endOfRenderGridVertical >= store.imageWidth) { + endOfRenderGridVertical = store.imageWidth; + } + + for ( + let i = startOfRenderGridHorizontal + 1; + i <= endOfRenderGridHorizontal; + i += 1 + ) { + ctxOverlay.beginPath(); + ctxOverlay.globalAlpha = 1; + if (i % mainGridLineEveryN === 0 && i !== store.imageHeight) { + ctxOverlay.lineWidth = lineWidthBig; + ctxOverlay.moveTo( + topOfGridHorizontal, + (store.imageHeight - i) * store.scale.current * 16 + store.offset.y + ); + ctxOverlay.lineTo( + bottomOfGridHorizontal, + (store.imageHeight - i) * store.scale.current * 16 + store.offset.y + ); + } else if (lineWidthSmallOpacity > 0) { + ctxOverlay.globalAlpha = lineWidthSmallOpacity; + ctxOverlay.lineWidth = 1; + ctxOverlay.moveTo( + topOfGridHorizontal, + (store.imageHeight - i) * store.scale.current * 16 + + store.offset.y + + 0.5 + ); + ctxOverlay.lineTo( + bottomOfGridHorizontal, + (store.imageHeight - i) * store.scale.current * 16 + + store.offset.y + + 0.5 + ); + } + ctxOverlay.stroke(); + } + + for ( + let i = startOfRenderGridVertical + 1; + i <= endOfRenderGridVertical; + i += 1 + ) { + ctxOverlay.beginPath(); + ctxOverlay.globalAlpha = 1; + if (i % mainGridLineEveryN === 0 && i !== store.imageWidth) { + ctxOverlay.lineWidth = lineWidthBig; + ctxOverlay.moveTo( + i * store.scale.current * 16 + store.offset.x, + topOfGridVertical + ); + ctxOverlay.lineTo( + i * store.scale.current * 16 + store.offset.x, + bottomOfGridVertical + ); + } else if (lineWidthSmallOpacity > 0) { + ctxOverlay.globalAlpha = lineWidthSmallOpacity; + ctxOverlay.lineWidth = 1; + ctxOverlay.moveTo( + i * store.scale.current * 16 + store.offset.x, + topOfGridVertical + 0.5 + ); + ctxOverlay.lineTo( + i * store.scale.current * 16 + store.offset.x, + bottomOfGridVertical + 0.5 + ); + } + ctxOverlay.stroke(); + } + } - function renderHelper(list) { - ctxMain.clearRect(0, 0, store.canvasWidth, store.canvasHeight) - ctxMain.save() - for (let key in list) { - if (renderList[list[key]]) { renderList[list[key]]() } - ctxMain.restore() - } - ctxMain.globalAlpha = 1 - } + function renderBrush() { + let size = + store.interface.brushSize % 2 === 0 + ? store.interface.brushSize + 1 + : store.interface.brushSize; + let brushSize = size * store.baseCellSize * store.scale.current; + ctxOverlay.beginPath(); + + if (thisRoot.getTool() === "pencil") { + let xBlock = Math.floor( + (store.controls.mouse.localX - store.offset.x) / + (store.baseCellSize * store.scale.current) + ); + let yBlock = Math.floor( + (store.controls.mouse.localY - store.offset.y) / + (store.baseCellSize * store.scale.current) + ); + ctxOverlay.rect( + (xBlock - Math.floor(store.interface.brushSize / 2)) * + store.baseCellSize * + store.scale.current + + store.offset.x, + (yBlock - Math.floor(store.interface.brushSize / 2)) * + store.baseCellSize * + store.scale.current + + store.offset.y, + brushSize, + brushSize + ); + } + + if (thisRoot.getTool() === "brush") { + ctxOverlay.arc( + store.controls.mouse.localX, + store.controls.mouse.localY, + brushSize / 2, + 0, + 2 * Math.PI + ); + } + + ctxOverlay.globalAlpha = 1; + ctxOverlay.strokeStyle = "white"; + ctxOverlay.lineWidth = 3; + ctxOverlay.stroke(); + ctxOverlay.stroke(); + ctxOverlay.strokeStyle = "black"; + ctxOverlay.lineWidth = 1; + ctxOverlay.stroke(); + ctxOverlay.stroke(); + } - var t0 = performance.now() + function renderSelection() { + if ( + store.interface.selection.start === null || + store.interface.selection.end === null + ) { + return; + } + if (store.interface.selection.start === store.interface.selection.end) { + return; + } + + var startPos = thisRoot._getPosFromInt(store.interface.selection.start); + var endPos = thisRoot._getPosFromInt(store.interface.selection.end); + + const tempStart = { + x: startPos.x <= endPos.x ? startPos.x : endPos.x, + y: startPos.y <= endPos.y ? startPos.y : endPos.y, + }; + + const tempEnd = { + x: startPos.x > endPos.x ? startPos.x : endPos.x, + y: startPos.y > endPos.y ? startPos.y : endPos.y, + }; + + ctxOverlay.beginPath(); + ctxOverlay.rect( + tempStart.x * store.baseCellSize * store.scale.current + store.offset.x, + tempStart.y * store.baseCellSize * store.scale.current + store.offset.y, + (tempEnd.x - tempStart.x + 1) * + store.baseCellSize * + store.scale.current, + (tempEnd.y - tempStart.y + 1) * store.baseCellSize * store.scale.current + ); + if (store.scale.current > 0.125) { + ctxOverlay.lineWidth = 3; + } else { + ctxOverlay.lineWidth = 2; + } + ctxOverlay.strokeStyle = "white"; + ctxOverlay.stroke(); + ctxOverlay.stroke(); + ctxOverlay.setLineDash([7, 7]); + ctxOverlay.strokeStyle = "black"; + ctxOverlay.stroke(); + ctxOverlay.stroke(); + } - renderHelper([ - 'RENDER_BACKGROUND', - store.settings.showOriginal ? 'RENDER_ORIGINAL' : 'RENDER_MAIN', - store.settings.showDebugDrawGroups ? 'RENDER_GROUPS' : false, - ]) + const renderList = { + RENDER_BRUSH: renderBrush, + RENDER_RULERS: renderRulers, + RENDER_SELECTION: renderSelection, + RENDER_GRID: renderGrid, + }; + + function renderHelper(list) { + ctxOverlay.globalAlpha = 1; + ctxOverlay.save(); + ctxOverlay.clearRect(0, 0, store.canvasWidth, store.canvasHeight); + list.forEach((item) => { + if (renderList[item]) { + renderList[item](); + ctxOverlay.restore(); + } + }); } - /* PUBLIC METHODS */ - ////////////////////////////////////// + const renderArray = ["RENDER_SELECTION"]; - this.debugRenderAllPainted = () => { - store.debug.renderAllPainted = !store.debug.renderAllPainted - return store.debug.renderAllPainted + if (store.settings.showGrid) { + renderArray.push("RENDER_GRID"); } - this.getBlockInfoByMouseXY = (pageX, pageY) => { - let xBlock = (Math.floor((pageX - store.boundingRect.x - store.offset.x) / (store.baseCellSize * store.scale.current))) - let yBlock = (Math.floor((pageY - store.boundingRect.y - store.offset.y) / (store.baseCellSize * store.scale.current))) - if (store.interface.rulerSize > Math.floor(pageX - store.boundingRect.x) || - store.canvasHeight - store.interface.rulerSize < Math.floor(pageY - store.boundingRect.y)) { - return { - x: xBlock + 1, - y: store.imageHeight - yBlock, - info: null, - blockPos: null - } - } - return { - x: xBlock + 1, - y: store.imageHeight - yBlock, - info: store.getBlockById(this._getBlockIdByPosition(xBlock, yBlock)), - blockPos: xBlock + yBlock * store.imageWidth - } - } - - this.setImageSizes = (w, h) => { - store.imageWidth = parseInt(w) - store.imageHeight = parseInt(h) - canvasTemp.width = store.imageWidth * 16 - canvasTemp.height = store.imageHeight * 16 - ctxTemp.clearRect(0, 0, canvasTemp.width, canvasTemp.height) - canvasInit.width = store.imageWidth * 16 - canvasInit.height = store.imageHeight * 16 - ctxInit.clearRect(0, 0, canvasInit.width, canvasInit.height) - } - - this.setBoundingRect = () => { - store.boundingRect = $root.getBoundingClientRect() - store.canvasWidth = store.boundingRect.width - store.canvasHeight = store.boundingRect.height - canvasMain.width = store.canvasWidth - canvasMain.height = store.canvasHeight - canvasOverlay.width = store.canvasWidth - canvasOverlay.height = store.canvasHeight - ctxMain.imageSmoothingEnabled = false - this.render() - } - - this.setBounds = () => { - store.offset.bounds.x = store.canvasWidth - store.imageWidth / 1.75 - store.offset.bounds.y = store.canvasHeight - store.imageHeight / 1.75 - } - - this.setTool = (str) => { - store.interface.toolCurrent = str - switch (str) { - case 'selection': - store.interface.cursor = 'crosshair' - this._setCursor(store.interface.cursor) - break - case 'zoom': - store.interface.cursor = 'zoom' - this._setCursor(store.interface.cursor) - break - case 'grab': - store.interface.cursor = 'grab' - this._setCursor(store.interface.cursor) - break - case 'bucket': - store.interface.cursor = 'bucket' - this._setCursor(store.interface.cursor) - break - case 'eyedropper': - case 'clicker': - store.interface.cursor = 'eyedropper' - this._setCursor(store.interface.cursor) - break - case 'brush': - case 'pencil': - store.interface.cursor = '' - this._setCursor(store.interface.cursor) - break - } - this.render() + if ( + (this.getTool() === "pencil" || this.getTool() === "brush") && + !store.controls.mouse.grabbed + ) { + renderArray.push("RENDER_BRUSH"); } - this.getTool = () => { - return store.interface.toolCurrent + if (store.settings.showRulers) { + renderArray.push("RENDER_RULERS"); } - this.loadImageHex = (arr) => { - store.imageConvertedHex = arr - store.imageConvertedHexBackup = new Uint8Array(arr.length) - store.imageConvertedHexBackup.set(arr, 0) - this._createMainBlobImage(arr) + renderHelper(renderArray); + }; + + this._renderMainCanvas = () => { + function renderMain() { + function renderByLoop() { + const visibleCorners = thisRoot._getCornersOfVisible(); + const topLeftX = visibleCorners.topLeftX; + const topLeftY = visibleCorners.topLeftY; + const bottomRightX = visibleCorners.bottomRightX; + const bottomRightY = visibleCorners.bottomRightY; + let hexBlock, source; + if (store.history.currentPos === -1) { + source = store.imageConvertedHexBackup; + } else { + source = store.imageConvertedHex; + } + + for (let y = topLeftY; y <= bottomRightY; y++) { + for (let x = topLeftX; x <= bottomRightX; x++) { + if (x < store.imageWidth && y < store.imageHeight) { + hexBlock = source[y * store.imageWidth + x]; + if (hexBlock > 0) { + let imageForCanvas = store.getBlockById(hexBlock).image; + ctxMain.drawImage( + imageForCanvas, + x * store.baseCellSize * store.scale.current + store.offset.x, + y * store.baseCellSize * store.scale.current + store.offset.y, + store.scale.current * store.baseCellSize, + store.scale.current * store.baseCellSize + ); + } + } + } + } + } + + function renderByCache() { + let visible = thisRoot._getCornersOfVisible(); + let offsetX = + store.offset.x > 0 + ? store.offset.x + : store.offset.x % (16 * store.scale.current); + let offsetY = + store.offset.y > 0 + ? store.offset.y + : store.offset.y % (16 * store.scale.current); + let source; + if (store.history.currentPos === -1) { + source = canvasInit; + } else { + source = canvasTemp; + } + ctxMain.drawImage( + source, + visible.topLeftX * 16, + visible.topLeftY * 16, + (visible.bottomRightX - visible.topLeftX) * 16, + (visible.bottomRightY - visible.topLeftY) * 16, + offsetX, + offsetY, + (visible.bottomRightX - visible.topLeftX) * 16 * store.scale.current, + (visible.bottomRightY - visible.topLeftY) * 16 * store.scale.current + ); + } + + if (store.scale.current > store.scale.cacheFrom) { + renderByLoop(); + } else { + renderByCache(); + } } - this.setEyedrop = (id) => { - store.interface.eyedropCurrent = id + function renderOriginal() { + ctxMain.drawImage( + store.originalImage.img, + store.originalImage.x, + store.originalImage.y, + store.originalImage.width, + store.originalImage.height, + store.offset.x, + store.offset.y, + store.imageWidth * store.baseCellSize * store.scale.current, + store.imageHeight * store.baseCellSize * store.scale.current + ); } - this.getEyedrop = () => { - return store.interface.eyedropCurrent + function renderBackground() { + ctxMain.fillStyle = "rgba(100, 100, 100, 0.45)"; + ctxMain.fillRect(0, 0, store.canvasWidth, store.canvasHeight); + ctxMain.clearRect( + store.offset.x, + store.offset.y, + store.imageWidth * store.baseCellSize * store.scale.current, + store.imageHeight * store.baseCellSize * store.scale.current + ); } - this.setBrushSize = (int) => { - if (int < 1) { - store.interface.brushSize = 1 - } else if(int > store.settings.maxBrushSize) { - store.interface.brushSize = store.settings.maxBrushSize + function renderGroups() { + if (store.debug.drawGroups[0] === undefined) { + return; + } + const groups = store.debug.drawGroups[store.settings.drawGroupsCurrent]; + groups.forEach((item) => { + if (item.length === 1) { + const pos = thisRoot._getPosFromInt(item[0]); + ctxMain.fillStyle = "red"; + ctxMain.fillRect( + pos.x * store.baseCellSize * store.scale.current + store.offset.x, + pos.y * store.baseCellSize * store.scale.current + store.offset.y, + store.scale.current * store.baseCellSize, + store.scale.current * store.baseCellSize + ); } else { - store.interface.brushSize = int - } - this._renderOverlayCanvas() + const startPos = thisRoot._getPosFromInt(item[0]); + const endPos = thisRoot._getPosFromInt(item[1]); + ctxMain.strokeRect( + startPos.x * store.baseCellSize * store.scale.current + + store.offset.x, + endPos.y * store.baseCellSize * store.scale.current + + store.offset.y, + (endPos.x - startPos.x + 1) * + store.scale.current * + store.baseCellSize, + (startPos.y - endPos.y + 1) * + store.scale.current * + store.baseCellSize + ); + } + }); } - this.undoOnce = () => { - this._undoTo(store.history.currentPos - 1) + const renderList = { + RENDER_MAIN: renderMain, + RENDER_ORIGINAL: renderOriginal, + RENDER_BACKGROUND: renderBackground, + RENDER_GROUPS: renderGroups, + }; + + function renderHelper(list) { + ctxMain.clearRect(0, 0, store.canvasWidth, store.canvasHeight); + ctxMain.save(); + for (let key in list) { + if (renderList[list[key]]) { + renderList[list[key]](); + } + ctxMain.restore(); + } + ctxMain.globalAlpha = 1; } - this.undoTo = (pos) => { - this._undoTo(pos) + var t0 = performance.now(); + + renderHelper([ + "RENDER_BACKGROUND", + store.settings.showOriginal ? "RENDER_ORIGINAL" : "RENDER_MAIN", + store.settings.showDebugDrawGroups ? "RENDER_GROUPS" : false, + ]); + }; + + /* PUBLIC METHODS */ + ////////////////////////////////////// + + this.debugRenderAllPainted = () => { + store.debug.renderAllPainted = !store.debug.renderAllPainted; + return store.debug.renderAllPainted; + }; + + this.getBlockInfoByMouseXY = (pageX, pageY) => { + let xBlock = Math.floor( + (pageX - store.boundingRect.x - store.offset.x) / + (store.baseCellSize * store.scale.current) + ); + let yBlock = Math.floor( + (pageY - store.boundingRect.y - store.offset.y) / + (store.baseCellSize * store.scale.current) + ); + if ( + store.interface.rulerSize > Math.floor(pageX - store.boundingRect.x) || + store.canvasHeight - store.interface.rulerSize < + Math.floor(pageY - store.boundingRect.y) + ) { + return { + x: xBlock + 1, + y: store.imageHeight - yBlock, + info: null, + blockPos: null, + }; } - - this.getCurrentHistoryPos = () => { - return store.history.currentPos + return { + x: xBlock + 1, + y: store.imageHeight - yBlock, + info: store.getBlockById(this._getBlockIdByPosition(xBlock, yBlock)), + blockPos: xBlock + yBlock * store.imageWidth, + }; + }; + + this.setImageSizes = (w, h) => { + store.imageWidth = parseInt(w); + store.imageHeight = parseInt(h); + canvasTemp.width = store.imageWidth * 16; + canvasTemp.height = store.imageHeight * 16; + ctxTemp.clearRect(0, 0, canvasTemp.width, canvasTemp.height); + canvasInit.width = store.imageWidth * 16; + canvasInit.height = store.imageHeight * 16; + ctxInit.clearRect(0, 0, canvasInit.width, canvasInit.height); + }; + + this.setBoundingRect = () => { + store.boundingRect = $root.getBoundingClientRect(); + store.canvasWidth = store.boundingRect.width; + store.canvasHeight = store.boundingRect.height; + canvasMain.width = store.canvasWidth; + canvasMain.height = store.canvasHeight; + canvasOverlay.width = store.canvasWidth; + canvasOverlay.height = store.canvasHeight; + ctxMain.imageSmoothingEnabled = false; + this.render(); + }; + + this.setBounds = () => { + store.offset.bounds.x = store.canvasWidth - store.imageWidth / 1.75; + store.offset.bounds.y = store.canvasHeight - store.imageHeight / 1.75; + }; + + this.setTool = (str) => { + store.interface.toolCurrent = str; + switch (str) { + case "selection": + store.interface.cursor = "crosshair"; + this._setCursor(store.interface.cursor); + break; + case "zoom": + store.interface.cursor = "zoom"; + this._setCursor(store.interface.cursor); + break; + case "grab": + store.interface.cursor = "grab"; + this._setCursor(store.interface.cursor); + break; + case "bucket": + store.interface.cursor = "bucket"; + this._setCursor(store.interface.cursor); + break; + case "eyedropper": + case "clicker": + store.interface.cursor = "eyedropper"; + this._setCursor(store.interface.cursor); + break; + case "brush": + case "pencil": + store.interface.cursor = ""; + this._setCursor(store.interface.cursor); + break; } - - this.getCanvasLink = () => { - return canvasOverlay + this.render(); + }; + + this.getTool = () => { + return store.interface.toolCurrent; + }; + + this.loadImageHex = (arr) => { + store.imageConvertedHex = arr; + store.imageConvertedHexBackup = new Uint8Array(arr.length); + store.imageConvertedHexBackup.set(arr, 0); + this._createMainBlobImage(arr); + }; + + this.setEyedrop = (id) => { + store.interface.eyedropCurrent = id; + }; + + this.getEyedrop = () => { + return store.interface.eyedropCurrent; + }; + + this.setBrushSize = (int) => { + if (int < 1) { + store.interface.brushSize = 1; + } else if (int > store.settings.maxBrushSize) { + store.interface.brushSize = store.settings.maxBrushSize; + } else { + store.interface.brushSize = int; } - - this.setBlocks = (blocks) => { - blocks.forEach((item) => { - let temp = Object.assign({}, item) - temp.image = new Image() - temp.image.src = temp.src - delete temp.src - store.blocksDb.push(temp) - }) + this._renderOverlayCanvas(); + }; + + this.undoOnce = () => { + this._undoTo(store.history.currentPos - 1); + }; + + this.undoTo = (pos) => { + this._undoTo(pos); + }; + + this.getCurrentHistoryPos = () => { + return store.history.currentPos; + }; + + this.getCanvasLink = () => { + return canvasOverlay; + }; + + this.setBlocks = (blocks) => { + blocks.forEach((item) => { + let temp = Object.assign({}, item); + temp.image = new Image(); + temp.image.src = temp.src; + delete temp.src; + store.blocksDb.push(temp); + }); + }; + + this.replace = (target, replace) => { + let startBlock = + store.interface.selection.start === null + ? 0 + : store.interface.selection.start; + let endBlock = + store.interface.selection.end === null + ? store.imageConvertedHex.length - 1 + : store.interface.selection.end; + + if (store.history.currentPos === -1) { + ctxTemp.clearRect(0, 0, canvasTemp.width, canvasTemp.height); + ctxTemp.drawImage(canvasInit, 0, 0); + store.imageConvertedHex.set(store.imageConvertedHexBackup, 0); } - this.replace = (target, replace) => { - let startBlock = store.interface.selection.start === null ? 0 : store.interface.selection.start - let endBlock = store.interface.selection.end === null ? store.imageConvertedHex.length - 1 : store.interface.selection.end - - if (store.history.currentPos === -1) { - ctxTemp.clearRect(0, 0, canvasTemp.width, canvasTemp.height) - ctxTemp.drawImage(canvasInit, 0, 0) - store.imageConvertedHex.set(store.imageConvertedHexBackup, 0) - } - - const history = { - current: {}, - before: {} - } - for (let i = startBlock; i <= endBlock; i++) { - if (store.interface.selection.start !== null && store.interface.selection.end !== null) { - if (!this._checkIfInSelection(i)) { continue } - } - - if (store.imageConvertedHex[i] === target) { - let xBlock = i % store.imageWidth - let yBlock = Math.floor(i / store.imageWidth) - history.before[i] = store.imageConvertedHex[i] - history.current[i] = replace - store.imageConvertedHex[i] = replace - thisRoot._fakePaint(xBlock, yBlock, replace) - } - } - - this._addToHistory('replace', history) - return Object.keys(history.current).length - } - - this.setSettingsValue = (key, value) => { - store.settings[key] = value - } - - this.reset = () => { - store.imageConvertedHex = null - store.offset.x = 0 - store.offset.y = 0 - store.scale.current = 0.0625 - store.history.log = [] - store.history.currentPos = -1 - store.history.lastMaxPos = -1 - store.interface.eyedropCurrent = 1 - store.interface.toolCurrent = 'pencil' - store.interface.brushSize = 9 - store.interface.selection.start = null - store.interface.selection.end = null - store.settings.showRulers = true - store.settings.showGrid = false - store.settings.showOriginal = false - store.settings.showDebugDrawGroups = false - store.settings.gridColor = '#ff4778' - this.resetGroups() - } - - this.open = (uint8Arr) => { - this.reset() - this._setPosOnOpen() - this.loadImageHex(uint8Arr) - this.render() - } - - this.save = (facing) => { - const schem = new SchematicsHelper() - const blockIds = [] - const dataIds = [] - let width, length, offsetZ, offsetX - - for (let i = 0; i < store.imageConvertedHex.length; i++) { - let int - if (facing === 'south' || facing === 'east') { - int = (store.imageHeight - Math.ceil((i + 1) / store.imageWidth)) * store.imageWidth + (i % store.imageWidth) - } else if (facing === 'north' || facing === 'west') { - int = store.imageConvertedHex.length - i - 1 - } - const pos = this._getPosFromInt(int) - const block = store.getBlockById(this._getBlockIdByPosition(pos.x, pos.y)) - if (block) { - let dataId = block.data_id - - if (block.axis) { - if (facing === 'west' || facing === 'east') { - dataId += 8 - } else if (facing === 'north' || facing === 'south') { - dataId += 4 - } - } - - blockIds.push(block.block_id) - dataIds.push(dataId) - } else { - blockIds.push(0) - dataIds.push(0) - } - - } - - switch (facing) { - case 'south': - width = 1 - length = store.imageWidth - offsetX = 0 - offsetZ = 1 - break - case 'east': - width = store.imageWidth - length = 1 - offsetX = 1 - offsetZ = 0 - break - case 'north': - width = 1 - length = store.imageWidth - offsetX = 0 - offsetZ = -store.imageWidth - break - case 'west': - width = store.imageWidth - length = 1 - offsetX = -store.imageWidth - offsetZ = 0 - break - } + const history = { + current: {}, + before: {}, + }; + for (let i = startBlock; i <= endBlock; i++) { + if ( + store.interface.selection.start !== null && + store.interface.selection.end !== null + ) { + if (!this._checkIfInSelection(i)) { + continue; + } + } + + if (store.imageConvertedHex[i] === target) { + let xBlock = i % store.imageWidth; + let yBlock = Math.floor(i / store.imageWidth); + history.before[i] = store.imageConvertedHex[i]; + history.current[i] = replace; + store.imageConvertedHex[i] = replace; + thisRoot._fakePaint(xBlock, yBlock, replace); + } + } - var tag = { - Blocks: { type: 'byteArray', value: blockIds }, - Data: { type: 'byteArray', value: dataIds }, - Height: { type: 'short', value: store.imageHeight }, - Length: { type: 'short', value: length }, - Materials: { type: 'string', value: 'Alpha' }, - TileEntities: { type: 'list', value: { - type: 'compound', - value: [] - } - }, - WEOffsetX: { type: 'int', value: offsetX }, - WEOffsetY: { type: 'int', value: 0 }, - WEOffsetZ: { type: 'int', value: offsetZ }, - WEOriginX: { type: 'int', value: 0 }, - WEOriginY: { type: 'int', value: 0 }, - WEOriginZ: { type: 'int', value: 0 }, - Width: { type: 'short', value: width } - } + this._addToHistory("replace", history); + return Object.keys(history.current).length; + }; + + this.setSettingsValue = (key, value) => { + store.settings[key] = value; + }; + + this.reset = () => { + store.imageConvertedHex = null; + store.offset.x = 0; + store.offset.y = 0; + store.scale.current = 0.0625; + store.history.log = []; + store.history.currentPos = -1; + store.history.lastMaxPos = -1; + store.interface.eyedropCurrent = 1; + store.interface.toolCurrent = "pencil"; + store.interface.brushSize = 9; + store.interface.selection.start = null; + store.interface.selection.end = null; + store.settings.showRulers = true; + store.settings.showGrid = false; + store.settings.showOriginal = false; + store.settings.showDebugDrawGroups = false; + store.settings.gridColor = "#ff4778"; + this.resetGroups(); + }; + + this.open = (uint8Arr) => { + this.reset(); + this._setPosOnOpen(); + this.loadImageHex(uint8Arr); + this.render(); + }; + + this.save = (facing) => { + const schem = new SchematicsHelper(); + const blockIds = []; + const dataIds = []; + let width, length, offsetZ, offsetX; + + for (let i = 0; i < store.imageConvertedHex.length; i++) { + let int; + if (facing === "south" || facing === "east") { + int = + (store.imageHeight - Math.ceil((i + 1) / store.imageWidth)) * + store.imageWidth + + (i % store.imageWidth); + } else if (facing === "north" || facing === "west") { + int = store.imageConvertedHex.length - i - 1; + } + const pos = this._getPosFromInt(int); + const block = store.getBlockById( + this._getBlockIdByPosition(pos.x, pos.y) + ); + if (block) { + let dataId = block.data_id; - const blob = new Blob([schem.encode(tag)], {type : 'text/plain'}) - return _URL.createObjectURL(blob) + if (block.axis) { + if (facing === "west" || facing === "east") { + dataId += 8; + } else if (facing === "north" || facing === "south") { + dataId += 4; + } + } + + blockIds.push(block.block_id); + dataIds.push(dataId); + } else { + blockIds.push(0); + dataIds.push(0); + } } - this.resetGroups = () => { - store.groups = null + switch (facing) { + case "south": + width = 1; + length = store.imageWidth; + offsetX = 0; + offsetZ = 1; + break; + case "east": + width = store.imageWidth; + length = 1; + offsetX = 1; + offsetZ = 0; + break; + case "north": + width = 1; + length = store.imageWidth; + offsetX = 0; + offsetZ = -store.imageWidth; + break; + case "west": + width = store.imageWidth; + length = 1; + offsetX = -store.imageWidth; + offsetZ = 0; + break; } - this.setOriginalImage = (obj) => { - store.originalImage.img.src = obj.src - store.originalImage.x = obj.x - store.originalImage.y = obj.y - store.originalImage.width = obj.width - store.originalImage.height = obj.height + var tag = { + Blocks: { type: "byteArray", value: blockIds }, + Data: { type: "byteArray", value: dataIds }, + Height: { type: "short", value: store.imageHeight }, + Length: { type: "short", value: length }, + Materials: { type: "string", value: "Alpha" }, + TileEntities: { + type: "list", + value: { + type: "compound", + value: [], + }, + }, + WEOffsetX: { type: "int", value: offsetX }, + WEOffsetY: { type: "int", value: 0 }, + WEOffsetZ: { type: "int", value: offsetZ }, + WEOriginX: { type: "int", value: 0 }, + WEOriginY: { type: "int", value: 0 }, + WEOriginZ: { type: "int", value: 0 }, + Width: { type: "short", value: width }, + }; + + const blob = new Blob([schem.encode(tag)], { type: "text/plain" }); + return _URL.createObjectURL(blob); + }; + + this.resetGroups = () => { + store.groups = null; + }; + + this.setOriginalImage = (obj) => { + store.originalImage.img.src = obj.src; + store.originalImage.x = obj.x; + store.originalImage.y = obj.y; + store.originalImage.width = obj.width; + store.originalImage.height = obj.height; + }; + + this.convertAsRaw = (facing) => { + if (store.groups === null) { + this._convertToGroups(); } - this.convertAsRaw = (facing) => { - if (store.groups === null) { - this._convertToGroups() - } + let output = []; + store.groups.forEach((item) => { + output.push("/" + this._convertGroupToCommand(item, facing)); + }); - let output = [] - store.groups.forEach((item) => { - output.push('/' + this._convertGroupToCommand(item, facing)) - }) + return output; + }; - return output + this.convertAsMcfunction = (facing) => { + if (store.groups === null) { + this._convertToGroups(); } - this.convertAsMcfunction = (facing) => { - if (store.groups === null) { - this._convertToGroups() - } + let output = ""; + store.groups.forEach((item) => { + output += this._convertGroupToCommand(item, facing) + "\n"; + }); - let output = "" - store.groups.forEach((item) => { - output += this._convertGroupToCommand(item, facing) + "\n" - }) + return output; + }; - return output + this.convertAsCommandBlock = (facing) => { + if (store.groups === null) { + this._convertToGroups(); } - this.convertAsCommandBlock = (facing) => { - if (store.groups === null) { - this._convertToGroups() - } - - store.debug.drawGroups = [] - - const maxLength = 31390 - 150 - const outputArr = [] - let debugDrawGroup = [] - let commandTemplate, outsideTemplate, passengerTemplate, commandBlockCartId, fallingBlockId, killCommand - let tempStr - - switch (store.settings.minecraftVersion) { - case 9: - case 10: - fallingBlockId = 'FallingSand' - commandBlockCartId = 'MinecartCommandBlock' - killCommand = `kill @e[type=${commandBlockCartId},r=2]` - break - case 11: - case 12: - fallingBlockId = 'falling_block' - commandBlockCartId = 'commandblock_minecart' - killCommand = `kill @e[type=${commandBlockCartId},r=2]` - break - case 13: - fallingBlockId = 'falling_block' - commandBlockCartId = 'command_block_minecart' - killCommand = `kill @e[type=${commandBlockCartId},distance=..2]` - break - } + store.debug.drawGroups = []; + + const maxLength = 31390 - 150; + const outputArr = []; + let debugDrawGroup = []; + let commandTemplate, + outsideTemplate, + passengerTemplate, + commandBlockCartId, + fallingBlockId, + killCommand; + let tempStr; + + switch (store.settings.minecraftVersion) { + case 9: + case 10: + fallingBlockId = "FallingSand"; + commandBlockCartId = "MinecartCommandBlock"; + killCommand = `kill @e[type=${commandBlockCartId},r=2]`; + break; + case 11: + case 12: + fallingBlockId = "falling_block"; + commandBlockCartId = "commandblock_minecart"; + killCommand = `kill @e[type=${commandBlockCartId},r=2]`; + break; + case 13: + fallingBlockId = "falling_block"; + commandBlockCartId = "command_block_minecart"; + killCommand = `kill @e[type=${commandBlockCartId},distance=..2]`; + break; + } - commandTemplate = `summon ${fallingBlockId} ~ ~1 ~ {Time:1,Passengers:[%passenger%]}` + commandTemplate = `summon ${fallingBlockId} ~ ~1 ~ {Time:1,Passengers:[%passenger%]}`; - passengerTemplate = ` + passengerTemplate = ` { id: "${commandBlockCartId}", Command: "%command%", Passengers: [%passenger%] } - ` - tempStr = passengerTemplate.replace(/\n|\s/g, '') - - for (let i = 0; i <= store.groups.length; i++) { - if (i === store.groups.length) { - tempStr = tempStr.replace('%command%', killCommand) - .replace(',Passengers:[%passenger%]', '') - outputArr.push(commandTemplate.replace('%passenger%', tempStr)) - store.debug.drawGroups.push(debugDrawGroup) - debugDrawGroup = [] - continue - } - - tempStr = tempStr.replace('%command%', this._convertGroupToCommand(store.groups[i], facing, {y: -1})) - .replace('%passenger%', passengerTemplate.replace(/\n|\s/g, '')) - debugDrawGroup.push(store.groups[i]) - - if (tempStr.length > maxLength) { - tempStr = tempStr.replace('%command%', killCommand) - .replace(',Passengers:[%passenger%]', '') - outputArr.push(commandTemplate.replace('%passenger%', tempStr)) - tempStr = passengerTemplate.replace(/\n|\s/g, '') - store.debug.drawGroups.push(debugDrawGroup) - debugDrawGroup = [] - } - } - return outputArr - } - - this.getQuantityOfBlocks = () => { - const output = [] - const temp = {} - const arr = store.history.currentPos === -1 ? store.imageConvertedHexBackup : store.imageConvertedHex - arr.forEach((item) => { - if (item > 0) { - if (temp[item]) { - temp[item]++ - } else { - temp[item] = 1 - } - } - }) - - for (let key in temp) { - output.push({ - id: key, - quant: temp[key] - }) - } - - output.sort((a,b) => { - return b.quant - a.quant - }) - - return output + `; + tempStr = passengerTemplate.replace(/\n|\s/g, ""); + + for (let i = 0; i <= store.groups.length; i++) { + if (i === store.groups.length) { + tempStr = tempStr + .replace("%command%", killCommand) + .replace(",Passengers:[%passenger%]", ""); + outputArr.push(commandTemplate.replace("%passenger%", tempStr)); + store.debug.drawGroups.push(debugDrawGroup); + debugDrawGroup = []; + continue; + } + + tempStr = tempStr + .replace( + "%command%", + this._convertGroupToCommand(store.groups[i], facing, { y: -1 }) + ) + .replace("%passenger%", passengerTemplate.replace(/\n|\s/g, "")); + debugDrawGroup.push(store.groups[i]); + + if (tempStr.length > maxLength) { + tempStr = tempStr + .replace("%command%", killCommand) + .replace(",Passengers:[%passenger%]", ""); + outputArr.push(commandTemplate.replace("%passenger%", tempStr)); + tempStr = passengerTemplate.replace(/\n|\s/g, ""); + store.debug.drawGroups.push(debugDrawGroup); + debugDrawGroup = []; + } } - - this.getCommandToDelete = (facing) => { - const numOfComs = Math.ceil(store.imageWidth * store.imageHeight / 32768) - const output = [] - for (let i = numOfComs; i >= 1; i--) { - const tempGroup = [ - (Math.ceil(i * (store.imageHeight / numOfComs)) - 1) * store.imageWidth, - Math.floor((i - 1) * (store.imageHeight / numOfComs) + 1) * store.imageWidth - 1, - ] - output.push(this._convertGroupToCommand(tempGroup, facing).replace(/minecraft\:.*/, 'minecraft:air')) + return outputArr; + }; + + this.getQuantityOfBlocks = () => { + const output = []; + const temp = {}; + const arr = + store.history.currentPos === -1 + ? store.imageConvertedHexBackup + : store.imageConvertedHex; + arr.forEach((item) => { + if (item > 0) { + if (temp[item]) { + temp[item]++; + } else { + temp[item] = 1; } - return output - } + } + }); - this.moveOffset = (x, y) => { - store.offset.translate(store.offset.x + x * store.scale.current * store.baseCellSize, store.offset.y + y * store.scale.current * store.baseCellSize) - this.render() + for (let key in temp) { + output.push({ + id: key, + quant: temp[key], + }); } - this.render = () => { - this._renderMainCanvas() - this._renderOverlayCanvas() + output.sort((a, b) => { + return b.quant - a.quant; + }); + + return output; + }; + + this.getCommandToDelete = (facing) => { + const numOfComs = Math.ceil((store.imageWidth * store.imageHeight) / 32768); + const output = []; + for (let i = numOfComs; i >= 1; i--) { + const tempGroup = [ + (Math.ceil(i * (store.imageHeight / numOfComs)) - 1) * store.imageWidth, + Math.floor((i - 1) * (store.imageHeight / numOfComs) + 1) * + store.imageWidth - + 1, + ]; + output.push( + this._convertGroupToCommand(tempGroup, facing).replace( + /minecraft\:.*/, + "minecraft:air" + ) + ); } - - this.init = function(rootNode) { - if (store.initFlag) { - this.reset() - return - } - store.initFlag = true - $root = rootNode - $root.style.position = 'relative' - canvasMain.style.position = 'absolute' - canvasOverlay.style.position = 'absolute' - this.setBoundingRect() - this.setBounds() - $root.appendChild(canvasMain) - $root.appendChild(canvasOverlay) - - ctxMain.imageSmoothingEnabled = false - this._setEventListeners() + return output; + }; + + this.moveOffset = (x, y) => { + store.offset.translate( + store.offset.x + x * store.scale.current * store.baseCellSize, + store.offset.y + y * store.scale.current * store.baseCellSize + ); + this.render(); + }; + + this.render = () => { + this._renderMainCanvas(); + this._renderOverlayCanvas(); + }; + + this.init = function (rootNode) { + if (store.initFlag) { + this.reset(); + return; } + store.initFlag = true; + $root = rootNode; + $root.style.position = "relative"; + canvasMain.style.position = "absolute"; + canvasOverlay.style.position = "absolute"; + this.setBoundingRect(); + this.setBounds(); + $root.appendChild(canvasMain); + $root.appendChild(canvasOverlay); + + ctxMain.imageSmoothingEnabled = false; + this._setEventListeners(); + }; } -export default MineartCanvas +export default MineartCanvas; diff --git a/app/models/convert.js b/app/models/convert.js index cffae4b..2bb00e4 100644 --- a/app/models/convert.js +++ b/app/models/convert.js @@ -1,44 +1,46 @@ -const blocks = require('../../static/baked_blocks.json') +const blocks = require("../../static/baked_blocks.json"); -onmessage = function(e) { - const blocksCopy = Object.assign({}, blocks) +onmessage = function (e) { + const blocksCopy = Object.assign({}, blocks); - e.data.exclude.forEach((item) => { - delete blocksCopy[item - 1] - }) - - const imageData = e.data.imgData + e.data.exclude.forEach((item) => { + delete blocksCopy[item - 1]; + }); - if (imageData.constructor.name != 'Uint8ClampedArray') { - console.error('not uint8!!!') - return - } + const imageData = e.data.imgData; - let output = new Uint8ClampedArray(imageData.length / 4) - - for (let i = 0; i < imageData.length; i += 4) { - let pixelRgb = { - red: imageData[i], - green: imageData[i + 1], - blue: imageData[i + 2], - alpha: imageData[i + 3] - } - if (pixelRgb.alpha > 70) { - let temp = false - for (let key in blocksCopy) { - const item = blocksCopy[key] - let dev = Math.abs(pixelRgb.red - item.red) + Math.abs(pixelRgb.green - item.green) + Math.abs(pixelRgb.blue - item.blue) - if (!temp || dev < temp.deviation) { - temp = item - temp.deviation = dev - } - } - output[i / 4] = temp.id - } else { - output[i / 4] = 0 - } + if (imageData.constructor.name != "Uint8ClampedArray") { + console.error("not uint8!!!"); + return; + } + let output = new Uint8ClampedArray(imageData.length / 4); + + for (let i = 0; i < imageData.length; i += 4) { + let pixelRgb = { + red: imageData[i], + green: imageData[i + 1], + blue: imageData[i + 2], + alpha: imageData[i + 3], + }; + if (pixelRgb.alpha > 70) { + let temp = false; + for (let key in blocksCopy) { + const item = blocksCopy[key]; + let dev = + Math.abs(pixelRgb.red - item.red) + + Math.abs(pixelRgb.green - item.green) + + Math.abs(pixelRgb.blue - item.blue); + if (!temp || dev < temp.deviation) { + temp = item; + temp.deviation = dev; + } + } + output[i / 4] = temp.id; + } else { + output[i / 4] = 0; } + } - postMessage(output) -} + postMessage(output); +}; diff --git a/app/models/counter.js b/app/models/counter.js index 2e876cd..4b86e5a 100644 --- a/app/models/counter.js +++ b/app/models/counter.js @@ -1,88 +1,94 @@ function Counter(node) { - let initFlag = false - let $root - let current = 1 - let max = 1 - let callback = null - const template = ` + let initFlag = false; + let $root; + let current = 1; + let max = 1; + let callback = null; + const template = ` - ` - const nodes = { - doubleLeft: null, - left: null, - input: null, - span: null, - right: null, - doubleRight: null - } + `; + const nodes = { + doubleLeft: null, + left: null, + input: null, + span: null, + right: null, + doubleRight: null, + }; - this._setSpan = () => { - nodes.span.innerHTML = `out of ${max}` - } + this._setSpan = () => { + nodes.span.innerHTML = `out of ${max}`; + }; - this._setEventListeners = () => { - nodes.doubleLeft.onclick = () => { - this.setValue(1) - } + this._setEventListeners = () => { + nodes.doubleLeft.onclick = () => { + this.setValue(1); + }; - nodes.left.onclick = () => { - this.setValue(current - 1) - } + nodes.left.onclick = () => { + this.setValue(current - 1); + }; - nodes.input.onchange = () => { - this.setValue(nodes.input.value) - } + nodes.input.onchange = () => { + this.setValue(nodes.input.value); + }; - nodes.right.onclick = () => { - this.setValue(current + 1) - } + nodes.right.onclick = () => { + this.setValue(current + 1); + }; - nodes.doubleRight.onclick = () => { - this.setValue(max) - } - } + nodes.doubleRight.onclick = () => { + this.setValue(max); + }; + }; - this.setValue = (int) => { - current = int - if (int < 1) { current = 1 } - if (int > max) { current = max } - nodes.input.value = current - if (callback) { - callback(current) - } - } + this.setValue = (int) => { + current = int; + if (int < 1) { + current = 1; + } + if (int > max) { + current = max; + } + nodes.input.value = current; + if (callback) { + callback(current); + } + }; - this.setMax = (int) => { - max = int - if (current > max) { - this.setValue(int) - } - this._setSpan() - } + this.setMax = (int) => { + max = int; + if (current > max) { + this.setValue(int); + } + this._setSpan(); + }; - this.setCallback = (func) => { - callback = func - } + this.setCallback = (func) => { + callback = func; + }; - this.init = (node) => { - if (initFlag === true) { return } - initFlag = true - $root = node - $root.innerHTML = template - nodes.doubleLeft = $root.querySelector('i.fa-angle-double-left') - nodes.left = $root.querySelector('i.fa-angle-left') - nodes.input = $root.querySelector('input.input') - nodes.span = $root.querySelector('span.counter-span') - nodes.right = $root.querySelector('i.fa-angle-right') - nodes.doubleRight = $root.querySelector('i.fa-angle-double-right') - this._setEventListeners() - } + this.init = (node) => { + if (initFlag === true) { + return; + } + initFlag = true; + $root = node; + $root.innerHTML = template; + nodes.doubleLeft = $root.querySelector("i.fa-angle-double-left"); + nodes.left = $root.querySelector("i.fa-angle-left"); + nodes.input = $root.querySelector("input.input"); + nodes.span = $root.querySelector("span.counter-span"); + nodes.right = $root.querySelector("i.fa-angle-right"); + nodes.doubleRight = $root.querySelector("i.fa-angle-double-right"); + this._setEventListeners(); + }; - if (node) { - this.init(node) - } + if (node) { + this.init(node); + } } -export default Counter +export default Counter; diff --git a/app/models/schematics.js b/app/models/schematics.js index 7d28251..b80df3f 100644 --- a/app/models/schematics.js +++ b/app/models/schematics.js @@ -1,30 +1,32 @@ -import Zlib from 'zlibjs/bin/zlib_and_gzip.min.js' -import Nbt from 'nbt' +import Zlib from "zlibjs/bin/zlib_and_gzip.min.js"; +import Nbt from "nbt"; function SchematicsHelper() { - this.Zlib = Zlib.Zlib + this.Zlib = Zlib.Zlib; - this.encode = (obj) => { - const writer = new Nbt.Writer() - writer.compound(obj) - const compound = new Uint8Array(writer.getData()) - const compoundName = 'Schematic' - const output = new Uint8Array(3 + compoundName.length + compound.byteLength) - output[0] = 10 - output[2] = compoundName.length - compoundName.split('').forEach((i, k) => { - output[k + 3] = i.charCodeAt(0) - }) - output.set(compound, 3 + compoundName.length) - var gzip = new this.Zlib.Gzip(output) - var compressed = gzip.compress() - return compressed - } + this.encode = (obj) => { + const writer = new Nbt.Writer(); + writer.compound(obj); + const compound = new Uint8Array(writer.getData()); + const compoundName = "Schematic"; + const output = new Uint8Array( + 3 + compoundName.length + compound.byteLength + ); + output[0] = 10; + output[2] = compoundName.length; + compoundName.split("").forEach((i, k) => { + output[k + 3] = i.charCodeAt(0); + }); + output.set(compound, 3 + compoundName.length); + var gzip = new this.Zlib.Gzip(output); + var compressed = gzip.compress(); + return compressed; + }; - this.decode = (arr, callback) => { - const gzip = new this.Zlib.Gunzip(arr) - Nbt.parse(arr, callback) - } + this.decode = (arr, callback) => { + const gzip = new this.Zlib.Gunzip(arr); + Nbt.parse(arr, callback); + }; } -export default SchematicsHelper \ No newline at end of file +export default SchematicsHelper; diff --git a/app/models/svgCroppy.js b/app/models/svgCroppy.js index c6bae3b..fa37592 100644 --- a/app/models/svgCroppy.js +++ b/app/models/svgCroppy.js @@ -1,431 +1,650 @@ function SvgCroppy() { - function setAttr(node, obj) { - for (let key in obj) { - node.setAttribute(key, obj[key]) - } + function setAttr(node, obj) { + for (let key in obj) { + node.setAttribute(key, obj[key]); } - - const store = { - style: { - cornerWidth: 20, - cornerHeight: 20 - }, - posData: { - boundingRect: null, - selectRect: { - width: 50, - height: 50, - offsetX: 0, - offsetY: 0, - minWidth: 10, - minHeight: 10 - } - }, - nodes: { - root: null, - wrapper: null, - svg: null - }, - svgNodes: { - backgroundRect: null, - selectRect: null, - selectRectMask: null, - cornerLeftTop: null, - cornerRightTop: null, - cornerLeftBottom: null, - cornerRightBottom: null, - barTop: null, - barLeft: null, - barRight: null, - barBottom: null - }, - events: { - transformed: new Event('croppytransformed') - } + } + + const store = { + style: { + cornerWidth: 20, + cornerHeight: 20, + }, + posData: { + boundingRect: null, + selectRect: { + width: 50, + height: 50, + offsetX: 0, + offsetY: 0, + minWidth: 10, + minHeight: 10, + }, + }, + nodes: { + root: null, + wrapper: null, + svg: null, + }, + svgNodes: { + backgroundRect: null, + selectRect: null, + selectRectMask: null, + cornerLeftTop: null, + cornerRightTop: null, + cornerLeftBottom: null, + cornerRightBottom: null, + barTop: null, + barLeft: null, + barRight: null, + barBottom: null, + }, + events: { + transformed: new Event("croppytransformed"), + }, + }; + + var initFlag = false; + + this._storeSetNode = (key, node) => { + if (store.nodes[key] === undefined) { + throw new Error("[SvgCroppy] Unknown key in store.nodes"); } + store.nodes[key] = node; + return node; + }; - var initFlag = false + this._storeGetNode = (key) => { + return store.nodes[key]; + }; - this._storeSetNode = (key, node) => { - if (store.nodes[key] === undefined) { - throw new Error('[SvgCroppy] Unknown key in store.nodes') - } - store.nodes[key] = node - return node - } - - this._storeGetNode = (key) => { - return store.nodes[key] + this._storeSetSvgNode = (key, node) => { + if (store.svgNodes[key] === undefined) { + throw new Error("[SvgCroppy] Unknown key in store.svgNodes"); } - - this._storeSetSvgNode = (key, node) => { - if (store.svgNodes[key] === undefined) { - throw new Error('[SvgCroppy] Unknown key in store.svgNodes') + store.svgNodes[key] = node; + return node; + }; + + this._storeGetSvgNode = (key) => { + return store.svgNodes[key]; + }; + + this._setPosDataSelectRect = (key, value) => { + switch (key) { + case "width": + if (value <= store.posData.selectRect.minWidth) { + store.posData.selectRect.width = store.posData.selectRect.minWidth; + } else if ( + value >= + store.posData.boundingRect.width - store.posData.selectRect.offsetX + ) { + store.posData.selectRect.width = + store.posData.boundingRect.width - store.posData.selectRect.offsetX; + } else { + store.posData.selectRect.width = value; } - store.svgNodes[key] = node - return node - } - - this._storeGetSvgNode = (key) => { - return store.svgNodes[key] - } - - this._setPosDataSelectRect = (key, value) => { - switch (key) { - case 'width': - if (value <= store.posData.selectRect.minWidth) { - store.posData.selectRect.width = store.posData.selectRect.minWidth - } else if (value >= store.posData.boundingRect.width - store.posData.selectRect.offsetX) { - store.posData.selectRect.width = store.posData.boundingRect.width - store.posData.selectRect.offsetX - } else { - store.posData.selectRect.width = value - } - break - case 'height': - if (value <= store.posData.selectRect.minHeight) { - store.posData.selectRect.height = store.posData.selectRect.minHeight - } else if (value >= store.posData.boundingRect.height - store.posData.selectRect.offsetY) { - store.posData.selectRect.height = store.posData.boundingRect.height - store.posData.selectRect.offsetY - } else { - store.posData.selectRect.height = value - } - break - case 'offsetX': - if (value <= 0) { - store.posData.selectRect.offsetX = 0 - } else if (value >= store.posData.boundingRect.width - store.posData.selectRect.width) { - store.posData.selectRect.offsetX = store.posData.boundingRect.width - store.posData.selectRect.width - } else { - store.posData.selectRect.offsetX = value - } - break - case 'offsetY': - if (value <= 0) { - store.posData.selectRect.offsetY = 0 - } else if (value >= store.posData.boundingRect.height - store.posData.selectRect.height) { - store.posData.selectRect.offsetY = store.posData.boundingRect.height - store.posData.selectRect.height - } else { - store.posData.selectRect.offsetY = value - } - break + break; + case "height": + if (value <= store.posData.selectRect.minHeight) { + store.posData.selectRect.height = store.posData.selectRect.minHeight; + } else if ( + value >= + store.posData.boundingRect.height - store.posData.selectRect.offsetY + ) { + store.posData.selectRect.height = + store.posData.boundingRect.height - + store.posData.selectRect.offsetY; + } else { + store.posData.selectRect.height = value; } - } - - this._setEventListeners = () => { - const $root = this._storeGetNode('root'), - $svg = this._storeGetNode('svg'), - $selectRect = this._storeGetSvgNode('selectRect'), - $cornerLeftTop = this._storeGetSvgNode('cornerLeftTop'), - $cornerRightTop = this._storeGetSvgNode('cornerRightTop'), - $cornerLeftBottom = this._storeGetSvgNode('cornerLeftBottom'), - $cornerRightBottom = this._storeGetSvgNode('cornerRightBottom'), - $barTop = this._storeGetSvgNode('barTop'), - $barLeft = this._storeGetSvgNode('barLeft'), - $barRight = this._storeGetSvgNode('barRight'), - $barBottom = this._storeGetSvgNode('barBottom') - - - const svgNodeStyleAliases = { - 'croppy-svg-corner-left-top' : 'CORNER_LEFT_TOP', - 'croppy-svg-corner-right-top' : 'CORNER_RIGHT_TOP', - 'croppy-svg-corner-left-bottom' : 'CORNER_LEFT_BOTTOM', - 'croppy-svg-corner-right-bottom' : 'CORNER_RIGHT_BOTTOM', - 'croppy-svg-bar-top' : 'BAR_TOP', - 'croppy-svg-bar-left' : 'BAR_LEFT', - 'croppy-svg-bar-right' : 'BAR_RIGHT', - 'croppy-svg-bar-bottom' : 'BAR_BOTTOM', - 'croppy-svg-select' : 'SELECT_RECT' + break; + case "offsetX": + if (value <= 0) { + store.posData.selectRect.offsetX = 0; + } else if ( + value >= + store.posData.boundingRect.width - store.posData.selectRect.width + ) { + store.posData.selectRect.offsetX = + store.posData.boundingRect.width - store.posData.selectRect.width; + } else { + store.posData.selectRect.offsetX = value; } - - const grabbed = { - el: null, - startX: null, - startY: null, - oldWidth: null, - oldHeight: null + break; + case "offsetY": + if (value <= 0) { + store.posData.selectRect.offsetY = 0; + } else if ( + value >= + store.posData.boundingRect.height - store.posData.selectRect.height + ) { + store.posData.selectRect.offsetY = + store.posData.boundingRect.height - store.posData.selectRect.height; + } else { + store.posData.selectRect.offsetY = value; } - const svgControls = [$cornerLeftTop, $cornerRightTop, $cornerLeftBottom, $cornerRightBottom, - $barTop, $barLeft, $barRight, $barBottom, - $selectRect] - - for (let key in svgControls) { - svgControls[key].addEventListener('mousedown', (e) => { - const localXY = { - x: e.pageX - store.posData.boundingRect.x, - y: e.pageY - store.posData.boundingRect.y - } - - grabbed.el = svgNodeStyleAliases[e.target.classList[1]] || svgNodeStyleAliases[e.target.classList[0]] - if (grabbed.el === undefined) { throw new Error('[SvgCroppy] Selected node is not defined in aliases') } - grabbed.startX = localXY.x - grabbed.startY = localXY.y - grabbed.oldWidth = store.posData.selectRect.width - grabbed.oldHeight = store.posData.selectRect.height - grabbed.oldOffsetX = store.posData.selectRect.offsetX - grabbed.oldOffsetY = store.posData.selectRect.offsetY - grabbed.oldEndX = store.posData.selectRect.offsetX + store.posData.selectRect.width - grabbed.oldEndY = store.posData.selectRect.offsetY + store.posData.selectRect.height - }) + break; + } + }; + + this._setEventListeners = () => { + const $root = this._storeGetNode("root"), + $svg = this._storeGetNode("svg"), + $selectRect = this._storeGetSvgNode("selectRect"), + $cornerLeftTop = this._storeGetSvgNode("cornerLeftTop"), + $cornerRightTop = this._storeGetSvgNode("cornerRightTop"), + $cornerLeftBottom = this._storeGetSvgNode("cornerLeftBottom"), + $cornerRightBottom = this._storeGetSvgNode("cornerRightBottom"), + $barTop = this._storeGetSvgNode("barTop"), + $barLeft = this._storeGetSvgNode("barLeft"), + $barRight = this._storeGetSvgNode("barRight"), + $barBottom = this._storeGetSvgNode("barBottom"); + + const svgNodeStyleAliases = { + "croppy-svg-corner-left-top": "CORNER_LEFT_TOP", + "croppy-svg-corner-right-top": "CORNER_RIGHT_TOP", + "croppy-svg-corner-left-bottom": "CORNER_LEFT_BOTTOM", + "croppy-svg-corner-right-bottom": "CORNER_RIGHT_BOTTOM", + "croppy-svg-bar-top": "BAR_TOP", + "croppy-svg-bar-left": "BAR_LEFT", + "croppy-svg-bar-right": "BAR_RIGHT", + "croppy-svg-bar-bottom": "BAR_BOTTOM", + "croppy-svg-select": "SELECT_RECT", + }; + + const grabbed = { + el: null, + startX: null, + startY: null, + oldWidth: null, + oldHeight: null, + }; + const svgControls = [ + $cornerLeftTop, + $cornerRightTop, + $cornerLeftBottom, + $cornerRightBottom, + $barTop, + $barLeft, + $barRight, + $barBottom, + $selectRect, + ]; + + for (let key in svgControls) { + svgControls[key].addEventListener("mousedown", (e) => { + const localXY = { + x: e.pageX - store.posData.boundingRect.x, + y: e.pageY - store.posData.boundingRect.y, + }; + + grabbed.el = + svgNodeStyleAliases[e.target.classList[1]] || + svgNodeStyleAliases[e.target.classList[0]]; + if (grabbed.el === undefined) { + throw new Error( + "[SvgCroppy] Selected node is not defined in aliases" + ); } + grabbed.startX = localXY.x; + grabbed.startY = localXY.y; + grabbed.oldWidth = store.posData.selectRect.width; + grabbed.oldHeight = store.posData.selectRect.height; + grabbed.oldOffsetX = store.posData.selectRect.offsetX; + grabbed.oldOffsetY = store.posData.selectRect.offsetY; + grabbed.oldEndX = + store.posData.selectRect.offsetX + store.posData.selectRect.width; + grabbed.oldEndY = + store.posData.selectRect.offsetY + store.posData.selectRect.height; + }); + } - document.addEventListener('mousemove', (e) => { - if (e.target.constructor.name !== 'HTMLHtmlElement') { - if (e.target.parentNode.getAttribute('class') !== 'croppy-svg' && !grabbed.el) { //hardcode - return - } + document.addEventListener("mousemove", (e) => { + if (e.target.constructor.name !== "HTMLHtmlElement") { + if ( + e.target.parentNode.getAttribute("class") !== "croppy-svg" && + !grabbed.el + ) { + //hardcode + return; + } + } + + if (grabbed.el) { + const startLocal = { + x: e.pageX - store.posData.boundingRect.x - grabbed.startX, + y: e.pageY - store.posData.boundingRect.y - grabbed.startY, + }; + switch (grabbed.el) { + case "CORNER_LEFT_TOP": + if ( + grabbed.oldOffsetX + startLocal.x > 0 && + grabbed.oldEndX >= + grabbed.oldOffsetX + + startLocal.x + + store.posData.selectRect.minWidth + ) { + this._setPosDataSelectRect( + "offsetX", + grabbed.oldOffsetX + startLocal.x + ); + this._setPosDataSelectRect( + "width", + grabbed.oldWidth - startLocal.x + ); + } else if (grabbed.oldOffsetX + startLocal.x <= 0) { + this._setPosDataSelectRect("offsetX", 0); + this._setPosDataSelectRect("width", grabbed.oldEndX); + } else { + this._setPosDataSelectRect( + "offsetX", + grabbed.oldEndX - store.posData.selectRect.minWidth + ); + this._setPosDataSelectRect( + "width", + store.posData.selectRect.minWidth + ); } - - if (grabbed.el) { - const startLocal = { - x: e.pageX - store.posData.boundingRect.x - grabbed.startX, - y: e.pageY - store.posData.boundingRect.y - grabbed.startY, - } - switch (grabbed.el) { - case 'CORNER_LEFT_TOP': - if (grabbed.oldOffsetX + startLocal.x > 0 && grabbed.oldEndX >= grabbed.oldOffsetX + startLocal.x + store.posData.selectRect.minWidth) { - this._setPosDataSelectRect('offsetX', grabbed.oldOffsetX + startLocal.x) - this._setPosDataSelectRect('width', grabbed.oldWidth - startLocal.x) - } else if (grabbed.oldOffsetX + startLocal.x <= 0) { - this._setPosDataSelectRect('offsetX', 0) - this._setPosDataSelectRect('width', grabbed.oldEndX) - } else { - this._setPosDataSelectRect('offsetX', grabbed.oldEndX - store.posData.selectRect.minWidth) - this._setPosDataSelectRect('width', store.posData.selectRect.minWidth) - } - if (grabbed.oldOffsetY + startLocal.y <= 0) { - this._setPosDataSelectRect('offsetY', 0) - this._setPosDataSelectRect('height', grabbed.oldEndY) - } else if (grabbed.oldEndY >= grabbed.oldOffsetY + startLocal.y + store.posData.selectRect.minHeight) { - this._setPosDataSelectRect('offsetY', grabbed.oldOffsetY + startLocal.y) - this._setPosDataSelectRect('height', grabbed.oldHeight - startLocal.y) - } else { - this._setPosDataSelectRect('offsetY', grabbed.oldEndY - store.posData.selectRect.minHeight) - this._setPosDataSelectRect('height', store.posData.selectRect.minHeight) - } - break - case 'CORNER_RIGHT_TOP': - if (grabbed.oldOffsetY + startLocal.y <= 0) { - this._setPosDataSelectRect('offsetY', 0) - this._setPosDataSelectRect('height', grabbed.oldEndY) - } else if (grabbed.oldEndY >= grabbed.oldOffsetY + startLocal.y + store.posData.selectRect.minHeight) { - this._setPosDataSelectRect('offsetY', grabbed.oldOffsetY + startLocal.y) - this._setPosDataSelectRect('height', grabbed.oldHeight - startLocal.y) - } else { - this._setPosDataSelectRect('offsetY', grabbed.oldEndY - store.posData.selectRect.minHeight) - this._setPosDataSelectRect('height', store.posData.selectRect.minHeight) - } - - this._setPosDataSelectRect('width', grabbed.oldWidth + startLocal.x) - break - case 'CORNER_LEFT_BOTTOM': - if (grabbed.oldOffsetX + startLocal.x > 0 && grabbed.oldEndX >= grabbed.oldOffsetX + startLocal.x + store.posData.selectRect.minWidth) { - this._setPosDataSelectRect('offsetX', grabbed.oldOffsetX + startLocal.x) - this._setPosDataSelectRect('width', grabbed.oldWidth - startLocal.x) - } else if (grabbed.oldOffsetX + startLocal.x <= 0) { - this._setPosDataSelectRect('offsetX', 0) - this._setPosDataSelectRect('width', grabbed.oldEndX) - } else { - this._setPosDataSelectRect('offsetX', grabbed.oldEndX - store.posData.selectRect.minWidth) - this._setPosDataSelectRect('width', store.posData.selectRect.minWidth) - } - this._setPosDataSelectRect('height', grabbed.oldHeight + startLocal.y) - break - case 'CORNER_RIGHT_BOTTOM': - this._setPosDataSelectRect('width', grabbed.oldWidth + startLocal.x) - this._setPosDataSelectRect('height', grabbed.oldHeight + startLocal.y) - break - case 'BAR_TOP': - if (grabbed.oldOffsetY + startLocal.y <= 0) { - this._setPosDataSelectRect('offsetY', 0) - this._setPosDataSelectRect('height', grabbed.oldEndY) - } else if (grabbed.oldEndY >= grabbed.oldOffsetY + startLocal.y + store.posData.selectRect.minHeight) { - this._setPosDataSelectRect('offsetY', grabbed.oldOffsetY + startLocal.y) - this._setPosDataSelectRect('height', grabbed.oldHeight - startLocal.y) - } else { - this._setPosDataSelectRect('offsetY', grabbed.oldEndY - store.posData.selectRect.minHeight) - this._setPosDataSelectRect('height', store.posData.selectRect.minHeight) - } - break - case 'BAR_LEFT': - if (grabbed.oldOffsetX + startLocal.x > 0 && grabbed.oldEndX >= grabbed.oldOffsetX + startLocal.x + store.posData.selectRect.minWidth) { - this._setPosDataSelectRect('offsetX', grabbed.oldOffsetX + startLocal.x) - this._setPosDataSelectRect('width', grabbed.oldWidth - startLocal.x) - } else if (grabbed.oldOffsetX + startLocal.x <= 0) { - this._setPosDataSelectRect('offsetX', 0) - this._setPosDataSelectRect('width', grabbed.oldEndX) - } else { - this._setPosDataSelectRect('offsetX', grabbed.oldEndX - store.posData.selectRect.minWidth) - this._setPosDataSelectRect('width', store.posData.selectRect.minWidth) - } - break - case 'BAR_RIGHT': - this._setPosDataSelectRect('width', grabbed.oldWidth + startLocal.x) - break - case 'BAR_BOTTOM': - this._setPosDataSelectRect('height', grabbed.oldHeight + startLocal.y) - break - case 'SELECT_RECT': - this._setPosDataSelectRect('offsetX', grabbed.oldOffsetX + startLocal.x) - this._setPosDataSelectRect('offsetY', grabbed.oldOffsetY + startLocal.y) - break - } - this.render() - $root.dispatchEvent(store.events.transformed) + if (grabbed.oldOffsetY + startLocal.y <= 0) { + this._setPosDataSelectRect("offsetY", 0); + this._setPosDataSelectRect("height", grabbed.oldEndY); + } else if ( + grabbed.oldEndY >= + grabbed.oldOffsetY + + startLocal.y + + store.posData.selectRect.minHeight + ) { + this._setPosDataSelectRect( + "offsetY", + grabbed.oldOffsetY + startLocal.y + ); + this._setPosDataSelectRect( + "height", + grabbed.oldHeight - startLocal.y + ); + } else { + this._setPosDataSelectRect( + "offsetY", + grabbed.oldEndY - store.posData.selectRect.minHeight + ); + this._setPosDataSelectRect( + "height", + store.posData.selectRect.minHeight + ); + } + break; + case "CORNER_RIGHT_TOP": + if (grabbed.oldOffsetY + startLocal.y <= 0) { + this._setPosDataSelectRect("offsetY", 0); + this._setPosDataSelectRect("height", grabbed.oldEndY); + } else if ( + grabbed.oldEndY >= + grabbed.oldOffsetY + + startLocal.y + + store.posData.selectRect.minHeight + ) { + this._setPosDataSelectRect( + "offsetY", + grabbed.oldOffsetY + startLocal.y + ); + this._setPosDataSelectRect( + "height", + grabbed.oldHeight - startLocal.y + ); + } else { + this._setPosDataSelectRect( + "offsetY", + grabbed.oldEndY - store.posData.selectRect.minHeight + ); + this._setPosDataSelectRect( + "height", + store.posData.selectRect.minHeight + ); } - }) - - document.addEventListener('mouseup', (e) => { - grabbed.el = null - grabbed.startX = null - grabbed.startY = null - grabbed.oldWidth = null - grabbed.oldHeight = null - grabbed.oldOffsetX = null - grabbed.oldOffsetY = null - grabbed.oldEndX = null - grabbed.oldEndY = null - }) - } - - this.render = () => { - const $selectRect = this._storeGetSvgNode('selectRect'), - $selectRectMask = this._storeGetSvgNode('selectRectMask'), - $cornerLeftTop = this._storeGetSvgNode('cornerLeftTop'), - $cornerRightTop = this._storeGetSvgNode('cornerRightTop'), - $cornerLeftBottom = this._storeGetSvgNode('cornerLeftBottom'), - $cornerRightBottom = this._storeGetSvgNode('cornerRightBottom'), - $barTop = this._storeGetSvgNode('barTop'), - $barLeft = this._storeGetSvgNode('barLeft'), - $barRight = this._storeGetSvgNode('barRight'), - $barBottom = this._storeGetSvgNode('barBottom') - - - setAttr($selectRectMask, { - x: store.posData.selectRect.offsetX, - y: store.posData.selectRect.offsetY, - width: store.posData.selectRect.width, - height: store.posData.selectRect.height - }) - - setAttr($selectRect, { - x: store.posData.selectRect.offsetX, - y: store.posData.selectRect.offsetY, - width: store.posData.selectRect.width, - height: store.posData.selectRect.height - }) - - setAttr($cornerLeftTop, { - x: store.posData.selectRect.offsetX - Math.round(store.style.cornerWidth / 2), - y: store.posData.selectRect.offsetY - Math.round(store.style.cornerHeight / 2) - }) - - setAttr($cornerRightTop, { - x: store.posData.selectRect.offsetX + store.posData.selectRect.width - Math.round(store.style.cornerWidth / 2), - y: store.posData.selectRect.offsetY - Math.round(store.style.cornerHeight / 2) - }) - - setAttr($cornerLeftBottom, { - x: store.posData.selectRect.offsetX - Math.round(store.style.cornerWidth / 2), - y: store.posData.selectRect.offsetY + store.posData.selectRect.height - Math.round(store.style.cornerHeight / 2) - }) - - setAttr($cornerRightBottom, { - x: store.posData.selectRect.offsetX + store.posData.selectRect.width - Math.round(store.style.cornerWidth / 2), - y: store.posData.selectRect.offsetY + store.posData.selectRect.height - Math.round(store.style.cornerHeight / 2) - }) - - setAttr($barTop, { - x: store.posData.selectRect.offsetX - Math.round(store.style.cornerWidth / 2) + store.style.cornerWidth, - y: store.posData.selectRect.offsetY - Math.round(store.style.cornerHeight / 2), - width: store.posData.selectRect.width - store.style.cornerHeight >= 0 ? store.posData.selectRect.width - store.style.cornerHeight : 0, - height: store.style.cornerHeight - }) - - setAttr($barLeft, { - x: store.posData.selectRect.offsetX - Math.round(store.style.cornerWidth / 2), - y: store.posData.selectRect.offsetY - Math.round(store.style.cornerHeight / 2) + store.style.cornerHeight, - width: store.style.cornerWidth, - height: store.posData.selectRect.height - store.style.cornerHeight >= 0 ? store.posData.selectRect.height - store.style.cornerHeight : 0 - }) - - setAttr($barRight, { - x: store.posData.selectRect.offsetX - Math.round(store.style.cornerWidth / 2) + store.posData.selectRect.width, - y: store.posData.selectRect.offsetY - Math.round(store.style.cornerHeight / 2) + store.style.cornerHeight, - width: store.style.cornerWidth, - height: store.posData.selectRect.height - store.style.cornerHeight >= 0 ? store.posData.selectRect.height - store.style.cornerHeight : 0 - }) - - setAttr($barBottom, { - x: store.posData.selectRect.offsetX - Math.round(store.style.cornerWidth / 2) + store.style.cornerWidth, - y: store.posData.selectRect.offsetY - Math.round(store.style.cornerHeight / 2) + store.posData.selectRect.height, - width: store.posData.selectRect.width - store.style.cornerHeight >= 0 ? store.posData.selectRect.width - store.style.cornerHeight : 0, - height: store.style.cornerHeight - }) - } - - this.getCropInfo = () => { - return { - offsetX: store.posData.selectRect.offsetX, - offsetY: store.posData.selectRect.offsetY, - width: store.posData.selectRect.width, - height: store.posData.selectRect.height, - boundWidth: store.posData.boundingRect.width, - boundHeight: store.posData.boundingRect.height, + this._setPosDataSelectRect( + "width", + grabbed.oldWidth + startLocal.x + ); + break; + case "CORNER_LEFT_BOTTOM": + if ( + grabbed.oldOffsetX + startLocal.x > 0 && + grabbed.oldEndX >= + grabbed.oldOffsetX + + startLocal.x + + store.posData.selectRect.minWidth + ) { + this._setPosDataSelectRect( + "offsetX", + grabbed.oldOffsetX + startLocal.x + ); + this._setPosDataSelectRect( + "width", + grabbed.oldWidth - startLocal.x + ); + } else if (grabbed.oldOffsetX + startLocal.x <= 0) { + this._setPosDataSelectRect("offsetX", 0); + this._setPosDataSelectRect("width", grabbed.oldEndX); + } else { + this._setPosDataSelectRect( + "offsetX", + grabbed.oldEndX - store.posData.selectRect.minWidth + ); + this._setPosDataSelectRect( + "width", + store.posData.selectRect.minWidth + ); + } + this._setPosDataSelectRect( + "height", + grabbed.oldHeight + startLocal.y + ); + break; + case "CORNER_RIGHT_BOTTOM": + this._setPosDataSelectRect( + "width", + grabbed.oldWidth + startLocal.x + ); + this._setPosDataSelectRect( + "height", + grabbed.oldHeight + startLocal.y + ); + break; + case "BAR_TOP": + if (grabbed.oldOffsetY + startLocal.y <= 0) { + this._setPosDataSelectRect("offsetY", 0); + this._setPosDataSelectRect("height", grabbed.oldEndY); + } else if ( + grabbed.oldEndY >= + grabbed.oldOffsetY + + startLocal.y + + store.posData.selectRect.minHeight + ) { + this._setPosDataSelectRect( + "offsetY", + grabbed.oldOffsetY + startLocal.y + ); + this._setPosDataSelectRect( + "height", + grabbed.oldHeight - startLocal.y + ); + } else { + this._setPosDataSelectRect( + "offsetY", + grabbed.oldEndY - store.posData.selectRect.minHeight + ); + this._setPosDataSelectRect( + "height", + store.posData.selectRect.minHeight + ); + } + break; + case "BAR_LEFT": + if ( + grabbed.oldOffsetX + startLocal.x > 0 && + grabbed.oldEndX >= + grabbed.oldOffsetX + + startLocal.x + + store.posData.selectRect.minWidth + ) { + this._setPosDataSelectRect( + "offsetX", + grabbed.oldOffsetX + startLocal.x + ); + this._setPosDataSelectRect( + "width", + grabbed.oldWidth - startLocal.x + ); + } else if (grabbed.oldOffsetX + startLocal.x <= 0) { + this._setPosDataSelectRect("offsetX", 0); + this._setPosDataSelectRect("width", grabbed.oldEndX); + } else { + this._setPosDataSelectRect( + "offsetX", + grabbed.oldEndX - store.posData.selectRect.minWidth + ); + this._setPosDataSelectRect( + "width", + store.posData.selectRect.minWidth + ); + } + break; + case "BAR_RIGHT": + this._setPosDataSelectRect( + "width", + grabbed.oldWidth + startLocal.x + ); + break; + case "BAR_BOTTOM": + this._setPosDataSelectRect( + "height", + grabbed.oldHeight + startLocal.y + ); + break; + case "SELECT_RECT": + this._setPosDataSelectRect( + "offsetX", + grabbed.oldOffsetX + startLocal.x + ); + this._setPosDataSelectRect( + "offsetY", + grabbed.oldOffsetY + startLocal.y + ); + break; } + this.render(); + $root.dispatchEvent(store.events.transformed); + } + }); + + document.addEventListener("mouseup", (e) => { + grabbed.el = null; + grabbed.startX = null; + grabbed.startY = null; + grabbed.oldWidth = null; + grabbed.oldHeight = null; + grabbed.oldOffsetX = null; + grabbed.oldOffsetY = null; + grabbed.oldEndX = null; + grabbed.oldEndY = null; + }); + }; + + this.render = () => { + const $selectRect = this._storeGetSvgNode("selectRect"), + $selectRectMask = this._storeGetSvgNode("selectRectMask"), + $cornerLeftTop = this._storeGetSvgNode("cornerLeftTop"), + $cornerRightTop = this._storeGetSvgNode("cornerRightTop"), + $cornerLeftBottom = this._storeGetSvgNode("cornerLeftBottom"), + $cornerRightBottom = this._storeGetSvgNode("cornerRightBottom"), + $barTop = this._storeGetSvgNode("barTop"), + $barLeft = this._storeGetSvgNode("barLeft"), + $barRight = this._storeGetSvgNode("barRight"), + $barBottom = this._storeGetSvgNode("barBottom"); + + setAttr($selectRectMask, { + x: store.posData.selectRect.offsetX, + y: store.posData.selectRect.offsetY, + width: store.posData.selectRect.width, + height: store.posData.selectRect.height, + }); + + setAttr($selectRect, { + x: store.posData.selectRect.offsetX, + y: store.posData.selectRect.offsetY, + width: store.posData.selectRect.width, + height: store.posData.selectRect.height, + }); + + setAttr($cornerLeftTop, { + x: + store.posData.selectRect.offsetX - + Math.round(store.style.cornerWidth / 2), + y: + store.posData.selectRect.offsetY - + Math.round(store.style.cornerHeight / 2), + }); + + setAttr($cornerRightTop, { + x: + store.posData.selectRect.offsetX + + store.posData.selectRect.width - + Math.round(store.style.cornerWidth / 2), + y: + store.posData.selectRect.offsetY - + Math.round(store.style.cornerHeight / 2), + }); + + setAttr($cornerLeftBottom, { + x: + store.posData.selectRect.offsetX - + Math.round(store.style.cornerWidth / 2), + y: + store.posData.selectRect.offsetY + + store.posData.selectRect.height - + Math.round(store.style.cornerHeight / 2), + }); + + setAttr($cornerRightBottom, { + x: + store.posData.selectRect.offsetX + + store.posData.selectRect.width - + Math.round(store.style.cornerWidth / 2), + y: + store.posData.selectRect.offsetY + + store.posData.selectRect.height - + Math.round(store.style.cornerHeight / 2), + }); + + setAttr($barTop, { + x: + store.posData.selectRect.offsetX - + Math.round(store.style.cornerWidth / 2) + + store.style.cornerWidth, + y: + store.posData.selectRect.offsetY - + Math.round(store.style.cornerHeight / 2), + width: + store.posData.selectRect.width - store.style.cornerHeight >= 0 + ? store.posData.selectRect.width - store.style.cornerHeight + : 0, + height: store.style.cornerHeight, + }); + + setAttr($barLeft, { + x: + store.posData.selectRect.offsetX - + Math.round(store.style.cornerWidth / 2), + y: + store.posData.selectRect.offsetY - + Math.round(store.style.cornerHeight / 2) + + store.style.cornerHeight, + width: store.style.cornerWidth, + height: + store.posData.selectRect.height - store.style.cornerHeight >= 0 + ? store.posData.selectRect.height - store.style.cornerHeight + : 0, + }); + + setAttr($barRight, { + x: + store.posData.selectRect.offsetX - + Math.round(store.style.cornerWidth / 2) + + store.posData.selectRect.width, + y: + store.posData.selectRect.offsetY - + Math.round(store.style.cornerHeight / 2) + + store.style.cornerHeight, + width: store.style.cornerWidth, + height: + store.posData.selectRect.height - store.style.cornerHeight >= 0 + ? store.posData.selectRect.height - store.style.cornerHeight + : 0, + }); + + setAttr($barBottom, { + x: + store.posData.selectRect.offsetX - + Math.round(store.style.cornerWidth / 2) + + store.style.cornerWidth, + y: + store.posData.selectRect.offsetY - + Math.round(store.style.cornerHeight / 2) + + store.posData.selectRect.height, + width: + store.posData.selectRect.width - store.style.cornerHeight >= 0 + ? store.posData.selectRect.width - store.style.cornerHeight + : 0, + height: store.style.cornerHeight, + }); + }; + + this.getCropInfo = () => { + return { + offsetX: store.posData.selectRect.offsetX, + offsetY: store.posData.selectRect.offsetY, + width: store.posData.selectRect.width, + height: store.posData.selectRect.height, + boundWidth: store.posData.boundingRect.width, + boundHeight: store.posData.boundingRect.height, + }; + }; + + this.hide = () => { + if (store.nodes.svg) { + store.nodes.svg.classList.add("croppy-hidden"); } + }; - this.hide = () => { - if (store.nodes.svg) { - store.nodes.svg.classList.add('croppy-hidden') - } + this.unhide = () => { + if (store.nodes.svg) { + store.nodes.svg.classList.remove("croppy-hidden"); } + this._storeGetNode("root").dispatchEvent(store.events.transformed); + }; - this.unhide = () => { - if (store.nodes.svg) { - store.nodes.svg.classList.remove('croppy-hidden') - } - this._storeGetNode('root').dispatchEvent(store.events.transformed) - } + this.setSizes = () => { + const $svg = this._storeGetNode("svg"); + const $svgSelectRect = this._storeGetSvgNode("selectRect"); + const $wrapper = this._storeGetNode("wrapper"); + const $root = this._storeGetNode("root"); - this.setSizes = () => { - const $svg = this._storeGetNode('svg') - const $svgSelectRect = this._storeGetSvgNode('selectRect') - const $wrapper = this._storeGetNode('wrapper') - const $root = this._storeGetNode('root') + $wrapper.style.height = $root.clientHeight + "px"; - $wrapper.style.height = $root.clientHeight + 'px' + store.posData.selectRect.width = Math.round($root.width * 0.8); + store.posData.selectRect.height = Math.round($root.height * 0.8); + store.posData.selectRect.offsetX = Math.round($root.width * 0.1); + store.posData.selectRect.offsetY = Math.round($root.height * 0.1); - store.posData.selectRect.width = Math.round($root.width * 0.8) - store.posData.selectRect.height = Math.round($root.height * 0.8) - store.posData.selectRect.offsetX = Math.round($root.width * 0.1) - store.posData.selectRect.offsetY = Math.round($root.height * 0.1) - - store.posData.boundingRect = $wrapper.getBoundingClientRect() + store.posData.boundingRect = $wrapper.getBoundingClientRect(); - this.render() - } + this.render(); + }; - this.init = (rootSelector) => { - let $root = null + this.init = (rootSelector) => { + let $root = null; - if (rootSelector.constructor.name === 'String') { - $root = document.querySelector(rootSelector) - } else { - $root = rootSelector - } + if (rootSelector.constructor.name === "String") { + $root = document.querySelector(rootSelector); + } else { + $root = rootSelector; + } - if ($root === null) { throw new Error('[SvgCroppy] rootNode is null') } + if ($root === null) { + throw new Error("[SvgCroppy] rootNode is null"); + } - this._storeSetNode('root', $root) + this._storeSetNode("root", $root); - if (initFlag) { - this.setSizes() - return - } - initFlag = true + if (initFlag) { + this.setSizes(); + return; + } + initFlag = true; - const svgTemplate = ` + const svgTemplate = `