Going back to the canvas thing

Entities/CelConfig.cs

@@ -13,8 +13,8 @@ namespace fxl.codes.kisekae.Entities
         public int PaletteGroup { get; set; }
         public string Comment { get; set; }
         public int Transparency { get; set; }
-        public Set Sets { get; set; }
         public Render Render { get; set; }
         public List<CelPosition> Positions { get; set; } = new();
+        public bool[] Sets { get; set; } = new bool[10];
     }
 }

Entities/Set.cs

@@ -1,20 +0,0 @@
-using System;
-
-namespace fxl.codes.kisekae.Entities
-{
-    [Flags]
-    public enum Set
-    {
-        None = 0,
-        Zero = 1 << 0,
-        One = 1 << 1,
-        Two = 1 << 2,
-        Three = 1 << 3,
-        Four = 1 << 4,
-        Five = 1 << 5,
-        Six = 1 << 6,
-        Seven = 1 << 7,
-        Eight = 1 << 8,
-        Nine = 1 << 9
-    }
-}

KisekaeContext.cs

@@ -9,6 +9,12 @@ namespace fxl.codes.kisekae
         {
         }
 
+        protected override void OnModelCreating(ModelBuilder modelBuilder)
+        {
+            modelBuilder.Entity<CelConfig>().Ignore(x => x.Sets);
+            base.OnModelCreating(modelBuilder);
+        }
+
         public DbSet<Kisekae> KisekaeSets { get; set; }
         public DbSet<Configuration> Configurations { get; set; }
         public DbSet<Cel> Cels { get; set; }

Migrations/20211122002625_SimplifySets.Designer.cs

