Custom Guide Grid Color (#1170)

* Fix `Type not found : dn.Bresenham` (#1145)

* Add custom guide grid color

* fix guideColor error while loading old files

---------

Co-authored-by: Matiiss <[email protected]>

Author: code807

app/assets/tpl/editLayerDefs.html

@@ -174,6 +174,18 @@ <h2>
 			<span>px</span>
 		</dd>
 
+		<dt>
+			<label for="guideColor">Guide grid color</label>
+			<info>This color will be used for the optional secondary grid. If not specified, the secondary grid's color will be based on the project's background color.</info>
+		</dt>
+		<dd>
+			<input type="color" name="guideColor" id="guideColor"/>
+			<span>Opacity:</span>
+			<input type="text" name="guideOpacity" class="small" id="guideOpacity"/>
+			<span>%</span>
+			<button class="transparent resetGuideColor small"> <span class="icon reset"></span> </button>
+		</dd>
+
 		<dt>
 			<label for="uiFilterTags">UI tags</label>
 			<div class="info">These tags are used to filter elements from your layer list in the main editor panel.</div>

src/electron.renderer/data/def/LayerDef.hx

@@ -16,6 +16,8 @@ class LayerDef {
 	public var scaledGridSize(get,never) : Float; inline function get_scaledGridSize() return gridSize*getScale();
 	public var guideGridWid : Int = 0;
 	public var guideGridHei : Int = 0;
+	public var guideColor : Null<dn.Col>;
+	public var guideOpacity : Float = 0.33;
 	public var displayOpacity : Float = 1.0;
 	public var inactiveOpacity : Float = 1.0;
 	public var hideInList = false;
@@ -101,6 +103,8 @@ class LayerDef {
 		o.gridSize = JsonTools.readInt(json.gridSize, Project.DEFAULT_GRID_SIZE);
 		o.guideGridWid = JsonTools.readInt(json.guideGridWid, 0);
 		o.guideGridHei = JsonTools.readInt(json.guideGridHei, 0);
+		o.guideColor = JsonTools.readColor(json.guideColor, true);
+		o.guideOpacity = JsonTools.readFloat(json.guideOpacity, 0.33);
 		o.displayOpacity = JsonTools.readFloat(json.displayOpacity, 1);
 		o.inactiveOpacity = JsonTools.readFloat(json.inactiveOpacity, 1);
 		o.uiColor = JsonTools.readColor(json.uiColor, true);
@@ -182,6 +186,8 @@ class LayerDef {
 			gridSize: gridSize,
 			guideGridWid: guideGridWid,
 			guideGridHei: guideGridHei,
+			guideColor: guideColor==null ? null : guideColor.toHex(),
+			guideOpacity: JsonTools.writeFloat(guideOpacity),
 			displayOpacity: JsonTools.writeFloat(displayOpacity),
 			inactiveOpacity: JsonTools.writeFloat(inactiveOpacity),
 			hideInList: hideInList,

src/electron.renderer/display/LevelRender.hx

@@ -497,6 +497,8 @@ class LevelRender extends dn.Process {
 			return;
 
 		var col = C.getPerceivedLuminosityInt( editor.project.bgColor) >= 0.8 ? 0x0 : 0xffffff;
+		var guideCol = editor.curLayerDef.guideColor != null ? editor.curLayerDef.guideColor : col;
+		var guideOpa = editor.curLayerDef.guideColor != null ? editor.curLayerDef.guideOpacity : 0.33;
 
 		var li = editor.curLayerInstance;
 		var level = editor.curLevel;
@@ -527,7 +529,7 @@ class LevelRender extends dn.Process {
 		// Guide grid (verticals)
 		if( editor.curLayerDef.guideGridWid>1 ) {
 			var size = li.def.guideGridWid;
-			grid.lineStyle(1/camera.adjustedZoom, col, 0.33);
+			grid.lineStyle(1/camera.adjustedZoom, guideCol, guideOpa);
 
 			var cWid = Std.int(editor.curLayerInstance.pxWid/size)+1;
 
@@ -546,7 +548,7 @@ class LevelRender extends dn.Process {
 		// Guide grid (horizontals)
 		if( editor.curLayerDef.guideGridHei>1 ) {
 			var size = li.def.guideGridHei;
-			grid.lineStyle(1/camera.adjustedZoom, col, 0.33);
+			grid.lineStyle(1/camera.adjustedZoom, guideCol, guideOpa);
 
 			var cHei = Std.int(editor.curLayerInstance.pxHei/size)+1;
 

src/electron.renderer/ui/modal/panel/EditLayerDefs.hx

@@ -291,6 +291,53 @@ class EditLayerDefs extends ui.modal.Panel {
 			editor.ge.emit( LayerDefChanged(cur.uid, false) );
 		}).css("display", cur.uiColor==null ? "none" : "block");
 
+		// Guide
+		var i = Input.linkToHtmlInput( cur.guideGridWid, jForms.find("input[name='guideGridWid']") );
+		i.setBounds(0,Const.MAX_GRID_SIZE);
+		i.onChange = editor.ge.emit.bind(LayerDefChanged(cur.uid, false));
+		i.fixValue = v->return v<=1 ? 0 : v;
+		i.setEmptyValue(0);
+
+		var i = Input.linkToHtmlInput( cur.guideGridHei, jForms.find("input[name='guideGridHei']") );
+		i.setBounds(0,Const.MAX_GRID_SIZE);
+		i.onChange = editor.ge.emit.bind(LayerDefChanged(cur.uid, false));
+		i.fixValue = v->return v<=1 ? 0 : v;
+		i.setEmptyValue(0);
+
+		var jCol = jForms.find("#guideColor");
+		jCol.removeClass("null");
+		if( cur.guideColor!=null )
+			jCol.val(cur.guideColor.toHex());
+		else {
+			jCol.val("black");
+			jCol.addClass("null");
+		}
+		jCol.change(_->{
+			cur.guideColor = dn.Col.parseHex( jCol.val() );
+			editor.ge.emit( LayerDefChanged(cur.uid, false) );
+		});
+
+		jForms.find(".resetguideColor").click(_->{
+			cur.guideColor = null;
+			editor.ge.emit( LayerDefChanged(cur.uid, false) );
+		}).css("display", cur.guideColor==null ? "none" : "block");
+
+		var jButton = jForms.find("#guideOpacity");
+		var jSpans = jButton.siblings("span");
+		if( cur.guideColor!=null ) {
+			jButton.show();
+			jSpans.show();
+		}
+		else{
+			jButton.hide();
+			jSpans.hide();
+		}
+
+		var i = Input.linkToHtmlInput( cur.guideOpacity, jForms.find("#guideOpacity") );
+		i.enablePercentageMode();
+		i.setBounds(0.0, 1);
+		i.onChange = editor.ge.emit.bind(LayerDefChanged(cur.uid, false));
+
 		// Grid
 		var i = Input.linkToHtmlInput( cur.gridSize, jForms.find("input[name='gridSize']") );
 		i.setBounds(1,Const.MAX_GRID_SIZE);
@@ -319,18 +366,6 @@ class EditLayerDefs extends ui.modal.Panel {
 				}
 		}
 
-		var i = Input.linkToHtmlInput( cur.guideGridWid, jForms.find("input[name='guideGridWid']") );
-		i.setBounds(0,Const.MAX_GRID_SIZE);
-		i.onChange = editor.ge.emit.bind(LayerDefChanged(cur.uid, false));
-		i.fixValue = v->return v<=1 ? 0 : v;
-		i.setEmptyValue(0);
-
-		var i = Input.linkToHtmlInput( cur.guideGridHei, jForms.find("input[name='guideGridHei']") );
-		i.setBounds(0,Const.MAX_GRID_SIZE);
-		i.onChange = editor.ge.emit.bind(LayerDefChanged(cur.uid, false));
-		i.fixValue = v->return v<=1 ? 0 : v;
-		i.setEmptyValue(0);
-
 		var i = Input.linkToHtmlInput( cur.displayOpacity, jForms.find("input[name='displayOpacity']") );
 		i.enablePercentageMode();
 		i.setBounds(0.1, 1);