mirror of https://gitee.com/cf-fz/WebCAD.git
parent
ab0b13b81a
commit
25f67c34ca
@ -1,75 +1,47 @@
|
||||
import GoldenLayout = require('golden-layout')
|
||||
import ResizeSensor = require("../../../node_modules/css-element-queries/src/ResizeSensor.js")
|
||||
|
||||
const containerComponenName = "container"
|
||||
//界面的布局定义
|
||||
const layoutConfig: GoldenLayout.Config = {
|
||||
settings: {
|
||||
hasHeaders: false,
|
||||
showMaximiseIcon: true,
|
||||
showCloseIcon: true
|
||||
},
|
||||
dimensions: { borderWidth: 1 },
|
||||
content: [{
|
||||
type: 'column',
|
||||
content: [{
|
||||
type: 'row',
|
||||
height: 8,
|
||||
content: [{
|
||||
type: 'component',
|
||||
componentName: containerComponenName,
|
||||
componentState: { id: "test1" }
|
||||
}],
|
||||
},
|
||||
{
|
||||
type: 'row',
|
||||
height: 2,
|
||||
content: [{
|
||||
type: 'component',
|
||||
componentName: containerComponenName,
|
||||
componentState: { id: "commandContainer" }
|
||||
}]
|
||||
}
|
||||
]
|
||||
}]
|
||||
};
|
||||
//绘制无标题
|
||||
export function LoadLayoutNotHead()
|
||||
{
|
||||
var config = {
|
||||
settings: {
|
||||
hasHeaders: false,
|
||||
showMaximiseIcon: true,
|
||||
showCloseIcon: true
|
||||
},
|
||||
dimensions: { borderWidth: 1 },
|
||||
content: [{
|
||||
type: 'column',
|
||||
content: [{
|
||||
type: 'row',
|
||||
height: 8,
|
||||
content: [{
|
||||
type: 'component',
|
||||
componentName: 'test',
|
||||
componentState: { id: "test1" }
|
||||
}],
|
||||
},
|
||||
{
|
||||
type: 'row',
|
||||
height: 2,
|
||||
content: [{
|
||||
type: 'component',
|
||||
componentName: 'test',
|
||||
componentState: { id: "test1" }
|
||||
}]
|
||||
}
|
||||
]
|
||||
}]
|
||||
};
|
||||
|
||||
let el = document.getElementById("app")
|
||||
var myLayout = new GoldenLayout(config, el);
|
||||
myLayout.registerComponent('test', function (container: GoldenLayout.Container, state)
|
||||
var myLayout = new GoldenLayout(layoutConfig, el);
|
||||
myLayout.registerComponent(containerComponenName, function (container: GoldenLayout.Container, state)
|
||||
{
|
||||
container.getElement().html(`<h2 id=${state.id}>hello word</h2>`)
|
||||
container.getElement().html(`<div id=${state.id}></div>`)
|
||||
});
|
||||
myLayout.init()
|
||||
|
||||
let testEl = $("#test1");
|
||||
|
||||
var element = document.getElementById('test1').parentElement;
|
||||
new ResizeSensor(element, function ()
|
||||
{
|
||||
console.log('Changed to ' + element.clientWidth);
|
||||
});
|
||||
console.log(testEl);
|
||||
console.log(testEl.parent());
|
||||
console.log(testEl.parent().parent().parent());
|
||||
testEl.parent().parent().parent().on("resize", () =>
|
||||
{
|
||||
console.log("ddd");
|
||||
});
|
||||
myLayout.root.contentItems[0].contentItems.forEach(o =>
|
||||
{
|
||||
// console.log(o);
|
||||
// o.on("resize", () =>
|
||||
// {
|
||||
// console.log(o);
|
||||
// })
|
||||
})
|
||||
|
||||
/*
|
||||
* Since our layout is not a direct child
|
||||
* of the body we need to tell it when to resize
|
||||
*/
|
||||
//监听resize
|
||||
$(window).resize(function ()
|
||||
{
|
||||
myLayout.updateSize();
|
@ -1,30 +0,0 @@
|
||||
var layoutConfig = {
|
||||
settings: {
|
||||
hasHeaders: false,
|
||||
showMaximiseIcon: true,
|
||||
showCloseIcon: true
|
||||
},
|
||||
dimensions: { borderWidth: 1 },
|
||||
content: [{
|
||||
type: 'column',
|
||||
content: [{
|
||||
type: 'row',
|
||||
height: 8,
|
||||
content: [{
|
||||
type: 'component',
|
||||
componentName: 'container',
|
||||
props: { id: "webgl2" }
|
||||
}],
|
||||
},
|
||||
{
|
||||
type: 'row',
|
||||
height: 2,
|
||||
content: [{
|
||||
type: 'component',
|
||||
componentName: 'container',
|
||||
props: { id: "webgl" }
|
||||
}]
|
||||
}
|
||||
]
|
||||
}]
|
||||
};
|
Loading…
Reference in new issue