@@ -0,0 +1,380 @@
+// <auto-generated />
+using System;
+using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore.Infrastructure;
+using Microsoft.EntityFrameworkCore.Migrations;
+using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
+using Npgsql.EntityFrameworkCore.PostgreSQL.Metadata;
+using fxl.codes.kisekae;
+
+#nullable disable
+
+namespace fxl.codes.kisekae.Migrations
+{
+    [DbContext(typeof(KisekaeContext))]
+    [Migration("20211122002625_SimplifySets")]
+    partial class SimplifySets
+    {
+        protected override void BuildTargetModel(ModelBuilder modelBuilder)
+        {
+#pragma warning disable 612, 618
+            modelBuilder
+                .HasAnnotation("ProductVersion", "6.0.0")
+                .HasAnnotation("Relational:MaxIdentifierLength", 63);
+
+            NpgsqlModelBuilderExtensions.UseIdentityByDefaultColumns(modelBuilder);
+
+            modelBuilder.Entity("fxl.codes.kisekae.Entities.Action", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+
+                    b.Property<int?>("ConfigurationId")
+                        .HasColumnType("integer");
+
+                    b.Property<string>("Name")
+                        .HasColumnType("text");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("ConfigurationId");
+
+                    b.ToTable("Action");
+                });
+
+            modelBuilder.Entity("fxl.codes.kisekae.Entities.Cel", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+
+                    b.Property<byte[]>("Data")
+                        .HasColumnType("bytea");
+
+                    b.Property<string>("FileName")
+                        .HasColumnType("text");
+
+                    b.Property<int>("Height")
+                        .HasColumnType("integer");
+
+                    b.Property<int?>("KisekaeId")
+                        .HasColumnType("integer");
+
+                    b.Property<int>("OffsetX")
+                        .HasColumnType("integer");
+
+                    b.Property<int>("OffsetY")
+                        .HasColumnType("integer");
+
+                    b.Property<int>("Width")
+                        .HasColumnType("integer");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("KisekaeId");
+
+                    b.ToTable("Cels");
+                });
+
+            modelBuilder.Entity("fxl.codes.kisekae.Entities.CelConfig", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+
+                    b.Property<int?>("CelId")
+                        .HasColumnType("integer");
+
+                    b.Property<string>("Comment")
+                        .HasColumnType("text");
+
+                    b.Property<int?>("ConfigurationId")
+                        .HasColumnType("integer");
+
+                    b.Property<int>("Fix")
+                        .HasColumnType("integer");
+
+                    b.Property<int>("Mark")
+                        .HasColumnType("integer");
+
+                    b.Property<int>("PaletteGroup")
+                        .HasColumnType("integer");
+
+                    b.Property<int?>("PaletteId")
+                        .HasColumnType("integer");
+
+                    b.Property<int?>("RenderId")
+                        .HasColumnType("integer");
+
+                    b.Property<int>("Transparency")
+                        .HasColumnType("integer");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("CelId");
+
+                    b.HasIndex("ConfigurationId");
+
+                    b.HasIndex("PaletteId");
+
+                    b.HasIndex("RenderId");
+
+                    b.ToTable("CelConfigs");
+                });
+
+            modelBuilder.Entity("fxl.codes.kisekae.Entities.CelPosition", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+
+                    b.Property<int?>("CelConfigId")
+                        .HasColumnType("integer");
+
+                    b.Property<int>("Set")
+                        .HasColumnType("integer");
+
+                    b.Property<int>("X")
+                        .HasColumnType("integer");
+
+                    b.Property<int>("Y")
+                        .HasColumnType("integer");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("CelConfigId");
+
+                    b.ToTable("CelPosition");
+                });
+
+            modelBuilder.Entity("fxl.codes.kisekae.Entities.Configuration", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+
+                    b.Property<string>("BackgroundColorHex")
+                        .HasColumnType("text");
+
+                    b.Property<string>("Data")
+                        .HasColumnType("text");
+
+                    b.Property<int>("Height")
+                        .HasColumnType("integer");
+
+                    b.Property<int?>("KisekaeId")
+                        .HasColumnType("integer");
+
+                    b.Property<string>("Name")
+                        .HasColumnType("text");
+
+                    b.Property<int>("Width")
+                        .HasColumnType("integer");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("KisekaeId");
+
+                    b.ToTable("Configurations");
+                });
+
+            modelBuilder.Entity("fxl.codes.kisekae.Entities.Kisekae", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+
+                    b.Property<string>("CheckSum")
+                        .HasColumnType("text");
+
+                    b.Property<string>("FileName")
+                        .HasColumnType("text");
+
+                    b.HasKey("Id");
+
+                    b.ToTable("KisekaeSets");
+                });
+
+            modelBuilder.Entity("fxl.codes.kisekae.Entities.Palette", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+
+                    b.Property<byte[]>("Data")
+                        .HasColumnType("bytea");
+
+                    b.Property<string>("FileName")
+                        .HasColumnType("text");
+
+                    b.Property<int?>("KisekaeId")
+                        .HasColumnType("integer");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("KisekaeId");
+
+                    b.ToTable("Palettes");
+                });
+
+            modelBuilder.Entity("fxl.codes.kisekae.Entities.PaletteColor", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+
+                    b.Property<int>("Group")
+                        .HasColumnType("integer");
+
+                    b.Property<string>("Hex")
+                        .HasColumnType("text");
+
+                    b.Property<int?>("PaletteId")
+                        .HasColumnType("integer");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("PaletteId");
+
+                    b.ToTable("PaletteColors");
+                });
+
+            modelBuilder.Entity("fxl.codes.kisekae.Entities.Render", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+
+                    b.Property<byte[]>("Image")
+                        .HasColumnType("bytea");
+
+                    b.HasKey("Id");
+
+                    b.ToTable("Renders");
+                });
+
+            modelBuilder.Entity("fxl.codes.kisekae.Entities.Action", b =>
+                {
+                    b.HasOne("fxl.codes.kisekae.Entities.Configuration", null)
+                        .WithMany("Actions")
+                        .HasForeignKey("ConfigurationId");
+                });
+
+            modelBuilder.Entity("fxl.codes.kisekae.Entities.Cel", b =>
+                {
+                    b.HasOne("fxl.codes.kisekae.Entities.Kisekae", "Kisekae")
+                        .WithMany("Cels")
+                        .HasForeignKey("KisekaeId");
+
+                    b.Navigation("Kisekae");
+                });
+
+            modelBuilder.Entity("fxl.codes.kisekae.Entities.CelConfig", b =>
+                {
+                    b.HasOne("fxl.codes.kisekae.Entities.Cel", "Cel")
+                        .WithMany()
+                        .HasForeignKey("CelId");
+
+                    b.HasOne("fxl.codes.kisekae.Entities.Configuration", "Configuration")
+                        .WithMany("Cels")
+                        .HasForeignKey("ConfigurationId");
+
+                    b.HasOne("fxl.codes.kisekae.Entities.Palette", "Palette")
+                        .WithMany()
+                        .HasForeignKey("PaletteId");
+
+                    b.HasOne("fxl.codes.kisekae.Entities.Render", "Render")
+                        .WithMany()
+                        .HasForeignKey("RenderId");
+
+                    b.Navigation("Cel");
+
+                    b.Navigation("Configuration");
+
+                    b.Navigation("Palette");
+
+                    b.Navigation("Render");
+                });
+
+            modelBuilder.Entity("fxl.codes.kisekae.Entities.CelPosition", b =>
+                {
+                    b.HasOne("fxl.codes.kisekae.Entities.CelConfig", null)
+                        .WithMany("Positions")
+                        .HasForeignKey("CelConfigId");
+                });
+
+            modelBuilder.Entity("fxl.codes.kisekae.Entities.Configuration", b =>
+                {
+                    b.HasOne("fxl.codes.kisekae.Entities.Kisekae", "Kisekae")
+                        .WithMany("Configurations")
+                        .HasForeignKey("KisekaeId");
+
+                    b.Navigation("Kisekae");
+                });
+
+            modelBuilder.Entity("fxl.codes.kisekae.Entities.Palette", b =>
+                {
+                    b.HasOne("fxl.codes.kisekae.Entities.Kisekae", "Kisekae")
+                        .WithMany("Palettes")
+                        .HasForeignKey("KisekaeId");
+
+                    b.Navigation("Kisekae");
+                });
+
+            modelBuilder.Entity("fxl.codes.kisekae.Entities.PaletteColor", b =>
+                {
+                    b.HasOne("fxl.codes.kisekae.Entities.Palette", "Palette")
+                        .WithMany("Colors")
+                        .HasForeignKey("PaletteId");
+
+                    b.Navigation("Palette");
+                });
+
+            modelBuilder.Entity("fxl.codes.kisekae.Entities.CelConfig", b =>
+                {
+                    b.Navigation("Positions");
+                });
+
+            modelBuilder.Entity("fxl.codes.kisekae.Entities.Configuration", b =>
+                {
+                    b.Navigation("Actions");
+
+                    b.Navigation("Cels");
+                });
+
+            modelBuilder.Entity("fxl.codes.kisekae.Entities.Kisekae", b =>
+                {
+                    b.Navigation("Cels");
+
+                    b.Navigation("Configurations");
+
+                    b.Navigation("Palettes");
+                });
+
+            modelBuilder.Entity("fxl.codes.kisekae.Entities.Palette", b =>
+                {
+                    b.Navigation("Colors");
+                });
+#pragma warning restore 612, 618
+        }
+    }
+}

