Allow layers to be handled differently in different levels (including duplicates and different orders)

app/assets/css/app.scss

@@ -4553,6 +4553,16 @@ textarea {
 	}
 }
 
+.window.dialog.selectLayerDef {
+	>.wrapper {
+		min-width: 400px;
+
+		.content select {
+			width: 100%;
+		}
+	}
+}
+
 .toolPopOutPlaceholder {
 	width: 100%;
 	height: 100%;
@@ -4978,7 +4988,7 @@ canvas#webgl {
 				border: 1px solid $bgMed;
 			}
 
-			li.filter {
+			div.filter {
 				display: block;
 				padding: 0;
 				cursor: initial;
@@ -7676,6 +7686,7 @@ dl.form.fieldInstanceEditor {
 }
 
 .window.panel.editLayerDefs,
+.window.panel.editLayerInstances,
 .window.panel.editTilesetDefs {
 	.content{
 		display: grid;
@@ -8255,6 +8266,87 @@ dl.form.fieldInstanceEditor {
 }
 
 
+.window.panel.editLayerInstances .content {
+	dl.form {
+		overflow-x: hidden;
+		padding-right: 4px;
+		overflow-y: auto;
+		grid-template-columns: 160px auto;
+		>dt {
+			max-width: none;
+		}
+
+		.advanced {
+			margin-top: 16px;
+			button {
+				flex: 0 1 auto;
+				min-height: 2.5em;
+			}
+		}
+	}
+	.mainList {
+		grid-template-rows: min-content min-content auto;
+
+		ul li {
+			grid-template-columns: min-content auto min-content;
+			.name {
+				width: 100%;
+				overflow-x: hidden;
+			}
+
+			&.hidden {
+				&:not(.active) {
+					color: $lightRed;
+				}
+				font-style: italic;
+				opacity: 0.8;
+			}
+			.icon {
+				width: 1.8em;
+				height: 1.8em;
+			}
+		}
+	}
+	.mainList ul:empty::before {
+		content: "No layer";
+	}
+	.icon {
+		width: 2.5em;
+		height: 2.5em;
+	}
+
+	span#layerDefName {
+		flex-grow: 1;
+	}
+	button.editLayerDef {
+		flex-grow: 0;
+		white-space: nowrap;
+		margin-left: 2px;
+	}
+
+
+	.rightColumn {
+		.IntGrid,
+		.IntGridAutoLayer,
+		.AutoLayer,
+		.Tiles,
+		.Entities {
+			display: none;
+		}
+	}
+
+	.rightColumn {
+		&.type-IntGrid .IntGrid,
+		&.type-IntGridAutoLayer .IntGridAutoLayer,
+		&.type-AutoLayer .AutoLayer,
+		&.type-Tiles .Tiles,
+		&.type-Entities .Entities {
+			display: contents;
+		}
+	}
+}
+
+
 body.sorting ul.collapsedSortTarget {
 	display: block !important;
 }

app/assets/tpl/editLayerDefs.html

@@ -1,6 +1,6 @@
 <h2>
 	<div class="icon layer"></div>
-	Project layers
+	Project layer definitions
 </h2>
 
 <div class="mainList">
@@ -12,7 +12,7 @@ <h2>
 </div>
 
 <div class="help none">
-	Each LEVEL in your project has LAYERS, as defined below. The layers content can be of various types, including Image Tiles or Integer values.
+	Each LEVEL in your project has LAYERS, which can use one of the definitions defined below. The layer's content can be of various types, including Image Tiles or Integer values.
 </div>
 
 
@@ -317,14 +317,9 @@ <h2>
 			<div id="excludedTags"></div>
 		</dd>
 
-		<dt class="advanced Entities IntGridAutoLayer AutoLayer">
+		<dt class="advanced IntGridAutoLayer AutoLayer">
 			<label>Advanced operations</label>
 		</dt>
-		<dd class="advanced Entities">
-			<button class="moveEntities" title="Use this action to quickly move a selection of entity instances from this layer to another one.\nThis is typically useful if, for example, you added an 'Actor' tag to some entities, and you wanted to move all existing Actors to a new 'ActorsOnly' layer.">
-				Move existing entities to another layer
-			</button>
-		</dd>
 		<dd class="advanced IntGridAutoLayer AutoLayer">
 			<button class="bake" title="Baking will flatten this auto-layer into a single new Tiles layer. Various options are available.">
 				<span class="icon flatten"></span>

app/assets/tpl/editLayerInstances.html

@@ -0,0 +1,75 @@
+<h2>
+	<div class="icon layer"></div>
+	Level layers
+</h2>
+
+<div class="mainList">
+	<div class="buttons">
+		<button class="create"> <span class="icon add"></span> </button>
+	</div>
+	<div class="search"></div>
+	<ul class="niceList compact"></ul>
+</div>
+
+<div class="help none">
+	Each LEVEL in your project has LAYERS, as seen below. The layer's content can be of various types, including Image Tiles or Integer values.
+</div>
+
+
+<div class="rightColumn type-IntGrid type-IntGridAutoLayer type-AutoLayer type-Tiles type-Entities">
+
+	<div class="collapser" default="open" id="layerPanel_mainForm">General layer settings</div>
+	<dl class="form main">
+		<dt>
+			<label for="layerDefName">Layer definition</label>
+			<info>
+				Each layer in a level has a project-wide definition it refers to.
+			</info>
+		</dt>
+		<dd>
+			<span id="layerDefName"></span>
+			<button class="editLayerDef">Edit definition</button>
+		</dd>
+
+		<dt>
+			<label for="lName">Layer identifier</label>
+			<info class="identifier"></info>
+		</dt>
+		<dd>
+			<input type="text" name="name" id="lName"/>
+		</dd>
+	</dl>
+
+
+	<div class="collapser" default="open" id="layerPanel_uiForm">Display options</div>
+	<dl class="form visuals">
+		<dt>
+			<label>Visual options</label>
+		</dt>
+		<dd class="checkboxes">
+			<label for="visible" title="If enabled, the layer will be rendered.">
+				<input type="checkbox" name="visible" class="small" id="visible"/>
+				Visible
+			</label>
+		</dd>
+	</dl>
+
+	<div class="Entities">
+		<div class="collapser" default="open" id="layerPanel_specificForm"><span class="inlined" id="typeSpecificTitle"></span> settings</div>
+		<dl class="form typeSpecific">
+
+			<div class="Entities">
+				<dt class="advanced">
+					<label>Advanced operations</label>
+				</dt>
+				<dd class="advanced">
+					<button class="moveEntities" title="Use this action to quickly move a selection of entity instances from this layer to another one.\nThis is typically useful if, for example, you added an 'Actor' tag to some entities, and you wanted to move all existing Actors to a new 'ActorsOnly' layer.">
+						Move existing entities to another layer
+					</button>
+				</dd>
+			</div>
+
+		</dl>
+	</div>
+
+</div>

app/assets/tpl/help.html

@@ -99,7 +99,8 @@ <h3>General commands</h3>
 		<h3>Sections</h3>
 		<dl class="minor">
 			<dt> %OpenProjectPanel% </dt>  <dd>Open "Project" panel</dd>
-			<dt> %OpenLayerPanel% </dt>  <dd>Open "Layers" panel</dd>
+			<dt> %OpenLayerInstancePanel% </dt>  <dd>Open "Layer Instances" panel</dd>
+			<dt> %OpenLayerDefPanel% </dt>  <dd>Open "Layer Definitions" panel</dd>
 			<dt> %OpenEntityPanel% </dt>  <dd>Open "Entities" panel</dd>
 			<dt> %OpenEnumPanel% </dt>  <dd>Open "Enumerations" panel</dd>
 			<dt> %OpenTilesetPanel% </dt>  <dd>Open "Tileset" panel</dd>

app/assets/tpl/pages/editor.html

@@ -13,7 +13,8 @@
 			<button class="editProject brown" title="Project settings" keys="P"><div class="icon project"></div></button>
 			<button class="world blue" title="World view" keys="~"><div class="icon world"></div></button>
 			<button class="editLevelInstance blue" title="Current level settings" keys="C"><div class="icon level"></div></button>
-			<button class="editLayers" title="Layers" keys="L"><div class="icon layer"></div></button>
+			<button class="editLayerInstances blue" title="Layers" keys="L"><div class="icon layer"></div></button>
+			<button class="editLayerDefs" title="Layer definitions" keys="D"><div class="icon layer"></div></button>
 			<button class="editEntities" title="Entities" keys="E"><div class="icon entity"></div></button>
 			<button class="editEnums" title="Enums" keys="U"><div class="icon enum"></div></button>
 			<button class="editTilesets" title="Tilesets" keys="T"><div class="icon tile"></div></button>

src/electron.renderer/App.hx

@@ -628,7 +628,8 @@ class App extends dn.Process {
 			case C_MoveLevelToPreviousWorldLayer:
 			case C_MoveLevelToNextWorldLayer:
 			case C_OpenProjectPanel:
-			case C_OpenLayerPanel:
+			case C_OpenLayerInstancePanel:
+			case C_OpenLayerDefPanel:
 			case C_OpenEntityPanel:
 			case C_OpenEnumPanel:
 			case C_OpenTilesetPanel:

src/electron.renderer/EditorTypes.hx

@@ -45,10 +45,13 @@ enum GlobalEvent {
 	LayerRuleGroupSorted;
 	LayerRuleGroupCollapseChanged(rg:data.def.AutoLayerRuleGroupDef);
 
+	LayerInstanceAdded(li:data.inst.LayerInstance);
+	LayerInstanceRemoved(li:data.inst.LayerInstance);
 	LayerInstanceSelected(li:data.inst.LayerInstance);
 	LayerInstanceEditedByTool(li:data.inst.LayerInstance);
 	LayerInstanceChangedGlobally(li:data.inst.LayerInstance);
 	LayerInstanceVisiblityChanged(li:data.inst.LayerInstance);
+	LayerInstancesSorted(level:data.Level);
 	LayerInstancesRestoredFromHistory(lis:Array<data.inst.LayerInstance>);
 	AutoLayerRenderingChanged(lis:Array<data.inst.LayerInstance>);
 	LayerInstanceTilesetChanged(li:data.inst.LayerInstance);
@@ -220,6 +223,8 @@ enum ClipboardType {
 
 	CRuleGroup;
 	CRule;
+
+	CLayerInstance;
 }
 
 typedef CachedIID = {
@@ -279,7 +284,8 @@ enum AppCommand {
 	@k("ctrl pageup, shift pageup") C_MoveLevelToNextWorldLayer;
 
 	@k("p") C_OpenProjectPanel;
-	@k("l") C_OpenLayerPanel;
+	@k("l") C_OpenLayerInstancePanel;
+	@k("d") C_OpenLayerDefPanel;
 	@k("e") C_OpenEntityPanel;
 	@k("u") C_OpenEnumPanel;
 	@k("t") C_OpenTilesetPanel;