Is it possible to commit the current state without calling
"lz.History.next()", because "next()" does always create a complete new
history context.
I've attached a simple test application which uses lz.History, the
application will replace the current lz.History example in the
Developer's Guide (this is part of my change for LPP-7959, the old
example is somewhat difficult to understand, at least this is my
impression). The browser back-button integration is working in my
application, only the forward-button doesn't really work. You can easily
reproduce this by clicking on "STATE_2", "STATE_3" and finally "END". If
you use the brower's back-button, you can navigate back to the initial
state "STATE_1". But if now use the forward-button, you'll end up at
"STATE_3" instead of "END".
Adding this additional call to "save()" in l.41 won't help, because it
only saves the new value in the temporary cache of lz.History
("lz.History.__lzcurrstate"), but the value is not committed.
lz.History.save('main', 'mystate', newstate);
To make the temporary changes persistent, you'd need to call "next()",
but that also creates a complete new context - and I don't want that to
happen. Otherwise you'd need to press the back-button two times to make
one step back in history and that's not acceptable. Any lz.History
expert out there to help me out?
<canvas width="1400" height="600" debug="true" history="true">
<debug width="500" height="500" fontsize="12" x="450"/>
<!-- Click on blob START, STATE_2, STATE_3, END, then click browser back
button -->
<!-- a blob you can click on to select -->
<class name="blob" extends="drawview" width="100" height="100">
<attribute name="title" type="text"/>
<attribute name="lineStyle" value="black" type="color"/>
<attribute name="lineWidth" value="4" type="number"/>
<text align="center" valign="middle" fontsize="16" text="${parent.title}"/>
<handler name="onclick">
main.selectBlob(this);
</handler>
<method name="select" args="val">
clear();
rect(2, 2, 96, 96, 5);
if (val) {
// draw a border to select
stroke();
}
fill();
</method>
</class>
<button y="200" text="prev" onclick="lz.History.prev()"/>
<button y="200" x="100" text="next" onclick="lz.History.next()"/>
<!-- A view with four states -->
<view id="main" x="10" y="10" layout="axis: x; spacing: 10">
<attribute name="mystate" type="string" value="START"/>
<blob fillStyle="#ffcccc" name="s1" title="START"/>
<blob fillStyle="#ccccff" name="s2" title="STATE_2"/>
<blob fillStyle="#ccffcc" name="s3" title="STATE_3"/>
<blob fillStyle="#cccccc" name="s4" title="END"/>
<method name="selectBlob" args="blob">
var oldstate = this.mystate;
var newstate = blob.title;
if (oldstate != newstate) {
// save the old state
lz.History.save('main', 'mystate', oldstate);
// create new history context
lz.History.next();
setAttribute('mystate', newstate);
}
</method>
<!-- update blobs' appearance -->
<handler name="oninit" method="gotoState"/>
<handler name="onmystate" method="gotoState"/>
<method name="gotoState" args="ignore=null">
var s = this.mystate;
for (var i = subviews.length - 1; i >= 0; --i) {
var blob = subviews[i];
blob.select(blob.title == s);
}
</method>
</view>
</canvas>