Migrations/20211122002625_SimplifySets.cs

@@ -0,0 +1,36 @@
+using Microsoft.EntityFrameworkCore.Migrations;
+
+#nullable disable
+
+namespace fxl.codes.kisekae.Migrations
+{
+    public partial class SimplifySets : Migration
+    {
+        protected override void Up(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.DropColumn(
+                name: "Comment",
+                table: "Palettes");
+
+            migrationBuilder.DropColumn(
+                name: "Sets",
+                table: "CelConfigs");
+        }
+
+        protected override void Down(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.AddColumn<string>(
+                name: "Comment",
+                table: "Palettes",
+                type: "text",
+                nullable: true);
+
+            migrationBuilder.AddColumn<int>(
+                name: "Sets",
+                table: "CelConfigs",
+                type: "integer",
+                nullable: false,
+                defaultValue: 0);
+        }
+    }
+}

Migrations/KisekaeContextModelSnapshot.cs

@@ -111,9 +111,6 @@ namespace fxl.codes.kisekae.Migrations
                     b.Property<int?>("RenderId")
                         .HasColumnType("integer");
 
-                    b.Property<int>("Sets")
-                        .HasColumnType("integer");
-
                     b.Property<int>("Transparency")
                         .HasColumnType("integer");
 
@@ -217,9 +214,6 @@ namespace fxl.codes.kisekae.Migrations
 
                     NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
 
-                    b.Property<string>("Comment")
-                        .HasColumnType("text");
-
                     b.Property<byte[]>("Data")
                         .HasColumnType("bytea");
 

Models/CelModel.cs

@@ -1,4 +1,5 @@
 using System;
+using System.Collections.Generic;
 using fxl.codes.kisekae.Entities;
 
 namespace fxl.codes.kisekae.Models
@@ -10,14 +11,13 @@ namespace fxl.codes.kisekae.Models
             Mark = celConfig.Mark;
             Fix = celConfig.Fix;
             ZIndex = zIndex;
-            Image = Convert.ToBase64String(celConfig.Render.Image);
+            Image = $"data:image/gif;base64,{Convert.ToBase64String(celConfig.Render.Image)}";
             Height = celConfig.Cel.Height;
             Width = celConfig.Cel.Width;
             Opacity = (double)(255 - celConfig.Transparency) / 255;
-
-            foreach (var position in celConfig.Positions) InitialPositions[position.Set] = new CoordinateModel(position.X, position.Y);
-
             Offset = new CoordinateModel(celConfig.Cel.OffsetX, celConfig.Cel.OffsetY);
+            
+            foreach (var position in celConfig.Positions) InitialPositions.Add(position.Set, new CoordinateModel(position.X, position.Y));
         }
 
         public int Fix { get; set; }
@@ -27,7 +27,7 @@ namespace fxl.codes.kisekae.Models
         public double Opacity { get; set; }
         public int Width { get; set; }
         public int ZIndex { get; set; }
-        public CoordinateModel[] InitialPositions { get; set; } = new CoordinateModel[10];
+        public IDictionary<int, CoordinateModel> InitialPositions { get; set; } = new Dictionary<int, CoordinateModel>();
         public CoordinateModel Offset { get; set; }
     }
 }

Models/PlaysetModel.cs

@@ -1,4 +1,3 @@
-using System;
 using System.Linq;
 using System.Text.Json.Serialization;
 using fxl.codes.kisekae.Entities;
@@ -19,16 +18,7 @@ namespace fxl.codes.kisekae.Models
             var totalCels = configuration.Cels.Count;
             Cels = configuration.Cels.Select((x, index) => new CelModel(x, (totalCels - index) * 10)).ToArray();
 
-            var summation = configuration.Cels.Aggregate(Set.None, (current, cel) => current | cel.Sets);
+            for (var index = 0; index < 10; index++) Sets[index] = configuration.Cels.Any(x => x.Positions.Any(y => y.Set == index));
-            if (summation == Set.None)
-            {
-                Array.Fill(Sets, true);
-                return;
-            }
-
-            foreach (var value in Enum.GetValues<Set>().Where(x => (x & summation) == x && x != Set.None))
-                if (value == Set.Zero) Sets[0] = true;
-                else Sets[(int)Math.Log2((double)value)] = true;
         }
 
         public CelModel[] Cels { get; set; }

Scripts/main.ts

@@ -11,7 +11,7 @@ declare global {
     }
 }
 
