@c4h/chuci 0.1.0 → 0.2.1
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/CHANGELOG.md +32 -32
- package/LICENSE +20 -20
- package/README.ja.md +143 -143
- package/README.md +224 -224
- package/dist/chuci.js +9068 -6596
- package/dist/chuci.umd.js +165 -166
- package/dist/index.d.ts +1 -0
- package/package.json +36 -33
- package/src/components/swiper/cc-swiper-slide.ts +49 -49
- package/src/components/swiper/cc-swiper-styles.ts +28 -28
- package/src/components/swiper/cc-swiper.ts +379 -361
- package/src/components/swiper/swiper-styles.css +4 -4
- package/src/components/viewer/cc-viewer-3dmodel.ts +491 -491
- package/src/components/viewer/cc-viewer-base.ts +278 -278
- package/src/components/viewer/cc-viewer-gaussian.ts +380 -380
- package/src/components/viewer/cc-viewer-image.ts +189 -189
- package/src/components/viewer/cc-viewer-panorama.ts +85 -85
- package/src/components/viewer/cc-viewer-styles.ts +55 -55
- package/src/components/viewer/cc-viewer-video.ts +109 -109
- package/src/components/viewer/cc-viewer-youtube.ts +75 -75
- package/src/components/viewer/cc-viewer.ts +290 -290
- package/src/index.ts +24 -24
- package/src/types/css-modules.d.ts +1 -1
- package/src/types/global.d.ts +10 -10
- package/src/utils/base-element.ts +76 -76
- package/dist/assets/azumaya_panorama1.png +0 -0
- package/dist/chuci.cjs +0 -4483
- package/dist/index-8VMexD2a.cjs +0 -255
- package/dist/index-kvsisbKS.js +0 -2125
- package/dist/index.html +0 -241
- package/dist/test-image.html +0 -63
package/dist/index.html
DELETED
|
@@ -1,241 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Chuci Demo</title>
|
|
7
|
-
<style>
|
|
8
|
-
body {
|
|
9
|
-
margin: 0;
|
|
10
|
-
padding: 20px;
|
|
11
|
-
font-family: Arial, sans-serif;
|
|
12
|
-
background: #f5f5f5;
|
|
13
|
-
}
|
|
14
|
-
.demo-container {
|
|
15
|
-
max-width: 800px;
|
|
16
|
-
margin: 0 auto;
|
|
17
|
-
background: white;
|
|
18
|
-
padding: 20px;
|
|
19
|
-
border-radius: 8px;
|
|
20
|
-
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
21
|
-
}
|
|
22
|
-
h1 {
|
|
23
|
-
color: #333;
|
|
24
|
-
text-align: center;
|
|
25
|
-
}
|
|
26
|
-
.swiper-demo {
|
|
27
|
-
height: 400px;
|
|
28
|
-
margin: 20px 0;
|
|
29
|
-
}
|
|
30
|
-
.section {
|
|
31
|
-
margin: 40px 0;
|
|
32
|
-
}
|
|
33
|
-
h2 {
|
|
34
|
-
color: #555;
|
|
35
|
-
border-bottom: 2px solid #eee;
|
|
36
|
-
padding-bottom: 10px;
|
|
37
|
-
}
|
|
38
|
-
</style>
|
|
39
|
-
</head>
|
|
40
|
-
<body>
|
|
41
|
-
<div class="demo-container">
|
|
42
|
-
<h1>Chuci (楚辞) Demo</h1>
|
|
43
|
-
|
|
44
|
-
<div class="section">
|
|
45
|
-
<h2>Basic Swiper</h2>
|
|
46
|
-
<div class="swiper-demo">
|
|
47
|
-
<cc-swiper>
|
|
48
|
-
<cc-swiper-slide
|
|
49
|
-
thumbnail-url="https://picsum.photos/300/200?random=1"
|
|
50
|
-
image-url="https://picsum.photos/800/600?random=1"
|
|
51
|
-
image-type="image"
|
|
52
|
-
caption="First slide caption">
|
|
53
|
-
</cc-swiper-slide>
|
|
54
|
-
<cc-swiper-slide
|
|
55
|
-
thumbnail-url="https://picsum.photos/300/200?random=2"
|
|
56
|
-
image-url="https://picsum.photos/800/600?random=2"
|
|
57
|
-
image-type="image"
|
|
58
|
-
caption="Second slide caption">
|
|
59
|
-
</cc-swiper-slide>
|
|
60
|
-
<cc-swiper-slide
|
|
61
|
-
thumbnail-url="https://picsum.photos/300/200?random=3"
|
|
62
|
-
image-url="https://picsum.photos/800/600?random=3"
|
|
63
|
-
image-type="image"
|
|
64
|
-
caption="Third slide caption">
|
|
65
|
-
</cc-swiper-slide>
|
|
66
|
-
</cc-swiper>
|
|
67
|
-
</div>
|
|
68
|
-
</div>
|
|
69
|
-
|
|
70
|
-
<div class="section">
|
|
71
|
-
<h2>Swiper with Thumbnails</h2>
|
|
72
|
-
<div class="swiper-demo">
|
|
73
|
-
<cc-swiper has-thumb>
|
|
74
|
-
<cc-swiper-slide
|
|
75
|
-
thumbnail-url="https://picsum.photos/300/200?random=4"
|
|
76
|
-
image-url="https://picsum.photos/800/600?random=4"
|
|
77
|
-
image-type="image">
|
|
78
|
-
</cc-swiper-slide>
|
|
79
|
-
<cc-swiper-slide
|
|
80
|
-
thumbnail-url="https://picsum.photos/300/200?random=5"
|
|
81
|
-
image-url="https://picsum.photos/800/600?random=5"
|
|
82
|
-
image-type="image">
|
|
83
|
-
</cc-swiper-slide>
|
|
84
|
-
<cc-swiper-slide
|
|
85
|
-
thumbnail-url="https://picsum.photos/300/200?random=6"
|
|
86
|
-
image-url="https://picsum.photos/800/600?random=6"
|
|
87
|
-
image-type="image">
|
|
88
|
-
</cc-swiper-slide>
|
|
89
|
-
<cc-swiper-slide
|
|
90
|
-
thumbnail-url="https://picsum.photos/300/200?random=7"
|
|
91
|
-
image-url="https://picsum.photos/800/600?random=7"
|
|
92
|
-
image-type="image">
|
|
93
|
-
</cc-swiper-slide>
|
|
94
|
-
</cc-swiper>
|
|
95
|
-
</div>
|
|
96
|
-
</div>
|
|
97
|
-
|
|
98
|
-
<div class="section">
|
|
99
|
-
<h2>Autoplay Swiper</h2>
|
|
100
|
-
<div class="swiper-demo">
|
|
101
|
-
<cc-swiper autoplay>
|
|
102
|
-
<cc-swiper-slide
|
|
103
|
-
thumbnail-url="https://picsum.photos/300/200?random=8"
|
|
104
|
-
image-url="https://picsum.photos/800/600?random=8"
|
|
105
|
-
image-type="image">
|
|
106
|
-
</cc-swiper-slide>
|
|
107
|
-
<cc-swiper-slide
|
|
108
|
-
thumbnail-url="https://picsum.photos/300/200?random=9"
|
|
109
|
-
image-url="https://picsum.photos/800/600?random=9"
|
|
110
|
-
image-type="image">
|
|
111
|
-
</cc-swiper-slide>
|
|
112
|
-
<cc-swiper-slide
|
|
113
|
-
thumbnail-url="https://picsum.photos/300/200?random=10"
|
|
114
|
-
image-url="https://picsum.photos/800/600?random=10"
|
|
115
|
-
image-type="image">
|
|
116
|
-
</cc-swiper-slide>
|
|
117
|
-
</cc-swiper>
|
|
118
|
-
</div>
|
|
119
|
-
</div>
|
|
120
|
-
|
|
121
|
-
<div class="section">
|
|
122
|
-
<h2>All Media Types Demo</h2>
|
|
123
|
-
<p>Demonstrates all supported media types: Image, Panorama, YouTube, Video, 3D Model, and Gaussian Splatting</p>
|
|
124
|
-
<div class="swiper-demo">
|
|
125
|
-
<cc-swiper>
|
|
126
|
-
<!-- Regular Image -->
|
|
127
|
-
<cc-swiper-slide
|
|
128
|
-
thumbnail-url="https://images.unsplash.com/photo-1542281286-9e0a16bb7366?w=400"
|
|
129
|
-
image-url="https://images.unsplash.com/photo-1542281286-9e0a16bb7366?w=1600"
|
|
130
|
-
image-type="image"
|
|
131
|
-
caption="Regular Image">
|
|
132
|
-
</cc-swiper-slide>
|
|
133
|
-
|
|
134
|
-
<!-- 360° Panorama -->
|
|
135
|
-
<cc-swiper-slide
|
|
136
|
-
thumbnail-url="./assets/azumaya_panorama1.png"
|
|
137
|
-
image-url="./assets/azumaya_panorama1.png"
|
|
138
|
-
image-type="panorama"
|
|
139
|
-
caption="360° Panorama Image">
|
|
140
|
-
</cc-swiper-slide>
|
|
141
|
-
|
|
142
|
-
<!-- YouTube Video -->
|
|
143
|
-
<cc-swiper-slide
|
|
144
|
-
thumbnail-url="https://img.youtube.com/vi/dQw4w9WgXcQ/mqdefault.jpg"
|
|
145
|
-
image-url="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
|
|
146
|
-
image-type="youtube"
|
|
147
|
-
caption="YouTube Video">
|
|
148
|
-
</cc-swiper-slide>
|
|
149
|
-
|
|
150
|
-
<!-- MP4 Video -->
|
|
151
|
-
<cc-swiper-slide
|
|
152
|
-
thumbnail-url="https://images.unsplash.com/photo-1536240478700-b869070f9279?w=400"
|
|
153
|
-
image-url="https://www.w3schools.com/html/mov_bbb.mp4"
|
|
154
|
-
image-type="video"
|
|
155
|
-
caption="MP4 Video File">
|
|
156
|
-
</cc-swiper-slide>
|
|
157
|
-
|
|
158
|
-
<!-- MP4 Video with fit-to-container -->
|
|
159
|
-
<cc-swiper-slide
|
|
160
|
-
thumbnail-url="https://images.unsplash.com/photo-1574375927938-d5a98e8ffe85?w=400"
|
|
161
|
-
image-url="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4"
|
|
162
|
-
image-type="video"
|
|
163
|
-
caption="MP4 Video (fit-to-container)"
|
|
164
|
-
fit-to-container>
|
|
165
|
-
</cc-swiper-slide>
|
|
166
|
-
|
|
167
|
-
<!-- 3D Model (OBJ/MTL) -->
|
|
168
|
-
<cc-swiper-slide
|
|
169
|
-
thumbnail-url="https://images.unsplash.com/photo-1559827260-dc66d52bef19?w=400"
|
|
170
|
-
image-url="https://t.tilemap.jp/3ddata/okuman.obj"
|
|
171
|
-
material-url="https://t.tilemap.jp/3ddata/okuman.mtl"
|
|
172
|
-
image-type="3dmodel"
|
|
173
|
-
caption="3D OBJ/MTL Model (Debug Mode)"
|
|
174
|
-
debug-mode
|
|
175
|
-
camera-position="5,5,5"
|
|
176
|
-
camera-target="0,0,0">
|
|
177
|
-
</cc-swiper-slide>
|
|
178
|
-
|
|
179
|
-
<!-- Simple 3D Model (OBJ only, no material) -->
|
|
180
|
-
<cc-swiper-slide
|
|
181
|
-
thumbnail-url="https://images.unsplash.com/photo-1609205807490-b15b9d5d5a28?w=400"
|
|
182
|
-
image-url="https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/models/obj/walt/WaltHead.obj"
|
|
183
|
-
image-type="3dmodel"
|
|
184
|
-
caption="Simple 3D Model (OBJ only)"
|
|
185
|
-
camera-position="0,0,100"
|
|
186
|
-
camera-target="0,0,0">
|
|
187
|
-
</cc-swiper-slide>
|
|
188
|
-
|
|
189
|
-
<!-- 3D Gaussian Splatting -->
|
|
190
|
-
<cc-swiper-slide
|
|
191
|
-
thumbnail-url="https://images.unsplash.com/photo-1633613286991-611fe299c4be?w=400"
|
|
192
|
-
image-url="https://t.tilemap.jp/3ddata/okuman.splat"
|
|
193
|
-
image-type="gaussian"
|
|
194
|
-
caption="Gaussian Splatting Model"
|
|
195
|
-
debug-mode>
|
|
196
|
-
</cc-swiper-slide>
|
|
197
|
-
</cc-swiper>
|
|
198
|
-
</div>
|
|
199
|
-
</div>
|
|
200
|
-
|
|
201
|
-
<div class="section">
|
|
202
|
-
<h2>Media Types with Thumbnails Navigation</h2>
|
|
203
|
-
<div class="swiper-demo">
|
|
204
|
-
<cc-swiper has-thumb>
|
|
205
|
-
<cc-swiper-slide
|
|
206
|
-
thumbnail-url="https://images.unsplash.com/photo-1542281286-9e0a16bb7366?w=400"
|
|
207
|
-
image-url="https://images.unsplash.com/photo-1542281286-9e0a16bb7366?w=1600"
|
|
208
|
-
image-type="image"
|
|
209
|
-
caption="Image with Thumbnail">
|
|
210
|
-
</cc-swiper-slide>
|
|
211
|
-
|
|
212
|
-
<cc-swiper-slide
|
|
213
|
-
thumbnail-url="./assets/azumaya_panorama1.png"
|
|
214
|
-
image-url="./assets/azumaya_panorama1.png"
|
|
215
|
-
image-type="panorama"
|
|
216
|
-
caption="Panorama with Thumbnail">
|
|
217
|
-
</cc-swiper-slide>
|
|
218
|
-
|
|
219
|
-
<cc-swiper-slide
|
|
220
|
-
thumbnail-url="https://img.youtube.com/vi/dQw4w9WgXcQ/mqdefault.jpg"
|
|
221
|
-
image-url="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
|
|
222
|
-
image-type="youtube"
|
|
223
|
-
caption="YouTube with Thumbnail">
|
|
224
|
-
</cc-swiper-slide>
|
|
225
|
-
|
|
226
|
-
<cc-swiper-slide
|
|
227
|
-
thumbnail-url="https://images.unsplash.com/photo-1633613286991-611fe299c4be?w=400"
|
|
228
|
-
image-url="https://t.tilemap.jp/3ddata/okuman.splat"
|
|
229
|
-
image-type="gaussian"
|
|
230
|
-
caption="3DGS with Thumbnail"
|
|
231
|
-
camera-position="500,500,500"
|
|
232
|
-
camera-target="0,0,0">
|
|
233
|
-
</cc-swiper-slide>
|
|
234
|
-
</cc-swiper>
|
|
235
|
-
</div>
|
|
236
|
-
</div>
|
|
237
|
-
</div>
|
|
238
|
-
|
|
239
|
-
<script type="module" src="/src/index.ts"></script>
|
|
240
|
-
</body>
|
|
241
|
-
</html>
|
package/dist/test-image.html
DELETED
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<title>Generate Test Images</title>
|
|
6
|
-
</head>
|
|
7
|
-
<body>
|
|
8
|
-
<h1>Test Image Generator</h1>
|
|
9
|
-
<p>Save these canvases as images for testing:</p>
|
|
10
|
-
|
|
11
|
-
<div id="images"></div>
|
|
12
|
-
|
|
13
|
-
<script>
|
|
14
|
-
const colors = [
|
|
15
|
-
{ bg: '#FF6B6B', name: 'Red' },
|
|
16
|
-
{ bg: '#4ECDC4', name: 'Green' },
|
|
17
|
-
{ bg: '#45B7D1', name: 'Blue' },
|
|
18
|
-
{ bg: '#F7DC6F', name: 'Yellow' },
|
|
19
|
-
{ bg: '#BB8FCE', name: 'Purple' },
|
|
20
|
-
{ bg: '#85C1E2', name: 'Light Blue' }
|
|
21
|
-
];
|
|
22
|
-
|
|
23
|
-
const container = document.getElementById('images');
|
|
24
|
-
|
|
25
|
-
colors.forEach((color, index) => {
|
|
26
|
-
// Thumbnail
|
|
27
|
-
const thumbCanvas = document.createElement('canvas');
|
|
28
|
-
thumbCanvas.width = 300;
|
|
29
|
-
thumbCanvas.height = 200;
|
|
30
|
-
const thumbCtx = thumbCanvas.getContext('2d');
|
|
31
|
-
thumbCtx.fillStyle = color.bg;
|
|
32
|
-
thumbCtx.fillRect(0, 0, 300, 200);
|
|
33
|
-
thumbCtx.fillStyle = '#FFF';
|
|
34
|
-
thumbCtx.font = '24px Arial';
|
|
35
|
-
thumbCtx.textAlign = 'center';
|
|
36
|
-
thumbCtx.fillText(`Thumb ${index + 1}`, 150, 100);
|
|
37
|
-
|
|
38
|
-
// Full size
|
|
39
|
-
const fullCanvas = document.createElement('canvas');
|
|
40
|
-
fullCanvas.width = 800;
|
|
41
|
-
fullCanvas.height = 600;
|
|
42
|
-
const fullCtx = fullCanvas.getContext('2d');
|
|
43
|
-
fullCtx.fillStyle = color.bg;
|
|
44
|
-
fullCtx.fillRect(0, 0, 800, 600);
|
|
45
|
-
fullCtx.fillStyle = '#FFF';
|
|
46
|
-
fullCtx.font = '48px Arial';
|
|
47
|
-
fullCtx.textAlign = 'center';
|
|
48
|
-
fullCtx.fillText(`Full Image ${index + 1}`, 400, 300);
|
|
49
|
-
|
|
50
|
-
const div = document.createElement('div');
|
|
51
|
-
div.innerHTML = `
|
|
52
|
-
<h3>${color.name} (${index + 1})</h3>
|
|
53
|
-
<p>Thumbnail (300x200):</p>
|
|
54
|
-
${thumbCanvas.outerHTML}
|
|
55
|
-
<p>Full (800x600):</p>
|
|
56
|
-
${fullCanvas.outerHTML}
|
|
57
|
-
<hr>
|
|
58
|
-
`;
|
|
59
|
-
container.appendChild(div);
|
|
60
|
-
});
|
|
61
|
-
</script>
|
|
62
|
-
</body>
|
|
63
|
-
</html>
|