DomIntegration on Canvas problem, getInnerHTML is still called

[weiqj]

I am building a TabSet with CodeMirror embedded in each tab. I use the DomIntegration technique recommended, returning a textarea from getInnerHTML then replace the node with CodeMirror.

Also I setRedrawOnResize(false);

It works fine on "normal" resize. However, it breaks when the native browser window gets resized, which triggers getInnerHTML again and breaks the application.

What makes it worse is that getInnerHTML gets triggered without following up onDraw(). So there is no way to replace the node again.

I am wondering if anybody experienced similar problem? Any possible solution is appreciated.

[Isomorphic]

That's unexpected, but it's pretty easy to figure out what's going on - you can use the "redraws" log to see if a redraw is reported, which will also give you a reason. You can also use SC.traceLogMessage() or SC.getJSStackTrace() to get an idea of how your getInnerHTML() override is being called in that circumstance. It may not (directly) have to do with page resize at all.

[weiqj]

That's unexpected, but it's pretty easy to figure out what's going on - you can use the "redraws" log to see if a redraw is reported, which will also give you a reason. You can also use SC.traceLogMessage() or SC.getJSStackTrace() to get an idea of how your getInnerHTML() override is being called in that circumstance. It may not (directly) have to do with page resize at all.

Below is the log, not sure how to interpret it.

09:41:48.620:TMR6:DEBUG:drawing:isc_QWCodeMirror_0:Redraw() - Total time to redraw in DOM:26
09:42:40.957:DEBUG:Canvas:isc_QWCodeMirror_0:setRect: {left: null,
top: null,
width: null,
height: "100%"}
09:42:41.013:TMR7[E0]:DEBUG:Canvas:isc_QWCodeMirror_0:setRect: {left: null,
top: null,
width: null,
height: "100%"}
09:42:41.032:TMR7[E0]:DEBUG:Canvas:isc_QWCodeMirror_0:setRect: {left: null,
top: null,
width: null,
height: "100%"}
09:42:41.040:TMR7[E0]:INFO:draws:isc_QWCodeMirror_0:draw(): drawing Canvas with parent: [VLayout ID:isc_ScriptTabEditor_0]
Canvas.draw(_1=>undef)
Layout.layoutChildren(_1=>"initial draw", _2=>undef, _3=>undef)
Layout.drawChildren()
** recursed on Canvas.draw

09:42:41.048:TMR7[E0]:INFO:drawing:isc_QWCodeMirror_0:inserting HTML into parent: [VLayout ID:isc_ScriptTabEditor_0]
09:42:41.241:TMR7[E0]:INFO:sizing:isc_QWCodeMirror_0:Specified size: 794x941, drawn scroll size: 794x943, border: 0x0, margin: 0x0, reason: parentDrawn
09:42:41.260:TMR7[E0]:DEBUG:sizing:isc_QWCodeMirror_0:handle sizes: {scrollLeft: 0,
scrollTop: 0,
scrollWidth: 794,
scrollHeight: 943,
clientWidth: undef,
clientHeight: undef,
offsetWidth: 794,
offsetHeight: 941,
styleLeft: "0px",
styleTop: "-9999px",
styleWidth: "794px",
styleHeight: "941px",
styleClip: ""}
09:42:53.736:TMR7:INFO:resize:isc_QWCodeMirror_0:resize of drawn component: new width/height: 770,745, old width/height: 794,941, delta width/height: -24,-196
Canvas.resizeBy(_1=>-24, _2=>-196, _3=>undef, _4=>undef, _5=>undef, _6=>undef)
Canvas.resizeTo(_1=>770, _2=>745, _3=>undef, _4=>undef, _5=>undef, _6=>undef, _7=>undef)
Layout.resizeMember(_1=>[Canvas ID:isc_QWCodeMirror_0], _2=>745, _3=>Obj, _4=>false, _5=>undef, _6=>undef)
Layout.resizeMembers(_1=>Array[1], _2=>Array[1], _3=>false, _4=>undef)
Layout.layoutChildren(_1=>"resized", _2=>-24, _3=>-196)
Canvas.$t1(_1=>undef, _2=>undef)
** recursed on Canvas.resizeBy

[weiqj]

Below is SC.getJSStackTrace() from getInnerHTML

anonymous()
"return $wnd.isc.Class.getStackTrace();"
anonymous(thisObj=>Canvas{overflow: "hidden",
canSelectText: true,
redrawOnResize: false,
width: 770,
height: 745,
AUTOIDClass: "QWCodeMirror",
ID: "isc_QWCodeMirror_0",
position: "absolute",
className: "normal",
parentElement: [VLayout ID:isc_ScriptTabEditor_0],
topElement: [HLayout ID:isc_HLayout_0],
ruleScope: "isc_HLayout_0",
cacheOffsetCoords: false,
zIndex: 201404,
}, dispId=>1573195)
anonymous(completeInnerHTMLFun())
Canvas.$px(_1=>undef)
Canvas.$rd()
Canvas.$ra()
Canvas.redraw(_1=>false)
Canvas.redrawChildren()
** recursed on Canvas.$ra

[Isomorphic]

You want to enable just the redraws log - looks like you enabled several others and that’s going to create a lot of noise. It also looks like you’ve enabled the logs just on your one component, whereas we are looking for a systemic issue here.

