mirror of
https://github.com/lospec/pixel-editor.git
synced 2023-08-10 21:12:51 +03:00
a1757553cf
- added `/:paletteSlug/:resolution` functionality for localhost testing
- created `currFile.sublayers` for *things that should zoom with the canvas layers*
- `currFile.layers` now solely contains the canvas layers
- added `getProjectData` to `FileManager`'s exported methods
---
- added `FileManager.localStorageSave` (it's basically just: localStorage.setItem("lpe-cache",FileManager.getProjectData()))
- added `FileManager.localStorageCheck` (it's basically just: `!!localStorage.getItem("lpe-cache")`)
- added `FileManager.localStorageLoad` (it's basically just: `return localStorage.getItem("lpe-cache")`)
- added `FileManager.localStorageReset` (for debugging purity)
---
- calling `FileManager.localStorageSave()` on mouse up (we should stress test this)
---
- changed lpe file format to `{canvasWidth:number,canvasHeight:number,selectedLayer:number,colors:[],layers:[]}`
- added backward compatibility for the old lpe file format
---
- added some canvas utility functions in `canvas_util`
- added Unsettled's color similarity utility functions in `color_util2`
---
- html boilerplate - wang tiles
-
- POC - tiny text boilerplate
- POC - tiny text font scraper
---
- WIP - added two optional url route parameters `/:paletteSlug/:resolution/:prefillWidth/:prefillBinaryStr`
- WIP POC - hbs_parser.js (outputs tree data about hbs file relationships)
68 lines
3.5 KiB
Handlebars
68 lines
3.5 KiB
Handlebars
<ul id="tools-menu">
|
|
<li class="selected expanded">
|
|
<button id="brush-button">{{svg "pencil.svg" width="24" height="24"}}</button>
|
|
<ul class="size-buttons">
|
|
<button title="Increase Brush Size" id="brush-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
|
|
<button title="Decrease Brush Size" id="brush-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class = "expanded">
|
|
<button id="eraser-button">{{svg "eraser.svg" width="24" height="24"}}</button>
|
|
<ul class="size-buttons">
|
|
<button title="Increase Eraser Size" id="eraser-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
|
|
<button title="Decrease Eraser Size" id="eraser-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="expanded">
|
|
<button id="rectangle-button">{{svg "rectangle.svg" width="24" height="24" id="rectangle-empty-button-svg"}}
|
|
{{svg "fullrect.svg" width="24" height="24" id="rectangle-full-button-svg" display = "none"}}</button>
|
|
<ul class="size-buttons">
|
|
<button title="Increase Rectangle Size" id="rectangle-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
|
|
<button title="Decrease Rectangle Size" id="rectangle-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="expanded">
|
|
<button id="ellipse-button">
|
|
{{svg "ellipse.svg" width="24" height="24" id="ellipse-empty-button-svg"}}
|
|
{{svg "filledellipse.svg" width="24" height="24" id="ellipse-full-button-svg" display = "none"}}
|
|
</button>
|
|
<ul class="size-buttons">
|
|
<button title="Increase Ellipse Size" id="ellipse-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
|
|
<button title="Decrease Ellipse Size" id="ellipse-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="expanded">
|
|
<button id="line-button">{{svg "line.svg" width="24" height="24"}}</button>
|
|
<ul class="size-buttons">
|
|
<button title="Increase Line Size" id="line-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
|
|
<button title="Decrease Line Size" id="line-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
|
|
</ul>
|
|
</li>
|
|
|
|
<li><button id="fill-button">{{svg "fill.svg" width="24" height="24"}}</button></li>
|
|
|
|
<li><button id="rectselect-button">{{svg "rectselect.svg" width = "24" height = "24"}}</button><li>
|
|
|
|
<li><button id="lassoselect-button">{{svg "lasso.svg" width = "26" height = "26"}}</button></li>
|
|
|
|
<li><button id="magicwand-button">{{svg "magicwand.svg" width = "26" height = "26"}}</button></li>
|
|
|
|
<li><button id="eyedropper-button">{{svg "eyedropper.svg" width="24" height="24"}}</button></li>
|
|
|
|
<li><button id="pan-button">{{svg "pan.svg" width="24" height="24"}}</button></li>
|
|
</ul>
|
|
|
|
<div id="tool-tutorial" class="fade-in">
|
|
<h3>Brush tool</h3>
|
|
<ul>
|
|
<li><span class="keyboard-key">B</span> to select the tool</li>
|
|
<li><span class="keyboard-key">Left drag</span> to use the tool</li>
|
|
<li><span class="keyboard-key">Right drag</span> to change tool size</li>
|
|
<li><span class="keyboard-key">+</span> or <span class="keyboard-key">-</span> to change tool size</li>
|
|
</ul>
|
|
<img src="brush-tutorial.gif"/>
|
|
</div>" |