diff --git a/css/_canvas.scss b/css/_canvas.scss index 6e3eee1..606d116 100644 --- a/css/_canvas.scss +++ b/css/_canvas.scss @@ -85,9 +85,9 @@ #canvas-view { bottom: 0px; - left: 48px; - right: 48px; - top: 48px; + left: var(--top-nav-height); + right: var(--top-nav-height); + top: var(--top-nav-height); cursor: default; position: fixed; display: block; @@ -97,9 +97,9 @@ box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.4); position: fixed; bottom: 0px; - left: 48px; - right: 48px; - top: 48px; + left: var(--top-nav-height); + right: var(--top-nav-height); + top: var(--top-nav-height); display: block; pointer-events: none; } \ No newline at end of file diff --git a/css/_colors-menu.scss b/css/_colors-menu.scss index a19277d..b03bfa7 100644 --- a/css/_colors-menu.scss +++ b/css/_colors-menu.scss @@ -1,36 +1,57 @@ - #colors-menu { - right: 200px; - width: 48px; + width:var(--layers-width); display: flex; justify-content: flex-start; - flex-direction: column; + flex-direction: row; list-style-type: none; - top: 48px; - bottom: 0; + display: flex; + flex-wrap: wrap; + align-content: flex-start; + height: var(--palette-height); padding: 0; margin: 0; background-color: $basecolor; box-sizing: border-box; - position: fixed; + align-items: flex-start; z-index: 1120; + overflow-y: scroll; + resize: vertical; li { - width: 48px; - flex-basis: 48px; + width: var(--top-nav-height); + height: var(--top-nav-height); + flex-basis: var(--top-nav-height); - &:not(.noshrink) { - flex-grow: 1; - } &.noshrink { flex-grow: 0; flex-shrink: 0; } } + + svg { + margin-top: 4px; + } + + &::-webkit-scrollbar { + background: #232125; + width: 1em; + } + &::-webkit-scrollbar-track { + margin-top: -0.125em; + width: 1em; + } + &::-webkit-scrollbar-thumb { + background: #332f35; + border-radius: 0.25em; + border: solid 0.125em #232125; //same color as scrollbar back to fake padding + } + &::-webkit-scrollbar-corner { + background: #232125; + } + scrollbar-color: #332f35 #232125; + scroll-behavior: smooth; } - - //added when the color is a duplicate of another #duplicate-color-warning { display: inline-block; @@ -118,14 +139,14 @@ content: ""; display: block; position: absolute; - top: -3px; - left: -3px; + top: 0px; + left: 0px; border: solid 3px #fff; width: 100%; height: 100%; - border-radius: 4px; - box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.15); + box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.15) inset; z-index: 10; + box-sizing: border-box; } //inner outline &.selected button::after { content: ""; @@ -149,7 +170,9 @@ background: $basehover; } - +.jscolor-wrap { + z-index: 10000 !important; +} .jscolor-picker-bottom { display: none; @@ -173,7 +196,6 @@ } } - .delete-color-button { background: none; padding: 0px; diff --git a/css/_containers.scss b/css/_containers.scss new file mode 100644 index 0000000..0e06701 --- /dev/null +++ b/css/_containers.scss @@ -0,0 +1,24 @@ +#right-container{ + display: flex; + flex-direction: column; + position: fixed; + top: var(--top-nav-height); + right: var(--top-nav-height); + bottom: 0; +} +#bottom-container{ + display: flex; + flex-direction: column; + position: fixed; + left: 0; + right: 0; + bottom: 0; +} +#left-container{ + display: flex; + flex-direction: column; + position: fixed; + top: var(--top-nav-height); + bottom: 0; + left: var(--top-nav-height); +} \ No newline at end of file diff --git a/css/_general.scss b/css/_general.scss index e4ad7a4..c36f55a 100644 --- a/css/_general.scss +++ b/css/_general.scss @@ -43,4 +43,15 @@ svg { #data-holders, .preload { display: none; -} \ No newline at end of file +} + +#right-nav { + position: fixed; + top: var(--top-nav-height); + right: 0; + bottom: 0; + width: var(--layers-width); + z-index: 9000; + display: flex; + flex-direction: column; +} diff --git a/css/_layers.scss b/css/_layers.scss index 5a505e4..211fd32 100644 --- a/css/_layers.scss +++ b/css/_layers.scss @@ -1,4 +1,3 @@ - #layer-properties-menu { visibility: hidden; margin: 0; @@ -8,7 +7,7 @@ width: 120px; text-align: center; - margin-right: 200px; + margin-right: var(--layers-width); /*border:1px solid $basetext;*/ list-style: none; position: relative; @@ -72,19 +71,16 @@ } scrollbar-color: #332f35 #232125; scroll-behavior: smooth; - width:200px; - top: 48px; - bottom: 0; - right:0; + width:var(--layers-width); padding: 0; margin: 0; background-color: $basecolor; box-sizing: border-box; - position: fixed; z-index: 1120; list-style-type: none; overflow-y:scroll; overflow-x:hidden; + flex: 1; #add-layer-button { path { fill: $baseicon; @@ -112,6 +108,33 @@ color: $basehovertext; background-color: $basehover; } + #add-reference-button { + path { + fill: $baseicon; + } + svg { + position: relative; + margin-right: 10px; + } + position:relative; + justify-content: center; + display:none; + align-items:center; + margin-top:2px; + font-size: 1.2em; + color: $basetext; + height: 100%; + width: 100%; + padding: 17px; + background: none; + border: none; + cursor: pointer; + } + + #add-reference-button:hover { + color: $basehovertext; + background-color: $basehover; + } } .selected-layer { diff --git a/css/_main-menu.scss b/css/_main-menu.scss index 04697d0..8cd0e9b 100644 --- a/css/_main-menu.scss +++ b/css/_main-menu.scss @@ -1,6 +1,6 @@ #main-menu { - height: 48px; + height: var(--top-nav-height); left: 0; right: 0; list-style-type: none; @@ -35,7 +35,7 @@ li ul { display: none; position: absolute; - top: 48px; + top: var(--top-nav-height); list-style-type: none; padding: 0; margin: 0; diff --git a/css/_new-pixel.scss b/css/_new-pixel.scss index cdbdbfe..37941bc 100644 --- a/css/_new-pixel.scss +++ b/css/_new-pixel.scss @@ -6,6 +6,18 @@ font-style: italic; } +#new-pixel-inventory { + display: none; +} + +#new-pixel-map { + display: none; +} + +#new-voxel-world { + display: none; +} + .dimentions-x { margin: -2px 7px; path { @@ -13,12 +25,10 @@ } } - #no-palette-button { display: none; } - #editor-mode-info { font-style: italic; } diff --git a/css/_tools-menu.scss b/css/_tools-menu.scss index 77c5134..521463a 100644 --- a/css/_tools-menu.scss +++ b/css/_tools-menu.scss @@ -1,9 +1,9 @@ #tools-menu { left: 0; - width: 48px; + width: var(--top-nav-height); list-style-type: none; - top: 48px; + top: var(--top-nav-height); bottom: 0; padding: 0; margin: 0; @@ -24,7 +24,7 @@ width: 100%; padding: 0; cursor: pointer; - height: 48px; + height: var(--top-nav-height); z-index:0; } @@ -73,7 +73,7 @@ #tools-menu .size-buttons { position:absolute; display: none; - height:48px; + height:var(--top-nav-height); left:8px; z-index:-1; background-color: $basecolor !important; @@ -140,8 +140,8 @@ #tool-tutorial { display:inline-block; position:absolute; - margin-left:48px; - margin-top:48px; + margin-left:var(--top-nav-height); + margin-top:var(--top-nav-height); background-color: $basehover; color:$basetext; font-size:14px; diff --git a/css/_variables.scss b/css/_variables.scss index 6e4e18a..8ef824b 100644 --- a/css/_variables.scss +++ b/css/_variables.scss @@ -13,4 +13,12 @@ $baseselected: lighten($basecolor, 15%); //color(selectedTool, background), $baseselectediconhover: lighten($basecolor, 70%); //color(subbutton, foreground, hover) $baseselectedhover: lighten($basecolor, 25%); //color(subbutton, background, hover) $indent: darken($basecolor, 5%); //color(indent) - $indenttext: lighten($basecolor, 50%); //color(indent, foreground) \ No newline at end of file + $indenttext: lighten($basecolor, 50%); //color(indent, foreground) + + +:root{ + --layers-width: 206px; + --palette-height: 38%; + --top-nav-height: 48px; + --drag-bar-size: var(--top-nav-height); +} \ No newline at end of file diff --git a/js/ColorModule.js b/js/ColorModule.js index 1021d5b..fb22de3 100644 --- a/js/ColorModule.js +++ b/js/ColorModule.js @@ -13,6 +13,16 @@ const ColorModule = (() => { document.getElementById('jscolor-hex-input').addEventListener('change',colorChanged, false); document.getElementById('jscolor-hex-input').addEventListener('input', colorChanged, false); document.getElementById('add-color-button').addEventListener('click', addColorButtonEvent, false); + + // const resizeObserver = new ResizeObserver(function(mutations) { + // console.log('mutations:', mutations); + // const h = mutations[0].contentRect.height; + // colorMenuResized(h); + // }); + // resizeObserver.observe(document.getElementById('colors-menu'), {attributes:true}); + // function colorMenuResized(h) { + // document.getElementById('layers-menu').style.height = `calc(100% + ${h}px - var(--top-nav-height))`; + // } // Making the colours in the HTML menu sortable new Sortable(document.getElementById("colors-menu"), { @@ -21,7 +31,6 @@ const ColorModule = (() => { draggable: ".draggable-colour", onEnd: function() {Events.simulateMouseEvent(window, "mouseup");} }); - /** Changes all of one color to another after being changed from the color picker * * @param {*} colorHexElement The element that has been changed @@ -94,18 +103,25 @@ const ColorModule = (() => { * * @param {*} e The event that triggered the callback */ - function clickedColor (e){ + function clickedColor (e) { //left clicked color if (e.which == 1) { // remove current color selection + const currentSelectedColorButton = document.querySelector('#colors-menu li.selected .color-button'); + const selectedColor = currentSelectedColorButton.style.backgroundColor; + const clickedColor = e.target.style.backgroundColor; document.querySelector('#colors-menu li.selected')?.classList.remove('selected'); //set current color - updateCurrentColor(Color.cssToHex(e.target.style.backgroundColor)); + updateCurrentColor(Color.cssToHex(clickedColor)); //make color selected e.target.parentElement.classList.add('selected'); + if(selectedColor === clickedColor) { + e.target.parentElement.lastChild.classList.add('hidden'); + e.target.jscolor.show(); + } } //right clicked color else if (e.which == 3) { @@ -251,7 +267,6 @@ const ColorModule = (() => { //loop through colors for (var i = 0; i < colors.length; i++) { - //////console.log(color,'=',colors[i].jscolor.toString()); if (color == colors[i].jscolor.toString()) { //set color to the color button @@ -334,7 +349,11 @@ const ColorModule = (() => { } function getCurrentPalette() { - return currentPalette; + let ret = [...currentPalette]; + if(ret.length === 0) { + ret = [...document.querySelectorAll(".color-button")].map(n=>n.style.backgroundColor); + } + return ret; } function resetPalette() { @@ -346,7 +365,6 @@ const ColorModule = (() => { * @param {*} paletteColors The colours of the palette */ function createColorPalette(paletteColors) { - ////console.log("creating palette"); //remove current palette while (colorsMenu.childElementCount > 1) colorsMenu.children[0].remove(); @@ -358,7 +376,6 @@ const ColorModule = (() => { for (var i = 0; i < paletteColors.length; i++) { var newColor = new Color("hex", paletteColors[i]); var newColorElement = ColorModule.addColor(newColor.hex); - ////console.log('newColor.hex === ',newColor.hex); var newColRgb = newColor.rgb; var lightestColorRgb = lightestColor.rgb; @@ -383,7 +400,6 @@ const ColorModule = (() => { //set as current color updateCurrentColor(darkestColor.hex); - ////console.log('getCurrentPalette() === ',getCurrentPalette()); } /** Creates the palette with the colours used in all the layers @@ -423,7 +439,6 @@ const ColorModule = (() => { //create palette from colors array createColorPalette(colorPaletteArray); - ////console.log("Done 2"); } function updateCurrentColor(color, refLayer) { diff --git a/js/EditorState.js b/js/EditorState.js index 95d712f..fe9104d 100644 --- a/js/EditorState.js +++ b/js/EditorState.js @@ -18,8 +18,6 @@ const EditorState = (() => { //switch to advanced mode if (newMode == 'Advanced') { Events.emit("switchedToAdvanced"); - // Hide the palette menu - document.getElementById('colors-menu').style.right = '200px' pixelEditorMode = 'Advanced'; document.getElementById("switch-mode-button").innerHTML = 'Switch to basic mode'; diff --git a/js/FileManager.js b/js/FileManager.js index 1bbba1c..56e507c 100644 --- a/js/FileManager.js +++ b/js/FileManager.js @@ -128,10 +128,14 @@ const FileManager = (() => { function localStorageSave() { const lpeStr = getProjectData(); const lpe = JSON.parse(lpeStr); - //console.log('LPE saved === ',lpe); + console.log('BEFORE JSON.stringify(lpe.colors,null,4) === ',JSON.stringify(lpe.colors,null,4)); + console.log([...ColorModule.getCurrentPalette()]); + if(lpe.colors.length < 1)lpe.colors = [...ColorModule.getCurrentPalette()]; if(lpe.colors.length < 1)lpe.colors.push("#000000"); + console.log('AFTER JSON.stringify(lpe.colors,null,4) === ',JSON.stringify(lpe.colors,null,4)); if(!lpe.canvasWidth)lpe.canvasWidth = 16; if(!lpe.canvasHeight)lpe.canvasHeight = 16; + console.log('LPE saved === ',lpe); localStorage.setItem("lpe-cache", JSON.stringify(lpe)); } function localStorageReset() { @@ -185,6 +189,7 @@ const FileManager = (() => { // If it's a Lospec Pixel Editor tm file, I load the project if (extension == 'lpe') { openProject(); + // openFile(); } else { openFile(); @@ -204,6 +209,7 @@ const FileManager = (() => { img.onload = function() { //create a new pixel with the images dimentions + console.log('this === ',this); Startup.newPixel({ canvasWidth: this.width, canvasHeight: this.height @@ -224,23 +230,26 @@ const FileManager = (() => { fileReader.readAsDataURL(browseHolder.files[0]); } function openProject(lpeData) { - + console.log('lpeData === ',lpeData); // Getting all the data if(lpeData){ _parseLPE(lpeData); } else { - let file = uri ?? browseHolder.files[0]; + let file = browseHolder.files[0]; let reader = new FileReader(); - reader.readAsText(file, "UTF-8"); // Converting the data to a json object and creating a new pixel (see _newPixel.js for more) reader.onload = function (e) { + console.log('this === ',this); + console.log('e === ',e); let dictionary = JSON.parse(e.target.result); + console.log('FileManager.js => openProject => loaded lpe dictionary === ',dictionary); _parseLPE(dictionary); } + reader.readAsText(file, "UTF-8"); } function _parseLPE(dictionary) { - Startup.newPixel(dictionary, true); + Startup.newPixel(dictionary); } } function loadFromLPE(dictionary) { @@ -248,38 +257,11 @@ const FileManager = (() => { //console.log('dictionary === ',dictionary); - dictionary = FileManager.upgradeLPE(dictionary); - EditorState.switchMode(dictionary.editorMode ?? 'Advanced'); - // I add every layer the file had in it - // dictionary.layers.forEach((layerData,i)=>{ - // let layerImage = layerData.src; - // if (layerData != null) { - // // Setting id - // let createdLayer = LayerList.addLayer(layerData.id, false, layerData.name); - // // Setting name - // createdLayer.menuEntry.getElementsByTagName("p")[0].innerHTML = layerData.name; - - // // Adding the image (I can do that because they're sorted by increasing z-index) - // let img = new Image(); - // img.onload = function() { - // createdLayer.context.drawImage(img, 0, 0); - // createdLayer.updateLayerPreview(); - // }; - - // img.src = layerImage; - - // // Setting visibility and lock options - // if (!layerData.isVisible) { - // createdLayer.hide(); - // } - // if (layerData.isLocked) { - // createdLayer.lock(); - // } - // } - // }) if(dictionary.colors)ColorModule.createColorPalette(dictionary.colors); + + // Startup.newPixel(dictionary); } function getProjectData() { // use a dictionary @@ -355,7 +337,7 @@ const FileManager = (() => { browsePaletteHolder.value = null; } function upgradeLPE(dictionary) { - ////console.log('dictionary === ',dictionary); + console.log('dictionary === ',dictionary); if(dictionary.color0 && !dictionary.colors) { dictionary.colors = []; let colorIdx = 0; @@ -364,8 +346,9 @@ const FileManager = (() => { delete dictionary[`color${colorIdx}`]; colorIdx++; } + console.log('Object.keys(dictionary) === ',Object.keys(dictionary)); dictionary.layers = Object.keys(dictionary).reduce((r,k,i)=>{ - if(k.slice(0,5) === "layer"){ + if(k.slice(0,5) === "layer" && dictionary[k]){ if(dictionary[k].isSelected){ dictionary.selectedLayer = r.length; } @@ -379,7 +362,9 @@ const FileManager = (() => { } return r; },[]); + console.log('dictionary.layers === ',dictionary.layers); } + console.log('dictionary === ',dictionary); return dictionary; } function toggleCache(elm){ @@ -395,7 +380,7 @@ const FileManager = (() => { const cacheEnabled = !!Number(localStorage.getItem("lpe-cache-enabled")); document.getElementById("auto-cache-button").textContent = cacheBtnText(cacheEnabled); - return { + const ret = { cacheEnabled, loadFromLPE, toggleCache, @@ -413,4 +398,14 @@ const FileManager = (() => { openSaveProjectWindow, open }; + Object.keys(ret).forEach(k=>{ + if(typeof ret[k] === "function"){ + const orig = ret[k]; + ret[k] = function() { + DEBUG_ARR.push(`called FileManager -> ${k}`); + return orig.call(this,...arguments); + } + } + }) + return ret; })(); \ No newline at end of file diff --git a/js/LayerList.js b/js/LayerList.js index 7863c3b..dfa6999 100644 --- a/js/LayerList.js +++ b/js/LayerList.js @@ -6,6 +6,7 @@ const LayerList = (() => { let dragStartLayer; Events.on("mousedown", layerList, openOptionsMenu); Events.on('click',"add-layer-button", addLayerClick, false); + Events.on('click',"add-reference-button", addReferenceClick, false); Events.onCustom("switchedToAdvanced", showLayerList); Events.onCustom("switchedToBasic", hideLayerList); @@ -28,6 +29,10 @@ const LayerList = (() => { layerList.style.display = "none"; document.getElementById('layer-button').style.display = 'none'; } + function addReferenceClick(id, saveHistory = true, layerName) { + addLayer(...arguments); + currFile.layers[currFile.layers.length-1].selectLayer(); + } function addLayerClick(id, saveHistory = true, layerName) { addLayer(...arguments); currFile.layers[currFile.layers.length-1].selectLayer(); @@ -156,14 +161,6 @@ const LayerList = (() => { dragStartLayer = getLayerByID(layerList.children[event.oldIndex].id); } function getLayerByID(id) { - //console.log(`getLayerByID(${id})`); - // for (let i=0; i { } } } - //console.log('ret === ',ret); - return ret ?? null; } function getLayerByName(name) { @@ -200,19 +195,9 @@ const LayerList = (() => { renamingLayer = true; } function duplicateLayer(event, saveHistory = true) { - function getMenuEntryIndex(list, entry) { - for (let i=0; i { let splashPostfix = ''; @@ -31,11 +32,13 @@ const Startup = (() => { * @param {*} skipModeConfirm If skipModeConfirm == true, then the mode switching confirmation will be skipped */ function newPixel (lpe = null, skipModeConfirm = false) { - console.log('called newPixel'); + DEBUG_ARR.push('called Startup -> newPixel'); console.trace(); // The palette is empty, at the beginning ColorModule.resetPalette(); + lpe = FileManager.upgradeLPE(lpe); + initLayers(lpe); initPalette(); @@ -60,6 +63,7 @@ const Startup = (() => { ////console.trace(); } function clearLayers() { + DEBUG_ARR.push('called Startup -> clearLayers'); console.dir(currFile.layers); for(let i = currFile.layers.length-1; i >= 0;i--) { currFile.layers[i].delete(i); @@ -70,6 +74,7 @@ const Startup = (() => { } } function initLayers(lpe) { + DEBUG_ARR.push('called Startup -> initLayers'); //console.group('called initLayers'); //console.log('currFile.layers === ',currFile.layers); @@ -150,6 +155,7 @@ const Startup = (() => { } function initPalette() { + DEBUG_ARR.push('called Startup -> initPalette'); // Get selected palette let selectedPalette = Util.getText('palette-button' + splashPostfix); @@ -197,6 +203,7 @@ const Startup = (() => { } function resetInput() { + DEBUG_ARR.push('called Startup -> resetInput'); //reset new form Util.setValue('size-width', 64); Util.setValue('size-height', 64); @@ -206,6 +213,7 @@ const Startup = (() => { } function newFromTemplate(preset, x, y) { + DEBUG_ARR.push('called Startup -> newFromTemplate'); if (preset != '') { const presetProperties = PresetModule.propertiesOf(preset); Util.setText('palette-button-splash', presetProperties.palette); @@ -219,6 +227,7 @@ const Startup = (() => { } function splashEditorMode(mode) { + DEBUG_ARR.push('called Startup -> splashEditorMode'); editorMode = mode; } diff --git a/js/ToolManager.js b/js/ToolManager.js index b81bbaa..caa6a53 100644 --- a/js/ToolManager.js +++ b/js/ToolManager.js @@ -47,6 +47,9 @@ const ToolManager = (() => { if (!EditorState.documentCreated || Dialogue.isOpen()) return; + const isHoveringMenuElement = !!mouseEvent.path.find(n=>n.id && n.id.includes("-menu")); + if(isHoveringMenuElement)return; + let mousePos = Input.getCursorPosition(mouseEvent); tools["zoom"].onMouseWheel(mousePos, mouseEvent.deltaY < 0 ? 'in' : 'out'); } diff --git a/js/pixel-editor.js b/js/pixel-editor.js index fb3737d..c81ebe4 100644 --- a/js/pixel-editor.js +++ b/js/pixel-editor.js @@ -5,7 +5,9 @@ //=include data/consts.js //=include data/palettes.js - +// str.split(`//=include `).slice(1).map(n=>{ +// return ``; +// }); /** UTILITY AND INPUT **/ //=include Util.js //=include Events.js diff --git a/old_lpe1.json b/old_lpe1.json new file mode 100644 index 0000000..f0200c4 --- /dev/null +++ b/old_lpe1.json @@ -0,0 +1,53 @@ +{ + "canvasWidth": 128, + "canvasHeight": 128, + "editorMode": "Advanced", + "color0": "#798040", + "color1": "#33ff69", + "color2": "#2f748a", + "nLayers": 7, + "layer4": { + "canvas": {}, + "context": { + "mozImageSmoothingEnabled": false + }, + "isSelected": false, + "isVisible": true, + "isLocked": false, + "oldLayerName": null, + "menuEntry": {}, + "id": "layer1", + "name": "Layer 0" + }, + "layer4ImageData": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAAAXNSR0IArs4c6QAABCRJREFUeF7tmrFx3DAQRXXlOFYDjtyLS3BkOXIJ7sWRG1DscuShZjADcwgSBD4ofO5TouCIvd3 / H3ZB8h5P / IVW4BG6eop / AoDgEAAAAARXIHj5dAAACK5A8PLpAAAQXIHg5dMBACC4AsHLpwMAQHAFgpdPBwCA4AoEL58OAADBFQhePh0AAIIrELx8OgAABFcgePl0AAAIrkDw8ukAABBcgeDl0wEAILgCwcunAwBAcAWCl08HAIDgCgQvnw4AAPEU + Pby + W2v6t / fP21 + /Pr4dbsNc7uCjnDeMz8Z/ + XH380wP1 / +3E6 vqQp6fvv6vjNH7bSS + UfGJxoA4Gh7dX4 + CoBe4wGg09ja5SMAWJufz / dSqy / lSweodbLxOjUAufm1bX4vdQBoNLZm2WL + MvvT / 5 o1e9ck8xXGMwJ63ahYrwYgdZOzbZ4OUGHWiEuUACyxlMbTAUY4voqpAmCU + Uu6nAEGgtALwIiWvy4XAAYBkB / 8 Wg6Bac3RI97e9AGgV8HC + h4ArjKfETDI / CVsS / vPnxmM3vkcAgea3wLAekxcBUCrDDOPjileBp3pAG7mzz46rABwNH / 28 TENAItQpdfApXcEs7f + fGTMOgamB6B0W + hk / sxjYBoAtnb / 3 jMBAGg9kv6 / bloAjh4IAcBNANia70fmL6UDwE0BqDFfAYDydwI1VnAI3FBpff9fa34PAFcbz23gzvbIAdi7DdwKcXYEfJTxAHDwAqj1d4C1AHy08QCwA0Da9Wdafwp3BMAsxgNAYfbnLV8JwGzGA8DO4S991AtAz2 / 9 a07wimu4C6g4DJ4ROp0dljUjfgB6JpeaawFAAICb6XnJANAIQG56 / r7g6BBYsyuvvAYADtTOjc4vLb0iBgANvlO8DGop5WoA0g7u + d4ZuwAAFOgrmQUALdv1RmsA4EZmtpTSA8D6 + 2 YYCbYjoMU8xRoAUKhoHAMAjM1TpA4AChWNYwCAsXmK1AFAoaJxDAAwNk + ROgAoVDSOAQDG5ilSBwCFiuYxVBDwJNAUBAAwNU6VNgColDSNAwCmxinT7oVghvm / 6 MHbwA4qeiAAgA7hWapTgA6g09IyEgBY2qZLGgB0WlpGAgBL23RJA4BOS8tIAGBpmy5pANBpaRkJACxt0yUNADotLSMBgKVtuqQBQKelZSQAsLRNlzQA6LS0jAQAlrbpkgYAnZaWkQDA0jZd0gCg09IyEgBY2qZLGgB0WlpGAgBL23RJA4BOS8tIAGBpmy5pANBpaRkJACxt0yUNADotLSMBgKVtuqQBQKelZSQAsLRNlzQA6LS0jAQAlrbpkgYAnZaWkQDA0jZd0gCg09IyEgBY2qZLGgB0WlpGAgBL23RJA4BOS8tIAGBpmy5pANBpaRkJACxt0yUNADotLSMBgKVtuqQBQKelZaR / PIgEn3reoTUAAAAASUVORK5CYII = ", + "layer5": { + "canvas": {}, + "context": { + "mozImageSmoothingEnabled": false + }, + "isSelected": false, + "isVisible": true, + "isLocked": false, + "oldLayerName": null, + "menuEntry": {}, + "id": "layer6", + "name": "Layer 1" + + }, + "layer5ImageData": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAAAXNSR0IArs4c6QAAA7ZJREFUeF7tnFFyo0AQQ + Mz7an2RDnVnilbqYqrHMo2aNBgLL380gMj6XUDdpLLBz / VDlyq1SP + AwDKIQAAACh3oFw + EwAAyh0ol88EAIByB8rlMwEAoNyBcvlMAAAod6BcPhMAAModKJfPBACAcgfK5TMBAKDcgXL5TAAAKHegXD4TAADKHSiXzwQAgHIHyuUzAQCg3IFy + UwAACh3oFw + EwAAyh0ol88EAIByB8rlMwEAoNyBcvlMAAAod6BcPhMAAModKJfPBPgB4M / X3y + FhX + XzwjvIkQowS1r1eCv6wFgj + snWTsa / vf2AeAkIY5uY0 / 4 ADDq + knW7Q0fAE4S5Mg2HOEDwIjzJ1jjCh8AThCmugVn + G4ARvfmeBCteA0cNfgZZHvNd + xp7x6 + 9 QGAOkp + 6 lXzHYEvt6ru4Z7UeABmGL / 1 FjDr2s4Po6IBmBnAo + 6 beU0mgDiuZ4WxDH / Wddbkcgt44tCMUK6Gzzj3Wtj3jgPAA9fOEtBIqMoaALjjVkv4Wx9E14CKewgEgLXIfx + PAqApfCbAAvS28AEAACy / lBJzC2ACaPf + azUAjPn28lWOV8CoL4PaJgAAlD8DAEAxAK7wuQUccCef8cURAJz8I + DZXxUDwAkB2BKK40F1y3WUwcZroOLWTa0ahCN816d / t5IBQABADf321A4A9lz / kUwAeAKAy3BH + DO6n7eARfiuwJdMOQCYtbeYCSBM8kNLHeHP6v6oCXBoqsLFHADM6n4AEIIcKXWEP7P7AWAkVWGNA4CZ3Q8AQphqqSP82d0PAGqqQr0DgNndDwBCoEqpI / wjuh8AlFSFWgcAR3Q / AAihbi11hH9U9wPA1lSFOgcAR3U / AAjBbil1hH9k9wPAllSFGgcAR3Y / AAjhrpU6wj + 6 + wFgLVXhuAOAo7sfAISA10oBYM2h8ON7AXhF9zMBjFACgNHMdzzVHgBe1f1MACNpAGA08x1PNQrAK7ufCWAkDQCMZr7jqQDgHVMz7nkEgFePf24BANDx7 + KNOcedij8MiYtUEwQAml9x1QAQF6kmCAA0v + KqASAuUk0QAGh + xVUDQFykmiAA0PyKqwaAuEg1QQCg + RVXDQBxkWqCAEDzK64aAOIi1QQBgOZXXDUAxEWqCQIAza + 4 agCIi1QTBACaX3HVABAXqSYIADS / 4 qoBIC5STRAAaH7FVQNAXKSaIADQ / IqrBoC4SDVBAKD5FVcNAHGRaoIAQPMrrhoA4iLVBAGA5ldcNQDERaoJAgDNr7jq / yPDGJDPZGMlAAAAAElFTkSuQmCC ", + "layer6": { + "canvas": {}, + "context": { + "mozImageSmoothingEnabled": false + }, + "isSelected": true, + "isVisible": true, + "isLocked": false, + "oldLayerName": null, + "menuEntry": {}, + "id": "layer7", + "name": "Layer 2" + + }, + "layer6ImageData": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAAAXNSR0IArs4c6QAAA9VJREFUeF7tnFuO1TAQRGdWxOYQi0BsjhWBrsQVmSgPt92VVNxnfse4y1UnZQshPj / 4 Ke3AZ + nTc / gPACgOAQAAQHEHih + fBgCA4g4UPz4NAADFHSh + fBoAAIo7UPz4NAAAFHeg + PFpAAAo7kDx49MAAFDcgeLHpwEAoLgDxY9PAwBAcQeKH58GAIDiDhQ / fqkG + Pb9559o3r9 //Zjao6kPtw67B4DlHjPCUAaA0fC3mmMGIAAgeiccrH8iECUAUHz9R9w8CQQASGyA9VZPAGF6AK7++p/2VgAAYQNEGiEKala7AMCFALxG7QUHAIIgoqYKJOxuuQYhqpUGaEgramrDlqlLliFGtQJAQxRRUxu2TF/yDrJHawYEU78BekxNT1i4IQAcmDt7+EcPyghz0zYAALRhAAAbPo08ztpsz1nFFSC6AraMdWwUANgBYCSsM1NH9s757v/vcqa1Zd6UV8BISK2mjsxoCaZlTavWo70AYOVO1NQ7QYhq3QIBABau9Bp6FwS9epcgAEACAO8trgYBAJIfgRmGXglBht7pGmAkgAxDX0yOaGh5/L3XZOgFgH9uZpi5Dk8NQoZmABACoG4DANjoy96vLsPMvfru1XR2HWRopgHEDaBsAQBIaoAMI8++VkULZOimAQ7+oeZZqNHfZ0MAAA9qAMVfFgEAAAw3+PAG0RpUr++p2YwvKXKuHo1b+2foBoAL3wDLEEchyAj/pac8AFlGRhog4z2QpRsAbv4vYHqaICt8GuCm+u9pC9WfoQFubgBVsK37AgAAtLLyjHXROzXzPn2GQ19V0gA0wBO53ddMA8TypAFogBgx7qtpgFhCNAANECPGfTUNEEuIBqABYsS4r6YBYgnRADRAjBj31TRALCEagAaIEeO+mgaIJUQD0AAxYtxX0wCxhGgAGiBGDKvncmC6BpgrHv1pAEDvsfUEALCORy8OAPQeW08AAOt49OIAQO+x9QQAsI5HLw4A9B5bTwAA63j04gBA77H1BACwjkcvDgD0HltPAADrePTiAEDvsfUEALCORy8OAPQeW08AAOt49OIAQO+x9QQAsI5HLw4A9B5bTwAA63j04gBA77H1BACwjkcvDgD0HltPAADrePTiAEDvsfUEALCORy8OAPQeW08AAOt49OIAQO+x9QQAsI5HLw4A9B5bTwAA63j04gBA77H1BACwjkcvDgD0HltPAADrePTiAEDvsfUEALCORy8OAPQeW08AAOt49OIAQO+x9QQAsI5HLw4A9B5bTwAA63j04gBA77H1BACwjkcvDgD0HltPAADrePTi/gKPB0SQMNaI5gAAAABJRU5ErkJggg==" +} \ No newline at end of file diff --git a/views/index.hbs b/views/index.hbs index af4a57e..49700b7 100644 --- a/views/index.hbs +++ b/views/index.hbs @@ -18,8 +18,11 @@ {{> main-menu}} {{> tools-menu}} - {{> colors-menu}} - {{> layers-menu}} + +
+ {{> colors-menu}} + {{> layers-menu}} +
{{> tool-previews}} {{> canvases}} diff --git a/views/layers-menu.hbs b/views/layers-menu.hbs index 3fb77ad..c376b0f 100644 --- a/views/layers-menu.hbs +++ b/views/layers-menu.hbs @@ -24,6 +24,9 @@ +