mirror of https://github.com/piskelapp/piskel.git
Moved image import to worker
This commit is contained in:
jdescottes
parent
9afe69cb87
commit
6445b44d02
|
|
@ -1,10 +1,10 @@
|
|||
@font-face {
|
||||
font-family: 'piskel';
|
||||
src:url('fonts/piskel.eot?-3olv93');
|
||||
src:url('fonts/piskel.eot?#iefix-3olv93') format('embedded-opentype'),
|
||||
url('fonts/piskel.woff?-3olv93') format('woff'),
|
||||
url('fonts/piskel.ttf?-3olv93') format('truetype'),
|
||||
url('fonts/piskel.svg?-3olv93#icomoon') format('svg');
|
||||
src:url('fonts/icomoon.eot?-3olv93');
|
||||
src:url('fonts/icomoon.eot?#iefix-3olv93') format('embedded-opentype'),
|
||||
url('fonts/icomoon.woff?-3olv93') format('woff'),
|
||||
url('fonts/icomoon.ttf?-3olv93') format('truetype'),
|
||||
url('fonts/icomoon.svg?-3olv93#icomoon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -31,3 +31,66 @@
|
|||
content: "\e601";
|
||||
}
|
||||
|
||||
.piskel-icon-download:before {
|
||||
content: "\e600";
|
||||
}
|
||||
|
||||
.piskel-icon-rotateleft:before {
|
||||
content: "\e603";
|
||||
}
|
||||
|
||||
.piskel-icon-rotateright:before {
|
||||
content: "\e604";
|
||||
}
|
||||
|
||||
.piskel-icon-fliph:before {
|
||||
content: "\e605";
|
||||
}
|
||||
|
||||
.piskel-icon-flipv:before {
|
||||
content: "\e606";
|
||||
}
|
||||
|
||||
.piskel-icon-trashplain:before {
|
||||
content: "\e607";
|
||||
}
|
||||
|
||||
.piskel-icon-trash:before {
|
||||
content: "\e608";
|
||||
}
|
||||
|
||||
.piskel-icon-merge:before {
|
||||
content: "\e609";
|
||||
}
|
||||
|
||||
.piskel-icon-pencil:before {
|
||||
content: "\e610";
|
||||
}
|
||||
|
||||
.piskel-icon-close:before {
|
||||
content: "\e611";
|
||||
}
|
||||
|
||||
.piskel-icon-minus:before {
|
||||
content: "\e60a";
|
||||
}
|
||||
|
||||
.piskel-icon-plus:before {
|
||||
content: "\e60b";
|
||||
}
|
||||
|
||||
.piskel-icon-arrow-up-fat:before {
|
||||
content: "\e60c";
|
||||
}
|
||||
|
||||
.piskel-icon-arrow-down-fat:before {
|
||||
content: "\e60d";
|
||||
}
|
||||
|
||||
.piskel-icon-arrow-up-thin:before {
|
||||
content: "\e60e";
|
||||
}
|
||||
|
||||
.piskel-icon-arrow-down-thin:before {
|
||||
content: "\e60f";
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -0,0 +1,28 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>Generated by IcoMoon</metadata>
|
||||
<defs>
|
||||
<font id="icomoon" horiz-adv-x="512">
|
||||
<font-face units-per-em="512" ascent="480" descent="-32" />
|
||||
<missing-glyph horiz-adv-x="512" />
|
||||
<glyph unicode=" " d="" horiz-adv-x="256" />
|
||||
<glyph unicode="" d="M256 192l128 128h-96v128h-64v-128h-96zM372.363 244.364l-35.87-35.871 130.040-48.493-210.533-78.509-210.533 78.509 130.040 48.493-35.871 35.871-139.636-52.364v-128l256-96 256 96v128z" />
|
||||
<glyph unicode="" d="M327.755 416.174l-24.759-21.971-1.481 8.030-14.159-4.099v-27.379l0.914-19.404 26.988 23.949c-0.347-4.934-0.51-10.141-0.166-15.921 0.543-9.151 3.055-17.374 8.057-23.811s11.74-10.557 19.211-13.967c14.942-6.822 33.56-18.012 56.377-36.978 43.203-35.907 48.548-53.828 56.334-85.404 7.412-41.045-4.368-70.606-21.368-95.68-12.144-17.918-27.179-33.815-60.225-40.518s-63.992-8.866-86.123-8.866v-22.304c23.555 0 55.469 2.195 90.553 9.313s69.693 18.531 90.832 40.649c22.885 23.941 44.76 67.328 31.672 135.162l-0.055 0.223c-5.829 27.055-23.529 67.689-92.729 97.775-28.624 12.445-44.153 20.477-55.829 25.809-5.837 2.666-9.197 6.119-11.030 8.475s-3.034 5.246-3.401 11.43c-0.827 13.918 1.198 24.507 3.318 31.505s3.904 9.702 3.904 9.702l-16.84 14.276zM303.444 372.291c0 0-16.082 4.204-16.082-1.173 0-29.786-0.407-35.048 9.808-56.095s23.399-42.701 43.302-61.078c37.637-34.753 34.591-40.033 40.837-57.911 2.3-6.582 3.27-21.87 1.673-33.875s-6.074-27.851-11.959-36.856c-9.25-14.152-16.702-28.62-34.395-38.447-18.488-10.269-34.432-12.486-49.265-12.486v-22.304c18.579 0 39.728 4.476 62.060 13.494s43.831 22.548 56.848 42.462c8.719 13.341 17.897 33.653 19.924 49.887s6.051 30.237-4.534 52.106c-16.294 33.661-37.961 43.77-64.413 66.162-16.375 13.863-31.099 30.183-40.029 48.578s-13.219 37.077-13.772 47.536zM300.488 357.961l-13.128-1.2c0.667-12.589 0-38.494 0-63.093 0-11.679 1.942-25.867 3.768-35.663 3.517-18.873 9.378-31.122 13.056-42.974 2.921-9.421 6.195-22.61 8.376-27.676 5.897-13.728 6.717-30.505 0.674-49.822-6.121-19.563-15.663-38.313-31.608-44.469l5.736-18.915c23.072 8.907 55.35 34.019 64.177 62.238 7.959 25.431 2.932 48.415-4.32 65.295-4.397 10.236-8.579 17.284-13.263 25.818-5.764 10.5-18.011 23.661-21.517 34.382-3.19 9.75-6.983 21.54-7.96 33.601-1.955 24.118-3.242 48.871-3.986 62.479zM248.405 416.148l24.758-21.971 1.481 8.029 14.159-4.099v-27.379l-0.914-19.403-26.988 23.949c0.347-4.933 0.51-10.141 0.166-15.92-0.543-9.152 0.548-18.276-4.452-24.711s-10.838-15.063-18.308-18.475c-14.942-6.823-32.661-18.010-55.476-36.978-43.203-35.907-42.239-45.718-50.025-77.294-2.905-41.947-5.284-41.359 4.244-70.447 5.757-17.579 19.97-34.716 53.016-50.429 30.453-14.481 76.609-26.889 98.737-26.889v-22.304c-23.555 0-55.469 2.195-90.553 9.309s-69.692 18.531-90.832 40.649c-22.885 23.94-44.76 67.329-31.671 135.162l0.055 0.223c5.829 27.055 23.529 67.689 92.731 97.775 28.623 12.445 44.153 20.477 55.826 25.808 5.839 2.665 9.197 6.119 11.034 8.474s3.034 5.246 3.401 11.43c0.827 13.918-1.198 24.507-3.318 31.505s-3.903 9.702-3.903 9.702l16.84 14.274zM281.987 374.814l8.031-11.395c-0.667-12.589 0-38.494 0-63.093 0-11.68 3.154-27.141 1.329-36.938-3.517-18.873-3.009-25.387-6.684-37.239-2.921-9.421-6.195-25.794-8.376-30.864-5.897-13.728-7.354-45.161-1.31-64.478 6.121-19.563 9.928-44.689 19.498-59.125l3.56-36.712c-21.161 28.662-42.512 61.597-51.342 89.814-7.958 25.431-7.393 70.082-0.139 86.961 4.398 10.236 8.578 20.472 13.263 29.004 5.764 10.5 9.043 20.958 11.649 32.578 2.245 10.010 6.192 26.31 7.168 38.372 1.955 24.121 2.604 49.509 3.351 63.117z" horiz-adv-x="576" />
|
||||
<glyph unicode="" d="M256 384c-111.659 0-208.441-65.021-256-160 47.559-94.979 144.341-160 256-160 111.657 0 208.439 65.021 256 160-47.558 94.979-144.343 160-256 160zM382.225 299.148c30.081-19.187 55.571-44.887 74.717-75.148-19.146-30.261-44.637-55.961-74.718-75.149-37.797-24.108-81.445-36.851-126.224-36.851-44.78 0-88.428 12.743-126.225 36.852-30.080 19.186-55.57 44.886-74.717 75.148 19.146 30.262 44.637 55.962 74.717 75.148 1.959 1.25 3.938 2.461 5.929 3.65-4.979-13.664-7.704-28.411-7.704-43.798 0-70.692 57.308-128 128-128s128 57.308 128 128c0 15.387-2.725 30.134-7.704 43.799 1.99-1.189 3.969-2.401 5.929-3.651zM256 275c0-26.51-21.49-48-48-48s-48 21.49-48 48 21.49 48 48 48 48-21.49 48-48z" />
|
||||
<glyph unicode="" d="M256 448c-70.692 0-134.688-28.66-181.016-74.989l-74.984 74.989v-192h192l-71.766 71.761c34.748 34.746 82.746 56.239 135.766 56.239 106.034 0 192-85.962 192-192 0-57.348-25.146-108.818-65.009-144l42.333-48c53.151 46.908 86.676 115.538 86.676 192 0 141.385-114.615 256-256 256z" />
|
||||
<glyph unicode="" d="M0 192c0-76.462 33.524-145.092 86.675-192l42.333 48c-39.863 35.182-65.008 86.652-65.008 144 0 106.038 85.965 192 192 192 53.021 0 101.019-21.493 135.765-56.239l-71.765-71.761h192v192l-74.985-74.989c-46.327 46.329-110.322 74.989-181.015 74.989-141.385 0-256-114.615-256-256z" />
|
||||
<glyph unicode="" d="M0 288h512v192zM512 0v192h-512z" />
|
||||
<glyph unicode="" d="M288 480v-512h192zM0-32h192v512z" />
|
||||
<glyph unicode="" d="M96-32h320l32 352h-384zM320 416v64h-128v-64h-160v-96l32 32h384l32-32v96h-160zM288 416h-64v32h64v-32z" />
|
||||
<glyph unicode="" d="M400 416h-288c-26.51 0-48-21.49-48-48v-16h384v16c0 26.51-21.49 48-48 48zM316.16 448l7.058-50.5h-134.436l7.057 50.5h120.321zM320 480h-128c-13.2 0-25.495-10.696-27.321-23.769l-9.357-66.962c-1.827-13.073 7.478-23.769 20.678-23.769h160c13.2 0 22.505 10.696 20.679 23.769l-9.357 66.962c-1.827 13.073-14.122 23.769-27.322 23.769v0zM408 320h-304c-17.6 0-30.696-14.341-29.103-31.869l26.206-288.263c1.593-17.527 17.297-31.868 34.897-31.868h240c17.6 0 33.304 14.341 34.897 31.868l26.205 288.263c1.594 17.528-11.502 31.869-29.102 31.869zM192 32h-48l-16 224h64v-224zM288 32h-64v224h64v-224zM368 32h-48v224h64l-16-224z" />
|
||||
<glyph unicode="" d="M448 224h-80l-112-112-112 112h-80l-64-128v-32h512v32l-64 128zM0 32h512v-32h-512v32zM288 320v128h-64v-128h-112l144-144 144 144h-112z" />
|
||||
<glyph unicode="" d="M0 272v-96c0-8.836 7.164-16 16-16h480c8.836 0 16 7.164 16 16v96c0 8.836-7.164 16-16 16h-480c-8.836 0-16-7.164-16-16z" />
|
||||
<glyph unicode="" d="M496 288h-176v176c0 8.836-7.164 16-16 16h-96c-8.836 0-16-7.164-16-16v-176h-176c-8.836 0-16-7.164-16-16v-96c0-8.836 7.164-16 16-16h176v-176c0-8.836 7.164-16 16-16h96c8.836 0 16 7.164 16 16v176h176c8.836 0 16 7.164 16 16v96c0 8.836-7.164 16-16 16z" />
|
||||
<glyph unicode="" d="M256.001 480l-256.001-256h160v-255.999l192-0.001v256h160z" />
|
||||
<glyph unicode="" d="M256-32l256 256h-160v255.999l-192 0.001v-256h-160z" />
|
||||
<glyph unicode="" d="M438.627 278.627l-160 160c-12.496 12.497-32.757 12.497-45.254 0l-160-160c-12.497-12.497-12.497-32.758 0-45.255 12.497-12.498 32.758-12.498 45.255 0l105.372 105.373v-306.745c0-17.673 14.327-32 32-32s32 14.327 32 32v306.745l105.373-105.373c6.248-6.248 14.438-9.372 22.627-9.372s16.379 3.124 22.627 9.373c12.497 12.497 12.497 32.757 0 45.254z" />
|
||||
<glyph unicode="" d="M73.373 169.373l160-160c12.496-12.497 32.758-12.497 45.255 0l160 160c12.496 12.497 12.496 32.758 0 45.255-12.497 12.497-32.758 12.497-45.255 0l-105.373-105.373v306.745c0 17.673-14.327 32-32 32s-32-14.327-32-32v-306.745l-105.373 105.373c-6.248 6.248-14.438 9.372-22.627 9.372s-16.379-3.124-22.627-9.372c-12.497-12.497-12.497-32.758 0-45.255z" />
|
||||
<glyph unicode="" d="M432 480c44.182 0 80-35.817 80-80 0-18.010-5.955-34.629-16-48l-32-32-112 112 32 32c13.371 10.045 29.989 16 48 16zM32 112l-32-144 144 32 296 296-112 112-296-296zM357.789 298.211l-224-224-27.578 27.578 224 224 27.578-27.578z" />
|
||||
<glyph unicode="" d="M507.331 68.67c-0.002 0.002-0.004 0.004-0.006 0.005l-155.322 155.325 155.322 155.325c0.002 0.002 0.004 0.003 0.006 0.005 1.672 1.673 2.881 3.627 3.656 5.708 2.123 5.688 0.912 12.341-3.662 16.915l-73.373 73.373c-4.574 4.573-11.225 5.783-16.914 3.66-2.080-0.775-4.035-1.984-5.709-3.655 0-0.002-0.002-0.003-0.004-0.005l-155.324-155.326-155.324 155.325c-0.002 0.002-0.003 0.003-0.005 0.005-1.673 1.671-3.627 2.88-5.707 3.655-5.69 2.124-12.341 0.913-16.915-3.66l-73.374-73.374c-4.574-4.574-5.784-11.226-3.661-16.914 0.776-2.080 1.985-4.036 3.656-5.708 0.002-0.001 0.003-0.003 0.005-0.005l155.325-155.324-155.325-155.326c-0.001-0.002-0.003-0.003-0.004-0.005-1.671-1.673-2.88-3.627-3.657-5.707-2.124-5.688-0.913-12.341 3.661-16.915l73.374-73.373c4.575-4.574 11.226-5.784 16.915-3.661 2.080 0.776 4.035 1.985 5.708 3.656 0.001 0.002 0.003 0.003 0.005 0.005l155.324 155.325 155.324-155.325c0.002-0.001 0.004-0.003 0.006-0.004 1.674-1.672 3.627-2.881 5.707-3.657 5.689-2.123 12.342-0.913 16.914 3.661l73.373 73.374c4.574 4.574 5.785 11.227 3.662 16.915-0.776 2.080-1.985 4.034-3.657 5.707z" />
|
||||
</font></defs></svg>
|
||||
|
After Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
Binary file not shown.
|
|
@ -77,11 +77,6 @@
|
|||
color: gold;
|
||||
}
|
||||
|
||||
.layers-button-arrow {
|
||||
font-family : 'Lucida Grande', Calibri;
|
||||
padding : 2px 6px 0 6px;
|
||||
}
|
||||
|
||||
.layers-button-container {
|
||||
overflow : hidden;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,102 +1,106 @@
|
|||
.palettes-list-select {
|
||||
max-width:120px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.palettes-title {
|
||||
background-size: 22px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 97%;
|
||||
background-size: 22px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 97%;
|
||||
}
|
||||
|
||||
.palettes-list-colors {
|
||||
overflow: auto;
|
||||
max-height: 160px;
|
||||
overflow: auto;
|
||||
max-height: 160px;
|
||||
}
|
||||
|
||||
.palettes-list-color {
|
||||
cursor : pointer;
|
||||
float: left;
|
||||
margin : 0 0 5px 5px;
|
||||
width : 32px;
|
||||
height : 32px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
margin: 0 0 5px 5px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.palettes-list-color:nth-child(-n+5) {
|
||||
margin-top: 5px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.palettes-list-color div{
|
||||
width : 32px;
|
||||
height : 32px;
|
||||
.palettes-list-color div {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.palettes-list-has-scrollbar .palettes-list-color,
|
||||
.palettes-list-has-scrollbar .palettes-list-color div{
|
||||
width: 29px
|
||||
.palettes-list-has-scrollbar .palettes-list-color, .palettes-list-has-scrollbar .palettes-list-color div {
|
||||
width: 29px
|
||||
}
|
||||
|
||||
.palettes-list-primary-color:before,
|
||||
.palettes-list-secondary-color:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 1px;
|
||||
display: inline-block;
|
||||
border: 7px solid gold;
|
||||
border-top-color: transparent;
|
||||
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
.palettes-list-primary-color:before, .palettes-list-secondary-color:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 1px;
|
||||
display: inline-block;
|
||||
border: 7px solid gold;
|
||||
border-top-color: transparent;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
.palettes-list-primary-color:before {
|
||||
left: 1px;
|
||||
border-right-color: transparent;
|
||||
left: 1px;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
.palettes-list-secondary-color:before {
|
||||
right: 1px;
|
||||
border-left-color: transparent;
|
||||
right: 1px;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
.palettes-list-actions {
|
||||
background-color: #3f3f3f;
|
||||
border-bottom-color: #222;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.palettes-list-actions {
|
||||
background-color: #3f3f3f;
|
||||
border-bottom-color: #222;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
.palettes-list-button,
|
||||
.palettes-list-select {
|
||||
margin: 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.palettes-list-button {
|
||||
margin: 0;
|
||||
width: 36px;
|
||||
float: left;
|
||||
width: 16.66667%;
|
||||
}
|
||||
.palettes-list-select {
|
||||
width: 66.66667%;
|
||||
height: 100%;
|
||||
padding: 0 5px 0 5px;
|
||||
|
||||
border-style: solid;
|
||||
border-width: 1px 0 1px 0;
|
||||
|
||||
color: #aaa;
|
||||
font-size : 0.75em;
|
||||
|
||||
/*thanks firefox, you suck*/
|
||||
text-align:left;
|
||||
/*text-shadow:none;*/
|
||||
font-weight: normal;
|
||||
|
||||
transition : background-color 0.3s, color 0.3s;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.palettes-list-select {
|
||||
float: left;
|
||||
width: 66.66667%;
|
||||
height: 100%;
|
||||
|
||||
margin: 0;
|
||||
padding: 0 5px 0 5px;
|
||||
|
||||
background: #3f3f3f;
|
||||
|
||||
border-style : solid;
|
||||
border-top-color: #666;
|
||||
border-bottom-color: #222;
|
||||
border-width: 1px 0 1px 0;
|
||||
|
||||
color: white;
|
||||
.palettes-list-select:hover {
|
||||
color: white;
|
||||
background-color: #484848;
|
||||
}
|
||||
|
||||
.palettes-list-select:focus {
|
||||
outline:none;
|
||||
background-color: #484848;
|
||||
color: white;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.palettes-list-actions .edit-icon {
|
||||
background-size : 15px;
|
||||
background-position : 50%;
|
||||
}
|
||||
background-size: 15px;
|
||||
background-position: 50%;
|
||||
}
|
||||
.palettes-list-no-colors {
|
||||
height: 42px;
|
||||
width: 100%;
|
||||
color: grey;
|
||||
font-size: 0.7em;
|
||||
font-style: italic;
|
||||
line-height: 42px;
|
||||
text-align: center
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,6 +28,31 @@
|
|||
this.layersListEl.innerHTML = '';
|
||||
var layers = this.piskelController.getLayers();
|
||||
layers.forEach(this.addLayerItem.bind(this));
|
||||
this.updateButtonStatus_();
|
||||
};
|
||||
|
||||
ns.LayersListController.prototype.updateButtonStatus_ = function () {
|
||||
var layers = this.piskelController.getLayers();
|
||||
var currentLayer = this.piskelController.getCurrentLayer();
|
||||
var index = this.piskelController.getCurrentLayerIndex();
|
||||
|
||||
var isLast = index === 0;
|
||||
var isOnly = layers.length === 1;
|
||||
var isFirst = index === layers.length - 1;
|
||||
|
||||
this.toggleButtonDisabledState_('up', isFirst);
|
||||
this.toggleButtonDisabledState_('down', isLast);
|
||||
this.toggleButtonDisabledState_('merge', isLast);
|
||||
this.toggleButtonDisabledState_('delete', isOnly);
|
||||
};
|
||||
|
||||
ns.LayersListController.prototype.toggleButtonDisabledState_ = function (buttonAction, isDisabled) {
|
||||
var button = document.querySelector('.layers-button[data-action="'+buttonAction+'"]');
|
||||
if (isDisabled) {
|
||||
button.setAttribute('disabled', 'disabled');
|
||||
} else {
|
||||
button.removeAttribute('disabled');
|
||||
}
|
||||
};
|
||||
|
||||
ns.LayersListController.prototype.updateToggleLayerPreview_ = function () {
|
||||
|
|
@ -64,25 +89,21 @@
|
|||
} else if (el.classList.contains('layer-item')) {
|
||||
index = el.dataset.layerIndex;
|
||||
this.piskelController.setCurrentLayerIndex(parseInt(index, 10));
|
||||
} else if (el.classList.contains('edit-icon')) {
|
||||
index = el.parentNode.dataset.layerIndex;
|
||||
this.renameLayerAt_(index);
|
||||
} else if (el.classList.contains('merge-icon')) {
|
||||
index = el.parentNode.dataset.layerIndex;
|
||||
this.mergeDownLayerAt_(index);
|
||||
}
|
||||
};
|
||||
|
||||
ns.LayersListController.prototype.renameLayerAt_ = function (index) {
|
||||
var layer = this.piskelController.getLayerAt(index);
|
||||
ns.LayersListController.prototype.renameCurrentLayer_ = function () {
|
||||
var layer = this.piskelController.getCurrentLayer();
|
||||
var name = window.prompt("Please enter the layer name", layer.getName());
|
||||
if (name) {
|
||||
var index = this.piskelController.getCurrentLayerIndex();
|
||||
this.piskelController.renameLayerAt(index, name);
|
||||
this.renderLayerList_();
|
||||
}
|
||||
};
|
||||
|
||||
ns.LayersListController.prototype.mergeDownLayerAt_ = function (index) {
|
||||
ns.LayersListController.prototype.mergeDownCurrentLayer_ = function () {
|
||||
var index = this.piskelController.getCurrentLayerIndex();
|
||||
this.piskelController.mergeDownLayerAt(index);
|
||||
this.renderLayerList_();
|
||||
};
|
||||
|
|
@ -97,6 +118,10 @@
|
|||
this.piskelController.createLayer();
|
||||
} else if (action == 'delete') {
|
||||
this.piskelController.removeCurrentLayer();
|
||||
} else if (action == 'merge') {
|
||||
this.mergeDownCurrentLayer_();
|
||||
} else if (action == 'edit') {
|
||||
this.renameCurrentLayer_();
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -54,20 +54,25 @@
|
|||
};
|
||||
|
||||
ns.PalettesListController.prototype.fillColorListContainer = function () {
|
||||
|
||||
var colors = this.getSelectedPaletteColors_();
|
||||
|
||||
var html = colors.map(function (color) {
|
||||
return pskl.utils.Template.replace(this.paletteColorTemplate_, {color : color});
|
||||
}.bind(this)).join('');
|
||||
this.colorListContainer_.innerHTML = html;
|
||||
if (colors.length > 0) {
|
||||
var html = colors.map(function (color) {
|
||||
return pskl.utils.Template.replace(this.paletteColorTemplate_, {color : color});
|
||||
}.bind(this)).join('');
|
||||
this.colorListContainer_.innerHTML = html;
|
||||
|
||||
this.highlightSelectedColors();
|
||||
this.highlightSelectedColors();
|
||||
|
||||
var hasScrollbar = colors.length > NO_SCROLL_MAX_COLORS;
|
||||
if (hasScrollbar && !pskl.utils.UserAgent.isChrome) {
|
||||
this.colorListContainer_.classList.add(HAS_SCROLL_CLASSNAME);
|
||||
var hasScrollbar = colors.length > NO_SCROLL_MAX_COLORS;
|
||||
if (hasScrollbar && !pskl.utils.UserAgent.isChrome) {
|
||||
this.colorListContainer_.classList.add(HAS_SCROLL_CLASSNAME);
|
||||
} else {
|
||||
this.colorListContainer_.classList.remove(HAS_SCROLL_CLASSNAME);
|
||||
}
|
||||
} else {
|
||||
this.colorListContainer_.classList.remove(HAS_SCROLL_CLASSNAME);
|
||||
this.colorListContainer_.innerHTML = pskl.utils.Template.get('palettes-list-no-colors-partial');
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -105,6 +110,7 @@
|
|||
ns.PalettesListController.prototype.onPaletteSelected_ = function (evt) {
|
||||
var paletteId = this.colorPaletteSelect_.value;
|
||||
this.selectPalette(paletteId);
|
||||
this.colorPaletteSelect_.blur();
|
||||
};
|
||||
|
||||
ns.PalettesListController.prototype.onCreatePaletteClick_ = function (evt) {
|
||||
|
|
|
|||
|
|
@ -17,9 +17,9 @@
|
|||
};
|
||||
|
||||
ns.AbstractDialogController.prototype.setTitle = function (title) {
|
||||
var dialogHead = document.querySelector('.dialog-head');
|
||||
if (dialogHead) {
|
||||
dialogHead.innerText = title;
|
||||
var dialogTitle = document.querySelector('.dialog-title');
|
||||
if (dialogTitle) {
|
||||
dialogTitle.innerText = title;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -111,10 +111,16 @@
|
|||
ns.CreatePaletteController.prototype.onFileInputChange_ = function (evt) {
|
||||
var files = this.hiddenFileInput.files;
|
||||
if (files.length == 1) {
|
||||
this.paletteImportService.read(files[0], this.setPalette_.bind(this));
|
||||
this.paletteImportService.read(files[0], this.setPalette_.bind(this), this.displayErrorMessage_.bind(this));
|
||||
}
|
||||
};
|
||||
|
||||
ns.CreatePaletteController.prototype.displayErrorMessage_ = function (message) {
|
||||
message = "Could not import palette : " + message;
|
||||
$.publish(Events.SHOW_NOTIFICATION, [{"content": message}]);
|
||||
window.setTimeout($.publish.bind($, Events.HIDE_NOTIFICATION), 2000);
|
||||
};
|
||||
|
||||
ns.CreatePaletteController.prototype.onNameInputChange_ = function (evt) {
|
||||
this.palette.name = pskl.utils.escapeHtml(this.nameInput.value);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -14,8 +14,6 @@
|
|||
pskl.app.shortcutService.addShortcut('shift+?', this.toggleCheatsheet_.bind(this));
|
||||
pskl.app.shortcutService.addShortcut('?', this.toggleCheatsheet_.bind(this));
|
||||
|
||||
document.body.addEventListener('click', this.onBodyClick_.bind(this));
|
||||
|
||||
var link = $('.cheatsheet-link');
|
||||
link.click(this.toggleCheatsheet_.bind(this));
|
||||
|
||||
|
|
@ -24,17 +22,6 @@
|
|||
$.subscribe(Events.ESCAPE, this.onEscape_.bind(this));
|
||||
};
|
||||
|
||||
ns.CheatsheetService.prototype.onBodyClick_ = function (event) {
|
||||
if (this.isDisplayed_) {
|
||||
var target = event.target;
|
||||
var cheatsheetContainerEl = document.querySelector('.cheatsheet-container');
|
||||
var isInCheatsheetContainer = pskl.utils.Dom.isParent(target, cheatsheetContainerEl);
|
||||
if (!isInCheatsheetContainer) {
|
||||
this.hideCheatsheet_();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
ns.CheatsheetService.prototype.toggleCheatsheet_ = function () {
|
||||
if (this.isDisplayed_) {
|
||||
this.hideCheatsheet_();
|
||||
|
|
|
|||
|
|
@ -12,18 +12,41 @@
|
|||
};
|
||||
|
||||
ns.PaletteImageReader.prototype.onImageLoaded_ = function (image) {
|
||||
var frame = pskl.utils.FrameUtils.createFromImage(image);
|
||||
var colorsMap = {};
|
||||
frame.forEachPixel(function (color, x, y) {
|
||||
colorsMap[color] = true;
|
||||
});
|
||||
var imageProcessor = new pskl.worker.ImageProcessor(image,
|
||||
this.onWorkerSuccess_.bind(this),
|
||||
this.onWorkerStep_.bind(this),
|
||||
this.onWorkerError_.bind(this));
|
||||
imageProcessor.process();
|
||||
};
|
||||
|
||||
delete colorsMap[Constants.TRANSPARENT_COLOR];
|
||||
ns.PaletteImageReader.prototype.onWorkerSuccess_ = function (event) {
|
||||
var data = event.data;
|
||||
var colorsMap = data.colorsMap;
|
||||
|
||||
var colors = Object.keys(colorsMap);
|
||||
var uuid = pskl.utils.Uuid.generate();
|
||||
var palette = new pskl.model.Palette(uuid, this.file.name + ' palette', colors);
|
||||
|
||||
this.onSuccess(palette);
|
||||
if (colors.length > 200) {
|
||||
this.onError('Too many colors : ' + colors.length);
|
||||
} else {
|
||||
var uuid = pskl.utils.Uuid.generate();
|
||||
var palette = new pskl.model.Palette(uuid, this.file.name + ' palette', colors);
|
||||
|
||||
this.onSuccess(palette);
|
||||
}
|
||||
};
|
||||
ns.PaletteImageReader.prototype.onWorkerStep_ = function (event) {
|
||||
var data = event.data;
|
||||
var step = data.step;
|
||||
var total = data.total;
|
||||
|
||||
var progress = ((step/total)*100).toFixed(1);
|
||||
|
||||
if (this.currentProgress !== progress) {
|
||||
this.currentProgress = progress;
|
||||
console.log("Image processing completed at : " + progress + "%");
|
||||
}
|
||||
};
|
||||
ns.PaletteImageReader.prototype.onWorkerError_ = function (event) {
|
||||
this.onError('Unable to process the image : ' + event.data.message);
|
||||
};
|
||||
})();
|
||||
|
|
@ -106,17 +106,24 @@
|
|||
* @return {pskl.model.Frame} corresponding frame
|
||||
*/
|
||||
createFromImage : function (image) {
|
||||
var w = image.width,
|
||||
h = image.height;
|
||||
var imgData = pskl.utils.FrameUtils.imageToImageData(image);
|
||||
var grid = pskl.utils.FrameUtils.imageDataToGrid(imgData,w, h, Constants.TRANSPARENT_COLOR);
|
||||
return pskl.model.Frame.fromGrid(grid);
|
||||
},
|
||||
|
||||
imageToImageData : function (image) {
|
||||
var w = image.width,
|
||||
h = image.height;
|
||||
var canvas = pskl.CanvasUtils.createCanvas(w, h);
|
||||
var context = canvas.getContext('2d');
|
||||
|
||||
context.drawImage(image, 0,0,w,h,0,0,w,h);
|
||||
var imgData = context.getImageData(0,0,w,h).data;
|
||||
return pskl.utils.FrameUtils.createFromImageData(imgData, w, h);
|
||||
return context.getImageData(0,0,w,h).data;
|
||||
},
|
||||
|
||||
createFromImageData : function (imageData, width, height) {
|
||||
imageDataToGrid : function (imageData, width, height, transparent) {
|
||||
// Draw the zoomed-up pixels to a different canvas context
|
||||
var grid = [];
|
||||
for (var x = 0 ; x < width ; x++){
|
||||
|
|
@ -129,13 +136,13 @@
|
|||
var b = imageData[i+2];
|
||||
var a = imageData[i+3];
|
||||
if (a < 125) {
|
||||
grid[x][y] = Constants.TRANSPARENT_COLOR;
|
||||
grid[x][y] = transparent;
|
||||
} else {
|
||||
grid[x][y] = pskl.utils.FrameUtils.rgbToHex(r,g,b);
|
||||
}
|
||||
}
|
||||
}
|
||||
return pskl.model.Frame.fromPixelGrid(grid);
|
||||
return grid;
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -0,0 +1,167 @@
|
|||
(function () {
|
||||
var ns = $.namespace('pskl.worker');
|
||||
|
||||
var worker = function () {
|
||||
|
||||
var postStep_ = function (step, total) {
|
||||
this.postMessage({
|
||||
type : 'STEP',
|
||||
step : step,
|
||||
total : total
|
||||
});
|
||||
};
|
||||
|
||||
var imageDataToGrid = function (imageData, width, height, transparent) {
|
||||
// Draw the zoomed-up pixels to a different canvas context
|
||||
var grid = [];
|
||||
for (var x = 0 ; x < width ; x++){
|
||||
grid[x] = [];
|
||||
postStep_(x, (width-1)*2);
|
||||
for (var y = 0 ; y < height ; y++){
|
||||
// Find the starting index in the one-dimensional image data
|
||||
var i = (y * width + x)*4;
|
||||
var r = imageData[i ];
|
||||
var g = imageData[i+1];
|
||||
var b = imageData[i+2];
|
||||
var a = imageData[i+3];
|
||||
if (a < 125) {
|
||||
grid[x][y] = transparent;
|
||||
} else {
|
||||
grid[x][y] = pskl.utils.FrameUtils.rgbToHex(r,g,b);
|
||||
}
|
||||
}
|
||||
}
|
||||
return grid;
|
||||
};
|
||||
|
||||
var getColorsMapFromImageData = function (imageData, width, height) {
|
||||
var grid = imageDataToGrid(imageData, width, height, 'transparent');
|
||||
|
||||
var colorsMap = {};
|
||||
for (var i = 0 ; i < grid.length ; i++) {
|
||||
var step = (grid.length-1) + i;
|
||||
var total = (grid.length-1)*2;
|
||||
postStep_(step, total);
|
||||
for (var j = 0 ; j < grid[i].length ; j++) {
|
||||
var color = grid[i][j];
|
||||
if (color != 'transparent') {
|
||||
colorsMap[color] = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return colorsMap;
|
||||
};
|
||||
|
||||
this.onmessage = function(event) {
|
||||
var data = event.data;
|
||||
if (data.type === 'RUN_SCRIPT') {
|
||||
this.importScripts(data.script);
|
||||
} else {
|
||||
try {
|
||||
var colorsMap = getColorsMapFromImageData(data.imageData, data.width, data.height);
|
||||
this.postMessage({
|
||||
type : 'SUCCESS',
|
||||
colorsMap : colorsMap
|
||||
});
|
||||
} catch(e) {
|
||||
this.postMessage({
|
||||
type : 'ERROR',
|
||||
message : e.message
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
try {
|
||||
// create worker from blob
|
||||
var typedArray = [(worker+"").replace(/function \(\) \{/,"").replace(/\}[^}]*$/, "")];
|
||||
var blob = new Blob(typedArray, {type: "application/javascript"}); // pass a useful mime type here
|
||||
var blobUrl = window.URL.createObjectURL(blob);
|
||||
} catch (e) {
|
||||
console.error("Could not create worker", e.message);
|
||||
}
|
||||
|
||||
ns.ImageProcessor = function (image, onSuccess, onStep, onError) {
|
||||
this.image = image;
|
||||
|
||||
this.onStep = onStep;
|
||||
this.onSuccess = onSuccess;
|
||||
this.onError = onError;
|
||||
|
||||
this.worker = new Worker(blobUrl);
|
||||
this.worker.onmessage = this.onWorkerMessage.bind(this);
|
||||
};
|
||||
|
||||
ns.ImageProcessor.prototype.process = function () {
|
||||
this.importAll(pskl.utils.FrameUtils, 'pskl.utils.FrameUtils');
|
||||
this.importAll(pskl.utils.CanvasUtils, 'pskl.utils.CanvasUtils');
|
||||
|
||||
var imageData = pskl.utils.FrameUtils.imageToImageData(this.image);
|
||||
this.worker.postMessage({
|
||||
imageData : imageData,
|
||||
width : this.image.width,
|
||||
height : this.image.height
|
||||
});
|
||||
};
|
||||
|
||||
ns.ImageProcessor.prototype.createNamespace = function (name) {
|
||||
var createNamespace = (function () {
|
||||
var parts = name.split('.');
|
||||
if (parts.length > 0) {
|
||||
var node = this;
|
||||
for (var i = 0 ; i < parts.length ; i++) {
|
||||
if (!node[parts[i]]) {
|
||||
node[parts[i]] = {};
|
||||
}
|
||||
node = node[parts[i]];
|
||||
}
|
||||
}
|
||||
});
|
||||
var script = createNamespace + "";
|
||||
script = script.replace(/function \(\) \{/,"").replace(/\}[^}]*$/, "");
|
||||
script = "var name = '" + name + "';" + script;
|
||||
|
||||
this.runScript(script);
|
||||
};
|
||||
|
||||
ns.ImageProcessor.prototype.importAll = function (classToImport, classpath) {
|
||||
this.createNamespace('pskl.utils.FrameUtils');
|
||||
for (var key in classToImport) {
|
||||
if (classToImport.hasOwnProperty(key)) {
|
||||
this.addMethod(classToImport[key], classpath + '.' + key);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
ns.ImageProcessor.prototype.addMethod = function (method, name) {
|
||||
this.runScript(name + "=" + method);
|
||||
};
|
||||
|
||||
ns.ImageProcessor.prototype.runScript = function (script) {
|
||||
this.worker.postMessage({
|
||||
type : 'RUN_SCRIPT',
|
||||
script : this.getScriptAsUrl(script)
|
||||
});
|
||||
};
|
||||
|
||||
ns.ImageProcessor.prototype.getScriptAsUrl = function (script) {
|
||||
var blob = new Blob([script], {type: "application/javascript"}); // pass a useful mime type here
|
||||
return window.URL.createObjectURL(blob);
|
||||
};
|
||||
|
||||
ns.ImageProcessor.prototype.onWorkerMessage = function (event) {
|
||||
if (event.data.type === 'STEP') {
|
||||
this.onStep(event);
|
||||
} else if (event.data.type === 'SUCCESS') {
|
||||
this.onSuccess(event);
|
||||
this.worker.terminate();
|
||||
} else if (event.data.type === 'ERROR') {
|
||||
this.onError(event);
|
||||
this.worker.terminate();
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
|
||||
|
||||
|
|
@ -163,6 +163,9 @@
|
|||
"js/devtools/TestRecordController.js",
|
||||
"js/devtools/init.js",
|
||||
|
||||
// Workers
|
||||
"js/worker/ImageProcessor.js",
|
||||
|
||||
// Application controller and initialization
|
||||
"js/app.js",
|
||||
// Bonus features !!
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<div class="dialog-wrapper">
|
||||
<h3 class="dialog-head">
|
||||
Create palette
|
||||
<span class="dialog-title">Create palette</span>
|
||||
<span class="dialog-close">X</span>
|
||||
</h3>
|
||||
<div class="dialog-create-palette" style="font-size:1.3em">
|
||||
|
|
|
|||
|
|
@ -6,24 +6,35 @@
|
|||
class="layers-toggle-preview piskel-icon-eye"></div>
|
||||
</h3>
|
||||
<div class="layers-button-container">
|
||||
<button class="button layers-button plus-icon" data-action="add" >+</button>
|
||||
<button class="button layers-button" data-action="delete" >x</button>
|
||||
<button class="button layers-button layers-button-arrow" data-action="up" >↑</button>
|
||||
<button class="button layers-button layers-button-arrow" data-action="down" >↓</button>
|
||||
<button
|
||||
class="button layers-button merge-icon" data-action="merge"
|
||||
title="Merge with layer below" rel="tooltip" data-placement="top" ></button>
|
||||
<button
|
||||
class="button layers-button edit-icon" data-action="edit"
|
||||
<button data-action="add"
|
||||
class="button layers-button piskel-icon-plus"
|
||||
title="Create a new layer" rel="tooltip" data-placement="top" ></button>
|
||||
|
||||
<button data-action="up"
|
||||
class="button layers-button piskel-icon-arrow-up-fat"
|
||||
title="Move layer up" rel="tooltip" data-placement="top" ></button>
|
||||
|
||||
<button data-action="down"
|
||||
class="button layers-button piskel-icon-arrow-down-fat"
|
||||
title="Move layer down" rel="tooltip" data-placement="top" ></button>
|
||||
|
||||
<button data-action="edit"
|
||||
class="button layers-button piskel-icon-pencil"
|
||||
title="Edit layer name" rel="tooltip" data-placement="top"></button>
|
||||
|
||||
<button data-action="merge"
|
||||
class="button layers-button piskel-icon-merge"
|
||||
title="Merge with layer below" rel="tooltip" data-placement="top" ></button>
|
||||
|
||||
<button data-action="delete"
|
||||
class="button layers-button piskel-icon-close"
|
||||
title="Delete selected layer" rel="tooltip" data-placement="top" ></button>
|
||||
|
||||
</div>
|
||||
<script type="text/template" id="layer-button-template">
|
||||
<button
|
||||
class="button layers-button {{class}}" data-action="{{action}}"
|
||||
title="{{tooltip}}" rel="tooltip" data-placement="top" >{{text}}</button>
|
||||
</script>
|
||||
|
||||
<ul class="layers-list"></ul>
|
||||
|
||||
<script type="text/template" id="layer-item-template">
|
||||
<li class="layer-item {{isselected:current-layer-item}}" data-layer-index="{{layerindex}}">{{layername}}</li>
|
||||
</script>
|
||||
<ul class="layers-list"></ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@
|
|||
</h3>
|
||||
<div class="palettes-list-actions">
|
||||
<button
|
||||
class="button palettes-list-button create-palette-button plus-icon" data-action="add"
|
||||
title="Create a new palette" rel="tooltip" data-placement="top" >+</button>
|
||||
<select class="palettes-list-select"></select>
|
||||
class="button palettes-list-button create-palette-button piskel-icon-plus" data-action="add"
|
||||
title="Create a new palette" rel="tooltip" data-placement="top" ></button>
|
||||
<select class="button palettes-list-select"></select>
|
||||
<button
|
||||
class="button palettes-list-button edit-palette-button edit-icon" data-action="edit"
|
||||
class="button palettes-list-button edit-palette-button piskel-icon-pencil" data-action="edit"
|
||||
title="Manage this palette" rel="tooltip" data-placement="top"></button>
|
||||
</div>
|
||||
<div class="palettes-list-colors"></div>
|
||||
|
|
@ -18,6 +18,13 @@
|
|||
<div data-color="{{color}}" style="background:{{color}}"></div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/template" id="palettes-list-no-colors-partial">
|
||||
<div class="palettes-list-no-colors">
|
||||
No color in the selected palette ...
|
||||
</div>
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue