add some

frame.js

@@ -683,28 +683,34 @@ Volcanos(chat.ONAPPEND, {_init: function(can, meta, list, cb, target, field) {
 				append(can.page.Append(can, target, [html.LAYOUT])._target, type==FLOW? FLEX: FLOW, item)
 			} else if (can.base.isObject(item)) {
 				if (item.index) { item._index = count++, ui.size[item._index] = item.height||item.width
+					item.type = item.type||"story"
 					can.base.isIn(item._command, web.PORTAL, web.DESKTOP, aaa.OFFER, aaa.APPLY, code.VIMER) && can.onmotion.hidden(can, target)
-					// can.onmotion.hidden(can, target), can.onmotion.delay(can, function() { can.onmotion.toggle(can, target, true) }, 300)
+						item.layout = function(height, width) {}
 					can.onappend.plugin(can, item, function(sub) { can._plugins = (can._plugins||[]).concat([sub])
-						item.layout = function(height, width) { sub.onimport.size(sub, height, width) }
+						item.layout = function(height, width) { sub.onimport.size(sub, height, width, false) }
 						can.onmotion.select(can, sub._target.parentNode, html.FIELDSET, sub._target)
-						sub.onexport._output = function() { can.onmotion.delay(can, function() { can.onmotion.toggle(can, target, true) }) }
+						sub.onexport._output = function() {
+							can.onimport.layout(can)
+							can.onmotion.delay(can, function() { can.onmotion.toggle(can, target, true) })
+						}
 					}, target, ui[item._index] = can.onappend.field(can, item.type, {index: item.index, name: item.index.split(nfs.PT).pop(), help: item.help}, target)._target)
 				} else { can.page.Append(can, target, [item]) }
 			}
 		}); return list } ui.list = append(target, type, list||[html.PROJECT, [[html.CONTENT, html.PROFILE], html.DISPLAY]])
 		function calc(item, size, total) { return !ui.size[item]? can.base.isString(size)? parseInt(can.base.trimSuffix(size, "px")): size: ui.size[item] < 1? total*ui.size[item]: ui.size[item] }
 		var defer = [], content_height, content_width; function layout(type, list, height, width) { var _width = width, _height = height; can.core.List(list, function(item) {
+			var meta = {}
 			if (can.base.isArray(item)) { return } if (can.base.isObject(item)) { var meta = item; item = item._index }
 			var target = ui[item]; if (!can.page.isDisplay(target)) { return }
 			if (item == html.CONTENT || item == ice.MAIN) { return defer.push(function() { can.page.style(can, target, html.HEIGHT, content_height = height, html.WIDTH, content_width = width) }) }
-			if (type == FLOW) { var h = calc(item, target.offsetHeight, height)
+			if (type == FLOW) {
+				var h = calc(item, target.offsetHeight, height)
 				if (can.base.isObject(meta) && meta.layout) { meta.layout(h, width) }
 				can.page.style(can, target, html.WIDTH, width)
 				if (can.page.isDisplay(target)) { height -= h }
 			} else {
-				var w = calc(item, target.offsetWidth||target.style.width||_width/list.length, _width), h = height
+				var w = calc(item, target.offsetWidth||target.style.width||_width/list.length, _width), h = meta.height||height
-				if (can.base.isObject(meta)) { meta.layout(h, w = _width/list.length) }
+				if (can.base.isObject(meta) && meta.layout) { meta.layout(h, w = _width/list.length) }
 				can.page.style(can, target, html.HEIGHT, h, html.WIDTH, w)
 				if (can.user.isMobile && item == html.PROJECT) { return }
 				if (can.page.isDisplay(target)) { width -= w }
@@ -725,11 +731,21 @@ Volcanos(chat.ONAPPEND, {_init: function(can, meta, list, cb, target, field) {
 		return ui
 	},
 	tabview: function(can, meta, list, target) { var ui = can.page.Append(can, target, [html.ACTION, html.OUTPUT])
+		can.onappend.style(can, "tabview", ui.action)
 		can.onappend.style(can, html.FLEX, ui.action)
 		can.core.List(can.base.getValid(list, can.core.Item(meta)), function(name, index) {
 			ui[name] = can.page.Append(can, ui.action, [{view: [html.TABS, html.DIV, can.user.trans(can, name)], onclick: function(event) {
 				can.onmotion.select(can, ui.action, html.DIV_TABS, event.target)
-				if (can.onmotion.cache(can, function() { return name }, ui.output)) { return } meta[name](ui.output)
+				if (can.onmotion.cache(can, function() { return name }, ui.output)) { return }
+				var item = meta[name]
+				if (typeof item == code.FUNCTION) { return item(ui.output) }
+				item.type = item.type||"story"
+				can.onappend.plugin(can, item, function(sub) {
+					sub.onimport.size(sub, sub.ConfHeight(), sub.ConfWidth())
+					sub.onexport._output = function() {
+						sub.onimport.size(sub, sub.ConfHeight(), sub.ConfWidth())
+					}
+				}, ui.output)
 			}, _init: function(target) { index == 0 && can.onmotion.delay(can, function() { target.click() }) }}])._target
 		}); return ui._target = target, ui
 	},

index.css

@@ -22,7 +22,7 @@ body {
 	--disable-fg-color:gray; --progress-bg-color:var(--danger-bg-color);
 	--hover-bg-color:#5066b961; --hover-fg-color:var(--notice-fg-color);
 	--body-font-family:sans-serif; --code-font-family:monospace;
-   	--project-width:230px; --river-width:var(--project-width);
+	--project-width:230px; --river-width:var(--project-width);
 	--float-height:480px; --float-width:1200px; --desktop-icon-size:80px;
 }
 body {
@@ -47,7 +47,7 @@ body {
 	--box-shadow:var(--body-fg-color) 0px 0px 10px;
 	--notice-box-shadow:var(--notice-bg-color) 0px 0px 10px;
 	--plugin-box-shadow:var(--box-shadow); --legend-box-shadow:var(--box-shadow); --input-box-shadow:var(--box-shadow);
-	--th-box-shadow:var(--box-shadow);
+	--th-box-shadow:var(--legend-box-shadow);
 
 	--plugin-padding:10px; --plugin-margin:var(--plugin-padding);
 	--legend-padding:20px; --legend-margin:20px; --title-margin:var(--legend-padding);
@@ -440,7 +440,7 @@ div.action div.tabs:hover {
 div.action div.tabs.select {
 	background-color:var(--output-bg-color);
    	/* color:var(--hover-fg-color); */
-	border-top-left-radius:var(--button-margin); border-top-right-radius:var(--button-margin); border-bottom:var(--hover-fg-color) solid 3px;
+	border-top-left-radius:var(--button-margin); border-top-right-radius:var(--button-margin); border-bottom:var(--notice-bg-color) solid 3px;
 }
 div.zone>div.item { background-color:var(--th-bg-color); }
 div.zone>div.list>div.zone>div.item { background-color:var(--th-bg-color); }
@@ -582,7 +582,7 @@ i.bi.bi-toggle-on:hover { color:var(--notice-bg-color); }
 fieldset>legend>i { margin-right:var(--input-margin); }
 form.option>div.item.icon { overflow:hidden; position:relative; user-select:none; }
 form.option>div.item.icon {
-	font-size:var(--icon-font-size); border-radius:var(--button-radius); box-shadow:var(--box-shadow);
+	font-size:var(--icon-font-size); border-radius:var(--button-radius); box-shadow:var(--input-box-shadow);
 	padding:0 var(--input-padding); margin-right:var(--input-margin); height:var(--action-height);
 }
 form.option>div.item.icon.menu { font-size:28px; line-height:26px; padding:0; display:flex; align-items:flex-start; display:none; }
@@ -809,7 +809,8 @@ fieldset.draw>form.option>div.item.pid>input { width:var(--button-width) !import
 fieldset.draw>div.output>div.layout>div.layout>div.profile table { width:100%; }
 fieldset.draw>div.output>div.layout>div.layout>div.profile { width:var(--project-width); flex:0 0 var(--project-width); }
 fieldset.draw div.output svg { margin-bottom:-5px; }
-fieldset.draw div.output svg { min-width:100%; min-height:100%; }
+fieldset.draw div.output svg { min-height:100%; }
+fieldset.draw div.output { display:flex; flex-direction:row; }
 fieldset.draw.trends div.output { overflow:hidden; }
 fieldset.draw.trends div.output svg { background-color:#1b5b738c; }
 fieldset.draw.spides div.output svg text { cursor:pointer; }

plugin/state.js

@@ -91,7 +91,10 @@ Volcanos(chat.ONIMPORT, {
 	})[0] },
 	_size: function(can, height, width, auto, mode) {},
 	size: function(can, height, width, auto, mode) {
+		var margin = (can.Conf("margin")||0)*2
 		can.Conf("_auto", auto), can.Mode(mode), can.ConfHeight(height), can.ConfWidth(width), height -= can.onexport.actionHeight(can)+can.onexport.statusHeight(can)
+		// height -= margin
+		width -= margin
 		auto || auto == undefined? (can.page.style(can, can._output, html.HEIGHT, "", html.WIDTH, "", html.MAX_HEIGHT, height, html.MAX_WIDTH, width), can.page.style(can, can._target, html.HEIGHT, "", html.WIDTH, "")):
 			(can.page.style(can, can._output, html.HEIGHT, height, html.WIDTH, width, html.MAX_HEIGHT, "", html.MAX_WIDTH, ""), can.page.style(can, can._target, html.WIDTH, width))
 		if (can.misc.Search(can, log.DEBUG) == ice.TRUE) { can.Status(html.HEIGHT, can.base.Max(height, can._output.offsetHeight), html.WIDTH, width) }

plugin/story/pie.js

@@ -1,5 +1,5 @@
 Volcanos(chat.ONIMPORT, {_init: function(can, msg, cb) { can.page.requireDraw(can, function() { can.list = can.onimport._data(can, msg, can.Conf(mdb.FIELD)||mdb.VALUE)
-		can.core.List(can.list, function(item) { msg.Push(cli.COLOR, '<span style="background-color:'+item.color+'">     </span>').Push("weight", parseInt(item.span*100/360)+"%") })
+	can.core.List(can.list, function(item) { msg.Push("weight", parseInt(item.span*100/360)+"%").Push(cli.COLOR, '<span style="background-color:'+item.color+'">     </span>') })
 		can.onaction.list = [], can.ui.display = can.page.Append(can, can._output, [html.DISPLAY])._target
 		can.onappend.table(can, msg, null, can.ui.display), can.page.Select(can, can.ui.display, html.TR, function(tr, index) {
 			can.page.Modify(can, tr, {onmouseenter: function(event) { can._draw(index-1) }})
@@ -33,9 +33,12 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg, cb) { can.page.requireDraw(ca
 		if (can.base.endWith(value, "mi")) { return parseInt(value)*1000000 }
 		return parseInt(value)
 	},
-	layout: function(can) {
+	layout: function(can) { if (!can.ui || !can.ui.svg) { return }
-		var height = can.base.Max(can.ConfHeight(), can.ConfWidth()/2), margin = 20, r = height/2-margin; can.ui.svg.Val(html.WIDTH, height), can.ui.svg.Val(html.HEIGHT, height)
+		var padding = (can.Conf("padding")||0)
-		can.page.style(can, can.ui.display, html.HEIGHT, can.ConfHeight()-can.ui.svg.Val(html.HEIGHT))
+		var height = can.base.Max(can.ConfHeight(), can.ConfWidth()/2), margin = 20, r = height/2-margin-padding;
-		can._draw = function(which) { can.onimport._draw(can, r+margin, r+margin, r, margin, which) }, can._draw(0)
+		can.ui.svg.Val(html.HEIGHT, height-2*padding), can.ui.svg.Val(html.WIDTH, height-2*padding)
+		// can.page.style(can, can.ui.display, html.HEIGHT, can.ConfHeight()-can.ui.svg.Val(html.HEIGHT))
+		can.page.style(can, can.ui.display, html.WIDTH, can.ConfWidth()-height)
+		can._draw = function(which) { can.onimport._draw(can, height/2-padding-10, can.ConfHeight()/2-padding-10, r, margin, which) }, can._draw(0)
 	},
 })