-export default class Main {
+class Main {
     appBar: MDCTopAppBar
     linearProgress: MDCLinearProgress
     ripples: MDCRipple[] = []

Scripts/pto.ts

@@ -7,13 +7,14 @@ export interface Playset {
 }
 
 export interface Cel {
-    readonly id: number
+    readonly mark: number
     readonly fix: number
-    readonly initialPositions: Coordinate[]
+    readonly initialPositions: { [key: number]: Coordinate }
     readonly offset: Coordinate
-
+    readonly image: string
-    currentPositions: Coordinate[]
+    readonly zIndex: number
-    currentFix: number
+    readonly height: number
+    readonly width: number
 }
 
 export class Coordinate {

Scripts/tracker.ts

@@ -1,158 +1,64 @@
-import {Cel, Coordinate, Playset} from "./pto"
+import * as _ from "lodash"
-import Builder from "./utility"
+import {fabric} from "fabric"
-
+import {Cel, Playset} from "./pto"
-const cssClass = "active-set"
 
 export default class Tracker {
     set: number = 0
-    setPalettes: number[] = []
 
     private playset: Playset
     private menu: HTMLElement
-    private playSpace: HTMLElement
+    private canvas: fabric.Canvas
-    private maxFixById: { [key: number]: number } = {}
+    private states: string[]
 
     constructor(playset: Playset, menu: HTMLElement, playSpace: HTMLElement) {
         this.playset = playset
         this.menu = menu
-        this.playSpace = playSpace
 
-        this.addEvents()
+        this.canvas = new fabric.Canvas(playSpace.id)
-        this.reset()
+        this.playset.cels
-        this.setMenu()
+            .sort((first: Cel, second: Cel) => {
-    }
+                return first.zIndex
-
+            })
-    private static adjustPlacement(cel: Cel, set: number, movement: Coordinate): Coordinate {
-        let x = cel.currentPositions[set].x + movement.x
-        let y = cel.currentPositions[set].y + movement.y
-        cel.currentPositions[set] = new Coordinate(x, y)
-
-        return Tracker.getCoordinate(cel, set)
-    }
-
-    private static getCoordinate(cel: Cel, set: number): Coordinate {
-        let position = cel.currentPositions[set]
-        if (!position) return new Coordinate()
-
-        if (!cel.offset) return position
-
-        return new Coordinate(position.x + cel.offset.x, position.y + cel.offset.y)
     }
 
     setPlayArea(set: number): void {
         this.set = set
-
+        this.canvas.clear()
-        this.menu.querySelectorAll("button").forEach(button => {
+        
-            button.classList.remove(cssClass)
+        let groups: { [key: number]: Cel[] } = {}
-        })
+        let groupImages: { [key: number]: fabric.Image[] } = {}
-        this.menu.querySelector(`button[data-set="${set}"]`).classList.add(cssClass)
+        this.playset.cels
-
+            .filter(cel => cel.initialPositions[set])
-        let elements = this.playSpace.querySelectorAll(".cel-image")
+            .forEach(cel => {
-        this.playset.cels.forEach((cel, index) => {
+                if (!groups[cel.mark]) groups[cel.mark] = []
-            let element = elements[index] as HTMLDivElement
+                groups[cel.mark].push(cel)
-            element.style.visibility = "hidden"
+            })
-
+        
-            if (cel.initialPositions[set] != null) {
+        let tempCanvas = this.canvas
-                element.style.visibility = "visible"
+        let doGrouping = function() {
-                let position = Tracker.getCoordinate(cel, set)
+            console.log("Executing groups?")
-                element.style.left = `${position.x}px`
+            for (let fabricGroupKey in groupImages) {
-                element.style.top = `${position.y}px`
+                tempCanvas.discardActiveObject()
+                let selection = new fabric.ActiveSelection(groupImages[fabricGroupKey], { canvas: this.canvas })
+                let group = selection.toGroup()
+                tempCanvas.add(group)
             }
-        })
+        }
-    }
+        
-
+        for (let key in groups) {
-    private addEvents() {
+            groups[key].forEach(cel => {
-        let previousEvent: MouseEvent | null = null
+                fabric.Image.fromURL(cel.image,image => {
-
+                    image.left = cel.initialPositions[set].x + cel.offset.x
-        let elements = this.playSpace.querySelectorAll(".cel-image")
+                    image.top = cel.initialPositions[set].y + cel.offset.y
-        elements.forEach((element: HTMLElement) => {
+                    
-            let mousemove = (move: MouseEvent) => {
+                    if (!groupImages[key]) groupImages[key] = []
-                let movement = new Coordinate(move.clientX - previousEvent.clientX, move.clientY - previousEvent.clientY)
+                    groupImages[key].push(image)
-                previousEvent = move
+                    this.canvas.add(image)
-
+                    
-                let group = this.getGroup(element)
+                    console.log("Adding image")
-                group.forEach((item: HTMLElement) => {
+                    _.debounce(doGrouping, 250)
-                    let index = parseInt(item.attributes.getNamedItem("data-index").value)
-                    let cel = this.playset.cels[index]
-
-                    if (cel.currentFix == 0) {
-                        let position = Tracker.adjustPlacement(cel, this.set, movement)
-                        item.style.left = `${position.x}px`
-                        item.style.top = `${position.y}px`
-                    }
-                })
-            }
-
-            element.addEventListener("mousedown", (down: MouseEvent) => {
-                previousEvent = down
-                this.getGroup(element).forEach(item => {
-                    let index = parseInt(item.attributes.getNamedItem("data-index").value)
-                    let cel = this.playset.cels[index]
-
-                    if (cel.currentFix > 0) cel.currentFix--
-                })
-
-                window.addEventListener("mousemove", mousemove)
-                window.addEventListener("mouseup", () => {
-                    previousEvent = null
-                    window.removeEventListener("mousemove", mousemove)
                 })
             })
-        })
+        }
-    }
-
-    private getGroup(element: Element): NodeListOf<Element> {
-        let id = element.attributes.getNamedItem("data-id").value
-        return this.playSpace.querySelectorAll(`.cel-image[data-id="${id}"]`)
-    }
-
-    private reset(): void {
-        this.playSpace.querySelectorAll(".cel-image").forEach((element: HTMLElement) => {
-            element.style.visibility = "hidden"
-            element.style.left = "0"
-            element.style.top = "0"
-        })
-        
-        this.playset.cels.forEach(cel => {
-            if (!this.maxFixById[cel.id]) {
-                this.maxFixById[cel.id] = 0
-            }
-            
-            if (this.maxFixById[cel.id] < cel.fix) {
-                this.maxFixById[cel.id] = cel.fix
-            }
-        })
-
-        this.playset.cels.forEach(cel => {
-            cel.currentFix = this.maxFixById[cel.id]
-            cel.currentPositions = cel.initialPositions.map(position => position ? new Coordinate(position.x, position.y) : null)
-        })
-    }
-
-    private setMenu(): void {
-        let reset = this.menu.querySelector(`button[data-rel="reset"]`)
-        reset.addEventListener("click", () => {
-            this.reset()
-            this.setPlayArea(this.set)
-        })
-
-        this.playset.sets.forEach((enabled, index) => {
-            if (enabled) {
-                let button = new Builder("li")
-                    .addChildren(new Builder("button")
-                        .addClass("mdc-button")
-                        .addAttributes({"data-set": index})
-                        .addChildren(
-                            new Builder("span").addClass("mdc-button__ripple"),
-                            new Builder("span").addClass("mdc-button__label").setText(index.toString())
-                        )).build()
-
-                button.addEventListener("click", () => {
-                    this.setPlayArea(index)
-                })
-
-                this.menu.appendChild(button)
-            }
-        })
     }
 }

Services/ConfigurationReaderService.cs

@@ -55,7 +55,7 @@ namespace fxl.codes.kisekae.Services
                         break;
                     case '$':
                     case ' ':
-                        initialPositions.Append(line.Replace("\\r\\n", "").Replace("\\n", ""));
+                        initialPositions.Append(line);
                         break;
                 }
 
@@ -113,15 +113,12 @@ namespace fxl.codes.kisekae.Services
                 {
                     var success = int.TryParse(id, out var result);
                     if (!success) continue;
-
+                    cel.Sets[result] = true;
-                    if (cel.Sets == Set.None)
-                        cel.Sets = (Set)(2 ^ result);
-                    else
-                        cel.Sets |= (Set)(2 ^ result);
                 }
             }
 
             cel.Palette ??= palettes[0];
+            if (!cel.Sets.Max()) Array.Fill(cel.Sets, true);
 
             return cel;
         }
@@ -150,6 +147,8 @@ namespace fxl.codes.kisekae.Services
                     foreach (var cel in dto.Cels.Where(x => x.Mark == innerIndex - 1))
                     {
                         cel.PaletteGroup = paletteGroup;
+
+                        if (!cel.Sets[index]) continue;
                         cel.Positions.Add(new CelPosition
                         {
                             Set = index,

Styles/main.scss

@@ -56,17 +56,8 @@ body {
     article {
       display: flex;
       flex: 1;
+      justify-content: space-around;
       text-align: center;
-      
-      #play_space {
-        margin: 2em auto;
-        position: relative;
-        
-        .cel-image {
-          visibility: hidden;
-          position: absolute;
-        }
-      }
     }
 
     .visually-hidden {

Views/Play/Index.cshtml

@@ -17,16 +17,7 @@
     </ul>
 </header>
 <article id="play_area" style="background-color: #@Model.BorderColor">
-    <div id="play_space" style="height: @(Model.Height)px; width: @(Model.Width)px">
+    <canvas id="play_space" style="height: @(Model.Height)px; width: @(Model.Width)px" height="@Model.Height" width="@Model.Width"></canvas>
-        @for (var index = 0; index < Model.Cels.Length; index++)
-        {
-            var cel = Model.Cels[index];
-            <div class="cel-image"
-                 style="background-image: url('data:image/gif;base64,@cel.Image'); height: @(cel.Height)px; width: @(cel.Width)px; z-index: @cel.ZIndex; opacity: @cel.Opacity"
-                 data-id="@cel.Mark"
-                 data-index="@index"></div>
-        }
-    </div>
 </article>
 @section Scripts
 {

global.json

@@ -1,7 +1,7 @@
 {
   "sdk": {
-    "version": "6.0",
+    "version": "6.0.0",
     "rollForward": "latestMajor",
-    "allowPrerelease": true
+    "allowPrerelease": false
   }
 }

package.json

@@ -11,6 +11,8 @@
   "author": "Lani",
   "license": "UNLICENSED",
   "devDependencies": {
+    "@types/fabric": "^4.5.6",
+    "core-js": "^3.19.2",
     "css-loader": "^6.5.1",
     "extract-loader": "^5.1.0",
     "file-loader": "^6.2.0",
@@ -21,6 +23,9 @@
     "webpack-cli": "^4.9.1"
   },
   "dependencies": {
+    "@types/lodash": "^4.14.178",
+    "fabric": "^4.6.0",
+    "lodash": "^4.17.21",
     "material-components-web": "^13.0.0"
   }
 }

wwwroot/css/main.css

@@ -2868,16 +2868,9 @@ body main header ul li button.active-set.mdc-ripple-upgraded {
 body main article {
   display: flex;
   flex: 1;
+  justify-content: space-around;
   text-align: center;
 }
-body main article #play_space {
-  margin: 2em auto;
-  position: relative;
-}
-body main article #play_space .cel-image {
-  visibility: hidden;
-  position: absolute;
-}
 body main .visually-hidden {
   position: absolute !important;
   height: 1px;

wwwroot/js/uploader.js

@@ -246,7 +246,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \***************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _material_chips__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @material/chips */ \"./node_modules/@material/chips/chip-set/component.js\");\n/* harmony import */ var _utility__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./utility */ \"./Scripts/utility.ts\");\n\n\nvar Uploader = (function () {\n    function Uploader() {\n        this.init();\n    }\n    Uploader.prototype.init = function () {\n        var _this = this;\n        var upload = document.getElementById(\"lzh_upload\");\n        var container = document.querySelector(\".mdc-evolution-chip-set__chips\");\n        document.addEventListener(\"MDCChipSet:interaction\", function (event) {\n            console.log(event);\n        });\n        document.addEventListener(\"MDCChipSet:selection\", function (event) {\n            console.log(event);\n        });\n        upload.addEventListener(\"change\", function (event) {\n            while (container.firstChild)\n                container.removeChild(container.firstChild);\n            for (var index = 0; index < upload.files.length; index++) {\n                _this.addChip(container, index, upload.files.item(index));\n            }\n            var element = document.querySelector(\".mdc-evolution-chip-set\");\n            _this.chips = _material_chips__WEBPACK_IMPORTED_MODULE_1__.MDCChipSet.attachTo(element);\n        });\n    };\n    Uploader.prototype.addChip = function (container, index, file) {\n        var chipClass = \"mdc-evolution-chip\";\n        var textButton = _utility__WEBPACK_IMPORTED_MODULE_0__[\"default\"].element(\"button\", { \"type\": \"button\", \"tabindex\": 0 }, chipClass + \"__action\", chipClass + \"__action--primary\")\n            .addChildren(_utility__WEBPACK_IMPORTED_MODULE_0__[\"default\"].element(\"span\", {}, chipClass + \"__ripple\", chipClass + \"__ripple--primary\"), _utility__WEBPACK_IMPORTED_MODULE_0__[\"default\"].element(\"span\", {}, chipClass + \"__text-label\").setText(file.name));\n        var textWrapper = _utility__WEBPACK_IMPORTED_MODULE_0__[\"default\"].element(\"span\", { \"role\": \"gridcell\" }, chipClass + \"__cell\", chipClass + \"__cell--primary\")\n            .addChildren(textButton);\n        var trailingButton = _utility__WEBPACK_IMPORTED_MODULE_0__[\"default\"].element(\"button\", { \"type\": \"button\", \"tabindex\": -1, \"data-mdc-deletable\": \"true\", \"aria-label\": \"Remove \" + file.name })\n            .addChildren(_utility__WEBPACK_IMPORTED_MODULE_0__[\"default\"].element(\"span\", {}, chipClass + \"__ripple\", chipClass + \"__ripple--trailing\"), _utility__WEBPACK_IMPORTED_MODULE_0__[\"default\"].element(\"span\", {}, chipClass + \"__icon\", chipClass + \"__icon--trailing\").setText(\"close\"));\n        var trailingWrapper = _utility__WEBPACK_IMPORTED_MODULE_0__[\"default\"].element(\"span\", { \"role\": \"gridcell\" }, chipClass + \"__cell\", chipClass + \"__cell--trailing\")\n            .addChildren(trailingButton);\n        var chip = _utility__WEBPACK_IMPORTED_MODULE_0__[\"default\"].element(\"span\", { \"role\": \"row\", \"id\": \"chip_\" + index }, chipClass).addChildren(textWrapper, trailingWrapper).build();\n        container.appendChild(chip);\n    };\n    return Uploader;\n}());\nnew Uploader();\n\n\n//# sourceURL=webpack://fxl.codes.kisekae/./Scripts/upload.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _material_chips__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @material/chips */ \"./node_modules/@material/chips/chip-set/component.js\");\n/* harmony import */ var _utility__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./utility */ \"./Scripts/utility.ts\");\n\n\nvar Uploader = (function () {\n    function Uploader() {\n        this.init();\n    }\n    Uploader.prototype.init = function () {\n        var _this = this;\n        var upload = document.getElementById(\"lzh_upload\");\n        var container = document.querySelector(\".mdc-evolution-chip-set__chips\");\n        document.addEventListener(\"MDCChipSet:interaction\", function (event) {\n            console.log(event);\n        });\n        document.addEventListener(\"MDCChipSet:selection\", function (event) {\n            console.log(event);\n        });\n        upload.addEventListener(\"change\", function (event) {\n            while (container.firstChild)\n                container.removeChild(container.firstChild);\n            for (var index = 0; index < upload.files.length; index++) {\n                _this.addChip(container, index, upload.files.item(index));\n            }\n            var element = document.querySelector(\".mdc-evolution-chip-set\");\n            _this.chips = _material_chips__WEBPACK_IMPORTED_MODULE_1__.MDCChipSet.attachTo(element);\n        });\n    };\n    Uploader.prototype.addChip = function (container, index, file) {\n        var chipClass = \"mdc-evolution-chip\";\n        var textButton = _utility__WEBPACK_IMPORTED_MODULE_0__[\"default\"].element(\"button\", { \"type\": \"button\", \"tabindex\": 0 }, \"\".concat(chipClass, \"__action\"), \"\".concat(chipClass, \"__action--primary\"))\n            .addChildren(_utility__WEBPACK_IMPORTED_MODULE_0__[\"default\"].element(\"span\", {}, \"\".concat(chipClass, \"__ripple\"), \"\".concat(chipClass, \"__ripple--primary\")), _utility__WEBPACK_IMPORTED_MODULE_0__[\"default\"].element(\"span\", {}, \"\".concat(chipClass, \"__text-label\")).setText(file.name));\n        var textWrapper = _utility__WEBPACK_IMPORTED_MODULE_0__[\"default\"].element(\"span\", { \"role\": \"gridcell\" }, \"\".concat(chipClass, \"__cell\"), \"\".concat(chipClass, \"__cell--primary\"))\n            .addChildren(textButton);\n        var trailingButton = _utility__WEBPACK_IMPORTED_MODULE_0__[\"default\"].element(\"button\", { \"type\": \"button\", \"tabindex\": -1, \"data-mdc-deletable\": \"true\", \"aria-label\": \"Remove \".concat(file.name) })\n            .addChildren(_utility__WEBPACK_IMPORTED_MODULE_0__[\"default\"].element(\"span\", {}, \"\".concat(chipClass, \"__ripple\"), \"\".concat(chipClass, \"__ripple--trailing\")), _utility__WEBPACK_IMPORTED_MODULE_0__[\"default\"].element(\"span\", {}, \"\".concat(chipClass, \"__icon\"), \"\".concat(chipClass, \"__icon--trailing\")).setText(\"close\"));\n        var trailingWrapper = _utility__WEBPACK_IMPORTED_MODULE_0__[\"default\"].element(\"span\", { \"role\": \"gridcell\" }, \"\".concat(chipClass, \"__cell\"), \"\".concat(chipClass, \"__cell--trailing\"))\n            .addChildren(trailingButton);\n        var chip = _utility__WEBPACK_IMPORTED_MODULE_0__[\"default\"].element(\"span\", { \"role\": \"row\", \"id\": \"chip_\".concat(index) }, chipClass).addChildren(textWrapper, trailingWrapper).build();\n        container.appendChild(chip);\n    };\n    return Uploader;\n}());\nnew Uploader();\n\n\n//# sourceURL=webpack://fxl.codes.kisekae/./Scripts/upload.ts?");
 
 /***/ }),