Even so, the problem is apparent - your redrawOnResize flag is being respected, but something is causing a *parent* of your component to redraw, which redraws all children.

None of our included layout components would redraw on a browser resize (eg tabset, Layout, SectionStack etc all would not), so this indicates a forced redraw() call somewhere in your code, or perhaps use a plain Canvas parent somewhere above your CodeMirror component (since those will redrawOnResize by default).

If this doesn’t immediately suggest the problem, again the redraws log can show you what parent component is redrawing and why.

[weiqj]

This is the redraw log.
I guess the HLayout has two VLayout panels with a resizebar in the middle.
Did the resizebar cause the redraw, during the browser window resize?

14:42:53.849:TMR5:INFO:redraws:isc_HLayout_0:Scheduling redraw (48 children) (resize)
14:42:53.954:TMR5:INFO:redraws:isc_Button_1:Scheduling redraw (resize)
14:42:53.969:TMR5:INFO:redraws:isc_Button_1:Immediate redraw of dirty widget (no reason provided)
Canvas.$q9(_1=>undef, _2=>false)
Canvas.redraw(_1=>undef, undef, undef, undef, undef, undef, undef, undef, undef, undef)
Class.invokeSuper(_1=>[Class Button], _2=>"redraw", _3=>undef, _4=>undef, _5=>undef, _6=>undef, _7=>undef, _8=>undef, _9=>undef, _10=>undef, _11=>undef, _12=>undef, _13=>undef)
Button.redraw(_1=>undef, _2=>undef, _3=>undef, _4=>undef)
ListGrid.$78q()
ListGrid.getFieldWidths(_1=>"resized", _2=>undef)
ListGrid.$45m(_1=>"resized", _2=>-11, _3=>-196)
ListGrid.layoutChildren(_1=>"resized", _2=>-11, _3=>-196)
Canvas.$t1(_1=>undef, _2=>undef)
Canvas.resizeBy(_1=>-11, _2=>-196, _3=>undef, _4=>undef, _5=>undef, _6=>undef)
Canvas.resizeTo(_1=>334, _2=>783, _3=>undef, _4=>undef, _5=>undef, _6=>undef, _7=>undef)
Layout.resizeMember(_1=>[TreeGrid ID:isc_TreeGrid_0], _2=>783, _3=>Obj, _4=>false, _5=>undef, _6=>undef)
Layout.resizeMembers(_1=>Array[2], _2=>Array[2], _3=>false, _4=>undef)
Layout.layoutChildren(_1=>"resized", _2=>-11, _3=>-196)
** recursed on Canvas.$t1

14:42:53.983:TMR5:INFO:redraws:isc_TreeGrid_0_body:Scheduling redraw (2 children) (setColumnWidths)
14:42:54.059:TMR5:INFO:redraws:isc_HLayout_2_resizeBar_label:Scheduling redraw (resize)
14:42:54.113:TMR5:INFO:redraws:isc_HLayout_0_resizeBar_label:Scheduling redraw (resize)
14:42:54.970:TMR6:DEBUG:redraws:clearRedrawQueue: 3 redraws (5 items), 807ms

[Isomorphic]

No, the resizeBar would not cause the HLayout itself to redraw. Instead, the HLayout is reporting that it is redrawing on resize. That wouldn't normally happen unless you implemented a getInnerHTML() on the HLayout - did you do that? That's a rare approach; it's usually better to just use a child for whatever content you need (eg some kind of background).

[weiqj]

No. Nothing special on HLayout.
Obviously the browser window caused resize is treated differently. Resize by sliding resize bar won't trigger redraw.

[Isomorphic]

No, the resizeBar is resizing the *children* of the HLayout, the browser resize is resizing the HLayout itself. It's not the same operation.

An override to getInnerHTML() really seems to be the only possible cause here, so please double-check. However, even if you've added a getInnerHTML, you should be able to avoid the redraw via explicitly setting redrawOnResize:false.

[weiqj]

I am pretty sure there is no getInnerHTML() override on the HLayout.
As a matter of fact the HLayout is inside a TabSet. I can even resize the outer TabSet with no problem as long as I don't resize the browser.
Only resizing the browser triggers the redraw.

It can be reproduced on both IE and latest Firefox and Chrome.

No, the resizeBar is resizing the *children* of the HLayout, the browser resize is resizing the HLayout itself. It's not the same operation.

An override to getInnerHTML() really seems to be the only possible cause here, so please double-check. However, even if you've added a getInnerHTML, you should be able to avoid the redraw via explicitly setting redrawOnResize:false.

[Isomorphic]

That's even odder - we don't even have a theory for that. A component embedded in the middle of a hierarchy doesn't even know the difference between a page resize or it's immediate parent being resized..

What happened when you tried our suggestion?

If you turn on the "redrawTrace" category, you'll see stack traces for every redraw. You could turn this on just for the HLayout in question to see where the resize that triggered the redraw is coming from.

[Isomorphic]

FYI we’ve verified that there is not a general problem with redraws with combinations of TabSets and HLayouts (which is common and occurs in the Showcase in a few places). So still waiting on you trying our suggestion or gathering further diagnostics.