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)
74 lines
2.6 KiB
Handlebars
74 lines
2.6 KiB
Handlebars
<!-- PALETTE -->
|
|
<div id="palette-block">
|
|
<button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
|
|
|
|
<h1>Edit palette</h1>
|
|
|
|
<div id="colour-picker">
|
|
<div id="cp-modes">
|
|
<button id="cp-rgb" class="cp-selected-mode">RGB</button>
|
|
<button id="cp-hsv">HSV</button>
|
|
<button id="cp-hsl">HSL</button>
|
|
|
|
<div id="cp-colour-preview" class="cp-colour-preview"></div>
|
|
<input id="cp-hex" type="text" value="#123456"/>
|
|
</div>
|
|
|
|
<div id="sliders-container">
|
|
<div class = "cp-slider-entry">
|
|
<label for = "first-slider">R</label>
|
|
<input type="range" min="0" max="255" class="colour-picker-slider" id="first-slider"/>
|
|
<input type = "text" value = "128" id="cp-sliderText1"/>
|
|
</div>
|
|
|
|
<div class = "cp-slider-entry">
|
|
<label for = "second-slider">G</label>
|
|
<input type="range" min="0" max ="255" class="colour-picker-slider" id="second-slider"/>
|
|
<input type = "text" value = "128" id="cp-sliderText2"/>
|
|
</div>
|
|
|
|
<div class = "cp-slider-entry">
|
|
<label for = "third-slider">B</label>
|
|
<input type="range" min = "0" max = "255" class = "colour-picker-slider" id="third-slider"/>
|
|
<input type = "text" value = "128" id="cp-sliderText3"/>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="cp-minipicker">
|
|
<input type = "range" min = "0" max = "100" id="cp-minipicker-slider"/>
|
|
<div id="cp-canvas-container">
|
|
<canvas id="cp-spectrum"></canvas>
|
|
<div id="cp-active-icon" class="cp-picker-icon"></div>
|
|
</div>
|
|
|
|
<div id="cp-colours-previews">
|
|
<div class = "cp-colour-preview">
|
|
#123456
|
|
</div>
|
|
</div>
|
|
|
|
<div id="cp-colour-picking-modes">
|
|
<button id="cp-mono" class="cp-selected-mode">Mono</button>
|
|
<button id="cp-analog">Nlgs</button>
|
|
<button id="cp-cmpt">Cmpt</button>
|
|
<button id="cp-tri">Tri</button>
|
|
<button id="cp-scmpt">Scm</button>
|
|
<button id="cp-tetra">Tetra</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="palette-container">
|
|
<ul id="palette-list">
|
|
<li style = "background-color:rgb(255,0,0);width:40px;height:40px;" onmousedown="PaletteBlock.startRampSelection(event)"
|
|
onmousemove="PaletteBlock.updateRampSelection(event)" onmouseup="PaletteBlock.endRampSelection(event)"></li>
|
|
<li style = "background-color:rgb(0,255,0);width:40px;height:40px;"onmousedown="PaletteBlock.startRampSelection(event)"
|
|
onmousemove="PaletteBlock.updateRampSelection(event)" onmouseup="PaletteBlock.endRampSelection(event)"></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div id="pb-options">
|
|
<button title="Add colours to palette" id="pb-addcolours">Add colours</button>
|
|
<button title="Remove colours from palette" id="pb-removecolours">Remove colours</button>
|
|
</div>
|
|
</div> |