import ui , { setupProperty , setupAnimation , updateSelectedAnimation , setupMap } from "./ui" ; import animationArea , { centerCamera as centerAnimationCamera } from "./animationArea" ; import spritesheetArea , { updateSelection , centerCamera as centerSpritesheetCamera } from "./spritesheetArea" ; import SpriteRenderer from "../../components/SpriteRenderer" ; import SpriteRendererUpdater from "../../components/SpriteRendererUpdater" ; export let data ; export let socket ; SupClient . i18n . load ( [ { root : `${ window . location . pathname }/../..` , name : "spriteEditor" } ] , ( ) => { socket = SupClient . connect ( SupClient . query . project ) ; socket . on ( "connect" , onConnected ) ; socket . on ( "disconnect" , SupClient . onDisconnected ) ; } ) ; const onEditCommands = { } ; function onConnected ( ) { data = { } ; data . projectClient = new SupClient . ProjectClient ( socket ) ; const spriteActor = new SupEngine . Actor ( animationArea . gameInstance , "Sprite" ) ; const spriteRenderer = new SpriteRenderer ( spriteActor ) ; const config = { spriteAssetId : SupClient . query . asset , materialType : "basic" , color : "ffffff" } ; const subscriber = { onAssetReceived , onAssetEdited : ( assetId , command , ... args ) => { if ( onEditCommands [ command ] != null ) onEditCommands [ command ] ( ... args ) ; } , onAssetTrashed : SupClient . onAssetTrashed } ; data . spriteUpdater = new SpriteRendererUpdater ( data . projectClient , spriteRenderer , config , subscriber ) ; } function onAssetReceived ( ) { const pub = data . spriteUpdater . spriteAsset . pub ; const texture = pub . textures [ pub . mapSlots [ "map" ] ] ; spritesheetArea . spritesheet = { textures : { map : texture } , filtering : pub . filtering , wrapping : pub . wrapping , pixelsPerUnit : pub . pixelsPerUnit , framesPerSecond : pub . framesPerSecond , alphaTest : pub . alphaTest , mapSlots : { map : "map" } , grid : { width : 0 , height : 0 } , origin : { x : 0 , y : 1 } , animations : < any > [ ] } ; if ( texture != null ) { spritesheetArea . spritesheet . grid . width = texture . size . width ; spritesheetArea . spritesheet . grid . height = texture . size . height ; spritesheetArea . spritesheet . textures [ "map" ] . needsUpdate = true ; spritesheetArea . spriteRenderer . setSprite ( spritesheetArea . spritesheet ) ; ui . imageSize . value = `${ texture . size . width } × ${ texture . size . height }` ; } centerAnimationCamera ( ) ; centerSpritesheetCamera ( ) ; const width = texture != null ? texture . size . width / pub . grid . width : 1 ; const height = texture != null ? texture . size . height / pub . grid . height : 1 ; spritesheetArea . gridRenderer . setGrid ( { width , height , orthographicScale : 5 , direction : - 1 , ratio : { x : pub . pixelsPerUnit / pub . grid . width , y : pub . pixelsPerUnit / pub . grid . height } } ) ; ui . allSettings . forEach ( ( setting ) => { const parts = setting . split ( "." ) ; let obj = < any > pub ; parts . slice ( 0 , parts . length - 1 ) . forEach ( ( part ) => { obj = obj [ part ] ; } ) ; setupProperty ( setting , obj [ parts [ parts . length - 1 ] ] ) ; } ) ; pub . animations . forEach ( ( animation , index ) => { setupAnimation ( animation , index ) ; } ) ; for ( const mapName in pub . maps ) if ( pub . maps [ mapName ] != null ) setupMap ( mapName ) ; for ( const slotName in pub . mapSlots ) ui . mapSlotsInput [ slotName ] . value = pub . mapSlots [ slotName ] != null ? pub . mapSlots [ slotName ] : "" ; } onEditCommands [ "setProperty" ] = ( path , value ) => { setupProperty ( path , value ) ; } ; onEditCommands [ "newAnimation" ] = ( animation , index ) => { setupAnimation ( animation , index ) ; } ; onEditCommands [ "deleteAnimation" ] = ( id ) => { const animationElt = ui . animationsTreeView . treeRoot . querySelector ( `li[data-id='${ id }']` ) as HTMLLIElement ; ui . animationsTreeView . remove ( animationElt ) ; if ( ui . selectedAnimationId === id ) updateSelectedAnimation ( ) ; } ; onEditCommands [ "moveAnimation" ] = ( id , index ) => { const animationElt = ui . animationsTreeView . treeRoot . querySelector ( `li[data-id='${ id }']` ) as HTMLLIElement ; ui . animationsTreeView . insertAt ( animationElt , "item" , index ) ; } ; onEditCommands [ "setAnimationProperty" ] = ( id , key , value ) => { const animationElt = ui . animationsTreeView . treeRoot . querySelector ( `li[data-id='${ id }']` ) as HTMLLIElement ; switch ( key ) { case "name" : animationElt . querySelector ( ".name" ) . textContent = value ; break ; case "startFrameIndex" : ( animationElt . querySelector ( ".start-frame-index" ) as HTMLInputElement ) . value = value ; if ( id === ui . selectedAnimationId ) updateSelection ( ) ; break ; case "endFrameIndex" : ( animationElt . querySelector ( ".end-frame-index" ) as HTMLInputElement ) . value = value ; if ( id === ui . selectedAnimationId ) updateSelectedAnimation ( ) ; break ; case "speed" : ( animationElt . querySelector ( ".speed" ) as HTMLInputElement ) . value = value ; break ; } } ; function updateSpritesheet ( ) { const pub = data . spriteUpdater . spriteAsset . pub ; const texture = pub . textures [ pub . mapSlots [ "map" ] ] ; if ( texture == null ) return ; const asset = spritesheetArea . spritesheet ; asset . textures [ "map" ] = texture ; asset . textures [ "map" ] . needsUpdate = true ; asset . grid . width = texture . size . width ; asset . grid . height = texture . size . height ; asset . pixelsPerUnit = pub . pixelsPerUnit ; spritesheetArea . spriteRenderer . setSprite ( asset ) ; const width = Math . floor ( texture . size . width / pub . grid . width ) ; const height = Math . floor ( texture . size . height / pub . grid . height ) ; spritesheetArea . gridRenderer . resize ( width , height ) ; updateSelectedAnimation ( ) ; ui . imageSize . value = `${ texture . size . width } × ${ texture . size . height }` ; } onEditCommands [ "setMaps" ] = ( ) => { updateSpritesheet ( ) ; } ; onEditCommands [ "newMap" ] = ( name ) => { setupMap ( name ) ; } ; onEditCommands [ "renameMap" ] = ( oldName , newName ) => { const pub = data . spriteUpdater . spriteAsset . pub ; const textureElt = < HTMLLIElement > ui . texturesTreeView . treeRoot . querySelector ( `[data-name="${ oldName }"]` ) ; textureElt . dataset [ "name" ] = newName ; textureElt . querySelector ( "span" ) . textContent = newName ; for ( const slotName in pub . mapSlots ) if ( ui . mapSlotsInput [ slotName ] . value === oldName ) ui . mapSlotsInput [ slotName ] . value = newName ; } ; onEditCommands [ "deleteMap" ] = ( name ) => { const textureElt = ui . texturesTreeView . treeRoot . querySelector ( `li[data-name="${ name }"]` ) as HTMLLIElement ; ui . texturesTreeView . remove ( textureElt ) ; const pub = data . spriteUpdater . spriteAsset . pub ; for ( const slotName in pub . mapSlots ) if ( ui . mapSlotsInput [ slotName ] . value === name ) ui . mapSlotsInput [ slotName ] . value = "" ; } ; onEditCommands [ "setMapSlot" ] = ( slot , map ) => { ui . mapSlotsInput [ slot ] . value = map != null ? map : "" ; if ( slot === "map" ) updateSpritesheet ( ) ; } ;