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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
/* eslint new-cap: ["error", {"newIsCapExceptionPattern": "^mx"}] */
import 'mxgraph/javascript/src/css/common.css'
import mxGraphFactory from 'mxgraph'
import { defaultScale, getSvgMetadata } from './SvgParser'
const {
mxClient,
mxUtils,
mxEvent,
mxDragSource
} = new mxGraphFactory()
let graph
export function sideBar (getGraph) {
graph = getGraph
}
export function AddComponent (component, imgref) {
const img = imgref
const graphF = function (evt) {
const x = mxEvent.getClientX(evt)
const y = mxEvent.getClientY(evt)
const elt = document.elementFromPoint(x, y)
if (mxUtils.isAncestorNode(graph.container, elt)) {
return graph
}
return null
}
const funct = function (graph, evt, target, x, y) {
const parent = graph.getDefaultParent()
const model = graph.getModel()
const v1 = null
model.beginUpdate()
try {
// NOTE: For non-HTML labels the image must be displayed via the style
// rather than the label markup, so use 'image=' + image for the style.
// as follows: v1 = graph.insertVertex(parent, null, label,
// pt.x, pt.y, 120, 120, 'image=' + image)
// ***IMP
// GET THE SIZE OF SVG FOROM METADATA AND THEN DIVIDE BOTH WIDTH AND HEIGHT BE SAME RATIO
// THEN USE THAT VALUE BELOW
getSvgMetadata(graph, parent, evt, target, x, y, component)
// **IMP VERTICS DRAWING IS MOVED TO xml_parser.js
// WILL BE REFACTORED IN SOME TIME.
} finally {
model.endUpdate()
}
graph.setSelectionCell(v1)
/* const preview = new mxPrintPreview(graph)
preview.open() */
}
// Creates a DOM node that acts as the drag source
// Disables built-in DnD in IE (this is needed for cross-frame DnD, see below)
if (mxClient.IS_IE) {
mxEvent.addListener(img, 'dragstart', function (evt) {
evt.returnValue = false
})
}
// Creates the element that is being for the actual preview.
const dragElt = document.createElement('div')
dragElt.style.border = 'dashed black 1px'
dragElt.style.width = (component.block_width / defaultScale) + 'px'
dragElt.style.height = (component.block_height / defaultScale) + 'px'
// Drag source is configured to use dragElt for preview and as drag icon
// if scalePreview (last) argument is true. Dx and dy are null to force
// the use of the defaults. Note that dx and dy are only used for the
// drag icon but not for the preview.
const ds = mxUtils.makeDraggable(
img,
graphF,
funct,
dragElt,
null,
null,
graph.autoscroll,
true
)
// Redirects feature to global switch. Note that this feature should only be used
// if the the x and y arguments are used in funct to insert the cell.
ds.isGuidesEnabled = function () {
return graph.graphHandler.guidesEnabled
}
ds.createDragElement = mxDragSource.prototype.createDragElement
}
|
