bugfix
This commit is contained in:
parent
76995ad1e0
commit
3b1ed752ed
@ -560,6 +560,34 @@ bricks.App = class extends bricks.Layout {
|
|||||||
this.bind('orient_changed', this.screen_orient);
|
this.bind('orient_changed', this.screen_orient);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
get_color(){
|
||||||
|
return getComputedStyle(this.dom_element).color;
|
||||||
|
return parseRGB(colorStr);
|
||||||
|
}
|
||||||
|
get_bgcolor(){
|
||||||
|
return getComputedStyle(this.dom_element).backgroundColor;
|
||||||
|
return parseRGB(colorStr);
|
||||||
|
}
|
||||||
|
|
||||||
|
get_blinkcolor(){
|
||||||
|
var color, bgcolor, blinkcolor;
|
||||||
|
color = parseRGB(this.get_color());
|
||||||
|
bgcolor = parseRGB(this.get_bgcolor());
|
||||||
|
console.log('color=', color, 'bgcolor=', bgcolor);
|
||||||
|
function short1of3(x, y){
|
||||||
|
if (x < y) {
|
||||||
|
return x + (y - x) / 3;
|
||||||
|
} else {
|
||||||
|
return x - (x - y) / 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
var r = short1of3(color.r, bgcolor.r);
|
||||||
|
var g = short1of3(color.g, bgcolor.g);
|
||||||
|
var b = short1of3(color.b, bgcolor.b);
|
||||||
|
var bc = bricks.obj_fmtstr({r:r, g:g, b:b}, "rgb(${r}, ${g}, ${b})");
|
||||||
|
console.log('color=', color, 'bgcolor=', bgcolor, 'bc=', bc);
|
||||||
|
return bc;
|
||||||
|
}
|
||||||
async getCameras() {
|
async getCameras() {
|
||||||
try {
|
try {
|
||||||
const devices = await navigator.mediaDevices.enumerateDevices();
|
const devices = await navigator.mediaDevices.enumerateDevices();
|
||||||
|
@ -3,6 +3,8 @@ body {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
color: #8a8a8a;
|
||||||
|
background-color: #fafafa;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
1
bricks/imgs/node-collapse.svg
Normal file
1
bricks/imgs/node-collapse.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg t="1748923025889" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="130072" width="100%" height="100%"><path d="M310.784 132.8c38.144 21.056 412.864 323.264 445.12 342.144 28.864 16.896 29.376 57.216 0 74.112-44.736 25.728-417.536 326.464-443.712 341.312-32.768 18.624-65.856-5.056-65.856-36.864 0-24.512 0-648.448 0-683.968C246.272 134.4 282.88 117.376 310.784 132.8z" p-id="130073" fill="${color}"></path></svg>
|
After Width: | Height: | Size: 461 B |
1
bricks/imgs/node-expand.svg
Normal file
1
bricks/imgs/node-expand.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg t="1748922878918" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="126615" width="100%" height="100%"><path d="M511.999488 819.413462 72.8374 204.586538 951.1626 204.586538Z" fill="${color}" p-id="126616"></path></svg>
|
After Width: | Height: | Size: 267 B |
@ -4,6 +4,7 @@ bricks.Svg = class extends bricks.VBox {
|
|||||||
options:{
|
options:{
|
||||||
rate:
|
rate:
|
||||||
url:
|
url:
|
||||||
|
blink:false
|
||||||
color:*
|
color:*
|
||||||
blinkcolor:*
|
blinkcolor:*
|
||||||
blinktime:*
|
blinktime:*
|
||||||
@ -11,11 +12,17 @@ bricks.Svg = class extends bricks.VBox {
|
|||||||
*/
|
*/
|
||||||
constructor(opts){
|
constructor(opts){
|
||||||
opts.rate = opts.rate || 1;
|
opts.rate = opts.rate || 1;
|
||||||
opts.cwidth = opts.cwidth || 1;
|
opts.cwidth = opts.rate;
|
||||||
opts.cheight = opts.cheight || 1;
|
opts.cheight = opts.rate;
|
||||||
opts.blinktime = opts.blinktime || 0.5;
|
opts.blinktime = opts.blinktime || 0.5;
|
||||||
opts.dynsize = true;
|
opts.dynsize = true;
|
||||||
super(opts);
|
super(opts);
|
||||||
|
if (! this.color) {
|
||||||
|
this.color = bricks.app.get_color();
|
||||||
|
}
|
||||||
|
if (!this.blinkcolor){
|
||||||
|
this.blinkcolor = bricks.app.get_blinkcolor()
|
||||||
|
}
|
||||||
if (opts.url){
|
if (opts.url){
|
||||||
this.set_url(opts.url);
|
this.set_url(opts.url);
|
||||||
}
|
}
|
||||||
@ -26,7 +33,7 @@ bricks.Svg = class extends bricks.VBox {
|
|||||||
.then(svgText => {
|
.then(svgText => {
|
||||||
this.svgText = svgText;
|
this.svgText = svgText;
|
||||||
this.set_colored_svg(this.color);
|
this.set_colored_svg(this.color);
|
||||||
this.blink();
|
if (this.blink) this.start_blink();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
set_ancent_color(e){
|
set_ancent_color(e){
|
||||||
@ -46,20 +53,20 @@ bricks.Svg = class extends bricks.VBox {
|
|||||||
var svgText = bricks.obj_fmtstr({color: color}, this.svgText);
|
var svgText = bricks.obj_fmtstr({color: color}, this.svgText);
|
||||||
this.dom_element.innerHTML = svgText;
|
this.dom_element.innerHTML = svgText;
|
||||||
}
|
}
|
||||||
blink(){
|
_blink(){
|
||||||
if (this.blinktime && this.blinkcolor) {
|
if (this.blinktime && this.blinkcolor) {
|
||||||
if (this.cur_color == this.color){
|
if (this.cur_color == this.color){
|
||||||
this.set_colored_svg(this.blinkcolor);
|
this.set_colored_svg(this.blinkcolor);
|
||||||
} else {
|
} else {
|
||||||
this.set_colored_svg(this.color);
|
this.set_colored_svg(this.color);
|
||||||
}
|
}
|
||||||
this.blink_task = schedule_once(this.blink.bind(this),
|
this.blink_task = schedule_once(this._blink.bind(this),
|
||||||
this.blinktime);
|
this.blinktime);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
start_blink(){
|
start_blink(){
|
||||||
if (!this.blink_task){
|
if (!this.blink_task){
|
||||||
blink();
|
this._blink();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
end_blink(){
|
end_blink(){
|
||||||
@ -67,5 +74,27 @@ bricks.Svg = class extends bricks.VBox {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
bricks.StatedSvg = class extends bricks.Svg {
|
||||||
|
/* {
|
||||||
|
states:[{state:aaa,url:} ,,],
|
||||||
|
state:
|
||||||
|
} */
|
||||||
|
constructor(opts){
|
||||||
|
super(opts);
|
||||||
|
if (this.states){
|
||||||
|
if (! this.state){
|
||||||
|
this.state = this.states[0].state;
|
||||||
|
}
|
||||||
|
var url = this.set_state(this.state);
|
||||||
|
this.set_url(url);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
set_state(state){
|
||||||
|
this.states.forEach(s => {
|
||||||
|
if (s.state == state) this.set_url(s.url);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
bricks.Factory.register('Svg', bricks.Svg);
|
bricks.Factory.register('Svg', bricks.Svg);
|
||||||
|
bricks.Factory.register('StatedSvg', bricks.StatedSvg);
|
||||||
|
|
||||||
|
@ -12,8 +12,8 @@ bricks.TreeNode = class extends bricks.VBox {
|
|||||||
this.user_data = data;
|
this.user_data = data;
|
||||||
this.is_leaf = this.user_data.is_leaf;
|
this.is_leaf = this.user_data.is_leaf;
|
||||||
this.params = bricks.extend(this.tree.params, {id:this.user_data[this.tree.opts.idField]});
|
this.params = bricks.extend(this.tree.params, {id:this.user_data[this.tree.opts.idField]});
|
||||||
if (this.tree.multitype_tree){
|
if (this.tree.opts.typeField){
|
||||||
this.params['type'] = this.user_data[this.tree.opts.typeField];
|
this.params.type = this.user_data[this.tree.opts.typeField];
|
||||||
}
|
}
|
||||||
var n = new bricks.HBox({
|
var n = new bricks.HBox({
|
||||||
height:this.tree.row_height,
|
height:this.tree.row_height,
|
||||||
@ -33,6 +33,7 @@ bricks.TreeNode = class extends bricks.VBox {
|
|||||||
}
|
}
|
||||||
this.container.hide();
|
this.container.hide();
|
||||||
}
|
}
|
||||||
|
this.setup_icon_urls()
|
||||||
}
|
}
|
||||||
getValue(){
|
getValue(){
|
||||||
var v = this.user_data;
|
var v = this.user_data;
|
||||||
@ -63,7 +64,9 @@ bricks.TreeNode = class extends bricks.VBox {
|
|||||||
this.collapse()
|
this.collapse()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async expand(){
|
async expand(){
|
||||||
|
this.node_state = 'open';
|
||||||
if (this.is_leaf){
|
if (this.is_leaf){
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -74,6 +77,7 @@ bricks.TreeNode = class extends bricks.VBox {
|
|||||||
this.container.show();
|
this.container.show();
|
||||||
}
|
}
|
||||||
collapse(){
|
collapse(){
|
||||||
|
this.node_state = 'close'
|
||||||
if (this.is_leaf){
|
if (this.is_leaf){
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -86,13 +90,21 @@ bricks.TreeNode = class extends bricks.VBox {
|
|||||||
} else {
|
} else {
|
||||||
var srcs = this.tree.opts.node_state_imgs || {};
|
var srcs = this.tree.opts.node_state_imgs || {};
|
||||||
var sources = {};
|
var sources = {};
|
||||||
sources['open'] = objget(srcs, 'open', bricks_resource('imgs/down_arrow.png'));
|
sources['open'] = objget(srcs, 'open', bricks_resource('imgs/node-expand.svg'));
|
||||||
sources['close'] = objget(srcs, 'close', bricks_resource('imgs/right_arrow.png'));
|
sources['close'] = objget(srcs, 'close', bricks_resource('imgs/node-collapse.svg'));
|
||||||
this.trigle = new bricks.MultipleStateIcon({
|
this.trigle = new bricks.StatedSvg({
|
||||||
state:'close',
|
state:'close',
|
||||||
urls:sources,
|
states:[
|
||||||
height:img_size,
|
{
|
||||||
width:img_size
|
state: 'open',
|
||||||
|
url: bricks_resource('imgs/node-expand.svg')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
state: 'close',
|
||||||
|
url: bricks_resource('imgs/node-collapse.svg')
|
||||||
|
}
|
||||||
|
],
|
||||||
|
rate: 1,
|
||||||
});
|
});
|
||||||
this.trigle.bind('state_changed', this.toggleExpandCollapse.bind(this));
|
this.trigle.bind('state_changed', this.toggleExpandCollapse.bind(this));
|
||||||
widget.add_widget(this.trigle);
|
widget.add_widget(this.trigle);
|
||||||
@ -103,15 +115,12 @@ bricks.TreeNode = class extends bricks.VBox {
|
|||||||
widget.add_widget(this.check_w);
|
widget.add_widget(this.check_w);
|
||||||
this.check_w.bind('changed', this.tree.node_checked.bind(this.tree, this))
|
this.check_w.bind('changed', this.tree.node_checked.bind(this.tree, this))
|
||||||
}
|
}
|
||||||
var dtype = this.user_data[this.tree.opts.typeField];
|
var icon_url = self.this.icons_urls.leaf;
|
||||||
var icon = objget(TypeIcons, dtype);
|
if (this.is_leaf) icon_url = this.icons_urls.leaf;
|
||||||
if (!icon && this.tree.opts.default_type){
|
else if this.node_state == 'expand') this.icon_url = this.icons_urls.open;
|
||||||
icon = objget(TypeIcons, his.tree.opts.default_type);
|
else this.icon_url = this.icons_urls.close;
|
||||||
}
|
var img = new bricks.Svg({
|
||||||
if (!icon){
|
rate:1,
|
||||||
icon = bricks_resource('imgs/folder.png');
|
|
||||||
}
|
|
||||||
var img = new bricks.Icon({
|
|
||||||
url:icon
|
url:icon
|
||||||
});
|
});
|
||||||
widget.add_widget(img);
|
widget.add_widget(img);
|
||||||
@ -136,13 +145,34 @@ bricks.TreeNode = class extends bricks.VBox {
|
|||||||
}
|
}
|
||||||
this.str_w.set_text(this.user_data[this.tree.opts.textField]);
|
this.str_w.set_text(this.user_data[this.tree.opts.textField]);
|
||||||
}
|
}
|
||||||
|
setup_icon_urls(){
|
||||||
|
|
||||||
|
if (this.tree.opts.typeField){
|
||||||
|
var ntype = this.user_data[this.opts.typeField];
|
||||||
|
var icons = null;
|
||||||
|
if (this.tree.node_state_icons){
|
||||||
|
icons = this.tree.node_state_icons[ntype];
|
||||||
|
var dt = this.tree.node_state_icons.default_type;
|
||||||
|
if (dt){
|
||||||
|
icon = this.tree.node_state_icons[dt];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (! icons){
|
||||||
|
icons = {
|
||||||
|
open: bricks_resource('imgs/open_folders.svg'),
|
||||||
|
close: bricks_resource('imgs/close_folder.svg'),
|
||||||
|
leaf: bricks_resource('imgs/close_folder.svg')
|
||||||
|
};
|
||||||
|
}
|
||||||
|
this.icons_urls = icons;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
bricks.Tree = class extends bricks.VScrollPanel {
|
bricks.Tree = class extends bricks.VScrollPanel {
|
||||||
/*
|
/*
|
||||||
{
|
{
|
||||||
row_height:
|
row_height:
|
||||||
multitype_tree:false,
|
|
||||||
idField:
|
idField:
|
||||||
textField:
|
textField:
|
||||||
type_icons:
|
type_icons:
|
||||||
@ -150,9 +180,13 @@ bricks.Tree = class extends bricks.VScrollPanel {
|
|||||||
default_type:
|
default_type:
|
||||||
data:
|
data:
|
||||||
dataurl:
|
dataurl:
|
||||||
node_state_imgs:{
|
node_state_icon:{
|
||||||
open:url,
|
nodetype:{
|
||||||
close:url
|
open:url,
|
||||||
|
close:url,
|
||||||
|
leaf:url
|
||||||
|
}
|
||||||
|
default_type:
|
||||||
},
|
},
|
||||||
admin:{
|
admin:{
|
||||||
{
|
{
|
||||||
|
@ -1,6 +1,20 @@
|
|||||||
var bricks = window.bricks || {};
|
var bricks = window.bricks || {};
|
||||||
bricks.bug = false;
|
bricks.bug = false;
|
||||||
|
|
||||||
|
function parseRGB(colorStr) {
|
||||||
|
const match = colorStr.match(/^rgb\s*\(\s*(\d+),\s*(\d+),\s*(\d+)\s*\)$/);
|
||||||
|
if (!match) return null;
|
||||||
|
const [, r, g, b] = match.map(Number);
|
||||||
|
return { r, g, b };
|
||||||
|
}
|
||||||
|
|
||||||
|
function parseRGBA(colorStr) {
|
||||||
|
const match = colorStr.match(/^rgba?\s*\(\s*(\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\s*\)$/);
|
||||||
|
if (!match) return null;
|
||||||
|
const [, r, g, b, a] = match;
|
||||||
|
return { r: +r, g: +g, b: +b, a: a !== undefined ? +a : 1 };
|
||||||
|
}
|
||||||
|
|
||||||
async function streamResponseJson(response, onJson) {
|
async function streamResponseJson(response, onJson) {
|
||||||
const reader = response.body.getReader();
|
const reader = response.body.getReader();
|
||||||
const decoder = new TextDecoder("utf-8");
|
const decoder = new TextDecoder("utf-8");
|
||||||
|
Loading…
Reference in New Issue
Block a user