mldong-flow-designer-plus/packages/flow-designer/src/node/CustomHtml.ts

本项目包含了作者为B站课堂视频[《工作流设计器开发最佳实践》](https://www.bilibili.com/cheese/play/ss24484)的过程源码。教程中开发的组件也可用于实际生产环境中。以下是和使用文档和课程章节说明。 ## 实战项目 [演示地址](https://flow-pro.mldong.com/)

import { HtmlResize } from "@logicflow/extension";

class CustomHtmlModel extends HtmlResize.model {
  setAttributes(): void {
    this.text.editable = false
  }
}
class CustomHtmlView extends HtmlResize.view {
  shouldUpdate(): boolean {
    const data = {
      ...this.props.model.getProperties(),
      isSelected: this.props.model.isSelected,
      isHovered: this.props.model.isHovered,
      // id: this.props.model.id,
      // __textValue__: this.props.model.text.value
    }
    if (this.preProperties && this.preProperties === JSON.stringify(data)) return false
    this.preProperties = JSON.stringify(data)
    return true
  }
  setHtml(rootEl: HTMLElement) {
    rootEl.innerHTML = '';
    const el: HTMLElement = document.createElement('div');
    el.style.width = '100%';
    el.style.height = '100%';
    if(this.props.model.isHovered) {
      el.style.background = 'yellow'
    } else {
      el.style.background = 'red'
    }
    el.innerHTML = this.props.model.isHovered+'-'+this.props.model.isSelected+JSON.stringify(this.props.model.properties)
    rootEl.appendChild(el)
  }
  getText(): ''{
    return ''
  }
}
export default {
  type: "custom-html",
  view: CustomHtmlView,
  model: CustomHtmlModel
}