Skip to content

Feature/layout mode + wacom support staging #214

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
elliot2 wants to merge 20 commits into
base: staging
Choose a base branch
from
Open

Feature/layout mode + wacom support staging #214

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
c29cecb
Add four up sprite mode
Nov 10, 2024
2e3eeed
Update four up sprite mode
Nov 10, 2024
dd5a2dd
Update 2upv 2uph sprite modes
Nov 10, 2024
91c62eb
Update file
Nov 10, 2024
f8b95ce
multi sprite layout mode
Nov 12, 2024
f2af385
Update
Nov 12, 2024
c82d292
Update for individual color
Nov 13, 2024
4d92240
Merge branch 'staging' into feature/layout_mode_staging
Nov 13, 2024
9655fd0
Update for grid axis and division of sprite boundary (multi sprite la…
Nov 13, 2024
aa3fed4
Update for grid multi layout projections and reindexing
Nov 13, 2024
431882e
overlay bug fix
Nov 13, 2024
bd89dc1
last line bug fix
Nov 13, 2024
ccfe8b1
allow_keyboard_shortcuts bug fix
Nov 13, 2024
2eae5bf
list title bug fix
Nov 13, 2024
dc95b0b
first grid line bug fix
Nov 14, 2024
9ca58a4
spinner and wacom tablet bug fix
Nov 14, 2024
089714a
spinner and wacom tablet bug fix
Nov 14, 2024
511e0a8
spinner and wacom tablet bug fix
Nov 14, 2024
1973cdf
Remove spinner, update layout.
Nov 17, 2024
f7f6396
Merge remote-tracking branch 'upstream/staging' into feature/layout_m…
Nov 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
178 changes: 178 additions & 0 deletions examples/ttt.spm
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,178 @@
{"version":1.4,"colors":{"0":0,"2":15,"3":1},"sprites":[{"name":"sprite_0","color":14,"multicolor":true,"double_x":false,"double_y":false,"overlay":false,"pixels":[
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,1,0,1,0,1,0,1,1,1,0,1,0],
[0,0,0,0,0,0,0,0,0,0,1,0,1,0,1,0,1,1,1,1,1,1,1,1],
[0,0,0,0,0,0,0,0,1,0,1,0,1,0,1,1,1,0,1,0,1,0,1,0],
[0,0,0,0,0,0,1,0,1,0,1,0,1,1,1,0,1,0,1,0,1,0,1,0],
[0,0,0,0,1,0,1,0,1,0,1,1,1,0,2,0,2,0,2,0,2,0,2,0],
[0,0,0,0,1,0,1,0,1,1,1,1,2,0,2,0,2,0,2,0,2,0,2,0],
[0,0,0,0,1,0,1,0,1,1,2,0,2,0,3,0,3,0,3,0,3,0,3,0],
[0,0,0,0,1,0,1,1,1,0,2,0,2,0,3,0,3,0,3,0,3,0,3,0],
[0,0,0,0,1,0,1,1,2,0,2,0,3,0,3,0,3,0,3,0,3,0,3,0],
[0,0,0,0,1,0,1,0,2,0,3,0,3,0,3,0,3,0,3,0,3,0,3,0],
[0,0,1,0,1,0,2,0,2,0,3,0,3,0,3,0,3,0,3,0,3,0,3,0],
[0,0,1,0,1,1,2,0,2,0,3,0,3,0,3,0,3,0,3,0,3,0,3,0],
[0,0,1,0,1,1,2,0,3,0,3,0,3,0,3,0,3,0,3,0,3,0,3,0],
[0,0,1,0,1,1,2,0,3,0,0,0,0,0,0,0,3,0,0,0,0,0,0,0],
[0,0,1,0,1,0,2,0,3,0,0,0,0,0,0,0,3,0,0,0,0,0,0,0],
[0,0,1,0,1,0,2,0,3,0,3,0,0,0,3,0,3,0,3,0,0,0,3,0],
[0,0,1,0,1,0,2,0,3,0,3,0,0,0,3,0,3,0,3,0,0,0,3,0]
]},{"name":"sprite_1","color":14,"multicolor":true,"double_x":false,"double_y":false,"overlay":false,"pixels":[
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[1,0,1,0,1,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[1,0,1,0,1,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0],
[1,0,1,0,1,0,1,0,1,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0],
[1,0,1,0,1,0,1,0,1,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0],
[2,0,2,0,2,0,1,0,1,0,1,0,1,1,1,0,0,0,0,0,0,0,0,0],
[2,0,2,0,2,0,1,0,1,0,2,0,1,1,1,0,0,0,0,0,0,0,0,0],
[3,0,2,0,2,0,1,0,1,0,2,0,1,0,1,0,1,0,0,0,0,0,0,0],
[3,0,3,0,2,0,2,0,1,0,2,0,1,0,1,1,1,0,0,0,0,0,0,0],
[3,0,3,0,3,0,2,0,1,0,1,0,1,0,2,1,1,0,0,0,0,0,0,0],
[3,0,3,0,3,0,2,0,2,0,1,0,1,0,2,1,1,0,1,0,0,0,0,0],
[3,0,3,0,3,0,3,0,2,0,1,0,1,0,1,0,1,1,1,0,0,0,0,0],
[3,0,3,0,3,0,3,0,2,0,1,0,1,0,1,0,1,1,1,0,0,0,0,0],
[3,0,3,0,3,0,3,0,3,0,2,0,1,0,1,0,1,1,1,0,1,0,0,0],
[3,0,0,0,0,0,0,0,3,0,2,0,1,0,3,0,3,0,3,0,1,0,0,0],
[3,0,0,0,0,0,0,0,3,0,2,0,1,0,3,0,1,0,3,0,1,0,0,0],
[3,0,3,0,0,0,3,0,3,0,2,0,1,0,2,0,1,0,2,0,1,0,0,0],
[3,0,3,0,0,0,3,0,3,0,2,0,1,0,2,0,2,0,2,1,1,0,0,0]
]},{"name":"sprite_2","color":6,"multicolor":true,"double_x":false,"double_y":false,"overlay":false,"pixels":[
[0,0,1,0,1,0,2,0,3,0,3,0,0,0,3,0,3,0,3,0,0,0,3,0],
[0,0,1,0,1,0,2,0,3,0,3,0,0,0,3,0,3,0,3,0,0,0,3,0],
[0,0,1,0,1,0,2,0,3,0,3,0,3,0,3,0,3,0,3,0,3,0,3,0],
[0,0,1,0,1,0,2,0,3,0,3,0,3,0,3,0,3,0,3,0,3,0,3,0],
[0,0,1,0,1,0,2,0,3,0,3,0,3,0,3,0,3,0,3,0,3,0,3,0],
[0,0,1,0,1,0,2,0,3,0,3,0,3,0,3,0,3,0,3,0,3,0,3,0],
[0,0,1,0,1,1,2,0,2,0,3,0,3,0,3,0,3,0,3,0,3,0,3,0],
[0,0,0,0,1,1,1,0,2,0,3,0,3,0,3,0,3,0,3,0,3,0,3,0],
[0,0,0,0,1,0,1,0,2,0,2,0,3,0,3,0,3,0,3,0,3,0,3,0],
[0,0,0,0,0,0,1,0,1,0,2,0,3,0,3,0,3,0,3,0,3,0,3,0],
[0,0,0,0,0,0,1,1,1,0,2,0,2,0,3,0,3,0,3,0,3,0,2,0],
[0,0,0,0,0,0,1,1,1,0,1,0,2,0,2,0,2,0,3,0,3,0,2,0],
[0,0,0,0,0,0,0,0,1,0,1,0,1,0,2,0,2,0,2,0,2,0,2,0],
[0,0,0,0,0,0,0,0,0,1,1,0,1,0,1,0,1,0,1,0,1,0,1,0],
[0,0,0,0,0,0,0,0,0,0,1,1,1,0,1,0,1,0,1,0,1,0,1,0],
[0,0,0,0,0,0,0,0,1,0,1,1,1,0,1,0,1,0,1,0,1,0,1,1],
[0,0,0,0,0,0,0,0,3,0,2,0,1,1,1,1,1,1,1,1,1,1,1,0],
[0,0,0,0,0,0,0,0,3,0,2,0,1,0,1,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,3,0,2,0,2,0,1,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,2,0,2,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,0,1,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0]
]},{"name":"sprite_3","color":6,"multicolor":true,"double_x":false,"double_y":false,"overlay":false,"pixels":[
[3,0,3,0,0,0,3,0,3,0,2,0,1,0,1,0,1,0,2,1,1,0,0,0],
[3,0,3,0,0,0,3,0,3,0,2,0,1,0,2,0,2,0,2,1,1,0,0,0],
[3,0,3,0,3,0,3,0,3,0,2,0,1,0,1,0,1,0,1,1,1,0,0,0],
[3,0,3,0,3,0,3,0,3,0,2,0,1,0,1,0,1,0,1,1,1,0,0,0],
[3,0,3,0,3,0,3,0,3,0,2,0,1,0,2,0,2,0,1,1,1,0,0,0],
[3,0,3,0,3,0,3,0,2,0,2,0,1,0,1,0,1,0,2,1,1,0,0,0],
[3,0,3,0,3,0,3,0,2,0,1,0,1,0,2,0,1,0,1,1,1,0,0,0],
[3,0,3,0,3,0,3,0,2,0,1,0,1,0,2,0,1,0,1,1,1,0,0,0],
[3,0,3,0,3,0,2,0,2,0,1,0,1,0,1,0,1,1,1,0,1,0,0,0],
[3,0,2,0,2,0,2,0,1,0,1,0,1,0,1,0,1,1,1,0,0,0,0,0],
[2,0,2,0,2,0,2,0,1,0,2,0,2,0,1,1,1,0,1,0,0,0,0,0],
[2,0,2,0,1,0,1,0,1,0,1,0,1,1,1,0,1,0,0,0,0,0,0,0],
[1,0,1,0,1,0,1,0,1,0,1,1,1,0,1,0,1,0,0,0,0,0,0,0],
[1,0,1,0,1,0,1,0,1,1,1,1,1,0,1,0,0,0,0,0,0,0,0,0],
[1,0,1,0,1,0,1,1,1,1,1,0,1,0,0,0,0,0,0,0,0,0,0,0],
[1,0,1,0,1,0,1,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0],
[1,0,1,0,1,0,3,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,1,0,2,0,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,1,0,1,0,2,0,3,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,0,2,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0]
]},{"name":"sprite_4","color":13,"multicolor":true,"double_x":false,"double_y":false,"overlay":false,"pixels":[
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,1,0,1,0,1,0,1,1,1,0,1,0],
[0,0,0,0,0,0,0,0,0,0,1,0,1,0,1,0,1,1,1,1,1,1,1,1],
[0,0,0,0,0,0,0,0,1,0,1,0,1,0,1,1,1,0,1,0,1,0,1,0],
[0,0,0,0,0,0,1,0,1,0,1,0,1,1,1,0,1,0,1,0,1,0,1,0],
[0,0,0,0,1,0,1,0,1,0,1,1,1,0,2,0,2,0,2,0,2,0,2,0],
[0,0,0,0,1,0,1,0,1,1,1,1,2,0,2,0,2,0,2,0,2,0,2,0],
[0,0,0,0,1,0,1,0,1,1,2,0,2,0,3,0,3,0,3,0,3,0,3,0],
[0,0,0,0,1,0,1,1,1,0,2,0,2,0,3,0,3,0,3,0,3,0,3,0],
[0,0,0,0,1,0,1,1,2,0,2,0,3,0,3,0,3,0,3,0,3,0,3,0],
[0,0,0,0,1,0,1,0,2,0,3,0,3,0,3,0,3,0,3,0,3,0,3,0],
[0,0,1,0,1,0,2,0,2,0,3,0,3,0,3,0,0,0,0,0,0,0,3,0],
[0,0,1,0,1,1,2,0,2,0,3,0,3,0,0,0,2,0,2,0,2,0,0,0],
[0,0,1,0,1,1,2,0,3,0,3,0,0,0,2,0,2,0,2,0,2,0,2,0],
[0,0,1,0,1,1,2,0,3,0,3,0,0,0,2,0,0,0,2,0,0,0,2,0],
[0,0,1,0,1,0,2,0,3,0,3,0,0,0,2,0,0,0,2,0,0,0,2,0],
[0,0,1,0,1,0,2,0,3,0,3,0,0,0,2,0,2,0,2,0,2,0,2,0],
[0,0,1,0,1,0,2,0,3,0,3,0,3,0,0,0,2,0,2,0,2,0,0,0]
]},{"name":"sprite_5","color":7,"multicolor":true,"double_x":false,"double_y":false,"overlay":false,"pixels":[
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[1,0,1,0,1,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[1,0,1,0,1,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0],
[1,0,1,0,1,0,1,0,1,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0],
[1,0,1,0,1,0,1,0,1,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0],
[2,0,2,0,2,0,1,0,1,0,1,0,1,1,1,0,0,0,0,0,0,0,0,0],
[2,0,2,0,0,0,2,0,1,0,2,0,1,1,1,0,0,0,0,0,0,0,0,0],
[3,0,0,0,2,0,0,0,1,0,2,0,1,0,1,0,1,0,0,0,0,0,0,0],
[3,0,0,0,2,0,0,0,1,0,2,0,1,0,1,1,1,0,0,0,0,0,0,0],
[3,0,0,0,2,0,0,0,1,0,1,0,1,0,2,1,1,0,0,0,0,0,0,0],
[3,0,0,0,2,0,0,0,2,0,1,0,1,0,2,1,1,0,1,0,0,0,0,0],
[3,0,0,0,2,0,0,0,2,0,1,0,1,0,1,0,1,1,1,0,0,0,0,0],
[3,0,0,0,2,0,2,0,0,0,2,0,1,0,1,0,1,1,1,0,0,0,0,0],
[0,0,2,0,2,0,2,0,0,0,2,0,1,0,1,0,1,1,1,0,1,0,0,0],
[0,0,2,0,2,0,2,0,2,0,0,0,1,0,3,0,3,0,3,0,1,0,0,0],
[0,0,2,0,2,0,2,0,2,0,0,0,1,0,3,0,1,0,3,0,1,0,0,0],
[0,0,2,0,2,0,2,0,2,0,0,0,1,0,2,0,1,0,2,0,1,0,0,0],
[3,0,0,0,2,0,2,0,0,0,2,0,1,0,2,0,2,0,2,1,1,0,0,0]
]},{"name":"sprite_6","color":5,"multicolor":true,"double_x":false,"double_y":false,"overlay":false,"pixels":[
[0,0,1,0,1,0,2,0,3,0,3,0,3,0,3,0,0,0,0,0,0,0,3,0],
[0,0,1,0,1,0,2,0,3,0,3,0,3,0,3,0,0,0,0,0,0,0,3,0],
[0,0,1,0,1,0,2,0,3,0,3,0,3,0,0,0,2,0,2,0,2,0,0,0],
[0,0,1,0,1,0,2,0,3,0,3,0,0,0,2,0,2,0,2,0,2,0,2,0],
[0,0,1,0,1,0,2,0,3,0,3,0,0,0,2,0,2,0,2,0,2,0,2,0],
[0,0,1,0,1,0,2,0,3,0,0,0,2,0,2,0,2,0,2,0,2,0,2,0],
[0,0,1,0,1,1,2,0,2,0,0,0,2,0,2,0,2,0,2,0,2,0,2,0],
[0,0,0,0,1,1,1,0,2,0,0,0,2,0,2,0,2,0,2,0,2,0,2,0],
[0,0,0,0,1,0,1,0,2,0,3,0,0,0,2,0,2,0,2,0,2,0,2,0],
[0,0,0,0,0,0,1,0,1,0,2,0,3,0,0,0,2,0,2,0,2,0,0,0],
[0,0,0,0,0,0,1,1,1,0,2,0,2,0,3,0,0,0,0,0,0,0,2,0],
[0,0,0,0,0,0,1,1,1,0,1,0,2,0,2,0,2,0,3,0,3,0,2,0],
[0,0,0,0,0,0,0,0,1,0,1,0,1,0,2,0,2,0,2,0,2,0,2,0],
[0,0,0,0,0,0,0,0,0,1,1,0,1,0,1,0,1,0,1,0,1,0,1,0],
[0,0,0,0,0,0,0,0,0,0,1,1,1,0,1,0,1,0,1,0,1,0,1,0],
[0,0,0,0,0,0,0,0,1,0,1,1,1,0,1,0,1,0,1,0,1,0,1,1],
[0,0,0,0,0,0,0,0,3,0,2,0,1,1,1,1,1,1,1,1,1,1,1,0],
[0,0,0,0,0,0,0,0,3,0,2,0,1,0,1,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,3,0,2,0,2,0,1,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,2,0,2,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,0,1,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0]
]},{"name":"sprite_7","color":13,"multicolor":true,"double_x":false,"double_y":false,"overlay":false,"pixels":[
[3,0,0,0,2,0,0,0,3,0,2,0,1,0,1,0,1,0,2,1,1,0,0,0],
[0,0,2,0,2,0,0,0,3,0,2,0,1,0,2,0,2,0,2,1,1,0,0,0],
[2,0,2,0,0,0,3,0,3,0,2,0,1,0,1,0,1,0,1,1,1,0,0,0],
[2,0,2,0,0,0,3,0,3,0,2,0,1,0,1,0,1,0,1,1,1,0,0,0],
[2,0,0,0,3,0,3,0,3,0,2,0,1,0,2,0,2,0,1,1,1,0,0,0],
[2,0,0,0,3,0,3,0,2,0,2,0,1,0,1,0,1,0,2,1,1,0,0,0],
[2,0,0,0,3,0,3,0,2,0,1,0,1,0,2,0,1,0,1,1,1,0,0,0],
[2,0,0,0,3,0,3,0,2,0,1,0,1,0,2,0,1,0,1,1,1,0,0,0],
[0,0,3,0,3,0,2,0,2,0,1,0,1,0,1,0,1,1,1,0,1,0,0,0],
[3,0,2,0,2,0,2,0,1,0,1,0,1,0,1,0,1,1,1,0,0,0,0,0],
[2,0,2,0,2,0,2,0,1,0,2,0,2,0,1,1,1,0,1,0,0,0,0,0],
[2,0,2,0,1,0,1,0,1,0,1,0,1,1,1,0,1,0,0,0,0,0,0,0],
[1,0,1,0,1,0,1,0,1,0,1,1,1,0,1,0,1,0,0,0,0,0,0,0],
[1,0,1,0,1,0,1,0,1,1,1,1,1,0,1,0,0,0,0,0,0,0,0,0],
[1,0,1,0,1,0,1,1,1,1,1,0,1,0,0,0,0,0,0,0,0,0,0,0],
[1,0,1,0,1,0,1,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0],
[1,0,1,0,1,0,3,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,1,0,2,0,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,1,0,1,0,2,0,3,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,0,2,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0]
]}],
"current_sprite":0,"pen":2,"multi_sprite":["2","2"]}
45 changes: 43 additions & 2 deletions public/css/stylesheet.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,12 +208,53 @@ img.center {
color: var(--inactive_text);
}

.ui-widget input.editor_sprite_name:hover {
.ui-widget input.editor_layout {
border: 1px solid var(--icon_outline);
min-width: 0px;
max-width: 32px;
line-height: 10px;
border-radius: 16px;
padding: 4px 4px 4px 4px;
font-size: 80%;
margin: 2px 0px 2px 0px;
vertical-align: top;
background-color: transparent;
font-family: "Courier";
color: var(--inactive_text);
}

.ui-widget input[type="number"].editor_layout::-webkit-outer-spin-button,
.ui-widget input[type="number"].editor_layout::-webkit-inner-spin-button {
appearance: none;
}

.ui-widget input[type="number"],
.ui-widget input[type="number"] {
-moz-appearance: textfield;
}


.ui-widget .label {
min-width: 0px;
padding: 4px 0px 4px 0px;
line-height: 16px;
font-size: 80%;
margin: 2px 0px 2px 2px;
vertical-align: top;
background-color: transparent;
font-family: "Courier";
color: var(--inactive_text);
display: inline-block;
}

.ui-widget input.editor_sprite_name:hover,
.ui-widget input.editor_layout:hover {
border: 1px solid var(--blue);
color: var(--active_text);
}

.ui-widget input.editor_sprite_name:focus {
.ui-widget input.editor_sprite_name:focus,
.ui-widget input.editor_layout:focus {
color: var(--active_text);
background-color: #333333;
}
Expand Down
91 changes: 79 additions & 12 deletions src/js/App.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -401,6 +401,17 @@ export class App {
this.update();
}

update_multi_sprite_layout() {
this.sprite.all.multi_sprite = [dom.val("#input-layout-width"), dom.val("#input-layout-height")];
if (this.sprite.all.multi_sprite[0] < 1) {
this.sprite.all.multi_sprite[0] = 1;
}
if (this.sprite.all.multi_sprite[1] < 1) {
this.sprite.all.multi_sprite[1] = 1;
}
this.update();
}

user_interaction() {
/*

Expand Down Expand Up @@ -1081,6 +1092,38 @@ EEEEEEEEEEEEEEEEEEEEEE DDDDDDDDDDDDD IIIIIIIIII TTTTTTTTTTT
this.allow_keyboard_shortcuts = false;
};

dom.sel("#input-layout-height").onfocus = () => {
this.allow_keyboard_shortcuts = false;
};

dom.sel("#input-layout-height").onblur = () => {
this.update_multi_sprite_layout();
this.allow_keyboard_shortcuts = true;
};

dom.sel("#input-layout-height").onkeyup = (e) => {
if (e.key === "Enter") {
dom.sel("#input-layout-height").blur();
}
};

dom.sel("#input-layout-width").onfocus = () => {
this.allow_keyboard_shortcuts = false;
};

dom.sel("#input-layout-width").onblur = () => {
this.update_multi_sprite_layout();
this.allow_keyboard_shortcuts = true;
};

dom.sel("#input-layout-width").onkeyup = (e) => {
if (e.key === "Enter") {
dom.sel("#input-layout-width").blur();
}
};



dom.sel("#snapshot-console").onfocus = () => {
this.allow_keyboard_shortcuts = false;
};
Expand All @@ -1105,31 +1148,46 @@ EEEEEEEEEEEEEEEEEEEEEE DDDDDDDDDDDDD IIIIIIIIII TTTTTTTTTTT
e.preventDefault();
};

dom.sel("#editor").onmousedown = (e) => {
const editorElement = dom.sel("#editor");
editorElement.style.touchAction = "none";

// Add these attributes
editorElement.setAttribute("touch-action", "none");
editorElement.setAttribute("pointer-events", "auto");

dom.sel("#editor").onpointerdown = (e) => {
e.target.setPointerCapture(e.pointerId);
e.preventDefault();


if (this.mode == "draw") {
this.sprite.set_pixel(this.editor.get_pixel(e), e.shiftKey); // updates the sprite array at the grid position with the color chosen on the palette
this.sprite.set_pixel(
this.editor.get_pixel(this.sprite.all, e),
e.shiftKey
); // updates the sprite array at the grid position with the color chosen on the palette
this.is_drawing = true; // needed for mousemove drawing
}

if (this.mode == "erase") {
this.sprite.set_pixel(this.editor.get_pixel(e), true); // updates the sprite array at the grid position with the color chosen on the palette
this.sprite.set_pixel(this.editor.get_pixel(this.sprite.all, e), true); // updates the sprite array at the grid position with the color chosen on the palette
this.is_drawing = true; // needed for mousemove drawing
}

if (this.mode == "fill") {
this.sprite.floodfill(this.editor.get_pixel(e));
this.sprite.floodfill(this.editor.get_pixel(this.sprite.all, e));
}

if (this.mode == "move") {
this.move_start = true;
this.move_start_pos = this.editor.get_pixel(e);
this.move_start_pos = this.editor.get_pixel(this.sprite.all, e);
}
this.update();
};


dom.sel("#editor").onmousemove = (e) => {
dom.sel("#editor").onpointermove = (e) => {
if (this.is_drawing && (this.mode == "draw" || this.mode == "erase")) {
const newpos = this.editor.get_pixel(e);
const newpos = this.editor.get_pixel(this.sprite.all, e);
// only draw if the mouse has entered a new pixel area (just for performance)
if (newpos.x != this.oldpos.x || newpos.y != this.oldpos.y) {
const all = this.sprite.get_all();
Expand All @@ -1144,8 +1202,10 @@ EEEEEEEEEEEEEEEEEEEEEE DDDDDDDDDDDDD IIIIIIIIII TTTTTTTTTTT
}

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;
const x_diff =
this.editor.get_pixel(this.sprite.all, e).x - this.move_start_pos.x;
const y_diff =
this.editor.get_pixel(this.sprite.all, e).y - this.move_start_pos.y;

if (x_diff > 0) {
this.sprite.shift_horizontal("right");
Expand All @@ -1161,21 +1221,28 @@ EEEEEEEEEEEEEEEEEEEEEE DDDDDDDDDDDDD IIIIIIIIII TTTTTTTTTTT
}

if (x_diff || y_diff) {
this.move_start_pos = this.editor.get_pixel(e);
this.move_start_pos = this.editor.get_pixel(this.sprite.all, e);
this.update();
}
}
};

dom.sel("#editor").onclick = () => {
// Add pointer up handler to stop drawing
dom.sel("#editor").onpointerup = (e) => {
// stop drawing pixels
this.is_drawing = false;
this.move_start = false;
this.sprite.save_backup();
this.update();
};

/*
// Add pointer out handler to stop drawing when leaving the element
dom.sel("#editor").onpointerout = (e) => {
this.is_drawing = false;
this.move_start = false;
};

/*

LLLLLLLLLLL IIIIIIIIII SSSSSSSSSSSSSSS TTTTTTTTTTTTTTTTTTTTTTT
L:::::::::L I::::::::I SS:::::::::::::::S T:::::::::::::::::::::T
Expand Down
Loading