index.ts
3.64 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
import { createApp } from 'vue'
import type { MxShapeInstance, MxSvgCanvas2DInstance, mxConstants } from './types'
import { ForegroundAttributeEnum } from '@/enums/foregroundEnum'
import * as DrawUtil from '@/utils/draw'
import { createComponentInstance, fetchViewComponent } from '@/core/Library'
import { ModeEnum } from '@/enums/modeEnum'
import type { PackageCategoryEnum } from '@/core/Library/enum'
const setContainerSize = (instance: MxShapeInstance, svgCanvas: MxSvgCanvas2DInstance, x: number, y: number, w: number, h: number) => {
const foreground = svgCanvas?.root?.lastChild?.lastChild
const { scale = 1 } = svgCanvas?.state || {}
const setSvgContainerTranslate = () => {
const svgContainer = svgCanvas.root.lastChild
if (svgContainer) {
const attributes = (svgContainer as Recordable).attributes as NamedNodeMap
const transform = document.createAttribute('transform')
transform.value = `translate(${x * scale}, ${y * scale})`
attributes.setNamedItem(transform)
}
}
const coverHtmlContainerStyle = () => {
const htmlContainer = foreground?.lastChild as HTMLDivElement
if (htmlContainer) {
htmlContainer.style.paddingTop = '0px'
htmlContainer.style.marginLeft = '0px'
htmlContainer.style.width = '100%'
htmlContainer.style.height = '100%'
}
}
const setForegroundAttribute = () => {
const attributes = (foreground as Recordable)?.attributes as NamedNodeMap
const width = document.createAttribute(ForegroundAttributeEnum.WIDTH)
const height = document.createAttribute(ForegroundAttributeEnum.HEIGHT)
const componentCustomAttr = document.createAttribute(ForegroundAttributeEnum.THINGS_KIT_COMPONENT)
width.value = `${w * scale}`
height.value = `${h * scale}`
componentCustomAttr.value = instance.shapeKey
attributes.setNamedItem(width)
attributes.setNamedItem(height)
attributes.setNamedItem(componentCustomAttr)
}
setSvgContainerTranslate()
coverHtmlContainerStyle()
setForegroundAttribute()
}
; (window as Recordable).setContainerSize = setContainerSize
const createComponent = (instance: MxShapeInstance, svgCanvas: MxSvgCanvas2DInstance, x: number, y: number, w: number, h: number) => {
const mxConstants = ((window as Recordable).mxConstants as mxConstants)
const instanceId = DrawUtil.genComponentInstanceId(instance.state.cell)
const { COMPONENT_KEY, CATEGORY } = window.CellAttributeKeyEnum
const state = instance.state
const cell = state.cell
const componentKey = cell.getAttribute(COMPONENT_KEY)
const categoryKey = cell.getAttribute(CATEGORY) as PackageCategoryEnum
const Component = fetchViewComponent({ key: componentKey, category: categoryKey })
const config = createComponentInstance({ key: componentKey, category: categoryKey }, { mode: ModeEnum.EDIT, instanceInfo: { id: instanceId }, cellInfo: { id: instance.state.cell.id }, cellBounds: instance.bounds, scale: instance.scale })
if (!Component || !config)
console.warn(`can not find component by componentKey: ${componentKey}`)
svgCanvas.text(x, y, w, h, `<main id="${instanceId}" style="width: 100%; height: 100%;"></main>`, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, 'html', 0, 0, 0, 0)
const appInstanceId = DrawUtil.getAppInstanceId(instance.state.cell)
if (!window.VueInstanceMap) window.VueInstanceMap = {}
if (window.VueInstanceMap[appInstanceId])
window.VueInstanceMap[appInstanceId].unmount()
const app = createApp(Component, { config })
app.mount(document.getElementById(instanceId)!)
window.VueInstanceMap[appInstanceId] = app
}
; (window as Recordable).createComponent = createComponent
; (window as Recordable).DrawUtil = DrawUtil