Skip to content

Commit

Permalink
splitter resize timeline etc
Browse files Browse the repository at this point in the history
  • Loading branch information
@pandrr
pandrr committed Feb 12, 2025
1 parent d00f99c commit eb0e4ab
Show file tree
Hide file tree
Showing 8 changed files with 101 additions and 86 deletions.
1 change: 0 additions & 1 deletion html/ui/templates/main.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,6 @@

<div id="splitterPatch" class="splitter"></div>
<div id="splitterRenderer" class="splitter"></div>
<div id="splitterTimeline" class="splitter"></div>
<div id="splitterMaintabs" class="splitter"></div>
<div id="splitterBottomTabs" class="splitter"></div>

Expand Down
2 changes: 1 addition & 1 deletion scss/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -443,7 +443,7 @@ body
display: block;
}

#splitterTimeline
#splitterBottomTabs
{
height:4px;
cursor:ns-resize;
Expand Down
2 changes: 1 addition & 1 deletion src/ui/elements/splitpane.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ function initSplitPanes()
splitpane.listeners.push(mm);
});

document.getElementById("splitterTimeline").addEventListener("pointerdown", function (ev)
document.getElementById("splitterBottomTabs").addEventListener("pointerdown", function (ev)
{
ev.preventDefault();
splitpane.bound = true;
Expand Down
5 changes: 5 additions & 0 deletions src/ui/elements/tabpanel/bottomtabpanel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,9 @@ export default class BottomTabPanel extends Events

this._visible = true;
this._ele.style.display = "block";

ele.byId("splitterBottomTabs").style.display = "block";

document.getElementById("editorminimized").style.display = "none";

if (gui.finishedLoading() && userInteraction) userSettings.set("bottomTabsVisible", true);
Expand All @@ -77,6 +80,8 @@ export default class BottomTabPanel extends Events

hide(donotsave)
{
ele.byId("splitterBottomTabs").style.display = "none";

userSettings.set("bottomTabsOpened", false);

this._visible = false;
Expand Down
15 changes: 13 additions & 2 deletions src/ui/gltimeline/gltimeline.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -272,12 +272,23 @@ export default class GlTimeline extends Events
this.init();
}

getColorSpecial()
{
return [0.02745098039215691, 0.968627450980392, 0.5490196078431373, 1];
}

/**
* @param {GlRect} r
*/
setColorRectSpecial(r)
{
if (r)
r.setColor(0.02745098039215691, 0.968627450980392, 0.5490196078431373, 1);
r.setColor(this.getColorSpecial());
}

/**
* @param {number} w
*/
setMaxTitleSpace(w)
{
if (w > this.titleSpace)
Expand Down Expand Up @@ -454,7 +465,7 @@ export default class GlTimeline extends Events
}

/**
* @param {Types.AnimKey} a
* @param {Types.AnimKey} k
* @param {Types.Anim} a
*
*/
Expand Down
7 changes: 3 additions & 4 deletions src/ui/gltimeline/gltlanimline.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export default class glTlAnimLine extends Events

/**
* @param {GlTimeline} glTl
* @param {Array<Core.Port>} ports
* @param {Array<Types.Port>} ports
* @param {Object} options
*/
constructor(glTl, ports, options = {})
Expand Down Expand Up @@ -101,8 +101,7 @@ export default class glTlAnimLine extends Events

const lid = anim.addEventListener("onChange", () =>
{
if (!keys.isDragging())
keys.init();
if (!keys.isDragging()) keys.init();
});

this.#animChangeListeners.push({ "id": lid, "anim": anim });
Expand Down Expand Up @@ -171,7 +170,7 @@ export default class glTlAnimLine extends Events

if (gui.patchView.isCurrentOp(this.#ops[0]))
{
this.#glTitle.setColor(0.02745098039215691, 0.968627450980392, 0.5490196078431373, 1);
this.#glTitle.setColor(this.#glTl.getColorSpecial());
this.#glRectKeysBg.setColor(0.35, 0.35, 0.35);
}
}
Expand Down
136 changes: 67 additions & 69 deletions src/ui/gltimeline/gltlkeys.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,13 +94,11 @@ export default class glTlKeys extends Events
* @param {number} minVal
* @param {number} maxVal
*/
update(minVal = 0, maxVal = 0)
update(minVal = this.#minVal, maxVal = this.#maxVal)
{
if (minVal != 0 && maxVal != 0)
{
this.#minVal = minVal;
this.#maxVal = maxVal;
}
this.#minVal = minVal;
this.#maxVal = maxVal;

if (this.#disposed)
{
this._log.warn("disposed", this);
Expand All @@ -119,59 +117,59 @@ export default class glTlKeys extends Events
const pointsSort = [];

let z = 0.0;
let col = [0.7, 0.7, 0.7, 1];

if (isCurrentOp)z = -0.1;

for (let i = 0; i < this.#keyRects.length; i++)
{
const animKey = this.#anim.keys[i];
const kr = this.#keyRects[i];

kr.setSize(this.sizeKey, this.sizeKey);

if (this.#anim.keys[i].time == this.#glTl.view.cursorTime) this.#glTl.setColorRectSpecial(kr);
if (animKey.time == this.#glTl.view.cursorTime) this.#glTl.setColorRectSpecial(kr);
else
{
if (isCurrentOp) kr.setColor(1, 1, 1);
else kr.setColor(0.7, 0.7, 0.7);
}
if (isCurrentOp) col = [1, 1, 1];

let y = (this.#parentRect.h / 2);
if (this.#options.keyYpos)
y = this.#parentRect.h - CABLES.map(this.#anim.keys[i].value, this.#minVal, this.#maxVal, sizeKey2, this.#parentRect.h - sizeKey2);
y = this.#parentRect.h - CABLES.map(animKey.value, this.#minVal, this.#maxVal, sizeKey2, this.#parentRect.h - sizeKey2);

const rx = this.#glTl.view.timeToPixel(this.#anim.keys[i].time - this.#glTl.view.offset) - sizeKey2;
const rx = this.#glTl.view.timeToPixel(animKey.time - this.#glTl.view.offset) - sizeKey2;
const ry = y - sizeKey2;

let zpos = -0.2;

if (this.#glTl.isKeySelected(this.#anim.keys[i]))
{
kr.setColor(1, 1, 0, 1);
zpos = -0.3;
}

kr.setPosition(rx, ry, zpos);
kr.setSize(this.sizeKey, this.sizeKey);

if (this.#glTl.selectRect &&
this.#glTl.selectRect.x < kr.absX + this.sizeKey && this.#glTl.selectRect.x2 > kr.absX &&
this.#glTl.selectRect.y < kr.absY + this.sizeKey && this.#glTl.selectRect.y2 > kr.absY)
{
this.#glTl.selectKey(this.#anim.keys[i], this.#anim);
this.#glTl.selectKey(animKey, this.#anim);
}

if (this.#glTl.isKeySelected(animKey))
{
col = [1, 1, 0, 1];
zpos = -0.3;
}

kr.setColor(col);

if (this.#options.keyYpos)
{
const lx = this.#glTl.view.timeToPixel(this.#anim.keys[i].time - this.#glTl.view.offset);
const ly = this.#parentRect.h - CABLES.map(this.#anim.getValue(this.#anim.keys[i].time), this.#minVal, this.#maxVal, sizeKey2, this.#parentRect.h - sizeKey2);
const lx = this.#glTl.view.timeToPixel(animKey.time - this.#glTl.view.offset);
const ly = this.#parentRect.h - CABLES.map(this.#anim.getValue(animKey.time), this.#minVal, this.#maxVal, sizeKey2, this.#parentRect.h - sizeKey2);
pointsSort.push([lx, ly, z]);

const onepixelTime = this.#glTl.view.pixelToTime(1);
pointsSort.push([
this.#glTl.view.timeToPixel(this.#anim.keys[i].time - this.#glTl.view.offset - onepixelTime),
this.#parentRect.h - CABLES.map(this.#anim.getValue(this.#anim.keys[i].time - onepixelTime), this.#minVal, this.#maxVal, sizeKey2, this.#parentRect.h - sizeKey2),
this.#glTl.view.timeToPixel(animKey.time - this.#glTl.view.offset - onepixelTime),
this.#parentRect.h - CABLES.map(this.#anim.getValue(animKey.time - onepixelTime), this.#minVal, this.#maxVal, sizeKey2, this.#parentRect.h - sizeKey2),
z]);
pointsSort.push([
this.#glTl.view.timeToPixel(this.#anim.keys[i].time - this.#glTl.view.offset + onepixelTime),
this.#parentRect.h - CABLES.map(this.#anim.getValue(this.#anim.keys[i].time + onepixelTime), this.#minVal, this.#maxVal, sizeKey2, this.#parentRect.h - sizeKey2),
this.#glTl.view.timeToPixel(animKey.time - this.#glTl.view.offset + onepixelTime),
this.#parentRect.h - CABLES.map(this.#anim.getValue(animKey.time + onepixelTime), this.#minVal, this.#maxVal, sizeKey2, this.#parentRect.h - sizeKey2),
z]);
}

Expand Down Expand Up @@ -208,34 +206,39 @@ export default class glTlKeys extends Events

this.#spline.setPoints(this.#points);
}
else
for (let i = 0; i < this.#anim.keys.length; i++)
{
// const kr = this.#dopeRects[i];

// if (kr)
// {
// let x = this.#glTl.view.timeToPixel(this.#anim.keys[i].time - this.#glTl.view.offset);
// let y = 0;
// kr.setPosition(x, y, -0.1);

// if (this.#anim.keys[i + 1])
// {
// if (i == 0)
// {
// kr.setPosition(this.#glTl.view.timeToPixel(0 - this.#glTl.view.offset), 0);
// kr.setSize(this.#glTl.view.timeToPixel(this.#anim.keys[i + 1].time), this.#parentRect.h);
// }
// else
// kr.setSize(this.#glTl.view.timeToPixel(this.#anim.keys[i + 1].time - this.#anim.keys[i].time), this.#parentRect.h);
// }
// else
// {
// // after last
// kr.setSize(this.#glTl.view.timeToPixel(this.#glTl.duration - this.#anim.keys[i].time), this.#parentRect.h);
// }
// }
}
// else
// for (let i = 0; i < this.#anim.keys.length; i++)
// {
// const kr = this.#dopeRects[i];

// if (kr)
// {
// let x = this.#glTl.view.timeToPixel(animKey.time - this.#glTl.view.offset);
// let y = 0;
// kr.setPosition(x, y, -0.1);

// if (this.#anim.keys[i + 1])
// {
// if (i == 0)
// {
// kr.setPosition(this.#glTl.view.timeToPixel(0 - this.#glTl.view.offset), 0);
// kr.setSize(this.#glTl.view.timeToPixel(this.#anim.keys[i + 1].time), this.#parentRect.h);
// }
// else
// kr.setSize(this.#glTl.view.timeToPixel(this.#anim.keys[i + 1].time - animKey.time), this.#parentRect.h);
// }
// else
// {
// // after last
// kr.setSize(this.#glTl.view.timeToPixel(this.#glTl.duration - animKey.time), this.#parentRect.h);
// }
// }
// }
}

updateKeyRects()
{

}

init()
Expand All @@ -247,10 +250,9 @@ export default class glTlKeys extends Events
kr.setShape(13);
kr.setSize(this.sizeKey, this.sizeKey);
kr.setColor(1, 1, 1, 1);
// kr.setColorHover(1, 0, 0, 1);
kr.setParent(this.#parentRect);
kr.key = this.#anim.keys[i];
const key = this.#anim.keys[i];
kr.key = key;

let startDrag = -1111;
let oldValues = {};
Expand All @@ -259,14 +261,12 @@ export default class glTlKeys extends Events
kr.on(GlRect.EVENT_POINTER_HOVER, () =>
{
this.#glTl.hoverKeyRect = kr;
this.update(0, 0);
// kr.setColor(1, 0, 0, 1);
this.update();
});
kr.on(GlRect.EVENT_POINTER_UNHOVER, () =>
{
this.#glTl.hoverKeyRect = null;
kr.setColor(1, 1, 1, 1);
this.update(0, 0);
this.update();
});

kr.on(GlRect.EVENT_DRAGEND, () =>
Expand All @@ -279,11 +279,9 @@ export default class glTlKeys extends Events
undo()
{
key.set(oldValues);

},
redo()
{
} });
redo() {}
});
});

kr.on(GlRect.EVENT_DRAGSTART, (rect, x, y, button, e) =>
Expand Down Expand Up @@ -321,7 +319,7 @@ export default class glTlKeys extends Events
this.#anim.sortKeys();
}

this.update(0, 0);
this.update();

}
});
Expand All @@ -337,7 +335,7 @@ export default class glTlKeys extends Events

// if (this.#port.uiAttribs.display == "bool")
// {
// if (this.#anim.keys[i].value) krDop.setColor(0.6, 0.6, 0.6, 1);
// if (animKey.value) krDop.setColor(0.6, 0.6, 0.6, 1);
// else krDop.setColor(0.4, 0.4, 0.4, 1);
// }
// if (this.#port.uiAttribs.increment == "integer")
Expand Down
Loading

0 comments on commit eb0e4ab

Please sign in to comment.