Commit ebafff92 authored by Christian Winter's avatar Christian Winter

wip. instances basics working (at the moment just copying lines)

parent 935c61ad
Pipeline #4708903 passed with stage
in 44 seconds
*:not(.layerbutton):not(input)::selection {
*:not(.layerbutton):not(.instancebutton):not(input)::selection {
background-color: Transparent;
}
......@@ -228,12 +228,18 @@ div {
width: 100%;
border-radius: 0;
}
.toolcategory table#instances button {
margin: 0px;
width: 100%;
border-radius: 0;
}
#selectedButton {
color: #a4a4a4;
background: linear-gradient(#111111, #555555);
}
table#layers {
table#layers table#instances{
border-collapse: collapse;
}
......@@ -245,6 +251,14 @@ table #selectedLayer {
border-bottom: 1px lightblue solid;
}
table #selectedInstance {
background-color: lightblue;
border-left: 1px lightblue solid;
border-right: 1px lightblue solid;
border-top: 1px lightblue solid;
border-bottom: 1px lightblue solid;
}
#gridSettings {
margin-top: 15px;
}
......
......@@ -17,6 +17,7 @@
<script src="scripts/input/Key.js"></script>
<script src="scripts/states/State.js"></script>
<script src="scripts/states/InstanceBrushState.js"></script>
<script src="scripts/states/InputRecorderState.js"></script>
<script src="scripts/states/BoxSelectionState.js"></script>
<script src="scripts/states/BrushSelectionState.js"></script>
......@@ -60,6 +61,9 @@
<script src="scripts/grids/RectangleGrid.js"></script>
<script src="scripts/grids/TriangleGrid.js"></script>
<script src="scripts/grids/PolarGrid.js"></script>
<script src="scripts/InstanceManager.js"></script>
<script src="scripts/Instance.js"></script>
</head>
<body onload="onLoad();">
<div id="menubar">
......@@ -176,6 +180,14 @@
<div class="toolcategory" id="layers">
</div>
<div class="toolcategory">
<p>Instances (Alpha)</p>
<button type="button" onclick="InstanceManager.createNewInstanceFromSelection()">Create new Instance from selection</button>
</div>
<div class="toolcategory" id="instances">
</div>
<div class="toolcategory" id="linesettings">
<p>Line Settings</p>
......
class Instance {
constructor() {
this.position = Vector2.zero;
this.lines = [];
this.name = "";
}
get bounds() {
let min = new Vector2(Infinity, Infinity);
let max = new Vector2(-Infinity, -Infinity);
for (let line of this.lines) {
min.x = Math.min(min.x, line.start.position.x);
min.y = Math.min(min.y, line.start.position.y);
max.x = Math.max(max.x, line.start.position.x);
max.y = Math.max(max.y, line.start.position.y);
min.x = Math.min(min.x, line.end.position.x);
min.y = Math.min(min.y, line.end.position.y);
max.x = Math.max(max.x, line.end.position.x);
max.y = Math.max(max.y, line.end.position.y);
}
return new Bounds(min, max);
}
addLine(line) {
this.lines.push(line);
}
copy() {
let copy = new Instance();
for (let line of this.lines)
copy.addLine(line.copy());
return copy;
}
}
\ No newline at end of file
class InstanceManager {
static init() {
console.log("InstanceManager created.");
this.instances = [];
}
static addInstance(instance) {
this.instances.push(instance);
}
static createNewInstanceFromSelection() {
let newInstance = new Instance();
for (let line of Selection.data.lines.concat(Selection.data.partialLines))
newInstance.addLine(line.copy());
this.addInstance(newInstance);
newInstance.name = newInstance.lines.length;
GUI.buildInstancesUI();
}
static editInstance(id) {
GUI.notify("Editing instances doesn't work yet.", 'green')
}
static selectInstanceWithID(id) {
Logic.setState(new InstanceBrushState(this.instances[id]));
GUI.buildInstancesUI();
}
static changeNameForInstanceWithID(id, name) {
this.instances[id].name = name;
}
static deleteInstanceWithID(id) {
Utilities.deleteArrayEntry(this.instances, this.instances[id]);
GUI.buildInstancesUI();
}
}
\ No newline at end of file
......@@ -44,6 +44,13 @@
return new Line(this.start.position.x, this.start.position.y, this.end.position.x, this.end.position.y, this.color, this.thickness);
}
move(delta)
{
this.start.position = this.start.position.addVector(delta);
this.end.position = this.end.position.addVector(delta);
return this;
}
toString() {
return "Line from " + this.start.position + " to " + this.end.position;
}
......
......@@ -107,6 +107,9 @@ class MouseHandler {
else if (Logic.currentState instanceof ContinousDrawingState) {
Logic.currentState.oldPos = Logic.shouldSnap() ? currentPosition.copy() : mousePosition.copy();
}
else if (Logic.currentState instanceof InstanceBrushState) {
Logic.currentState.place();
}
}
else if (e.button == 2) // RMB
{
......@@ -169,6 +172,9 @@ class MouseHandler {
else if (Logic.currentState instanceof BrushSelectionState) {
Logic.currentState.cancel();
}
else if (Logic.currentState instanceof InstanceBrushState) {
Logic.currentState.cancel();
}
Renderer.redraw();
}
......
......@@ -9,10 +9,16 @@
this.leftarea = document.getElementById('leftarea');
this.rightarea = document.getElementById('rightarea');
this.rightarea.style.visibility = "visible";
// Stats
this.stats = document.getElementById('stats');
this.statsDict = [];
// Layers
this.layersDiv = document.getElementById('layers')
this.statsDict = [];
// Instances
this.instancesDiv = document.getElementById('instances')
// Toggles
this.lineHandlesToggle = document.getElementById("lineHandlesToggle");
......@@ -21,8 +27,8 @@
this.use2DCursorToggle = document.getElementById("use2DCursorToggle");
this.selectVerticesToggle = document.getElementById("selectVerticesToggle");
this.selectEdgesToggle = document.getElementById("selectEdgesToggle");
this.mirrorXToggle= document.getElementById("mirrorXToggle");
this.mirrorYToggle= document.getElementById("mirrorYToggle");
this.mirrorXToggle = document.getElementById("mirrorXToggle");
this.mirrorYToggle = document.getElementById("mirrorYToggle");
this.devModeToggle = document.getElementById("devModeToggle");
......@@ -183,7 +189,7 @@
input = document.createElement("input");
input.setAttribute("type", "button");
input.setAttribute("type", "button");
input.setAttribute("onclick", "GridManager.grid.uniformHeight(); GUI.genereateGridSettings(); Renderer.redraw()");
input.value = "Uniform Height";
td.appendChild(input);
......@@ -512,8 +518,136 @@
this.layersDiv.appendChild(table);
}
static buildInstancesUI() {
while (this.instancesDiv.firstChild) {
this.instancesDiv.removeChild(this.instancesDiv.firstChild);
}
let instances = InstanceManager.instances;
let table = document.createElement("table");
table.setAttribute("id", "instances");
// edit instance button
let col = document.createElement("col");
col.setAttribute("width", "20%");
table.appendChild(col);
// select instance button
col = document.createElement("col");
col.setAttribute("width", "60%");
table.appendChild(col);
// delete instance button
col = document.createElement("col");
col.setAttribute("width", "20%");
table.appendChild(col);
for (let i = 0; i < instances.length; ++i) {
let tr = document.createElement("tr");
table.appendChild(tr);
// edit instance button
let td = document.createElement("td");
tr.appendChild(td);
let button = document.createElement("button");
button.setAttribute("type", "button");
button.setAttribute("title", "Edit instace");
button.setAttribute("onclick", "InstanceManager.editInstance(" + i + ")");
button.innerHTML = "+";
td.appendChild(button);
// select instance button
td = document.createElement("td");
tr.appendChild(td);
button = document.createElement("button");
button.setAttribute("type", "button");
button.setAttribute("class", "instancebutton");
button.setAttribute("title", "Rightclick to rename");
button.setAttribute("onmousedown", "InstanceManager.selectInstanceWithID(" + i + ")");
button.setAttribute("oncontextmenu", "this.focus(); document.execCommand('selectAll',false,null);");
button.setAttribute("contenteditable", "true");
button.setAttribute("oninput", "InstanceManager.changeNameForInstanceWithID(" + i + ", this.innerHTML)");
if (Logic.currentState instanceof InstanceBrushState &&
Logic.currentState.currentInstance == instances[i]) {
button.setAttribute("id", "selectedButton");
tr.setAttribute("id", "selectedInstance");
}
button.innerHTML = instances[i].name;
td.appendChild(button);
// delete instance button
td = document.createElement("td");
tr.appendChild(td);
button = document.createElement("button");
button.setAttribute("type", "button");
button.setAttribute("title", "Delete instance");
button.setAttribute("onclick", "InstanceManager.deleteInstanceWithID(" + i + ")");
button.innerHTML = "<font color='red'>X</font>";
td.appendChild(button);
}
this.instancesDiv.appendChild(table);
}
// TODO rework notifications. put somewhere in statusbar
static notify(text) {
static notify(text, color) {
if (color != undefined)
text = "<font color=" + color + ">" + text + "</font>";
this.writeToStatusbarRight(text);
//console.log(text);
}
......@@ -527,7 +661,7 @@
static setPolarGridCenterToPivot(checked) {
placePolarGridCenterAt2DCursor = checked;
if (placePolarGridCenterAt2DCursor == true)
if (placePolarGridCenterAt2DCursor == true)
GridManager.grid.positionOffset = pivot.copy();
else
GridManager.grid.positionOffset = Vector2.zero;
......@@ -569,7 +703,7 @@
Renderer.redraw();
}
static updateCutLinesToggle() {
if (Preferences.cutLines ) {
if (Preferences.cutLines) {
this.cutLinesToggle.setAttribute("class", "pressed");
}
else {
......@@ -585,9 +719,9 @@
}
}
static updateUse2DCursorToggle() {
if (Preferences.usePivot)
if (Preferences.usePivot)
this.use2DCursorToggle.setAttribute("class", "pressed");
else
else
this.use2DCursorToggle.removeAttribute("class");
Renderer.redraw()
}
......@@ -645,11 +779,11 @@
this.updateDevModeToggle()
}
static updateDevModeToggle() {
if (Preferences.developerMode){
if (Preferences.developerMode) {
this.devModeToggle.setAttribute("class", "pressed");
this.stats.style.visibility = "visible";
}
else{
else {
this.devModeToggle.removeAttribute("class");
this.stats.style.visibility = "hidden";
}
......
......@@ -46,6 +46,7 @@ function onLoad() {
GridManager.init();
ActionHistory.init();
InstanceManager.init();
GUI.genereateGridSettings();
......
......@@ -288,9 +288,13 @@
if (Logic.isPreviewing())
this.cutRenderPreview();
else
else {
this.drawPivot();
if (Logic.currentState instanceof InstanceBrushState)
this.drawInstancePreview();
}
this.fps = 1000 / (step - this.oldStep);
this.oldStep = step;
GUI.writeToStats("FPS", this.fps.toFixed(2));
......@@ -313,7 +317,7 @@
s = s.multiply(Camera.zoom);
let os = o.addVector(s);
this.currentContext.clearRect(0, 0, o.x, canvas.height); // left
this.currentContext.clearRect(os.x, 0, canvas.width - os.x, canvas.height); // right
this.currentContext.clearRect(o.x, 0, s.x, o.y); // top
......@@ -815,4 +819,11 @@
this.currentContext.fillRect(leftTop.x, leftTop.y, size.x, size.y);
this.currentContext.stroke();
}
static drawInstancePreview() {
for (let line of Logic.currentState.currentInstance.lines)
this.batchLine(line.copy().move(currentPosition));
this.renderBatchedLines(1, 'green');
}
}
......@@ -133,11 +133,13 @@
}
class SelectionData {
constructor(lines, partialLines, points) {
constructor(lines, partialLines, points, instances) {
this.lines = lines == undefined ? [] : lines;
this.partialLines = partialLines == undefined ? [] : partialLines;
this.points = points == undefined ? [] : points;
this.instances = instances == undefined ? [] : instances;
}
addPoint(point) {
// point already included
for (let p of this.points) {
......@@ -196,14 +198,20 @@ class SelectionData {
// TODO should check if point is already selected
//DONT USE
addLine(line) {
//console.log("Dangerous use!");
this.lines.push(line);
// FIXME what if added from somewhere else?
Utilities.deleteArrayEntry(File.currentLayer.lines, line);
File.updateStats();
//this.changed();
}
addInstance(instance) {
this.instances.push(instance);
File.updateStats();
}
copy() {
let newSelData = new SelectionData();
......@@ -220,6 +228,9 @@ class SelectionData {
newSelData.addPoint(line.start);
}
for (let i of this.instances)
newSelData.addInstance(p.copy());
return newSelData;
}
......
class InstanceBrushState extends State {
constructor(instance) {
super();
this.currentInstance = instance;
}
enter() {
}
exit() {
}
place() {
for (let line of this.currentInstance.lines)
File.currentLayer.addLine(line.copy().move(currentPosition));
}
cancel() {
Logic.setState(new IdleState());
Renderer.redraw();
GUI.buildInstancesUI();
}
keyDown(keycode) {
switch (keycode) {
case Key.D:
this.place();
break;
}
}
toString() {
return "Instance Brush State";
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment