import { ShapeData } from '../types' ; import { Node , Edge } from '@antv/x6' ; import { $ , Card , CardType , CardValue , isEngine , NodeInterface , Parser , } from '@aomao/engine' ; import GraphEditor from './editor' ; export interface MindValue extends CardValue { data : Array < ShapeData > ; } export default class MindCard extends Card < MindValue > { private graphEditor ? : GraphEditor ; static get cardName ( ) { return 'mind' ; } static get cardType ( ) { return CardType . BLOCK ; } contenteditable = [ 'div.mind-content' ] ; onChange ( _ , node ) { const height = node . height ( ) ; const width = node . width ( ) ; console . log ( width , height ) ; const { schema , conversion } = this . editor ; const parser = new Parser ( node . clone ( true ) , this . editor ) ; const value = parser . toValue ( schema , conversion , false , true ) ; this . graphEditor ?. setEditableNodeValue ( value ) ; } render ( ) { const height = 600 ; if ( ! this . graphEditor ) { this . graphEditor = new GraphEditor ( this . getCenter ( ) , { height , onChange : ( data ) => { this . setValue ( { data } ) ; } , } ) ; } const value = this . getValue ( ) ; const data = value ?. data || [ { id : 'main' , shape : 'html' , totalHeight : height , totalWidth : 690 , x : 40 , y : 40 , width : 180 , height : 40 , data : { hierarchy : 1 , value : `<p><span style="color:#ffffff"><span style="font-size:16px">思维导图</span></span></p>` , classNames : 'mind-main-node' , } , } , ] ; this . graphEditor . render ( data ) ; } didRender ( ) { super . didRender ( ) ; this . graphEditor ?. didRender ( ) ; } destroy ( ) { this . graphEditor ?. destroy ( ) ; this . graphEditor = undefined ; } }