github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2026-04-20 04:18:05 +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) { function stylePropsReducer(props: any, node: any) {
if (props && typeof props === 'object' && props.__style__) { 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 cssId = '_style_pesudo_' + node.id.replace(/\$/g, '_');
const cssClass = '_css_pesudo_' + node.id.replace(/\$/g, '_'); const cssClass = '_css_pesudo_' + node.id.replace(/\$/g, '_');
const dom = doc.getElementById(cssId); const styleProp = props.__style__;
if (dom) { appendStyleNode(props, styleProp, cssClass, cssId);
dom.parentNode?.removeChild(dom); }
} if (props && typeof props === 'object' && props.pageStyle) {
let styleProp = props.__style__; const cssId = '_style_pesudo_engine-document';
if (typeof styleProp === 'object') { const cssClass = 'engine-document';
styleProp = toCss(styleProp); const styleProp = props.pageStyle;
} appendStyleNode(props, styleProp, cssClass, cssId);
if (typeof styleProp === 'string') { }
const s = doc.createElement('style'); if (props && typeof props === 'object' && props.containerStyle) {
props.className = cssClass; const cssId = '_style_pesudo_' + node.id;
s.setAttribute('type', 'text/css'); const cssClass = '_css_pesudo_' + node.id.replace(/\$/g, '_');
s.setAttribute('id', cssId); const styleProp = props.containerStyle;
doc.getElementsByTagName('head')[0].appendChild(s); appendStyleNode(props, styleProp, cssClass, cssId);
s.appendChild(doc.createTextNode(styleProp.replace(/:root/g, '.' + cssClass)));
}
} }
return props; 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); designer.addPropsReducer(stylePropsReducer, TransformStage.Render);
// FIXME: 表达式使用 mock 值，未来live 模式直接使用原始值 // FIXME: 表达式使用 mock 值，未来live 模式直接使用原始值