Sidebar-Basic-Components.js
5.68 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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
(function () {
// Adds Atlassian shapes
Sidebar.prototype.addBasicComponentsPalette = function () {
this.setCurrentSearchEntryLibrary('component');
const dt = 'basic'
const gn = `mxgraph.${dt}`
const currentDate = getCurrentDate();
const basicAttr = this.enumCellBasicAttribute
const componentType = this.enumComponentType
const { INTERACTION, DYNAMIC_EFFECT, DATA_SOURCE, VAR_IMAGE } = this.enumPermissionPanel
const transparentBg = 'text;strokeColor=none;fillColor=none;html=1;fontSize=24;fontStyle=1;verticalAlign=middle;align=center;'
const fns = [
this.addEntry(this.getTagsForStencil(gn, 'Title', dt).join(' '), mxUtils.bind(this, function () {
const cell = new mxCell('Title', new mxGeometry(0, 0, 100, 40), transparentBg);
cell.setVertex(true)
this.setCellAttributes(cell, { [basicAttr.COMPONENT_TYPE]: componentType.TITLE })
return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, 'Title');
})),
this.addEntry(this.getTagsForStencil(gn, 'variable', dt).join(' '), mxUtils.bind(this, function () {
const cell = new mxCell('变量', new mxGeometry(0, 0, 100, 40), transparentBg);
cell.setVertex(true)
this.setCellAttributes(cell, { [basicAttr.COMPONENT_TYPE]: componentType.VARIABLE })
return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '变量');
})),
this.addEntry(this.getTagsForStencil(gn, 'line', dt).join(' '), mxUtils.bind(this, function () {
const style = 'shape=filledEdge;rounded=1;fixDash=1;endArrow=none;strokeWidth=10;fillColor=none;edgeStyle=orthogonalEdgeStyle;flowAnimation=1;strokeColor=#6666FF;endFill=1;metaEdit=0;backgroundOutline=0;'
const cell = new mxCell('', new mxGeometry(0, 0, 60, 40), style);
cell.geometry.setTerminalPoint(new mxPoint(0, 40), true);
cell.geometry.setTerminalPoint(new mxPoint(60, 0), false);
cell.geometry.relative = true;
cell.edge = true;
cell.setVertex(true)
this.setCellAttributes(cell, { [basicAttr.COMPONENT_TYPE]: componentType.LINE })
return this.createEdgeTemplateFromCells([cell], 60, 40, '线条');
})),
this.addEntry('real time', mxUtils.bind(this, function () {
const template = `<div class="thingKit-component__real-time"><div class="real-time__date">%currentDate%</div> <div style="font-size:30px" class="real-time__now">HH:mm:ss</div></div>`
const cell = new mxCell(template, new mxGeometry(0, 0, 180, 60), 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;');
cell.vertex = true;
this.setCellAttributes(cell, {
[basicAttr.COMPONENT_TYPE]: componentType.LINE,
placeholders: '1',
currentDate: currentDate,
})
return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '实时时间');
})),
this.addEntry(this.getTagsForStencil('mxgraph.basic', '变量图片', 'basic').join(' '), mxUtils.bind(this, function () {
const cell = new mxCell('', new mxGeometry(0, 0, 194, 95), 'image;image=images/thingskit/img-placeholder.png;imageAspect=0;');
cell.setVertex(true)
this.setCellAttributes(cell, { [basicAttr.COMPONENT_TYPE]: componentType.VAR_IMAGE })
return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '变量图片');
})),
this.addEntry(this.getTagsForStencil('mxgraph.basic', '视频', 'basic').join(' '), mxUtils.bind(this, function () {
const m3u8 = 'http://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8'
const mp4 = 'http://vjs.zencdn.net/v/oceans.mp4'
const m3u8Type = 'application/x-mpegURL'
const mp4Type = 'video/mp4'
// const cell = new mxCell('<video></video>', new mxGeometry(0, 0, 100, 95), 'image;image=images/thingskit/video.svg;imageAspect=0;');
const template = `
<video
id="my-player"
class="video-js"
controls
preload="auto"
muted="muted"
poster="/thingskit-drawio/images/youtube.png"
data-setup='{}'>
<source src="${mp4}" type="${mp4Type}">
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank">
supports HTML5 video
</a>
</p>
</video>
`
const cell = new mxCell(template, new mxGeometry(0, 0, 100, 95), 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;');
cell.setVertex(true)
this.setCellAttributes(cell, { [basicAttr.COMPONENT_TYPE]: componentType.VIDEO })
return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '视频');
})),
];
this.addPaletteFunctions('component', '基础元件', true, fns);
this.setCurrentSearchEntryLibrary();
};
//封装日期函数
function getCurrentDate() {
var date = new Date(); //创建日期对象
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
var day = date.getDay();
return year + '年' + month + '月' + dates + '日 ' + arr[day];
}
/**
* @description 初始化实时事件组件
*/
function initRealTimeComponent() {
RAFSetInterval(() => {
const allTimeNode = document.querySelectorAll('.thingKit-component__real-time .real-time__now')
for (const time of allTimeNode) {
const date = new Date()
time.innerHTML = `${date.getHours() < 10 ? '0' : ''}${date.getHours()}:${date.getMinutes() < 10 ? '0' : ''}${date.getMinutes()}:${date.getSeconds() < 10 ? '0' : ''}${date.getSeconds()}`
}
}, 1000)
}
initRealTimeComponent()
})();