|
|
const e="a8f59ba7-5e3d-4447-a87b-3ceb02a0e6b0",a="custom-text-node",t="文本展示",n='<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688095457552" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2314" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M692.2597343921661 882.78857421875H331.711297750473v-30.689996480941772a563.3140236139297 563.3140236139297 0 0 1 48.088091611862176-14.83154296875c16.200274229049683-4.278552532196046 33.656305074691765-7.757592201232912 52.39561200141907-10.638445615768433v-630.340576171875h-136.73552870750427l-57.244107127189636 151.53810381889343H211.2339789867401c-2.1675199270248413-14.118209481239319-3.9642512798309326-30.233752727508545-5.419161915779114-48.23148250579833-1.4541864395141602-17.939794063568115-2.6809751987457275-36.30831241607666-3.7933409214019784-55.10410666465761-1.1123657226562498-18.59736442565918-1.9683659076690674-37.078857421875-2.6527315378189087-55.019375681877136C198.6264432668686 171.53063368797297 198.2563788890838 155.35860311985022 198.2563788890838 141.21142578125h627.4886906147003c0 14.147177338600159-0.3997564315795899 30.090361833572388-1.1123657226562498 47.689059376716614-0.7415771484374999 17.655909061431885-1.6547888517379765 35.852792859077454-2.766430377960205 54.56313192844391s-2.139276266098023 37.078857421875-3.251641988754273 55.10410666465761c-1.0841220617294314 17.998453974723816-2.7099430561065674 34.48406159877777-4.9064308404922485 49.28736090660096h-28.408053517341607l-56.75889551639557-151.53810381889343H592.8891206979752V826.6850764751434c18.71033906936645 3.5659432411193848 36.22285723686218 7.07395076751709 52.366644144058235 10.638445615768433 16.229242086410522 3.508731722831726 31.85957372188568 8.415162563323973 47.00469374656678 14.83154296875v30.633509159088135z" p-id="2315" fill="#707070"></path></svg>',l="svg",i="基础",o="常用",r=!1,u=!0,d="文字",s=`{"id":"u:270584784ce1","type":"page","name":"page1","asideResizor":false,"style":{"boxShadow":" 0px 0px 0px 0px transparent"},"pullRefresh":{"disabled":true},"body":[{"type":"tabs","name":"tab","tabs":[{"title":"样式","icon":"fa fa-th-large","body":[{"type":"form","title":"","name":"basicPropForm","body":[{"type":"input-text","label":"名称","name":"nodeAlias","id":"u:6b126f0520cb","size":"full","mode":"horizontal","inputControlClassName":"w-100","className":"m-b"},{"type":"input-text","label":"ID ","name":"id","id":"u:6232710ac003","size":"full","mode":"horizontal","inputControlClassName":"w-100","className":"m-b"},{"type":"grid","id":"u:c605398a724c","className":"m-b","columns":[{"body":[{"type":"input-number","label":"宽度","name":"width","keyboard":true,"id":"u:dcc0c21d16f6","step":1,"suffix":"px","placeholder":"组件左边距","size":"full","mode":"horizontal","className":"m-b","value":200,"labelAlign":"left","precision":2,"inputClassName":"w-full","labelClassName":"w-8"}],"id":"u:14cc19d6ffb0","md":6},{"body":[{"type":"input-number","label":"高度","name":"height","keyboard":true,"id":"u:cd6fdff9ca88","step":1,"suffix":"px","placeholder":"组件上边距","size":"full","mode":"horizontal","className":"m-b","value":200,"labelAlign":"left","precision":2,"inputClassName":"w-full","labelClassName":"w-8"}],"id":"u:4931801ca9b8","md":6}]},{"type":"grid","id":"u:da449a94908a","className":"m-b","columns":[{"body":[{"type":"input-number","label":"X 轴","name":"x","keyboard":true,"id":"u:29852d093d9d","step":1,"suffix":"px","placeholder":"组件左边距","size":"full","mode":"horizontal","className":"m-b","value":200,"labelAlign":"left","precision":2,"inputClassName":"w-full","labelClassName":"w-8"}],"id":"u:1b561d652acc","md":6},{"body":[{"type":"input-number","label":"Y 轴","name":"y","keyboard":true,"id":"u:dc8c1daed8ed","step":1,"suffix":"px","placeholder":"组件上边距","size":"full","mode":"horizontal","className":"m-b","value":200,"labelAlign":"left","precision":2,"
"nodes": [ { "id": "bced9918-f81e-4ecd-8e2f-99dcc376e670", "type": "custom-text-node", "x": 200, "y": 200, "text": { "value": "测试文本", "x": 200, "y": 200 }, "properties": { "id": "bced9918-f81e-4ecd-8e2f-99dcc376e670", "width": 303, "height": 38, "x": 200, "y": 200, "rotation": 0, "opacity": 1, "showDefaultValue": false, "showUnit": false, "valueColor": "", "valueDecimal": 4, "valueFormatWan": false, "fontSize": 12, "fontSpace": 0, "strokeWidth": 1, "nodeAlias": "文本", "fill": "", "content": "测试文本", "fontColor": "rgba(245, 166, 35, 1)", "fontFamily": "Microsoft Yahei", "fontStyle": "", "textShadow": "", "gradientFontColor": "", "textAnchor": "start", "dynamic": { "normalData": { "dataPoint": "", "compareType": "", "conditionVariables": [], "defaultValue": "", "unit": "" }, "eventsData": { "eventCombo": [ { "eventType": "click", "enable": false, "config": "" } ] }, "uiData": { "dataPoint": "", "compareType": "", "conditionVariables": [ { "type": "equal", "label": "相等", "name": "" } ] }, "animationData": { "animationCombo": [ { "dataPoint": "", "min": "", "max": "", "animationName": "旋转" } ] }, "hiddenData": { "hiddenCombo": [ { "dataPoint": "", "min": "", "max": "", "showOrHiddenName": "隐藏" } ] } } } } ]}`,javascript:`// 文本节点
class CustomTextNode extends TextNode {}class CustomTextModel extends TextNodeModel { realValue = ''
initNodeData(data) { // 自定义组件，需最开始重置一下text 。
data.text = { value: "", x: data.x, y: data.y, }; super.initNodeData(data); this.editable = false; window.nodeEventsListeners(this); }
getOutlineStyle() { const style = super.getOutlineStyle(); const { id, fontSize } = this.properties; const textEditElement = this.graphModel.textEditElement; if(textEditElement && textEditElement.id === id) { style.stroke = "transparent"; style.hover.stroke = 'transparent'; } else { style.stroke = "#00ffff"; style.hover.stroke = '#00ffff'; } const txtDom = document.getElementById(this.id); if(txtDom) { const txtNode = txtDom.querySelector('text'); if (txtNode) { const { width, height, x, y } = txtNode.getBBox(); style.width = width; style.height = height; style.x = x + width / 2 - this.width/2; style.y = y + height / 2; } } return style; }
getTextStyle() { const style = super.getTextStyle(); const { properties, text } = this; const { showDefaultValue, showUnit, fontSize, content } = properties;
style.color = properties.fontColor || style.color; if(properties.gradientFontColor) { const gradientId = \`gradidentFont-\${properties.id}\`;
const existID = document.getElementById(gradientId); const graph = document.querySelector('.lf-canvas-overlay'); if (existID) { existID.parentNode.remove(); } const gradientDef = window.generateSVGGradient(properties.gradientFontColor, gradientId); graph && graph.prepend(gradientDef); style.fill = \`url(#\${gradientId})\`;
} const { uiData, normalData } = properties.dynamic || {}; if (uiData) { const realValue = window.resolveScadaNewValue(uiData.defaultValue) if (realValue !== '') { uiData.conditionVariables.forEach((item) => { if (item.type === 'rangeColor') { let from = item.from; let to = item.to; if (item.from >= item.to) { from = item.to; to = item.from; } if (Number(realValue) >= from && Number(realValue) <= to) { style.color = item.color; if(item.gradientFontColor) { const gradientId = \`gradidentFont-\${properties.id}\`;
const existID = document.getElementById(gradientId); const graph = document.querySelector('.lf-canvas-overlay'); if (existID) { existID.parentNode.remove(); } const gradientDef = window.generateSVGGradient(item.gradientFontColor, gradientId); graph && graph.prepend(gradientDef); style.fill = \`url(#\${gradientId})\`;
} } } else if (item.type === 'equal') { if(Number(realValue) === Number(item.value)) { style.color = item.color; if(item.gradientFontColor) { const gradientId = \`gradidentFont-\${properties.id}\`;
const existID = document.getElementById(gradientId); const graph = document.querySelector('.lf-canvas-overlay'); if (existID) { existID.parentNode.remove(); } const gradientDef = window.generateSVGGradient(item.gradientFontColor, gradientId); graph && graph.prepend(gradientDef); style.fill = \`url(#\${gradientId})\`;
} } } else if (item.type === 'boolean') { const trueFlags = ['true', true] const falseFlags = ['false', false] const truetrue = trueFlags.includes(item.value) && trueFlags.includes(realValue) const falsefalse = falseFlags.includes(item.value) && falseFlags.includes(realValue) if (truetrue || falsefalse) { style.color = item.color; if(item.gradientFontColor) { const gradientId = \`gradidentFont-\${properties.id}\`;
const existID = document.getElementById(gradientId); const graph = document.querySelector('.lf-canvas-overlay'); if (existID) { existID.parentNode.remove(); } const gradientDef = window.generateSVGGradient(item.gradientFontColor, gradientId); graph && graph.prepend(gradientDef); style.fill = \`url(#\${gradientId})\`;
} } } }) } }
style.fontSize = properties.fontSize || style.fontSize; style.fontFamily = properties.fontFamily || style.fontFamily; style.opacity = properties.opacity || 1; style.letterSpacing = properties.fontSpace || 0; style.textAnchor = properties.textAnchor || 'start'; if(properties.textShadow) { style.style = \`text-shadow: \${properties.textShadow}\`;
} const fontStyle = properties.fontStyle; if(fontStyle) { if (fontStyle.includes('bold')) { style.fontWeight = 'bolder'; } if(fontStyle.includes('italic')) { style.fontStyle = 'italic' } if (fontStyle.includes('underline,line-through')) { style.textDecoration = 'underline line-through' } else if (fontStyle.includes('line-through,underline')) { style.textDecoration = 'line-through underline' } else if (fontStyle.includes('underline')) { style.textDecoration = 'underline' } else if (fontStyle.includes('line-through')) { style.textDecoration = 'line-through' } } return style; }
setAttributes() { const { id, x, y, properties, text, width, height } = this; let textValue = properties.content || ''; if (textValue === id) return;
const { normalData, uiData } = properties.dynamic || {};
if (normalData) { const normalValue = window.resolveScadaNewValue(normalData.defaultValue) if (normalValue) { this.realValue = normalValue; } }
if (uiData) { const realValue = window.resolveScadaNewValue(uiData.defaultValue) if (realValue !== '') { uiData.conditionVariables.forEach((item) => { if (item.type === 'equal') { if(Number(realValue) === Number(item.value)) { textValue = item.valueLabel; } } else if (item.type === 'boolean') { const trueFlags = ['true', true] const falseFlags = ['false', false] const truetrue = trueFlags.includes(item.value) && trueFlags.includes(realValue) const falsefalse = falseFlags.includes(item.value) && falseFlags.includes(realValue) if (truetrue || falsefalse) { textValue = item.valueLabel; } } }) } }
this.text = { ...this.text, x, y, value: textValue, } }}
lf.register({ type: 'custom-text-node', view: CustomTextNode, model: CustomTextModel})`,css:"",fakeData:""},m={id:e,name:a,aliasName:t,image:n,imageType:l,groupName:i,groupType:o,isRemote:!1,isDefault:!0,sectionType:d,config:s,files:c};export{t as aliasName,s as config,m as default,c as files,i as groupName,o as groupType,e as id,n as image,l as imageType,u as isDefault,r as isRemote,a as name,d as sectionType};
|
