import $ from "jquery" ; import "../css/jquery-ui.css" ; import "../css/stylesheet.css" ; import List from "./List" ; import About from "./About" ; import Tools from "./Tools" ; import Load from "./Load" ; import Save from "./Save" ; import Settings from "./Settings" ; import Editor from "./Editor" ; import Palette from "./Palette" ; import Preview from "./Preview" ; import Sprite from "./Sprite" ; import Storage from "./Storage" ; import Window from "./Window" ; import { get_config } from "./config" ; import { dom , tipoftheday , status , toggle_fullscreen } from "./helper" ; class App { storage : any = { } ; sprite : any = { } ; editor : any ; window_editor : any ; window_palette : any ; palette : any ; window_preview : any ; preview : any ; window_list : any ; list : any ; window_about : any ; about : any ; window_save : any ; save : any ; window_settings : any ; settings : any ; window_tools : any ; window_help : any ; tools : any ; load : any ; is_drawing : boolean ; oldpos : any ; mode : any ; allow_keyboard_shortcuts : boolean ; move_start : any ; move_start_pos : any ; dragging : any ; constructor ( public config ) { this . storage = new Storage ( config ) ; this . config = this . storage . get_config ( ) ; this . config . colors = this . config . palettes [ this . config . selected_palette ] ; this . sprite = new Sprite ( this . config ) ; const editor_config = { name : "window_editor" , title : "Editor" , type : "sprite" , resizable : false , left : this . config . window_editor . left , top : this . config . window_editor . top , width : "auto" , height : "auto" , window_id : 0 , } ; this . window_editor = new Window ( editor_config , this . store_window . bind ( this ) ) ; this . editor = new Editor ( editor_config . window_id , this . config ) ; const palette_config = { name : "window_palette" , title : "Colors" , type : "colors" , resizable : false , left : this . config . window_palette . left , top : this . config . window_palette . top , width : "auto" , height : "auto" , window_id : 1 , } ; this . window_palette = new Window ( palette_config , this . store_window . bind ( this ) ) ; this . palette = new Palette ( palette_config . window_id , this . config ) ; const preview_config = { name : "window_preview" , title : "Preview" , type : "preview" , resizable : false , left : this . config . window_preview . left , top : this . config . window_preview . top , width : "auto" , height : "auto" , window_id : 2 , } ; this . window_preview = new Window ( preview_config , this . store_window . bind ( this ) ) ; this . preview = new Preview ( preview_config . window_id , this . config ) ; const list_config = { name : "window_list" , title : "Sprite List" , type : "list" , resizable : true , left : this . config . window_list . left , top : this . config . window_list . top , width : this . config . window_list . width , height : this . config . window_list . height , window_id : 3 , } ; this . window_list = new Window ( list_config , this . store_window . bind ( this ) ) ; this . list = new List ( list_config . window_id , this . config ) ; const about_config = { name : "window_about" , title : "Spritemate" , type : "info" , escape : true , modal : true , resizable : false , autoOpen : false , width : "680" , height : "auto" , window_id : 4 , } ; this . window_about = new Window ( about_config ) ; this . about = new About ( about_config . window_id , this . config , { onLoad : this . regain_keyboard_controls . bind ( this ) , } ) ; const save_config = { name : "window_save" , title : "Save" , type : "file" , escape : true , modal : true , resizable : false , autoOpen : false , width : "580" , height : "auto" , window_id : 5 , } ; this . window_save = new Window ( save_config ) ; this . save = new Save ( save_config . window_id , this . config , { onLoad : this . regain_keyboard_controls . bind ( this ) , } ) ; const settings_config = { name : "window_settings," , title : "Settings" , type : "settings" , modal : true , escape : true , resizable : false , autoOpen : false , width : "760" , height : "auto" , window_id : 6 , } ; this . window_settings = new Window ( settings_config ) ; this . settings = new Settings ( settings_config . window_id , this . config , { onLoad : this . update_config . bind ( this ) , } ) ; const tools_config = { name : "window_tools" , title : "Tools" , type : "tools" , resizable : false , left : this . config . window_tools . left , top : this . config . window_tools . top , width : "auto" , height : "auto" , window_id : 8 , } ; this . window_tools = new Window ( tools_config , this . store_window . bind ( this ) ) ; this . tools = new Tools ( tools_config . window_id , this . config ) ; this . load = new Load ( this . config , { onLoad : this . update_loaded_file . bind ( this ) , } ) ; this . is_drawing = false ; this . oldpos = { x : 0 , y : 0 } ; this . sprite . new_sprite ( this . palette . get_color ( ) ) ; this . mode = "draw" ; this . allow_keyboard_shortcuts = true ; tipoftheday ( ) ; this . list . update_all ( this . sprite . get_all ( ) ) ; this . update ( ) ; this . user_interaction ( ) ; if ( this . storage . is_updated_version ( ) ) $ ( this . window_about . get_window_id ( ) ) . dialog ( "open" ) ; } update ( ) { const all = this . sprite . get_all ( ) ; this . editor . update ( all ) ; this . preview . update ( all ) ; this . list . update ( all ) ; this . palette . update ( all ) ; this . update_ui ( ) ; } update_ui ( ) { if ( this . sprite . get_number_of_sprites ( ) > 1 ) { dom . fade ( "#icon-list-delete" , 0.33 , 1 ) ; } else { dom . fade ( "#icon-list-delete" , 1 , 0.33 ) ; } if ( this . sprite . is_copy_empty ( ) ) { dom . fade ( "#icon-list-paste" , 1 , 0.33 ) ; } else { dom . fade ( "#icon-list-paste" , 0.33 , 1 ) ; } if ( this . sprite . can_undo ( ) ) { dom . fade ( "#icon-undo" , 0.33 , 1 ) ; } else { dom . fade ( "#icon-undo" , 1 , 0.33 ) ; } if ( this . sprite . can_redo ( ) ) { dom . fade ( "#icon-redo" , 0.33 , 1 ) ; } else { dom . fade ( "#icon-redo" , 1 , 0.33 ) ; } if ( this . sprite . is_overlay ( ) ) { dom . attr ( "#icon-preview-overlay" , "src" , "img/ui/icon-preview-overlay-hi.png" ) ; } else { dom . attr ( "#icon-preview-overlay" , "src" , "img/ui/icon-preview-overlay.png" ) ; } if ( this . sprite . is_double_x ( ) ) { dom . attr ( "#icon-preview-x" , "src" , "img/ui/icon-preview-x2-hi.png" ) ; } else { dom . attr ( "#icon-preview-x" , "src" , "img/ui/icon-preview-x2.png" ) ; } if ( this . sprite . is_double_y ( ) ) { dom . attr ( "#icon-preview-y" , "src" , "img/ui/icon-preview-y2-hi.png" ) ; } else { dom . attr ( "#icon-preview-y" , "src" , "img/ui/icon-preview-y2.png" ) ; } if ( this . preview . is_min_zoom ( ) ) { dom . fade ( "#icon-preview-zoom-out" , 1 , 0.33 ) ; } else { dom . fade ( "#icon-preview-zoom-out" , 0.33 , 1 ) ; } if ( this . preview . is_max_zoom ( ) ) { dom . fade ( "#icon-preview-zoom-in" , 1 , 0.33 ) ; } else { dom . fade ( "#icon-preview-zoom-in" , 0.33 , 1 ) ; } if ( this . editor . is_min_zoom ( ) ) { dom . fade ( "#icon-editor-zoom-out" , 1 , 0.33 ) ; } else { dom . fade ( "#icon-editor-zoom-out" , 0.33 , 1 ) ; } if ( this . editor . is_max_zoom ( ) ) { dom . fade ( "#icon-editor-zoom-in" , 1 , 0.33 ) ; } else { dom . fade ( "#icon-editor-zoom-in" , 0.33 , 1 ) ; } if ( this . list . is_min_zoom ( ) ) { dom . fade ( "#icon-list-zoom-out" , 1 , 0.33 ) ; } else { dom . fade ( "#icon-list-zoom-out" , 0.33 , 1 ) ; } if ( this . list . is_max_zoom ( ) ) { dom . fade ( "#icon-list-zoom-in" , 1 , 0.33 ) ; } else { dom . fade ( "#icon-list-zoom-in" , 0.33 , 1 ) ; } dom . remove_all_class ( ".sprite_in_list" , "sprite_in_list_selected" ) ; document . getElementById ( this . sprite . get_current_sprite_number ( ) ) ?. classList . add ( "sprite_in_list_selected" ) ; } /**
    check which data is in the object, compare with config data of that window
    and replace the data in the config if matching
    then save to storage
    */ store_window ( obj ) { for ( const key in obj . data ) { if ( this . config [ obj . name ] . hasOwnProperty ( key ) ) this . config [ obj . name ] [ key ] = obj . data [ key ] ; } this . storage . write ( this . config ) ; } update_config ( ) { this . palette . set_colors ( this . config . colors ) ; this . storage . write ( this . config ) ; this . list . update_all ( this . sprite . get_all ( ) ) ; this . update ( ) ; this . regain_keyboard_controls ( ) ; status ( "Configuration updated." ) ; } update_loaded_file ( ) { this . sprite . set_all ( this . load . get_imported_file ( ) ) ; this . list . update_all ( this . sprite . get_all ( ) ) ; this . update ( ) ; } regain_keyboard_controls ( ) { this . allow_keyboard_shortcuts = true ; } update_sprite_name ( ) { this . allow_keyboard_shortcuts = true ; let sprite_name = dom . val ( "#input-sprite-name" ) ; sprite_name = sprite_name . replace ( /[^A-Za-z0-9-_]+/g , "" ) ; this . sprite . set_sprite_name ( sprite_name ) ; this . list . update_all ( this . sprite . get_all ( ) ) ; this . update ( ) ; } user_interaction ( ) { document . addEventListener ( "keydown" , ( e ) => { if ( this . allow_keyboard_shortcuts ) { if ( e . key == "a" ) { console . time ( "performance" ) ; for ( let i = 0 ; i <= 1000 ; i ++ ) this . update ( ) ; console . timeEnd ( "performance" ) ; } if ( e . key == "ArrowRight" ) { this . sprite . set_current_sprite ( "right" ) ; this . update ( ) ; } if ( e . key == "ArrowLeft" ) { this . sprite . set_current_sprite ( "left" ) ; this . update ( ) ; } if ( e . key == "F" ) { toggle_fullscreen ( ) ; } if ( e . key == "m" ) { this . mode = "move" ; status ( "Move mode" ) ; dom . attr ( "#image-icon-move" , "src" , "img/ui/icon-move-hi.png" ) ; dom . attr ( "#image-icon-draw" , "src" , "img/ui/icon-draw.png" ) ; dom . attr ( "#image-icon-erase" , "src" , "img/ui/icon-erase.png" ) ; dom . attr ( "#image-icon-fill" , "src" , "img/ui/icon-fill.png" ) ; } if ( e . key == "d" ) { this . mode = "draw" ; status ( "Draw mode" ) ; dom . attr ( "#image-icon-move" , "src" , "img/ui/icon-move.png" ) ; dom . attr ( "#image-icon-draw" , "src" , "img/ui/icon-draw-hi.png" ) ; dom . attr ( "#image-icon-erase" , "src" , "img/ui/icon-erase.png" ) ; dom . attr ( "#image-icon-fill" , "src" , "img/ui/icon-fill.png" ) ; } if ( e . key == "e" ) { this . mode = "erase" ; status ( "Erase mode" ) ; dom . attr ( "#image-icon-move" , "src" , "img/ui/icon-move.png" ) ; dom . attr ( "#image-icon-draw" , "src" , "img/ui/icon-draw.png" ) ; dom . attr ( "#image-icon-erase" , "src" , "img/ui/icon-erase-hi.png" ) ; dom . attr ( "#image-icon-fill" , "src" , "img/ui/icon-fill.png" ) ; } if ( e . key == "f" ) { this . mode = "fill" ; status ( "Fill mode" ) ; dom . attr ( "#image-icon-move" , "src" , "img/ui/icon-move.png" ) ; dom . attr ( "#image-icon-draw" , "src" , "img/ui/icon-draw.png" ) ; dom . attr ( "#image-icon-erase" , "src" , "img/ui/icon-erase.png" ) ; dom . attr ( "#image-icon-fill" , "src" , "img/ui/icon-fill-hi.png" ) ; } if ( e . key == "1" ) { this . sprite . set_pen ( 0 ) ; this . update ( ) ; } if ( e . key == "2" ) { this . sprite . set_pen ( 1 ) ; this . update ( ) ; } if ( e . key == "3" && this . sprite . is_multicolor ( ) ) { this . sprite . set_pen ( 2 ) ; this . update ( ) ; } if ( e . key == "4" && this . sprite . is_multicolor ( ) ) { this . sprite . set_pen ( 3 ) ; this . update ( ) ; } if ( e . key == "z" ) { this . sprite . undo ( ) ; this . update ( ) ; } if ( e . key == "Z" ) { this . sprite . redo ( ) ; this . update ( ) ; } if ( e . key == "c" ) { this . sprite . toggle_multicolor ( ) ; this . update ( ) ; } if ( e . key == "N" ) { this . sprite . new_sprite ( this . palette . get_color ( ) , this . sprite . is_multicolor ( ) ) ; this . list . update_all ( this . sprite . get_all ( ) ) ; this . update ( ) ; status ( "New sprite." ) ; } if ( e . key == "C" ) { this . sprite . copy ( ) ; this . update_ui ( ) ; status ( "Sprite copied." ) ; } if ( e . key == "V" ) { if ( ! this . sprite . is_copy_empty ( ) ) { this . sprite . paste ( ) ; this . update ( ) ; status ( "Sprite pasted." ) ; } else { status ( "Nothing to copy." , "error" ) ; } } if ( e . key == "D" ) { this . sprite . duplicate ( ) ; this . list . update_all ( this . sprite . get_all ( ) ) ; this . update_ui ( ) ; status ( "Sprite duplicated." ) ; } if ( e . key == "X" ) { this . sprite . delete ( ) ; this . list . update_all ( this . sprite . get_all ( ) ) ; this . update ( ) ; } if ( e . key == "i" ) { this . sprite . invert ( ) ; this . update ( ) ; } } } ) ; dom . sel ( "#menubar-info" ) . onclick = ( ) => { this . allow_keyboard_shortcuts = false ; $ ( this . window_about . get_window_id ( ) ) . dialog ( "open" ) ; } ; dom . sel ( "#menubar-settings" ) . onclick = ( ) => { this . allow_keyboard_shortcuts = false ; $ ( this . window_settings . get_window_id ( ) ) . dialog ( "open" ) ; } ; dom . sel ( "#menubar-load" ) . onclick = ( ) => { dom . sel ( "#input-load" ) . click ( ) ; } ; dom . sel ( "#menubar-save" ) . onclick = ( ) => { this . allow_keyboard_shortcuts = false ; $ ( this . window_save . get_window_id ( ) ) . dialog ( "open" ) ; this . save . set_save_data ( this . sprite . get_all ( ) ) ; } ; dom . sel ( "#menubar-new" ) . onclick = ( ) => { dom . css ( "#dialog-confirm" , "visibility" , "visible" ) ; $ ( "#dialog-confirm" ) . dialog ( "open" ) ; } ; $ ( "#dialog-confirm" ) . dialog ( { resizable : false , autoOpen : false , height : "auto" , width : 400 , modal : true , dialogClass : "no-close" , buttons : [ { click : ( ) => { this . sprite = new Sprite ( this . config ) ; this . sprite . new_sprite ( this . palette . get_color ( ) ) ; this . list . update_all ( this . sprite . get_all ( ) ) ; this . update ( ) ; $ ( "#dialog-confirm" ) . dialog ( "close" ) ; status ( "New file created." ) ; } , text : "Ok" , class : "confirm-button" , } , { click : ( ) => { $ ( "#dialog-confirm" ) . dialog ( "close" ) ; } , text : "Cancel" , class : "confirm-button" , } , ] , } ) ; dom . sel ( "#menubar-undo" ) . onclick = ( ) => { this . sprite . undo ( ) ; this . list . update_all ( this . sprite . get_all ( ) ) ; this . update ( ) ; } ; dom . sel ( "#menubar-redo" ) . onclick = ( ) => { this . sprite . redo ( ) ; this . list . update_all ( this . sprite . get_all ( ) ) ; this . update ( ) ; } ; dom . sel ( "#menubar-new-sprite" ) . onclick = ( ) => { this . sprite . new_sprite ( this . palette . get_color ( ) , this . sprite . is_multicolor ( ) ) ; this . list . update_all ( this . sprite . get_all ( ) ) ; this . update ( ) ; } ; dom . sel ( "#menubar-kill" ) . onclick = ( ) => { this . sprite . delete ( ) ; this . list . update_all ( this . sprite . get_all ( ) ) ; this . update ( ) ; } ; dom . sel ( "#menubar-copy" ) . onclick = ( ) => { this . sprite . copy ( ) ; this . update_ui ( ) ; status ( "Sprite copied." ) ; } ; dom . sel ( "#menubar-paste" ) . onclick = ( ) => { if ( ! this . sprite . is_copy_empty ( ) ) { this . sprite . paste ( ) ; this . update ( ) ; status ( "Sprite pasted." ) ; } else { status ( "Nothing to copy." , "error" ) ; } } ; dom . sel ( "#menubar-duplicate" ) . onclick = ( ) => { this . sprite . duplicate ( ) ; this . list . update_all ( this . sprite . get_all ( ) ) ; this . update_ui ( ) ; status ( "Sprite duplicated." ) ; } ; dom . sel ( "#menubar-shift-left" ) . onclick = ( ) => { this . sprite . shift_horizontal ( "left" ) ; this . update ( ) ; } ; dom . sel ( "#menubar-shift-right" ) . onclick = ( ) => { this . sprite . shift_horizontal ( "right" ) ; this . update ( ) ; } ; dom . sel ( "#menubar-shift-up" ) . onclick = ( ) => { this . sprite . shift_vertical ( "up" ) ; this . update ( ) ; } ; dom . sel ( "#menubar-shift-down" ) . onclick = ( ) => { this . sprite . shift_vertical ( "down" ) ; this . update ( ) ; } ; dom . sel ( "#menubar-flip-horizontal" ) . onclick = ( ) => { this . sprite . flip_horizontal ( ) ; this . update ( ) ; } ; dom . sel ( "#menubar-flip-vertical" ) . onclick = ( ) => { this . sprite . flip_vertical ( ) ; this . update ( ) ; } ; dom . sel ( "#menubar-colormode" ) . onclick = ( ) => { this . sprite . toggle_multicolor ( ) ; this . update ( ) ; } ; dom . sel ( "#menubar-stretch-x" ) . onclick = ( ) => { this . sprite . toggle_double_x ( ) ; this . update ( ) ; } ; dom . sel ( "#menubar-stretch-y" ) . onclick = ( ) => { this . sprite . toggle_double_y ( ) ; this . update ( ) ; } ; dom . sel ( "#menubar-invert" ) . onclick = ( ) => { this . sprite . invert ( ) ; this . update ( ) ; } ; dom . sel ( "#menubar-overlay" ) . onclick = ( ) => { this . sprite . toggle_overlay ( ) ; this . update ( ) ; } ; dom . sel ( "#menubar-fullscreen" ) . onclick = ( ) => { toggle_fullscreen ( ) ; } ; dom . sel ( "#menubar-editor-zoom-in" ) . onclick = ( ) => { this . editor . zoom_in ( ) ; this . config . window_editor . zoom = this . editor . get_zoom ( ) ; this . storage . write ( this . config ) ; this . update ( ) ; } ; dom . sel ( "#menubar-editor-zoom-out" ) . onclick = ( ) => { this . editor . zoom_out ( ) ; this . config . window_editor . zoom = this . editor . get_zoom ( ) ; this . storage . write ( this . config ) ; this . update ( ) ; } ; dom . sel ( "#menubar-editor-grid" ) . onclick = ( ) => { this . editor . toggle_grid ( ) ; this . config . window_editor . grid = this . editor . get_grid ( ) ; this . storage . write ( this . config ) ; this . update ( ) ; } ; dom . sel ( "#menubar-preview-zoom-in" ) . onclick = ( ) => { this . preview . zoom_in ( ) ; this . config . window_preview . zoom = this . preview . get_zoom ( ) ; this . storage . write ( this . config ) ; this . update ( ) ; } ; dom . sel ( "#menubar-preview-zoom-out" ) . onclick = ( ) => { this . preview . zoom_out ( ) ; this . config . window_preview . zoom = this . preview . get_zoom ( ) ; this . storage . write ( this . config ) ; this . update ( ) ; } ; dom . sel ( "#menubar-list-grid" ) . onclick = ( ) => { this . list . toggle_grid ( ) ; this . list . update_all ( this . sprite . get_all ( ) ) ; this . update ( ) ; } ; dom . sel ( "#menubar-list-zoom-in" ) . onclick = ( ) => { this . list . zoom_in ( ) ; this . config . window_list . zoom = this . list . get_zoom ( ) ; this . storage . write ( this . config ) ; this . list . update_all ( this . sprite . get_all ( ) ) ; this . update ( ) ; } ; dom . sel ( "#menubar-list-zoom-out" ) . onclick = ( ) => { this . list . zoom_out ( ) ; this . config . window_list . zoom = this . list . get_zoom ( ) ; this . storage . write ( this . config ) ; this . list . update_all ( this . sprite . get_all ( ) ) ; this . update ( ) ; } ; dom . sel ( "#icon-preview-zoom-in" ) . onclick = ( ) => { this . preview . zoom_in ( ) ; this . config . window_preview . zoom = this . preview . get_zoom ( ) ; this . storage . write ( this . config ) ; this . update ( ) ; } ; dom . sel ( "#icon-preview-zoom-out" ) . onclick = ( ) => { this . preview . zoom_out ( ) ; this . config . window_preview . zoom = this . preview . get_zoom ( ) ; this . storage . write ( this . config ) ; this . update ( ) ; } ; dom . sel ( "#icon-preview-x" ) . onclick = ( ) => { this . sprite . toggle_double_x ( ) ; this . update ( ) ; } ; dom . sel ( "#icon-preview-y" ) . onclick = ( ) => { this . sprite . toggle_double_y ( ) ; this . update ( ) ; } ; dom . sel ( "#icon-preview-overlay" ) . onclick = ( ) => { this . sprite . toggle_overlay ( ) ; this . update ( ) ; } ; dom . sel ( "#icon-load" ) . onclick = ( ) => { dom . sel ( "#input-load" ) . click ( ) ; } ; dom . sel ( "#icon-save" ) . onclick = ( ) => { this . allow_keyboard_shortcuts = false ; $ ( this . window_save . get_window_id ( ) ) . dialog ( "open" ) ; this . save . set_save_data ( this . sprite . get_all ( ) ) ; } ; dom . sel ( "#icon-undo" ) . onclick = ( ) => { this . sprite . undo ( ) ; this . list . update_all ( this . sprite . get_all ( ) ) ; this . update ( ) ; } ; dom . sel ( "#icon-redo" ) . onclick = ( ) => { this . sprite . redo ( ) ; this . list . update_all ( this . sprite . get_all ( ) ) ; this . update ( ) ; } ; dom . sel ( "#icon-move" ) . onclick = ( ) => { this . mode = "move" ; status ( "Move mode" ) ; dom . attr ( "#image-icon-move" , "src" , "img/ui/icon-move-hi.png" ) ; dom . attr ( "#image-icon-draw" , "src" , "img/ui/icon-draw.png" ) ; dom . attr ( "#image-icon-erase" , "src" , "img/ui/icon-erase.png" ) ; dom . attr ( "#image-icon-fill" , "src" , "img/ui/icon-fill.png" ) ; } ; dom . sel ( "#icon-draw" ) . onclick = ( ) => { this . mode = "draw" ; status ( "Draw mode" ) ; dom . attr ( "#image-icon-move" , "src" , "img/ui/icon-move.png" ) ; dom . attr ( "#image-icon-draw" , "src" , "img/ui/icon-draw-hi.png" ) ; dom . attr ( "#image-icon-erase" , "src" , "img/ui/icon-erase.png" ) ; dom . attr ( "#image-icon-fill" , "src" , "img/ui/icon-fill.png" ) ; } ; dom . sel ( "#icon-erase" ) . onclick = ( ) => { this . mode = "erase" ; status ( "Erase mode" ) ; dom . attr ( "#image-icon-move" , "src" , "img/ui/icon-move.png" ) ; dom . attr ( "#image-icon-draw" , "src" , "img/ui/icon-draw.png" ) ; dom . attr ( "#image-icon-erase" , "src" , "img/ui/icon-erase-hi.png" ) ; dom . attr ( "#image-icon-fill" , "src" , "img/ui/icon-fill.png" ) ; } ; dom . sel ( "#icon-fill" ) . onclick = ( ) => { this . mode = "fill" ; status ( "Fill mode" ) ; dom . attr ( "#image-icon-move" , "src" , "img/ui/icon-move.png" ) ; dom . attr ( "#image-icon-draw" , "src" , "img/ui/icon-draw.png" ) ; dom . attr ( "#image-icon-erase" , "src" , "img/ui/icon-erase.png" ) ; dom . attr ( "#image-icon-fill" , "src" , "img/ui/icon-fill-hi.png" ) ; } ; dom . sel ( "#palette_all_colors" ) . onclick = ( e ) => { this . palette . set_active_color ( e ) ; this . sprite . set_pen_color ( this . palette . get_color ( ) ) ; this . list . update_all ( this . sprite . get_all ( ) ) ; this . update ( ) ; } ; dom . sel ( "#palette_1" ) . onclick = ( ) => { this . sprite . set_pen ( 1 ) ; this . update ( ) ; } ; dom . sel ( "#palette_0" ) . onclick = ( ) => { this . sprite . set_pen ( 0 ) ; this . update ( ) ; } ; dom . sel ( "#palette_2" ) . onclick = ( ) => { this . sprite . set_pen ( 2 ) ; this . update ( ) ; } ; dom . sel ( "#palette_3" ) . onclick = ( ) => { this . sprite . set_pen ( 3 ) ; this . update ( ) ; } ; dom . sel ( "#icon-editor-zoom-in" ) . onclick = ( ) => { this . editor . zoom_in ( ) ; this . config . window_editor . zoom = this . editor . get_zoom ( ) ; this . storage . write ( this . config ) ; this . update ( ) ; } ; dom . sel ( "#icon-editor-zoom-out" ) . onclick = ( ) => { this . editor . zoom_out ( ) ; this . config . window_editor . zoom = this . editor . get_zoom ( ) ; this . storage . write ( this . config ) ; this . update ( ) ; } ; dom . sel ( "#icon-editor-grid" ) . onclick = ( ) => { this . editor . toggle_grid ( ) ; this . config . window_editor . grid = this . editor . get_grid ( ) ; this . storage . write ( this . config ) ; this . update ( ) ; } ; dom . sel ( "#icon-flip-horizontal" ) . onclick = ( ) => { this . sprite . flip_horizontal ( ) ; this . update ( ) ; } ; dom . sel ( "#icon-flip-vertical" ) . onclick = ( ) => { this . sprite . flip_vertical ( ) ; this . update ( ) ; } ; dom . sel ( "#icon-multicolor" ) . onclick = ( ) => { this . sprite . toggle_multicolor ( ) ; this . update ( ) ; } ; dom . sel ( "#input-sprite-name" ) . onfocus = ( ) => { this . allow_keyboard_shortcuts = false ; } ; dom . sel ( "#input-sprite-name" ) . onkeyup = ( e ) => { if ( e . key === "Enter" ) { this . update_sprite_name ( ) ; dom . sel ( "#input-sprite-name" ) . blur ( ) ; } } ; dom . sel ( "#input-sprite-name" ) . onblur = ( ) => { this . update_sprite_name ( ) ; } ; dom . sel ( "#editor" ) . ontouchmove = ( e ) => { e . preventDefault ( ) ; } ; dom . sel ( "#editor" ) . onmousedown = ( e ) => { if ( this . mode == "draw" ) { this . sprite . set_pixel ( this . editor . get_pixel ( e ) , e . shiftKey ) ; this . is_drawing = true ; } if ( this . mode == "erase" ) { this . sprite . set_pixel ( this . editor . get_pixel ( e ) , true ) ; this . is_drawing = true ; } if ( this . mode == "fill" ) { this . sprite . floodfill ( this . editor . get_pixel ( e ) ) ; } if ( this . mode == "move" ) { this . move_start = true ; this . move_start_pos = this . editor . get_pixel ( e ) ; } this . update ( ) ; } ; dom . sel ( "#editor" ) . onmousemove = ( e ) => { if ( this . is_drawing && ( this . mode == "draw" || this . mode == "erase" ) ) { const newpos = this . editor . get_pixel ( e ) ; if ( newpos . x != this . oldpos . x || newpos . y != this . oldpos . y ) { const all = this . sprite . get_all ( ) ; let delete_trigger = e . shiftKey ; if ( this . mode == "erase" ) delete_trigger = true ; this . sprite . set_pixel ( newpos , delete_trigger ) ; this . editor . update ( all ) ; this . preview . update ( all ) ; this . list . update ( all ) ; this . oldpos = newpos ; } } if ( this . move_start ) { const x_diff = this . editor . get_pixel ( e ) . x - this . move_start_pos . x ; const y_diff = this . editor . get_pixel ( e ) . y - this . move_start_pos . y ; if ( x_diff > 0 ) { this . sprite . shift_horizontal ( "right" ) ; } if ( x_diff < 0 ) { this . sprite . shift_horizontal ( "left" ) ; } if ( y_diff > 0 ) { this . sprite . shift_vertical ( "down" ) ; } if ( y_diff < 0 ) { this . sprite . shift_vertical ( "up" ) ; } if ( x_diff || y_diff ) { this . move_start_pos = this . editor . get_pixel ( e ) ; this . update ( ) ; } } } ; dom . sel ( "#editor" ) . onclick = ( ) => { this . is_drawing = false ; this . move_start = false ; this . sprite . save_backup ( ) ; this . update ( ) ; } ; dom . sel ( "#icon-list-grid" ) . onclick = ( ) => { this . list . toggle_grid ( ) ; this . list . update_all ( this . sprite . get_all ( ) ) ; this . update ( ) ; } ; dom . sel ( "#icon-list-zoom-in" ) . onclick = ( ) => { this . list . zoom_in ( ) ; this . config . window_list . zoom = this . list . get_zoom ( ) ; this . storage . write ( this . config ) ; this . list . update_all ( this . sprite . get_all ( ) ) ; this . update ( ) ; } ; dom . sel ( "#icon-list-zoom-out" ) . onclick = ( ) => { this . list . zoom_out ( ) ; this . config . window_list . zoom = this . list . get_zoom ( ) ; this . storage . write ( this . config ) ; this . list . update_all ( this . sprite . get_all ( ) ) ; this . update ( ) ; } ; dom . sel ( "#icon-list-new" ) . onclick = ( ) => { this . sprite . new_sprite ( this . palette . get_color ( ) , this . sprite . is_multicolor ( ) ) ; this . list . update_all ( this . sprite . get_all ( ) ) ; this . update ( ) ; } ; dom . sel ( "#icon-list-delete" ) . onclick = ( ) => { this . sprite . delete ( ) ; this . list . update_all ( this . sprite . get_all ( ) ) ; this . update ( ) ; } ; dom . sel ( "#icon-list-copy" ) . onclick = ( ) => { this . sprite . copy ( ) ; this . update_ui ( ) ; status ( "Sprite copied." ) ; } ; dom . sel ( "#icon-list-paste" ) . onclick = ( ) => { if ( ! this . sprite . is_copy_empty ( ) ) { this . sprite . paste ( ) ; this . update ( ) ; status ( "Sprite pasted." ) ; } else { status ( "Nothing to copy." , "error" ) ; } } ; dom . sel ( "#icon-list-duplicate" ) . onclick = ( ) => { this . sprite . duplicate ( ) ; this . list . update_all ( this . sprite . get_all ( ) ) ; this . update_ui ( ) ; status ( "Sprite duplicated." ) ; } ; dom . sel ( "#spritelist" ) . onclick = ( ) => { if ( ! this . dragging ) { this . sprite . set_current_sprite ( this . list . get_clicked_sprite ( ) ) ; if ( ! this . sprite . is_multicolor ( ) && this . sprite . is_pen_multicolor ( ) ) { this . sprite . set_pen ( 1 ) ; } this . update ( ) ; } } ; $ ( "#spritelist" ) . sortable ( { stop : ( ) => { this . sprite . sort_spritelist ( $ ( "#spritelist" ) . sortable ( "toArray" ) ) ; this . dragging = false ; this . list . update_all ( this . sprite . get_all ( ) ) ; this . update ( ) ; } , } ) ; $ ( "#spritelist" ) . sortable ( { start : ( ) => { this . dragging = true ; } , } ) ; } } document . addEventListener ( "DOMContentLoaded" , function ( ) { new App ( get_config ( ) ) ; } ) ;