github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2026-01-12 17:08:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: 支持body和背景样式

Browse Source
This commit is contained in:
wuyue.xht 2020-05-12 21:12:55 +08:00
parent b774428a0f
commit 661d98dfbb
1 changed files with 37 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
packages/vision-preset/src/editor.ts
View File

@ -74,32 +74,48 @@ designer.addPropsReducer(upgradePropsReducer, TransformStage.Init);
// 设计器组件样式处理
function stylePropsReducer(props: any, node: any) {
if (props && typeof props === 'object' && props.__style__) {
const doc = designer.currentDocument?.simulator?.contentDocument;
if (!doc) {
return;
}
const cssId = '_style_pesudo_' + node.id.replace(/\$/g, '_');
const cssClass = '_css_pesudo_' + node.id.replace(/\$/g, '_');
const dom = doc.getElementById(cssId);
if (dom) {
dom.parentNode?.removeChild(dom);
}
let styleProp = props.__style__;
if (typeof styleProp === 'object') {
styleProp = toCss(styleProp);
}
if (typeof styleProp === 'string') {
const s = doc.createElement('style');
props.className = cssClass;
s.setAttribute('type', 'text/css');
s.setAttribute('id', cssId);
doc.getElementsByTagName('head')[0].appendChild(s);
s.appendChild(doc.createTextNode(styleProp.replace(/:root/g, '.' + cssClass)));
}
const styleProp = props.__style__;
appendStyleNode(props, styleProp, cssClass, cssId);
}
if (props && typeof props === 'object' && props.pageStyle) {
const cssId = '_style_pesudo_engine-document';
const cssClass = 'engine-document';
const styleProp = props.pageStyle;
appendStyleNode(props, styleProp, cssClass, cssId);
}
if (props && typeof props === 'object' && props.containerStyle) {
const cssId = '_style_pesudo_' + node.id;
const cssClass = '_css_pesudo_' + node.id.replace(/\$/g, '_');
const styleProp = props.containerStyle;
appendStyleNode(props, styleProp, cssClass, cssId);
}
return props;
}
function appendStyleNode(props: any, styleProp: any, cssClass: string, cssId: string) {
const doc = designer.currentDocument?.simulator?.contentDocument;
if (!doc) {
return;
}
const dom = doc.getElementById(cssId);
if (dom) {
dom.parentNode?.removeChild(dom);
}
if (typeof styleProp === 'object') {
styleProp = toCss(styleProp);
}
if (typeof styleProp === 'string') {
const s = doc.createElement('style');
props.className = cssClass;
s.setAttribute('type', 'text/css');
s.setAttribute('id', cssId);
doc.getElementsByTagName('head')[0].appendChild(s);
s.appendChild(doc.createTextNode(styleProp.replace(/:root/g, '.' + cssClass)));
}
}
designer.addPropsReducer(stylePropsReducer, TransformStage.Render);
// FIXME: 表达式使用 mock 值，未来live 模式直接使用原始值