add more containment + readd contain-intrinsic-size

TiddlyFlex/files/modules/widgets/dynanode.js

@@ -109,7 +109,17 @@ DynaNodeWidget.prototype.render = function(parent,nextSibling) {
 				self.dynanodeElements.push(entry);
 			}
 			var target = entry.target ? entry.target : entry;
-			self.checkVisibility(target);
+			if(entry.target && entry.target.getAttribute("data-tiddler-title") && entry.target.getAttribute("data-tiddler-title") === "New Tiddler") {
+				console.log(entry.borderBoxSize);
+			}
+			var rect;
+			if(entry.target) {
+				rect = {
+					width: entry.borderBoxSize[0].inlineSize,
+					height: entry.borderBoxSize[0].blockSize
+				}
+			}
+			self.checkVisibility(target,rect);
 		}
 	};
 
@@ -209,7 +219,7 @@ DynaNodeWidget.prototype.rectNotEQ = function(a,b) {
 			!this.eqIsh(a.height, b.height));
 };
 
-DynaNodeWidget.prototype.checkVisibility = function(element) {
+DynaNodeWidget.prototype.checkVisibility = function(element,rect) {
 	var domNodeWidth = this.domNode.offsetWidth,
 		domNodeHeight = this.domNode.offsetHeight,
 		domNodeBounds = this.domNode.getBoundingClientRect();
@@ -225,6 +235,17 @@ DynaNodeWidget.prototype.checkVisibility = function(element) {
 	var currValue = this.stateMap.get(element),
 		newValue = currValue;
 	var elementRect = element.getBoundingClientRect();
+
+	if(rect) {
+		$tw.utils.setStyle(element,[
+			{ containIntrinsicSize: `${rect.width}px ${rect.height}px` }
+		]);
+	} else {
+		$tw.utils.setStyle(element,[
+			{ containIntrinsicSize: `${elementRect.width}px ${elementRect.height}px` }
+		]);		
+	}
+
 	// Within viewport
 	if(!(elementRect.left > domNodeRect.right || 
 						elementRect.right < domNodeRect.left || 
@@ -256,7 +277,7 @@ DynaNodeWidget.prototype.checkVisibility = function(element) {
 			$tw.utils.removeClass(element,"tc-dynanode-hidden");
 			if(element.style["contain"] !== "content") {
 				$tw.utils.setStyle(element,[
-					{ contain: "content" }
+					{ contain: "size layout paint style" }
 				]);
 			}
 		}
@@ -266,7 +287,7 @@ DynaNodeWidget.prototype.checkVisibility = function(element) {
 			$tw.utils.removeClass(element,"tc-dynanode-near");
 			if(element.style["contain"] !== "content") {
 				$tw.utils.setStyle(element,[
-					{ contain: "content" }
+					{ contain: "size layout paint style" }
 				]);
 			}
 		}

TiddlyFlex/files/modules/widgets/subclasses/transclude.js

@@ -0,0 +1,56 @@
+/*\
+title: $:/plugins/BTC/TiddlyFlex/modules/widgets/subclasses/transclude.js
+type: application/javascript
+module-type: widget-subclass
+
+Widget base class
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+exports.baseClass = "transclude";
+
+exports.constructor = function(parseTreeNode,options) {
+	this.initialise(parseTreeNode,options);
+};
+
+exports.prototype = {};
+
+exports.prototype.findParentContainedElement = function() {
+	var widget = this;
+	while(widget) {
+		for(var i=0; i<widget.domNodes.length; i++) {
+			var domNode = widget.domNodes[i];
+			if(domNode.style && domNode.style["contain"]) {
+				return domNode;
+			}
+		}
+		widget = widget.parentWidget;
+	}
+	return null;
+};
+
+/*
+Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering
+*/
+exports.prototype.refresh = function(changedTiddlers) {
+	var changedAttributes = this.computeAttributes();
+	if(($tw.utils.count(changedAttributes) > 0) || (this.transcludeVariableIsFunction && this.functionNeedsRefresh()) || (!this.transcludeVariable && changedTiddlers[this.transcludeTitle] && this.parserNeedsRefresh())) {
+		var containedElement = this.findParentContainedElement();
+		this.refreshSelf();
+		if(containedElement) {
+			$tw.utils.setStyle(containedElement,[
+				{ contain: null }
+			]);
+		}
+		return true;
+	} else {
+		return this.refreshChildren(changedTiddlers);
+	}
+};
+
+})();

TiddlyFlex/files/tiddlywiki.files

@@ -63,6 +63,13 @@
 				"title": "$:/plugins/BTC/TiddlyFlex/modules/widgets/subclasses/droppable.js",
 				"module-type": "widget-subclass"
 			}
+		},{
+			"file": "modules/widgets/subclasses/transclude.js",
+			"fields": {
+				"type": "application/javascript",
+				"title": "$:/plugins/BTC/TiddlyFlex/modules/widgets/subclasses/transclude.js",
+				"module-type": "widget-subclass"
+			}
 		}
 	]
 }

TiddlyFlex/plugin.info

@@ -4,7 +4,7 @@
 	"name": "TiddlyFlex",
 	"plugin-type": "plugin",
 	"author": "Simon Huber",
-	"version": "0.0.168",
+	"version": "0.0.169",
 	"core-version": ">=5.3.3",
 	"source": "https://github.com/BurningTreeC/TiddlyFlex",
 	"list": "readme license"