You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
342 lines
24 KiB
342 lines
24 KiB
const e="52d9f250-25be-450a-9aa4-809fefd989fa",n="custom-iframe-node",t="网页",a='<?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="1698398010161" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5163" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M64 904V120c0-30.93 25.07-56 56-56h784c30.93 0 56 25.07 56 56v784c0 30.93-25.07 56-56 56H120c-30.93 0-56-25.07-56-56z" fill="#E1F5FF" p-id="5164"></path><path d="M960 260H64V120c0-30.93 25.07-56 56-56h784c30.93 0 56 25.07 56 56v140z" fill="#8C9EFF" p-id="5165"></path><path d="M176 162m-28 0a28 28 0 1 0 56 0 28 28 0 1 0-56 0Z" fill="#FF4343" p-id="5166"></path><path d="M260 162m-28 0a28 28 0 1 0 56 0 28 28 0 1 0-56 0Z" fill="#FFD600" p-id="5167"></path><path d="M344 162m-28 0a28 28 0 1 0 56 0 28 28 0 1 0-56 0Z" fill="#65FF40" p-id="5168"></path><path d="M582 451.33H274c-23.2 0-42 18.8-42 42s18.8 42 42 42h308c23.2 0 42-18.8 42-42 0-23.19-18.8-42-42-42zM750 684.67H274c-23.2 0-42 18.8-42 42s18.8 42 42 42h476c23.2 0 42-18.8 42-42s-18.8-42-42-42z" fill="#313FA0" p-id="5169"></path></svg>',i="svg",l="动态",s="数据展示",p=!1,c=!0,o="时间",r=`{"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,"inputClassName":"w-full","labelClassName":"w-8"}],"id":"u:9672575193ac","md":6}]},{"type":"grid","id":"u:a332a7bf83c1","className":"m-b","columns":[{"body":[{"type":"input-number","label":"旋转","name":"rotation","id":"u:f6a2dbb518f9","placeholder":"组件旋转角度","mode":"horizontal","size":"full","className":"","keyboard":true,"step":1,"suffix":"deg","value":0,"labelAlign":"left","inputClassName":"w-full"}],"id":"u:646cd98b7955","md":6},{"body":[{"type":"input-number","label":"透明","name":"opacity","id":"u:cf80f59d8d42","placeholder":"组件透明度","mode":"horizontal","size":"full","className":"m-b","keyboard":true,"step":0,"suffix":"","value":1,"inputClassName":"w-full","precision":2}],"id":"u:51ddf54ac749","md":6}],"gap":""},{"type":"input-text","label":"链接地址","name":"linkAddress","id":"u:a447b3de3e1f","mode":"horizontal"},{"type":"switch","label":"禁止点击","option":"","name":"disableClick","falseValue":false,"trueValue":true,"id":"u:dd96c427c877","value":false,"mode":"horizontal"}],"id":"u:a5ebe5f02407","submitText":"","onEvent":{"change":{"weight":0,"actions":[]}},"debug":false,"mode":"normal","panelClassName":"p","labelAlign":"left","className":"","wrapWithPanel":true}],"id":"u:c309ae58472c","className":"p-none no-border"},{"title":"交互","icon":"fa fa-calendar-minus-o","body":[{"type":"service","body":[{"type":"collapse","key":"1","active":true,"header":"常规","body":[{"type":"service","id":"u:6cb6d200ede2","data":{"dataPoint":"","compareType":"","conditionVariables":[],"defaultValue":"","unit":""},"body":[{"type":"fieldset","title":"Iframe 内部脚本","collapsable":true,"body":[{"type":"combo","label":"iframe 内置插件","name":"iframePlugins","multiple":true,"addable":true,"removable":true,"removableMode":"icon","addBtn":{"label":"新增","icon":"fa fa-plus","level":"primary","size":"sm","id":"u:ea5723f0c48c"},"items":[{"type":"input-text","name":"input-text","placeholder":"文本","id":"u:a3d8d02396c2"}],"id":"u:9beaf42b315d","strictMode":true,"syncFields":[]},{"type":"tpl","tpl":"脚本","inline":true,"wrapperComponent":"h3","id":"u:f899a9ccfb53"},{"type":"editor","label":"","name":"iframeScript","id":"u:844ba1d4c384","language":"javascript","inputClassName":"text-left","className":"my-0","description":"可以在脚本里面创建iframe 外链的 js 脚本代码，或动态创建任何信息，包含html. css, svg, 3d canvas 等。如果需要与外部交互，可以通过 window?.parent.postMessage('任何数据信息xxx', '*');"}],"id":"u:c1bd7dfd2a51","className":"m-b","bodyClassName":"text-left"},{"type":"fieldset","title":"Iframe 外部脚本","collapsable":true,"body":[{"type":"tpl","tpl":"function (context, iframeData ) {","inline":true,"wrapperComponent":"","id":"u:112d81401e0d"},{"type":"editor","label":"","name":"iframeOuterScript","id":"u:4db340521e32","language":"javascript","inputClassName":"text-left","className":"my-0","description":"内部脚本发送的数据默认会触发事件的改变，外部脚本可以不用填，作为备选的与外部交互的方式之一。"},{"type":"tpl","tpl":"}","inline":true,"wrapperComponent":"","id":"u:b1f472522670"}],"id":"u:b7894335f3a4","className":"m-b","bodyClassName":"text-left"}],"name":"normalService","className":"p-none"},{"type":"service","body":[],"id":"u:0dd069ac163f"}],"id":"u:7b021709614e","headingClassName":"p-sm bg-white b-b b-light","className":"m-b r-3x","bodyClassName":"p-none"},{"type":"collapse","key":"2","header":"事件","body":[{"type":"service","id":"u:4ec2acc50405","body":[{"type":"combo","label":"","name":"eventCombo","multiple":true,"addable":false,"removable":false,"removableMode":"icon","addBtn":{"label":"新增","icon":"fa fa-plus","level":"primary","size":"sm","id":"u:ae1b0a0c0f55"},"items":[{"type":"select","name":"eventType","placeholder":"选择事件","options":[{"label":"改变","value":"change"}],"id":"u:a7b44847011a","label":"名称","multiple":false,"value":"change"},{"type":"checkBox","id":"u:79dadbc61f74","name":"enable","label":"启用"},{"type":"fieldset","title":"目标节点发起请求","collapsable":true,"body":[{"type":"input-text","label":"目标节点","name":"targetNode","id":"u:6efb6f120e47","multiple":false,"mode":"horizontal","inputClassName":"w-full","visibleOn":"this.eventType === 'change'","removable":"true","placeholder":"目标节点id"},{"type":"select","label":"入参类型","name":"targetParamsType","options":[{"label":"物实体","value":"entitys"},{"label":"物属性","value":"attrs"},{"label":"时间","value":"times"}],"id":"u:d10a57a9b966","multiple":false,"mode":"horizontal","inputClassName":"w-full","removable":true},{"type":"radios","label":"入参实体","name":"targetParamsEntitys","options":[{"label":"物组","value":"group"},{"label":"列表","value":"list"},{"label":"关系","value":"relation"},{"label":"搜索","value":"search"},{"label":"标签","value":"tag"},{"label":"类型","value":"type"}],"id":"u:26df91ece010","onEvent":{"change":{"actions":[{"actionType":"custom","script":"console.log('event', event);"}]}},"checkAll":false,"joinValues":true,"inputClassName":"w-full text-left","mode":"horizontal","labelClassName":"","visibleOn":"this.targetParamsType === 'entitys'"},{"type":"radios","label":"属性类型","name":"targetParamsAttrsType","options":[{"label":"分属性","value":"split"},{"label":"全部","value":"all"}],"id":"u:26df91ece010","checkAll":false,"joinValues":true,"inputClassName":"w-full text-left","mode":"horizontal","labelClassName":"","visibleOn":"this.targetParamsType === 'attrs'"},{"type":"radios","label":"入参属性","name":"targetParamsAttrsKeysEntitys","options":[{"label":"物","value":"entitys"},{"label":"属性","value":"keys"}],"id":"u:26df91ece010","checkAll":false,"joinValues":true,"inputClassName":"w-full text-left","mode":"horizontal","labelClassName":"","visibleOn":"this.targetParamsType === 'attrs'"},{"type":"radios","label":"入参时间","name":"targetParamsTimesType","options":[{"label":"最近","value":"nearest"},{"label":"时间段","value":"range"},{"label":"区间","value":"interval"}],"id":"u:26df91ece010","multiple":false,"checkAll":false,"joinValues":true,"inputClassName":"w-full text-left","mode":"horizontal","labelClassName":"","visibleOn":"this.targetParamsType === 'times'"},{"type":"input-text","label":"超级api","name":"apiId","id":"u:912394455375","placeholder":"超级apiId"}],"id":"u:fbccd2ccc8a3"},{"type":"fieldset","title":"更多操作","collapsable":true,"body":[{"type":"tpl","tpl":"function (context, service, nodeId, event) {","inline":true,"wrapperComponent":"","id":"u:799cd3277731"},{"type":"editor","id":"u:77aca39f5961","label":"","name":"moreOperation","language":"javascript","className":"my-0"},{"type":"tpl","tpl":"}","inline":true,"wrapperComponent":"","id":"u:cd392cfb6ffb"}],"id":"u:51249df94c65","bodyClassName":"text-left"}],"id":"u:364496dd313b","deleteBtn":{"type":"icon","icon":"fa fa-trash","id":"u:6d4a75088bc2","className":"border-none"},"strictMode":true,"syncFields":[],"labelClassName":""}],"data":{"eventCombo":[{"eventType":"change","enable":false,"config":""}]},"name":"eventsService"}],"id":"u:14834e895716","headingClassName":"p-sm bg-white b-b b-light","className":"m-b r-3x","bodyClassName":"p-none"}],"id":"u:3eb6b9a42dcb","name":"dynamicService"}],"id":"u:043251c106af","className":"p-sm"},{"title":"脚本解析","icon":"fa fa-star","body":[{"type":"flex","id":"u:edef8e21c1e3","justify":"flex-end","items":[{"type":"button","id":"u:f6d8d837a48d","label":"导入","onEvent":{"click":{"actions":[]}},"icon":"fa fa-download","level":"primary","className":"mr-2"},{"type":"button","id":"u:23f988f98a28","label":"保存","onEvent":{"click":{"actions":[{"actionType":"setValue","componentId":"u:6dc2a126004a","args":{"value":{"save":true}}}]}},"icon":"fa fa-save"}]},{"type":"service","id":"u:6dc2a126004a","body":[{"type":"tpl","id":"u:c77724a2f3b3","tpl":"function (context, service, nodeId) {","inline":true,"wrapperComponent":"","style":{"fontFamily":"","fontSize":16}},{"type":"editor","label":"","name":"script","id":"u:55ceb80e58a7","language":"javascript","size":"xxl","className":"m-b-none","onEvent":{"focus":{"actions":[{"actionType":"setValue","componentId":"u:6dc2a126004a","args":{"value":{"save":false}}}]}},"description":"参数提示：\\n1. context 是整个看板上下文，可以获取看板所有元素节点和连线节点，也可以访问 context.globalDatas 获取全局socket 数据。 \\n2. service 是 Ajax 请求服务。\\n3. nodeId 是节点 id . \\n4. 如果返回一个函数，则可以当socket 数据更新时，调用此函数，此函数入参分别是 context, service, nodeId, globalDatas ;，以满足多样化的业务需求。"},{"type":"tpl","tpl":"}","inline":true,"wrapperComponent":"","id":"u:fa21aebb859b","style":{"fontFamily":"","fontSize":16}}],"name":"scriptService","data":{"script":"","save":false},"className":"text-left"}],"id":"u:dc8d331cbe5e"}],"id":"u:178107498966","tabsMode":"radio","className":"p-none w-full","contentClassName":"p-none"}],"className":""}`,d={jsPlugin:'[{"url":"./logicflow/core.umd.js","isModule":false,"disabled":true},{"url":"./logicflow/extensionLib/NodeResize.js","isModule":false,"disabled":true}]',json:`{
|
|
"nodes": [
|
|
{
|
|
"id": "28c1cc50-eecd-4534-afef-bd752f52aaa2",
|
|
"type": "custom-iframe-node",
|
|
"x": 200,
|
|
"y": 200,
|
|
"text": {
|
|
"value": "",
|
|
"x": 200,
|
|
"y": 200
|
|
},
|
|
"properties": {
|
|
"id": "28c1cc50-eecd-4534-afef-bd752f52aaa2",
|
|
"width": 500,
|
|
"height": 300,
|
|
"x": 200,
|
|
"y": 200,
|
|
"rotation": 0,
|
|
"opacity": 1,
|
|
"disableClick": false,
|
|
"nodeAlias": "外链",
|
|
"showDefaultValue": false,
|
|
"showUnit": false,
|
|
"valueColor": "rgba(245, 166, 35, 1)",
|
|
"fontSize": 12,
|
|
"linkAddress": "",
|
|
"dynamic": {
|
|
"normalData": {
|
|
"dataPoint": "",
|
|
"compareType": "",
|
|
"conditionVariables": [],
|
|
"defaultValue": "",
|
|
"unit": "",
|
|
"iframeScript": "",
|
|
"iframeOuterScript": "",
|
|
"iframePlugins": [
|
|
{
|
|
"input-text": "./plugins/vue.min.js"
|
|
},
|
|
{
|
|
"input-text": "./plugins/axios.min.js"
|
|
},
|
|
{
|
|
"input-text": "./plugins/lodash.js"
|
|
},
|
|
{
|
|
"input-text": "./plugins/dayjs.min.js"
|
|
},
|
|
{
|
|
"input-text": "./plugins/service.js"
|
|
},
|
|
{
|
|
"input-text": "./iconfonts/iconfont.css"
|
|
},
|
|
{
|
|
"input-text": "./plugins/layui/css/layui.css"
|
|
},
|
|
{
|
|
"input-text": "./plugins/layui/layui.js"
|
|
}
|
|
]
|
|
},
|
|
"eventsData": {
|
|
"eventCombo": [
|
|
{
|
|
"eventType": "change",
|
|
"enable": false,
|
|
"config": ""
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}`,javascript:`const { createApp, createVNode, render } = Vue;
|
|
const app = createApp({})
|
|
|
|
const timeArr = new Array(24).fill('');
|
|
const totals = [];
|
|
timeArr.forEach((i, index) => { const t = window.dayjs().hour(index).valueOf(); totals.push({ val: Math.random(1000) * 100, ts: t, attrKey: "A29" }) });
|
|
const defaultSocketValue = []
|
|
|
|
const generateHTML = (innerPage, plugins, iframeScript) => {
|
|
return \`<html>
|
|
<head>
|
|
</head>
|
|
<body>
|
|
\${innerPage}
|
|
<script type="module" id="_script">
|
|
window.addEventListener('message', function(event) {
|
|
if (event.data.event === 'tokenSend') {
|
|
window.iframeNodeToken = event.data.token;
|
|
}
|
|
});
|
|
|
|
const loadInnerScript = () => {
|
|
if (\${JSON.stringify(iframeScript)}) {
|
|
const innderScript = document.createElement('script');
|
|
innderScript.type = 'module';
|
|
innderScript.innerHTML = \${JSON.stringify(iframeScript)};
|
|
setTimeout(() => {
|
|
document.body.append(innderScript);
|
|
}, 200);
|
|
};
|
|
};
|
|
|
|
let loadPlugin = function (url, index) {
|
|
if (url.endsWith('.css')) {
|
|
const linkDom = document.createElement('link');
|
|
linkDom.rel = "stylesheet";
|
|
linkDom.href = url;
|
|
linkDom.onload = () => {
|
|
if (index === \${JSON.stringify(plugins)}.length - 1) {
|
|
loadInnerScript();
|
|
} else {
|
|
loadPlugin(\${JSON.stringify(plugins)}[index + 1]['input-text'], index + 1);
|
|
}
|
|
};
|
|
document.body.append(linkDom);
|
|
} else {
|
|
const scriptDom = document.createElement('script');
|
|
scriptDom.src = url;
|
|
scriptDom.onload = () => {
|
|
if (index === \${JSON.stringify(plugins)}.length - 1) {
|
|
loadInnerScript();
|
|
} else {
|
|
loadPlugin(\${JSON.stringify(plugins)}[index + 1]['input-text'], index + 1);
|
|
}
|
|
};
|
|
document.body.append(scriptDom);
|
|
}
|
|
};
|
|
if (\${JSON.stringify(plugins)}.length > 0) {
|
|
loadPlugin(\${JSON.stringify(plugins)}[0]['input-text'], 0);
|
|
}
|
|
window?.parent.postMessage('childFrameLoaded', '*');
|
|
</\\script>
|
|
</body>
|
|
</html\`
|
|
}
|
|
|
|
const IframeNode = {
|
|
template: \`<div :style="getIframeOuterStyle">
|
|
<iframe v-if="!linkAddress && iframeScript" :id="chartId" ref="iframeRef" width="100%" height="100%" sandbox="allow-scripts allow-modals allow-same-origin" frameborder="0" draggable="false"></iframe>
|
|
<iframe v-if="linkAddress && !iframeScript" :src="linkAddress" :id="chartId" ref="iframeRef" width="100%" height="100%" sandbox="allow-scripts allow-modals allow-same-origin" frameborder="0" draggable="false"></iframe>
|
|
<div v-if="!linkAddress && !iframeScript" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; border: 1px solid #00ffff; box-sizing: border-box;color: #F5A623">暂无内容</div>
|
|
</div>
|
|
\`,
|
|
props: {
|
|
chartId: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
width: {
|
|
type: Number,
|
|
default: 350
|
|
},
|
|
height: {
|
|
type: Number,
|
|
default: 150
|
|
},
|
|
codeConfig: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
linkAddress: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
iframeScript: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
iframePlugins: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
disableClick: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
computed: {
|
|
getIframeOuterStyle() {
|
|
return {
|
|
width: '100%',
|
|
height: '100%',
|
|
cursor: 'default',
|
|
'pointer-events': this.disableClick ? 'none' : 'auto',
|
|
}
|
|
},
|
|
},
|
|
emits: ['iframeDataSend'],
|
|
setup(props, { emit }) {
|
|
const { nextTick, ref, onMounted } = Vue;
|
|
|
|
const iframeRef = ref(null);
|
|
|
|
onMounted(() => {
|
|
nextTick(() => {
|
|
if (iframeRef.value) {
|
|
// 给iframe 注入token
|
|
const cacheToken = sessionStorage.getItem('v1@CacheToken');
|
|
const tokenParsed = JSON.parse(cacheToken || '{}');
|
|
const tokenArr = window.location.search.split('token=');
|
|
const token = tokenParsed.token || sessionStorage.getItem('token') || window.developToken || tokenArr[1];
|
|
window.addEventListener('message', function (event) {
|
|
emit('iframeDataSend', event.data);
|
|
if (event.data === 'childFrameLoaded') {
|
|
if (iframeRef.value.contentWindow) {
|
|
iframeRef.value.contentWindow.postMessage({ event: 'tokenSend', token: token });
|
|
}
|
|
}
|
|
})
|
|
if (props.linkAddress && props.iframeScript) {
|
|
const xhr = new XMLHttpRequest();
|
|
xhr.open("GET", props.linkAddress, true);
|
|
xhr.send();
|
|
xhr.addEventListener("load", () => {
|
|
const resText = xhr.responseText;
|
|
iframeRef.value.srcdoc = generateHTML(resText, props.iframePlugins, props.iframeScript)
|
|
});
|
|
} else if (!props.linkAddress && props.iframeScript) {
|
|
iframeRef.value.srcdoc = generateHTML('', props.iframePlugins, props.iframeScript)
|
|
}
|
|
}
|
|
})
|
|
})
|
|
|
|
return {
|
|
iframeRef
|
|
}
|
|
}
|
|
}
|
|
|
|
class CustomIframeNode extends HtmlResize.view {
|
|
oldProperties = {}
|
|
|
|
setHtml(rootEl) {
|
|
if (!rootEl) return;
|
|
const { properties, width, height, } = this.props.model;
|
|
const { nodeAlias, codeConfig, linkAddress, disableClick } = properties;
|
|
const { iframeScript, iframeOuterScript, iframePlugins } = properties.dynamic.normalData || {};
|
|
const { model, graphModel } = this.props;
|
|
|
|
const fn = new Function('context', 'iframeData', iframeOuterScript);
|
|
const handleIframeData = (iframeData) => {
|
|
if (iframeOuterScript) {
|
|
fn(window.lf || this, iframeData);
|
|
} else {
|
|
graphModel.eventCenter.emit("node:change", {
|
|
data: model,
|
|
e: iframeData,
|
|
});
|
|
}
|
|
}
|
|
|
|
const el = document.createElement('div');
|
|
el.style.width = "100%";
|
|
el.style.height = "100%";
|
|
rootEl.innerHTML = '';
|
|
const instance = createVNode(IframeNode, {
|
|
name: nodeAlias,
|
|
chartId: \`iframe-\${properties.id}\`,
|
|
width,
|
|
height,
|
|
codeConfig,
|
|
linkAddress,
|
|
iframeScript,
|
|
iframePlugins,
|
|
disableClick,
|
|
onIframeDataSend: handleIframeData
|
|
})
|
|
instance.appContext = app._context
|
|
render(instance, el)
|
|
rootEl.appendChild(el);
|
|
}
|
|
|
|
sameProps(properties) {
|
|
const isSame = window._.isEqual(this.oldProperties, properties);
|
|
if (isSame) return true;
|
|
this.oldProperties = properties;
|
|
return false
|
|
}
|
|
|
|
// 生命周期 支持重写内容, 但格式需一致
|
|
shouldUpdate() {
|
|
const { properties } = this.props.model;
|
|
const propertiesBack = window._.cloneDeep(properties);
|
|
// 由于事件change 会给properties 增加一个 event 属性（见目录scadaDashboard/Diagram/useDynamicEventsHandler），会引发属性的改变，导致组件重渲染。
|
|
delete propertiesBack.event;
|
|
if (this.sameProps(propertiesBack)) {
|
|
return false
|
|
}
|
|
return true;
|
|
}
|
|
}
|
|
|
|
class CustomIframeModel extends HtmlResize.model {
|
|
initNodeData(data) {
|
|
// 自定义组件，需最开始重置一下text 。
|
|
data.text = {
|
|
value: "",
|
|
x: data.x,
|
|
y: data.y,
|
|
};
|
|
|
|
super.initNodeData(data);
|
|
const { properties } = this;
|
|
this.width = properties.width || 80;
|
|
this.height = properties.height || 35;
|
|
this.text.editable = false; // 不允许文本被编辑
|
|
}
|
|
|
|
setAttributes() {
|
|
// 自定义组件需重置 text
|
|
const { x, y, properties } = this;
|
|
const { textHorizontalMove = 0, textVerticalMove = 0 } = properties;
|
|
this.text = {
|
|
...this.text,
|
|
x: x + textHorizontalMove,
|
|
y: y + textVerticalMove,
|
|
value: "",
|
|
}
|
|
}
|
|
|
|
getResizeOutlineStyle() {
|
|
return {
|
|
stroke: "#00ffff",
|
|
strokeWidth: 1,
|
|
strokeDasharray: "none",
|
|
};
|
|
}
|
|
}
|
|
|
|
lf.register({
|
|
type: 'custom-iframe-node',
|
|
view: CustomIframeNode,
|
|
model: CustomIframeModel,
|
|
})`,css:"",fakeData:""},u={id:e,name:n,aliasName:t,image:a,imageType:i,groupName:l,groupType:s,isRemote:!1,isDefault:!0,sectionType:o,config:r,files:d};export{t as aliasName,r as config,u as default,d as files,l as groupName,s as groupType,e as id,a as image,i as imageType,c as isDefault,p as isRemote,n as name,o as sectionType};
|