Skip to content

Custom Guide Grid Color #1170

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

Merged
deepnight merged 4 commits into from
May 19, 2025
Merged

Custom Guide Grid Color #1170

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f645d2e
Fix `Type not found : dn.Bresenham` (#1145)
Matiiss Nov 13, 2024
34de779
Add custom guide grid color
code807 May 15, 2025
0c91740
Merge pull request #1 from deepnight/master
code807 May 15, 2025
4684609
fix guideColor error while loading old files
code807 May 15, 2025
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
12 changes: 12 additions & 0 deletions app/assets/tpl/editLayerDefs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/electron.renderer/Tool.hx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import dn.Bresenham;
import dn.geom.Bresenham;

class Tool<T> extends dn.Process {
static var SELECTION_MEMORY : Map<String, Dynamic> = new Map();
Expand Down Expand Up @@ -185,7 +185,7 @@ class Tool<T> extends dn.Process {

function useAt(m:Coords, isOnStop:Bool) : Bool {
var anyChange = false;
dn.Bresenham.iterateThinLine(lastMouse.cx, lastMouse.cy, m.cx, m.cy, function(cx,cy) {
dn.geom.Bresenham.iterateThinLine(lastMouse.cx, lastMouse.cy, m.cx, m.cy, function(cx,cy) {
anyChange = useAtInterpolatedGrid(cx,cy) || anyChange;
if( anyChange )
editor.levelRender.invalidateLayerArea(curLayerInstance, cx,cx, cy,cy);
Expand Down
6 changes: 6 additions & 0 deletions src/electron.renderer/data/def/LayerDef.hx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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,
Expand Down
6 changes: 4 additions & 2 deletions src/electron.renderer/display/LevelRender.hx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;

Expand All @@ -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;

Expand Down
59 changes: 47 additions & 12 deletions src/electron.renderer/ui/modal/panel/EditLayerDefs.hx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down
Loading