-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpanzoom-control.html
136 lines (122 loc) · 4.66 KB
/
panzoom-control.html
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pan-Zoom Control</title>
<!-- MDI Icons -->
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/6.5.95/css/materialdesignicons.min.css">
<!-- Tailwind -->
<script src="https://cdn-tailwindcss.vercel.app/"></script>
</head>
<body>
<h1 class="text-center text-3xl font-bold my-20">
< Canvas Container >
</h1>
<div class="flex">
<span class="text-center font-bold my-20 mx-auto">
Pan-zoom icons required MDI (npm i @mdi/font)
<hr class="my-4">
<a href="https://egoistdeveloper.github.io/twcss-to-sass-playground/" target="_blank" class="text-blue-600">
Convetert to SASS
</a>
</span>
</div>
<!-- Panzoom Area -->
<div class="flex fixed right-2 bottom-2 cursor-default">
<!-- Minimap -->
<div class="ngn-minimap">
<div class="flex-initial relative
bg-white bg-opacity-80
rounded shadow
p-2 py-5 mr-2">
<div class="h-full w-full">
<div class="bg-gray-50 border border-gray-200
py-24 px-5">
Add some minimap
</div>
</div>
</div>
</div>
<!-- Pan Controls -->
<div class="flex-initial bg-white bg-opacity-90
rounded shadow p-2 py-2
cursor-default flex flex-col
hover:bg-opacity-100
lg:bottom-3 lg:right-3
transition duration-200 ease-in-out">
<!-- Pan Only -->
<button class="w-9 h-9 min-w-min
rounded-full text-lg mb-2
bg-gray-300 bg-opacity-30
border border-gray-300 border-opacity-30
hover:bg-yellow-400 hover:bg-opacity-50
outline-none hover:shadow-md
transition duration-200 ease-in-out"
title="Pan-only Mode">
<i class="mdi mdi-focus-field"></i>
</button>
<!-- Pan Reset -->
<button class="w-9 h-9 min-w-min
rounded-full text-lg mb-2
bg-gray-300 bg-opacity-30
border border-gray-300 border-opacity-30
hover:bg-yellow-400 hover:bg-opacity-50
outline-none hover:shadow-md
transition duration-200 ease-in-out"
title="Reset Pan View">
<i class="mdi mdi-image-filter-center-focus"></i>
</button>
<!-- Zoom Controls-->
<div class="flex flex-col">
<button class="w-9 h-9 min-w-min
rounded-none rounded-t-full text-lg
bg-gray-300 bg-opacity-30
border border-gray-300 border-opacity-30
hover:bg-yellow-400 hover:bg-opacity-50
outline-none hover:shadow-md
transition duration-200 ease-in-out
mb-0 border
border-gray-300 border-opacity-30
hover:border-yellow-200"
title="Zoom In">
<i class="mdi mdi-minus"></i>
</button>
<div class="bg-gray-300 bg-opacity-30
border border-b border-gray-300 border-opacity-30
font-medium py-2 cursor-default
w-9 h-9 min-w-min
text-xs text-center
inline-block align-baseline">
123%
</div>
<button class="w-9 h-9 min-w-min
rounded-none rounded-b-full text-lg
bg-gray-300 bg-opacity-30
border border-gray-300 border-opacity-30
hover:bg-yellow-400 hover:bg-opacity-50
outline-none hover:shadow-md
transition duration-200 ease-in-out
mb-0 border
border-gray-300 border-opacity-30
hover:border-yellow-200"
title="Zoom Out">
<i class="mdi mdi-plus"></i>
</button>
</div>
<!-- Show Minimap -->
<button class="w-9 h-9 min-w-min
rounded-full text-lg mt-2
bg-gray-300 bg-opacity-30
border border-gray-300 border-opacity-30
hover:bg-yellow-400 hover:bg-opacity-50
outline-none hover:shadow-md
transition duration-200 ease-in-out"
title="Show Mini Map">
<i class="mdi mdi-map-outline"></i>
</button>
</div>
</div>
</body>
</html>