@alisaitteke/seatmap-canvas 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintrc.json +15 -0
- package/.github/FUNDING.yml +4 -0
- package/.github/ISSUE_TEMPLATE/bug_report.md +38 -0
- package/.github/ISSUE_TEMPLATE/feature_request.md +20 -0
- package/.github/workflows/codeql-analysis.yml +29 -0
- package/.github/workflows/npm-publish-packages.yml +35 -0
- package/.github/workflows/webpack.yml +22 -0
- package/AUTHORS +3 -0
- package/LICENSE +21 -0
- package/README.md +160 -0
- package/SECURITY.md +21 -0
- package/_config.yml +1 -0
- package/assets/banner_ui.png +0 -0
- package/assets/bn.jpg +0 -0
- package/assets/logo.jpg +0 -0
- package/assets/logo_small.jpg +0 -0
- package/assets/zoom_out.svg +11 -0
- package/examples/basic/bootstrap.min.css +7 -0
- package/examples/basic/index.html +201 -0
- package/examples/basic/jquery.min.js +2 -0
- package/examples/data/data.json +70007 -0
- package/examples/data/small.json +1307 -0
- package/examples/data/tiny.json +119 -0
- package/examples/old/index.html +262 -0
- package/package.json +59 -0
- package/src/lib/canvas.index.ts +122 -0
- package/src/lib/config.ts +11 -0
- package/src/lib/decorators/dom.ts +40 -0
- package/src/lib/decorators/index.ts +6 -0
- package/src/lib/dev.tools.ts +18 -0
- package/src/lib/enums/global.ts +67 -0
- package/src/lib/models/block.model.ts +170 -0
- package/src/lib/models/coordinate.model.ts +43 -0
- package/src/lib/models/data.model.ts +105 -0
- package/src/lib/models/defaults.model.ts +125 -0
- package/src/lib/models/global.model.ts +24 -0
- package/src/lib/models/label.model.ts +58 -0
- package/src/lib/models/legend.model.ts +56 -0
- package/src/lib/models/model.base.ts +32 -0
- package/src/lib/models/seat.model.ts +182 -0
- package/src/lib/svg/event.manager.ts +56 -0
- package/src/lib/svg/legend/legend.circle.ts +28 -0
- package/src/lib/svg/legend/legend.item.ts +50 -0
- package/src/lib/svg/legend/legend.title.ts +27 -0
- package/src/lib/svg/legend.ts +55 -0
- package/src/lib/svg/stage/blocks/block-item/block-item.bounds.ts +51 -0
- package/src/lib/svg/stage/blocks/block-item/block-item.index.ts +173 -0
- package/src/lib/svg/stage/blocks/block-item/block-item.info.index.ts +38 -0
- package/src/lib/svg/stage/blocks/block-item/block-item.labels.index.ts +41 -0
- package/src/lib/svg/stage/blocks/block-item/block-item.mask.ts +67 -0
- package/src/lib/svg/stage/blocks/block-item/block-item.seats.index.ts +81 -0
- package/src/lib/svg/stage/blocks/block-item/bound/bound-item.index.ts +43 -0
- package/src/lib/svg/stage/blocks/block-item/info/title.ts +30 -0
- package/src/lib/svg/stage/blocks/block-item/label/label-item.circle.ts +27 -0
- package/src/lib/svg/stage/blocks/block-item/label/label-item.index.ts +46 -0
- package/src/lib/svg/stage/blocks/block-item/label/label-item.title.ts +27 -0
- package/src/lib/svg/stage/blocks/block-item/seat/seat-item.check.ts +45 -0
- package/src/lib/svg/stage/blocks/block-item/seat/seat-item.circle.ts +30 -0
- package/src/lib/svg/stage/blocks/block-item/seat/seat-item.index.ts +159 -0
- package/src/lib/svg/stage/blocks/block-item/seat/seat-item.title.ts +27 -0
- package/src/lib/svg/stage/blocks/blocks.index.ts +68 -0
- package/src/lib/svg/stage/blocks.search-circle.ts +86 -0
- package/src/lib/svg/stage/multi-select/rect.ts +36 -0
- package/src/lib/svg/stage/multi-select.ts +107 -0
- package/src/lib/svg/stage/search-circle/circle.ts +37 -0
- package/src/lib/svg/stage/stage.index.ts +41 -0
- package/src/lib/svg/svg.base.ts +217 -0
- package/src/lib/svg/svg.index.ts +76 -0
- package/src/lib/svg/tooltip/rect.ts +66 -0
- package/src/lib/svg/tooltip/title.ts +57 -0
- package/src/lib/svg/tooltip.ts +92 -0
- package/src/lib/svg/zoom-out.bg.ts +35 -0
- package/src/lib/svg/zoom.manager.ts +440 -0
- package/src/lib/window.manager.ts +40 -0
- package/src/scss/lib.scss +10 -0
- package/src/scss/style.scss +221 -0
- package/tsconfig.json +28 -0
- package/webpack.environments/development.js +58 -0
- package/webpack.environments/production.js +52 -0
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
{
|
|
2
|
+
"totalItemCount": 0,
|
|
3
|
+
"seats": [
|
|
4
|
+
{
|
|
5
|
+
"isSold": false,
|
|
6
|
+
"seatClassType": 100,
|
|
7
|
+
"id": 5691694,
|
|
8
|
+
"positionTop": 0,
|
|
9
|
+
"positionLeft": 0,
|
|
10
|
+
"displayName": "49",
|
|
11
|
+
"rowName": "A",
|
|
12
|
+
"rowNo": 1,
|
|
13
|
+
"refSeatClassID": 158,
|
|
14
|
+
"blockId": 0,
|
|
15
|
+
"refChannelGroupId": 25351,
|
|
16
|
+
"gateTurnstile": "[{\"gateID\":24435,\"gateName\":\"DENIZLI GATE 1\",\"turnstileID\":24900,\"turnstileName\":\"DENIZLI TURNSTILE 1\"}]"
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"isSold": false,
|
|
20
|
+
"seatClassType": 100,
|
|
21
|
+
"id": 5691695,
|
|
22
|
+
"positionTop": 0,
|
|
23
|
+
"positionLeft": 30,
|
|
24
|
+
"displayName": "47",
|
|
25
|
+
"rowName": "A",
|
|
26
|
+
"rowNo": 1,
|
|
27
|
+
"refSeatClassID": 158,
|
|
28
|
+
"blockId": 0,
|
|
29
|
+
"refChannelGroupId": 25351,
|
|
30
|
+
"gateTurnstile": "[{\"gateID\":24435,\"gateName\":\"DENIZLI GATE 1\",\"turnstileID\":24900,\"turnstileName\":\"DENIZLI TURNSTILE 1\"}]"
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"isSold": false,
|
|
34
|
+
"seatClassType": 100,
|
|
35
|
+
"id": 5691696,
|
|
36
|
+
"positionTop": 0,
|
|
37
|
+
"positionLeft": 60,
|
|
38
|
+
"displayName": "45",
|
|
39
|
+
"rowName": "A",
|
|
40
|
+
"rowNo": 1,
|
|
41
|
+
"refSeatClassID": 158,
|
|
42
|
+
"blockId": 0,
|
|
43
|
+
"refChannelGroupId": 25351,
|
|
44
|
+
"gateTurnstile": "[{\"gateID\":24435,\"gateName\":\"DENIZLI GATE 1\",\"turnstileID\":24900,\"turnstileName\":\"DENIZLI TURNSTILE 1\"}]"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"isSold": false,
|
|
48
|
+
"seatClassType": 100,
|
|
49
|
+
"id": 5691724,
|
|
50
|
+
"positionTop": 30,
|
|
51
|
+
"positionLeft": 150,
|
|
52
|
+
"displayName": "39",
|
|
53
|
+
"rowName": "B",
|
|
54
|
+
"rowNo": 2,
|
|
55
|
+
"refSeatClassID": 158,
|
|
56
|
+
"blockId": 0,
|
|
57
|
+
"refChannelGroupId": 25351,
|
|
58
|
+
"gateTurnstile": "[{\"gateID\":24435,\"gateName\":\"DENIZLI GATE 1\",\"turnstileID\":24900,\"turnstileName\":\"DENIZLI TURNSTILE 1\"}]"
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"isSold": false,
|
|
62
|
+
"seatClassType": 100,
|
|
63
|
+
"id": 5691725,
|
|
64
|
+
"positionTop": 30,
|
|
65
|
+
"positionLeft": 180,
|
|
66
|
+
"displayName": "37",
|
|
67
|
+
"rowName": "B",
|
|
68
|
+
"rowNo": 2,
|
|
69
|
+
"refSeatClassID": 158,
|
|
70
|
+
"blockId": 0,
|
|
71
|
+
"refChannelGroupId": 25351,
|
|
72
|
+
"gateTurnstile": "[{\"gateID\":24435,\"gateName\":\"DENIZLI GATE 1\",\"turnstileID\":24900,\"turnstileName\":\"DENIZLI TURNSTILE 1\"}]"
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
"isSold": false,
|
|
76
|
+
"seatClassType": 100,
|
|
77
|
+
"id": 5691726,
|
|
78
|
+
"positionTop": 30,
|
|
79
|
+
"positionLeft": 210,
|
|
80
|
+
"displayName": "35",
|
|
81
|
+
"rowName": "B",
|
|
82
|
+
"rowNo": 2,
|
|
83
|
+
"refSeatClassID": 158,
|
|
84
|
+
"blockId": 0,
|
|
85
|
+
"refChannelGroupId": 25351,
|
|
86
|
+
"gateTurnstile": "[{\"gateID\":24435,\"gateName\":\"DENIZLI GATE 1\",\"turnstileID\":24900,\"turnstileName\":\"DENIZLI TURNSTILE 1\"}]"
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
"isSold": false,
|
|
90
|
+
"seatClassType": 100,
|
|
91
|
+
"id": 5691727,
|
|
92
|
+
"positionTop": 30,
|
|
93
|
+
"positionLeft": 240,
|
|
94
|
+
"displayName": "33",
|
|
95
|
+
"rowName": "B",
|
|
96
|
+
"rowNo": 2,
|
|
97
|
+
"refSeatClassID": 158,
|
|
98
|
+
"blockId": 0,
|
|
99
|
+
"refChannelGroupId": 25351,
|
|
100
|
+
"gateTurnstile": "[{\"gateID\":24435,\"gateName\":\"DENIZLI GATE 1\",\"turnstileID\":24900,\"turnstileName\":\"DENIZLI TURNSTILE 1\"}]"
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
"isSold": false,
|
|
104
|
+
"seatClassType": 100,
|
|
105
|
+
"id": 5691728,
|
|
106
|
+
"positionTop": 30,
|
|
107
|
+
"positionLeft": 270,
|
|
108
|
+
"displayName": "31",
|
|
109
|
+
"rowName": "B",
|
|
110
|
+
"rowNo": 2,
|
|
111
|
+
"refSeatClassID": 158,
|
|
112
|
+
"blockId": 0,
|
|
113
|
+
"refChannelGroupId": 25351,
|
|
114
|
+
"gateTurnstile": "[{\"gateID\":24435,\"gateName\":\"DENIZLI GATE 1\",\"turnstileID\":24900,\"turnstileName\":\"DENIZLI TURNSTILE 1\"}]"
|
|
115
|
+
}
|
|
116
|
+
],
|
|
117
|
+
"isError": false,
|
|
118
|
+
"resultCode": 0
|
|
119
|
+
}
|
|
@@ -0,0 +1,262 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<!-- Required meta tags -->
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
7
|
+
|
|
8
|
+
<!-- Bootstrap CSS -->
|
|
9
|
+
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
|
|
10
|
+
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
|
|
11
|
+
|
|
12
|
+
<title>Hello, world!</title>
|
|
13
|
+
|
|
14
|
+
<style>
|
|
15
|
+
|
|
16
|
+
.seats_container {
|
|
17
|
+
position: absolute;
|
|
18
|
+
left: 0;
|
|
19
|
+
top: 0;
|
|
20
|
+
width: 100%;
|
|
21
|
+
height: 100%;
|
|
22
|
+
background-color: #fff;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.buttons {
|
|
26
|
+
position: absolute;
|
|
27
|
+
width: 100%;
|
|
28
|
+
left: 0;
|
|
29
|
+
top: 0;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
</style>
|
|
33
|
+
</head>
|
|
34
|
+
<body>
|
|
35
|
+
<div class="seats_container">
|
|
36
|
+
<div class="buttons">
|
|
37
|
+
<div class="container">
|
|
38
|
+
<div class="row">
|
|
39
|
+
<div class="col">
|
|
40
|
+
<button class="btn btn-default btn-block" id="zoomout-button">Zoom-out</button>
|
|
41
|
+
</div>
|
|
42
|
+
<div class="col">
|
|
43
|
+
<button class="btn btn-default btn-block" id="best-find-start">Best Available Search</button>
|
|
44
|
+
</div>
|
|
45
|
+
<div class="col">
|
|
46
|
+
<button class="btn btn-default btn-block" id="best-find-cancel">Best Available Cancel</button>
|
|
47
|
+
</div>
|
|
48
|
+
<div class="col">
|
|
49
|
+
<button class="btn btn-default btn-block" id="get-data">Get Selected Seat(s) Json</button>
|
|
50
|
+
</div>
|
|
51
|
+
<div class="col">
|
|
52
|
+
<button class="btn btn-default btn-block" id="set-filter">Filter On</button>
|
|
53
|
+
</div>
|
|
54
|
+
<div class="col">
|
|
55
|
+
<button class="btn btn-default btn-block" id="set-filter-disable">Filter of</button>
|
|
56
|
+
</div>
|
|
57
|
+
<div class="col">
|
|
58
|
+
<button class="btn btn-default btn-block" id="zoom-block-1">Zoom Block 1</button>
|
|
59
|
+
</div>
|
|
60
|
+
<div class="col">
|
|
61
|
+
<button class="btn btn-default btn-block" id="zoom-block-2">Zoom Block 2</button>
|
|
62
|
+
</div>
|
|
63
|
+
<div class="col">
|
|
64
|
+
<button class="btn btn-default btn-block" id="zoom-block-3">Zoom Block 3</button>
|
|
65
|
+
</div>
|
|
66
|
+
<div class="col">
|
|
67
|
+
<button class="btn btn-default btn-block" id="zoom-block-4">Zoom Block 4</button>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
<!-- Optional JavaScript -->
|
|
76
|
+
<!-- jQuery first then Bootstrap JS -->
|
|
77
|
+
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" crossorigin="anonymous"></script>
|
|
78
|
+
|
|
79
|
+
<script type="text/javascript" src="/seatmap.canvas.js"></script>
|
|
80
|
+
<script type="text/javascript">
|
|
81
|
+
$(document).ready(function () {
|
|
82
|
+
|
|
83
|
+
let config = {
|
|
84
|
+
"container": ".seats_container",
|
|
85
|
+
"max_zoom": 1.2,
|
|
86
|
+
"resizable": true,
|
|
87
|
+
"seat_style": {
|
|
88
|
+
"radius": 12,
|
|
89
|
+
"color": "#FFFFFF",
|
|
90
|
+
"hover": "#dce7ff",
|
|
91
|
+
"not_salable": "#424747",
|
|
92
|
+
"selected": "#56aa45",
|
|
93
|
+
"focus": "#c3f7ff",
|
|
94
|
+
"focus_out": "#56aa45",
|
|
95
|
+
},
|
|
96
|
+
"block_style": {
|
|
97
|
+
"fill": "#e2e2e2",
|
|
98
|
+
"stroke": "#e2e2e2"
|
|
99
|
+
},
|
|
100
|
+
"label_style": {
|
|
101
|
+
"color": "#000",
|
|
102
|
+
"radius": 12,
|
|
103
|
+
"font-size": "12px",
|
|
104
|
+
"bg": "#ffffff"
|
|
105
|
+
},
|
|
106
|
+
"legend_style": {
|
|
107
|
+
"radius": 12,
|
|
108
|
+
"font_size": 11,
|
|
109
|
+
"padding": 100
|
|
110
|
+
}
|
|
111
|
+
};
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
let seatmap = new SeatmapCanvas(config);
|
|
115
|
+
|
|
116
|
+
seatmap.addEventListener("seat.click", (seat) => {
|
|
117
|
+
console.log(seat);
|
|
118
|
+
if (seat.selected) {
|
|
119
|
+
seatmap.seatUnselect(seat);
|
|
120
|
+
} else {
|
|
121
|
+
seatmap.seatSelect(seat);
|
|
122
|
+
}
|
|
123
|
+
});
|
|
124
|
+
seatmap.addEventListener("seat.hover", (seat) => {
|
|
125
|
+
//console.log(seat);
|
|
126
|
+
});
|
|
127
|
+
seatmap.addEventListener("seat.leave", (seat) => {
|
|
128
|
+
//console.log(seat);
|
|
129
|
+
});
|
|
130
|
+
|
|
131
|
+
seatmap.addEventListener("seat.context_menu", (seat) => {
|
|
132
|
+
console.log(seat);
|
|
133
|
+
});
|
|
134
|
+
|
|
135
|
+
seatmap.addEventListener("label.click", (label) => {
|
|
136
|
+
console.log(label);
|
|
137
|
+
});
|
|
138
|
+
|
|
139
|
+
seatmap.addEventListener("label.hover", (label) => {
|
|
140
|
+
seatmap.hideSeatsOfTags(["row_" + label.title], label.block.id).showSeatsOfTags(["row_" + label.title], label.block.id);
|
|
141
|
+
});
|
|
142
|
+
|
|
143
|
+
seatmap.addEventListener("label.leave", (label) => {
|
|
144
|
+
seatmap.showSeatsOfTags(["row_" + label.title], label.block.id);
|
|
145
|
+
});
|
|
146
|
+
|
|
147
|
+
$("#best-find-start").on("click", function () {
|
|
148
|
+
seatmap.findBestSeat(3);
|
|
149
|
+
});
|
|
150
|
+
$("#zoomout-button").on("click", function () {
|
|
151
|
+
seatmap.centerStage(true);
|
|
152
|
+
});
|
|
153
|
+
$("#best-find-cancel").on("click", function () {
|
|
154
|
+
seatmap.cancelBestSeat();
|
|
155
|
+
});
|
|
156
|
+
$("#get-data").on("click", function () {
|
|
157
|
+
var data = seatmap.getSelectedSeats(true);
|
|
158
|
+
console.log(JSON.stringify(data));
|
|
159
|
+
});
|
|
160
|
+
$("#set-filter").on("click", function () {
|
|
161
|
+
seatmap.hideSeatsOfTags(["a"]);
|
|
162
|
+
});
|
|
163
|
+
|
|
164
|
+
$("#set-filter-disable").on("click", function () {
|
|
165
|
+
seatmap.showSeatsOfTags(["a"]);
|
|
166
|
+
});
|
|
167
|
+
|
|
168
|
+
$("#zoom-block-1").on("click", function () {
|
|
169
|
+
seatmap.zoomToBlock(1);
|
|
170
|
+
});
|
|
171
|
+
|
|
172
|
+
$("#zoom-block-2").on("click", function () {
|
|
173
|
+
seatmap.zoomToBlock(2);
|
|
174
|
+
});
|
|
175
|
+
$("#zoom-block-3").on("click", function () {
|
|
176
|
+
seatmap.zoomToBlock(3);
|
|
177
|
+
});
|
|
178
|
+
$("#zoom-block-4").on("click", function () {
|
|
179
|
+
seatmap.zoomToBlock(4);
|
|
180
|
+
});
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
setTimeout(() => {
|
|
184
|
+
$.getJSON("/data/data.json", function (result) {
|
|
185
|
+
|
|
186
|
+
let data = {
|
|
187
|
+
"blocks": []
|
|
188
|
+
};
|
|
189
|
+
|
|
190
|
+
let block_colors = ["#2c2828", "#ff1f5a", "#fccf4d", "#ef255f"];
|
|
191
|
+
|
|
192
|
+
|
|
193
|
+
let x_gap = 0;
|
|
194
|
+
let y_gap = 0;
|
|
195
|
+
|
|
196
|
+
|
|
197
|
+
for (let i = 0; i < 1; i++) {
|
|
198
|
+
|
|
199
|
+
let labels = [];
|
|
200
|
+
let label_index = {};
|
|
201
|
+
|
|
202
|
+
let color = block_colors[i % block_colors.length];
|
|
203
|
+
|
|
204
|
+
//x_gap = 890;
|
|
205
|
+
|
|
206
|
+
if (i % 2 === 0) {
|
|
207
|
+
y_gap += 500;
|
|
208
|
+
x_gap = 0;
|
|
209
|
+
} else {
|
|
210
|
+
x_gap += 890;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
|
|
214
|
+
let seats = result.seats.map((item, index) => {
|
|
215
|
+
if (!label_index[item.rowName]) {
|
|
216
|
+
var label_data = {
|
|
217
|
+
title: item.rowName,
|
|
218
|
+
x: item.positionLeft + x_gap,
|
|
219
|
+
y: item.positionTop + y_gap
|
|
220
|
+
};
|
|
221
|
+
label_index[item.rowName] = label_data;
|
|
222
|
+
labels.push(label_data);
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
let tags = [];
|
|
226
|
+
if (index % 2 === 1) {
|
|
227
|
+
tags.push("a");
|
|
228
|
+
} else {
|
|
229
|
+
tags.push("b");
|
|
230
|
+
}
|
|
231
|
+
tags.push("row_" + item.rowName);
|
|
232
|
+
return {
|
|
233
|
+
id: index + 1,
|
|
234
|
+
x: item.positionLeft + x_gap + 40,
|
|
235
|
+
y: item.positionTop + y_gap,
|
|
236
|
+
color: item.color || null,
|
|
237
|
+
salable: item.isSold === true ? false : true,
|
|
238
|
+
note: "note test",
|
|
239
|
+
tags: tags,
|
|
240
|
+
title: item.displayName
|
|
241
|
+
}
|
|
242
|
+
});
|
|
243
|
+
|
|
244
|
+
data.blocks.push({
|
|
245
|
+
"id": i + 1,
|
|
246
|
+
"title": "Block " + (i + 1),
|
|
247
|
+
"labels": labels,
|
|
248
|
+
"color": color,
|
|
249
|
+
"seats": seats
|
|
250
|
+
});
|
|
251
|
+
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
seatmap.setData(data);
|
|
255
|
+
});
|
|
256
|
+
}, 250);
|
|
257
|
+
|
|
258
|
+
|
|
259
|
+
});
|
|
260
|
+
</script>
|
|
261
|
+
</body>
|
|
262
|
+
</html>
|
package/package.json
ADDED
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@alisaitteke/seatmap-canvas",
|
|
3
|
+
"version": "2.0.0",
|
|
4
|
+
"tags": "seating, seat, seatmap, seat-selection, seat-booking, booking, ticket, reservation",
|
|
5
|
+
"author": "Ali Sait TEKE <alisaitt@gmail.com>",
|
|
6
|
+
"homepage": "https://github.com/alisaitteke/seatmap-canvas",
|
|
7
|
+
"bugs": {
|
|
8
|
+
"url": "https://github.com/alisaitteke/seatmap-canvas/issues"
|
|
9
|
+
},
|
|
10
|
+
"private": false,
|
|
11
|
+
"description": "An Opensource seat selection project",
|
|
12
|
+
"repository": {
|
|
13
|
+
"type": "git",
|
|
14
|
+
"url": "git+https://github.com/alisaitteke/seatmap-canvas.git"
|
|
15
|
+
},
|
|
16
|
+
"sideEffects": false,
|
|
17
|
+
"scripts": {
|
|
18
|
+
"test": "echo \"Error: no test specified\" && exit 1",
|
|
19
|
+
"start": "webpack-dev-server --config ./webpack.environments/development.js",
|
|
20
|
+
"build": "webpack --progress --config ./webpack.environments/production.js"
|
|
21
|
+
},
|
|
22
|
+
"engines": {
|
|
23
|
+
"node": ">=4.0.0"
|
|
24
|
+
},
|
|
25
|
+
"license": "MIT",
|
|
26
|
+
"main": "dist/seatmap.canvas.1.0.1.js",
|
|
27
|
+
"devDependencies": {
|
|
28
|
+
"@types/d3": "^5.0.0",
|
|
29
|
+
"@types/node": "^18.6.3",
|
|
30
|
+
"css-loader": "6.7.1",
|
|
31
|
+
"d3": "^5.7.0",
|
|
32
|
+
"file-loader": "^6.2.0",
|
|
33
|
+
"mini-css-extract-plugin": "2.6.1",
|
|
34
|
+
"node-sass": "9.0.0",
|
|
35
|
+
"postcss-loader": "^7.0.1",
|
|
36
|
+
"reflect-metadata": "^0.1.12",
|
|
37
|
+
"rxjs": "^6.3.3",
|
|
38
|
+
"sass": "^1.54.0",
|
|
39
|
+
"sass-loader": "^13.0.2",
|
|
40
|
+
"style-loader": "^3.3.1",
|
|
41
|
+
"ts-loader": "^9.3.1",
|
|
42
|
+
"ts-node": "^10.9.1",
|
|
43
|
+
"typescript": "^4.7.4",
|
|
44
|
+
"webpack": "^5.74.0",
|
|
45
|
+
"webpack-cli": "^4.10.0",
|
|
46
|
+
"webpack-dev-server": "^4.9.3",
|
|
47
|
+
"webpack-merge": "^5.8.0"
|
|
48
|
+
},
|
|
49
|
+
"dependencies": {},
|
|
50
|
+
"directories": {
|
|
51
|
+
"doc": "docs",
|
|
52
|
+
"example": "examples"
|
|
53
|
+
},
|
|
54
|
+
"keywords": [
|
|
55
|
+
"seating",
|
|
56
|
+
"seatmap",
|
|
57
|
+
"seat-selection"
|
|
58
|
+
]
|
|
59
|
+
}
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* index.ts
|
|
3
|
+
* https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
|
|
4
|
+
*/
|
|
5
|
+
import "../scss/style.scss";
|
|
6
|
+
|
|
7
|
+
import {select as d3Select,event as d3Event} from 'd3-selection'
|
|
8
|
+
import Svg from "./svg/svg.index";
|
|
9
|
+
import SeatMapDevTools from "./dev.tools";
|
|
10
|
+
import DataModel from "./models/data.model";
|
|
11
|
+
|
|
12
|
+
import BlockModel from "./models/block.model";
|
|
13
|
+
import DefaultsModel from "./models/defaults.model";
|
|
14
|
+
import {GlobalModel} from "./models/global.model";
|
|
15
|
+
|
|
16
|
+
import ZoomManager from "./svg/zoom.manager";
|
|
17
|
+
import EventManager from "./svg/event.manager";
|
|
18
|
+
import {EventType, ZoomLevel} from "./enums/global";
|
|
19
|
+
import WindowManager from "./window.manager";
|
|
20
|
+
|
|
21
|
+
declare const window: any;
|
|
22
|
+
|
|
23
|
+
export class SeatMapCanvas {
|
|
24
|
+
|
|
25
|
+
public node: any = null;
|
|
26
|
+
public svg: Svg;
|
|
27
|
+
public dev: SeatMapDevTools;
|
|
28
|
+
public data: DataModel;
|
|
29
|
+
public config: DefaultsModel;
|
|
30
|
+
public global: GlobalModel;
|
|
31
|
+
public windowManager: WindowManager;
|
|
32
|
+
public zoomManager: ZoomManager;
|
|
33
|
+
public eventManager: EventManager;
|
|
34
|
+
public addEventListener: any;
|
|
35
|
+
|
|
36
|
+
constructor(public container_selector: any, _config: any = {}) {
|
|
37
|
+
let _self = this;
|
|
38
|
+
this.config = new DefaultsModel(_config);
|
|
39
|
+
this.eventManager = new EventManager(this);
|
|
40
|
+
this.addEventListener = this.eventManager.addEventListener;
|
|
41
|
+
this.node = d3Select(container_selector);
|
|
42
|
+
this.windowManager = new WindowManager(this);
|
|
43
|
+
this.zoomManager = new ZoomManager(this);
|
|
44
|
+
|
|
45
|
+
this.data = new DataModel(this);
|
|
46
|
+
|
|
47
|
+
this.global = {
|
|
48
|
+
eventManager: this.eventManager,
|
|
49
|
+
windowManager: this.windowManager,
|
|
50
|
+
config: this.config,
|
|
51
|
+
data: this.data,
|
|
52
|
+
zoomManager: this.zoomManager,
|
|
53
|
+
root: this,
|
|
54
|
+
svg: this.svg,
|
|
55
|
+
multi_select: false,
|
|
56
|
+
best_available: false
|
|
57
|
+
};
|
|
58
|
+
d3Select(window).on("keydown.dispatch", function (a, b, c) {
|
|
59
|
+
_self.eventManager.dispatch(EventType.KEYDOWN_SVG, d3Event);
|
|
60
|
+
});
|
|
61
|
+
d3Select(window).on("keyup.dispatch", function (a, b, c) {
|
|
62
|
+
_self.eventManager.dispatch(EventType.KEYUP_SVG, d3Event);
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
this.dev = new SeatMapDevTools(this);
|
|
66
|
+
this.svg = new Svg(this);
|
|
67
|
+
|
|
68
|
+
this.svg.domGenerate(this.node);
|
|
69
|
+
this.svg.update();
|
|
70
|
+
|
|
71
|
+
this.windowManager.resizeHandler();
|
|
72
|
+
this.zoomManager.init();
|
|
73
|
+
|
|
74
|
+
this.eventManager.addEventListener(EventType.CLICK_ZOOMOUT, () => this.zoomManager.zoomToVenue());
|
|
75
|
+
this.eventManager.addEventListener(EventType.MULTI_SELECT_ENABLE, () => {
|
|
76
|
+
this.global.multi_select = true;
|
|
77
|
+
this.node.classed("multi-select-enable", true);
|
|
78
|
+
});
|
|
79
|
+
this.eventManager.addEventListener(EventType.MULTI_SELECT_DISABLE, () => {
|
|
80
|
+
this.global.multi_select = false;
|
|
81
|
+
this.node.classed("multi-select-enable", false);
|
|
82
|
+
});
|
|
83
|
+
this.eventManager.addEventListener(EventType.BEST_AVAILABLE_ENABLE, () => {
|
|
84
|
+
this.global.best_available = true;
|
|
85
|
+
});
|
|
86
|
+
this.eventManager.addEventListener(EventType.MBEST_AVAILABLE_DISABLE, () => {
|
|
87
|
+
this.global.best_available = false;
|
|
88
|
+
});
|
|
89
|
+
|
|
90
|
+
// Zoomout button show/hide for zoom level
|
|
91
|
+
this.eventManager.addEventListener(EventType.ZOOM_LEVEL_CHANGE, (zoom_level: any) => {
|
|
92
|
+
if (zoom_level.level === ZoomLevel.VENUE) {
|
|
93
|
+
d3Select(this.config.zoom_out_button).style("display", "none");
|
|
94
|
+
} else if (zoom_level.level === ZoomLevel.BLOCK) {
|
|
95
|
+
d3Select(this.config.zoom_out_button).style("display", "none");
|
|
96
|
+
} else if (zoom_level.level === ZoomLevel.SEAT) {
|
|
97
|
+
d3Select(this.config.zoom_out_button).style("display", "block");
|
|
98
|
+
}
|
|
99
|
+
});
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
d3Select(this.config.zoom_out_button).on("click", () => {
|
|
103
|
+
this.zoomManager.zoomToVenue(true);
|
|
104
|
+
});
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
// update block data change trigger
|
|
109
|
+
this.eventManager.addEventListener(EventType.ADD_BLOCK, (addedBlocks: Array<BlockModel>) => {
|
|
110
|
+
this.svg.stage.blocks.update();
|
|
111
|
+
this.windowManager.resizeHandler();
|
|
112
|
+
this.zoomManager.calculateZoomLevels(this.data.getBlocks());
|
|
113
|
+
this.zoomManager.calculateActiveBlocks(this.data.getBlocks());
|
|
114
|
+
this.windowManager.resizeHandler();
|
|
115
|
+
this.zoomManager.zoomToVenue(false);
|
|
116
|
+
});
|
|
117
|
+
|
|
118
|
+
this.eventManager.dispatch(EventType.READY, this);
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
window['SeatMapCanvas'] = SeatMapCanvas;
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* $project.fileName
|
|
3
|
+
* https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
interface DomInterface {
|
|
8
|
+
tag?: string,
|
|
9
|
+
class?: string,
|
|
10
|
+
event_code?: string,
|
|
11
|
+
autoGenerate?: boolean
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export function dom(values: DomInterface) {
|
|
15
|
+
return function (target: any) {
|
|
16
|
+
target.prototype['dom_params'] = {};
|
|
17
|
+
if (values.tag) {
|
|
18
|
+
target.prototype['dom_params']['tag'] = values.tag
|
|
19
|
+
}
|
|
20
|
+
if (values.class) {
|
|
21
|
+
target.prototype['dom_params']['class'] = values.class
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
if (values.event_code) {
|
|
25
|
+
target.prototype['dom_params']['event_code'] = values.event_code
|
|
26
|
+
}else{
|
|
27
|
+
if (values.class) {
|
|
28
|
+
target.prototype['dom_params']['event_code'] = values.class
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
if (typeof values.autoGenerate !== "undefined") {
|
|
34
|
+
target.prototype['dom_params']['autoGenerate'] = values.autoGenerate;
|
|
35
|
+
} else {
|
|
36
|
+
target.prototype['dom_params']['autoGenerate'] = true;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
}
|
|
40
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* $project.fileName
|
|
3
|
+
* https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
import {SeatMapCanvas} from "./canvas.index";
|
|
7
|
+
|
|
8
|
+
export default class SeatMapDevTools {
|
|
9
|
+
constructor(private context: SeatMapCanvas) {
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
public log(...messages: any[]): this {
|
|
13
|
+
console.log(messages);
|
|
14
|
+
return this;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
}
|