@globiojs/vue 0.1.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.
Files changed (9) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +37 -0
  3. package/dist/index.cjs +98 -0
  4. package/dist/index.cjs.map +1 -0
  5. package/dist/index.d.cts +298 -0
  6. package/dist/index.d.ts +298 -0
  7. package/dist/index.js +96 -0
  8. package/dist/index.js.map +1 -0
  9. package/package.json +66 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Wiktor Wróbel
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,37 @@
1
+ # @globiojs/vue
2
+
3
+ Vue 3 component for `@globiojs/core`. Core configuration is exposed through props, engine events through Vue emits, and the component ref provides access to the underlying globe instance.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install @globiojs/vue @globiojs/core vue three
9
+ ```
10
+
11
+ ## Usage
12
+
13
+ ```vue
14
+ <script setup lang="ts">
15
+ import { ref } from 'vue';
16
+ import { VueGlobe } from '@globiojs/vue';
17
+
18
+ const globe = ref<InstanceType<typeof VueGlobe> | null>(null);
19
+ </script>
20
+
21
+ <template>
22
+ <VueGlobe
23
+ ref="globe"
24
+ kind="outline"
25
+ theme="outline-dark"
26
+ :markers="[
27
+ { id: 'warsaw', position: [52.23, 21.01], label: 'Warsaw' },
28
+ ]"
29
+ style="width: 100%; height: 520px"
30
+ @marker-click="({ marker }) => console.log(marker.id)"
31
+ />
32
+ </template>
33
+ ```
34
+
35
+ Use `globe.value?.getInstance()` for imperative APIs such as `flyTo`, data layers, legends, and stories.
36
+
37
+ See the [GlobioJS repository](https://github.com/SparrowVic/globiojs) for the full Vue guide and API reference.
package/dist/index.cjs ADDED
@@ -0,0 +1,98 @@
1
+ 'use strict';
2
+
3
+ var vue = require('vue');
4
+ var core = require('@globiojs/core');
5
+
6
+ // src/VueGlobe.ts
7
+ var VueGlobe = vue.defineComponent({
8
+ name: "VueGlobe",
9
+ props: {
10
+ mode: { type: String, default: void 0 },
11
+ kind: { type: String, default: void 0 },
12
+ theme: { type: [String, Object], default: void 0 },
13
+ countries: { type: Object, default: void 0 },
14
+ countryLabels: { type: Object, default: void 0 },
15
+ countryData: { type: Object, default: void 0 },
16
+ markers: { type: Array, default: void 0 },
17
+ htmlMarkers: { type: Array, default: void 0 },
18
+ arcs: { type: Array, default: void 0 },
19
+ atmosphere: { type: Object, default: void 0 },
20
+ focusPulse: { type: Object, default: void 0 },
21
+ outline: { type: Object, default: void 0 },
22
+ cinematic: { type: Object, default: void 0 },
23
+ dotted: { type: Object, default: void 0 },
24
+ wireframe: { type: Object, default: void 0 },
25
+ paper: { type: Object, default: void 0 },
26
+ hologram: { type: Object, default: void 0 },
27
+ starfield: { type: Object, default: void 0 },
28
+ postprocessing: { type: Object, default: void 0 },
29
+ axisTilt: { type: Number, default: void 0 },
30
+ autoRotate: { type: Object, default: void 0 },
31
+ performance: { type: Object, default: void 0 },
32
+ initialPosition: { type: Array, default: void 0 },
33
+ minZoom: { type: Number, default: void 0 },
34
+ maxZoom: { type: Number, default: void 0 },
35
+ zoom: { type: Object, default: void 0 },
36
+ transparent: { type: Boolean, default: void 0 },
37
+ framing: { type: Object, default: void 0 }
38
+ },
39
+ emits: {
40
+ countryClick: (event) => Boolean(event),
41
+ countryHover: (event) => event === null || Boolean(event),
42
+ markerClick: (event) => Boolean(event),
43
+ markerHover: (event) => event === null || Boolean(event),
44
+ surfaceClick: (event) => Boolean(event),
45
+ sceneEnter: (event) => Boolean(event),
46
+ sceneExit: (event) => Boolean(event),
47
+ storyComplete: (event) => Boolean(event),
48
+ ready: () => true,
49
+ error: (error) => Boolean(error)
50
+ },
51
+ setup(props, { emit, expose }) {
52
+ const hostRef = vue.ref(null);
53
+ let instance = null;
54
+ const buildConfig = () => core.pickGlobeConfig(props);
55
+ vue.onMounted(() => {
56
+ if (!hostRef.value) return;
57
+ const globe = core.createGlobe({ container: hostRef.value, ...buildConfig() });
58
+ globe.on("countryClick", (e) => emit("countryClick", e));
59
+ globe.on("countryHover", (e) => emit("countryHover", e));
60
+ globe.on("markerClick", (e) => emit("markerClick", e));
61
+ globe.on("markerHover", (e) => emit("markerHover", e));
62
+ globe.on("surfaceClick", (e) => emit("surfaceClick", e));
63
+ globe.on("sceneEnter", (e) => emit("sceneEnter", e));
64
+ globe.on("sceneExit", (e) => emit("sceneExit", e));
65
+ globe.on("storyComplete", (e) => emit("storyComplete", e));
66
+ globe.on("ready", () => emit("ready"));
67
+ globe.on("error", (err) => emit("error", err));
68
+ globe.mount();
69
+ instance = globe;
70
+ });
71
+ vue.watch(
72
+ () => buildConfig(),
73
+ (config) => instance?.update(config),
74
+ { deep: true }
75
+ );
76
+ vue.onBeforeUnmount(() => {
77
+ instance?.destroy();
78
+ instance = null;
79
+ });
80
+ expose({
81
+ /** The underlying engine instance, or null before mount / after unmount. */
82
+ getInstance: () => instance,
83
+ setRotation: (position, animate) => instance?.setRotation(position, animate),
84
+ addMarker: (marker) => instance?.addMarker(marker),
85
+ removeMarker: (id) => instance?.removeMarker(id),
86
+ resize: () => instance?.resize(),
87
+ getCanvas: () => instance?.getCanvas() ?? null
88
+ });
89
+ return () => vue.h("div", {
90
+ ref: hostRef,
91
+ style: { width: "100%", height: "100%" }
92
+ });
93
+ }
94
+ });
95
+
96
+ exports.VueGlobe = VueGlobe;
97
+ //# sourceMappingURL=index.cjs.map
98
+ //# sourceMappingURL=index.cjs.map
package/dist/index.cjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/VueGlobe.ts"],"names":["defineComponent","ref","pickGlobeConfig","onMounted","createGlobe","watch","onBeforeUnmount","h"],"mappings":"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","file":"index.cjs","sourcesContent":["import {\n defineComponent,\n h,\n onBeforeUnmount,\n onMounted,\n ref,\n watch,\n type PropType,\n} from 'vue';\nimport {\n createGlobe,\n pickGlobeConfig,\n type ArcConfig,\n type AtmosphereConfig,\n type AutoRotateConfig,\n type CinematicConfig,\n type CountriesConfig,\n type CountryDataMap,\n type CountryEvent,\n type CountryLabelsConfig,\n type DottedConfig,\n type FramingConfig,\n type GlobeConfig,\n type GlobeInstance,\n type GlobeKind,\n type GlobeMode,\n type HologramConfig,\n type HtmlMarkerConfig,\n type LatLng,\n type MarkerConfig,\n type MarkerEvent,\n type OutlineConfig,\n type PaperConfig,\n type PerformanceConfig,\n type PostProcessingConfig,\n type StarfieldConfig,\n type StoryCompleteEvent,\n type StorySceneEvent,\n type SurfaceClickEvent,\n type ThemeInput,\n type WireframeConfig,\n type ZoomConfig,\n} from '@globiojs/core';\n\n/**\n * `<VueGlobe />` — every `GlobeConfig` key is a prop (kebab-case in\n * templates), every globe event is an emit, and `getInstance()` on the\n * component ref hands out the underlying `GlobeInstance` for anything\n * imperative (camera moves, legends, stories).\n */\nexport const VueGlobe = defineComponent({\n name: 'VueGlobe',\n props: {\n mode: { type: String as PropType<GlobeMode>, default: undefined },\n kind: { type: String as PropType<GlobeKind>, default: undefined },\n theme: { type: [String, Object] as PropType<ThemeInput>, default: undefined },\n countries: { type: Object as PropType<CountriesConfig>, default: undefined },\n countryLabels: { type: Object as PropType<CountryLabelsConfig>, default: undefined },\n countryData: { type: Object as PropType<CountryDataMap>, default: undefined },\n markers: { type: Array as PropType<ReadonlyArray<MarkerConfig>>, default: undefined },\n htmlMarkers: { type: Array as PropType<ReadonlyArray<HtmlMarkerConfig>>, default: undefined },\n arcs: { type: Array as PropType<ReadonlyArray<ArcConfig>>, default: undefined },\n atmosphere: { type: Object as PropType<AtmosphereConfig>, default: undefined },\n focusPulse: { type: Object as PropType<GlobeConfig['focusPulse']>, default: undefined },\n outline: { type: Object as PropType<OutlineConfig>, default: undefined },\n cinematic: { type: Object as PropType<CinematicConfig>, default: undefined },\n dotted: { type: Object as PropType<DottedConfig>, default: undefined },\n wireframe: { type: Object as PropType<WireframeConfig>, default: undefined },\n paper: { type: Object as PropType<PaperConfig>, default: undefined },\n hologram: { type: Object as PropType<HologramConfig>, default: undefined },\n starfield: { type: Object as PropType<StarfieldConfig>, default: undefined },\n postprocessing: { type: Object as PropType<PostProcessingConfig>, default: undefined },\n axisTilt: { type: Number, default: undefined },\n autoRotate: { type: Object as PropType<AutoRotateConfig>, default: undefined },\n performance: { type: Object as PropType<PerformanceConfig>, default: undefined },\n initialPosition: { type: Array as unknown as PropType<LatLng>, default: undefined },\n minZoom: { type: Number, default: undefined },\n maxZoom: { type: Number, default: undefined },\n zoom: { type: Object as PropType<ZoomConfig>, default: undefined },\n transparent: { type: Boolean, default: undefined },\n framing: { type: Object as PropType<FramingConfig>, default: undefined },\n },\n emits: {\n countryClick: (event: CountryEvent) => Boolean(event),\n countryHover: (event: CountryEvent | null) => event === null || Boolean(event),\n markerClick: (event: MarkerEvent) => Boolean(event),\n markerHover: (event: MarkerEvent | null) => event === null || Boolean(event),\n surfaceClick: (event: SurfaceClickEvent) => Boolean(event),\n sceneEnter: (event: StorySceneEvent) => Boolean(event),\n sceneExit: (event: StorySceneEvent) => Boolean(event),\n storyComplete: (event: StoryCompleteEvent) => Boolean(event),\n ready: () => true,\n error: (error: Error) => Boolean(error),\n },\n setup(props, { emit, expose }) {\n const hostRef = ref<HTMLDivElement | null>(null);\n let instance: GlobeInstance | null = null;\n\n const buildConfig = () => pickGlobeConfig(props as unknown as Record<string, unknown>);\n\n onMounted(() => {\n if (!hostRef.value) return;\n const globe = createGlobe({ container: hostRef.value, ...buildConfig() });\n globe.on('countryClick', (e) => emit('countryClick', e));\n globe.on('countryHover', (e) => emit('countryHover', e));\n globe.on('markerClick', (e) => emit('markerClick', e));\n globe.on('markerHover', (e) => emit('markerHover', e));\n globe.on('surfaceClick', (e) => emit('surfaceClick', e));\n globe.on('sceneEnter', (e) => emit('sceneEnter', e));\n globe.on('sceneExit', (e) => emit('sceneExit', e));\n globe.on('storyComplete', (e) => emit('storyComplete', e));\n globe.on('ready', () => emit('ready'));\n globe.on('error', (err) => emit('error', err));\n globe.mount();\n instance = globe;\n });\n\n watch(\n () => buildConfig(),\n (config) => instance?.update(config),\n { deep: true }\n );\n\n onBeforeUnmount(() => {\n instance?.destroy();\n instance = null;\n });\n\n expose({\n /** The underlying engine instance, or null before mount / after unmount. */\n getInstance: (): GlobeInstance | null => instance,\n setRotation: (position: LatLng, animate?: boolean) => instance?.setRotation(position, animate),\n addMarker: (marker: MarkerConfig) => instance?.addMarker(marker),\n removeMarker: (id: string) => instance?.removeMarker(id),\n resize: () => instance?.resize(),\n getCanvas: () => instance?.getCanvas() ?? null,\n });\n\n return () =>\n h('div', {\n ref: hostRef,\n style: { width: '100%', height: '100%' },\n });\n },\n});\n"]}
package/dist/index.d.cts ADDED
@@ -0,0 +1,298 @@
1
+ import * as _globiojs_core from '@globiojs/core';
2
+ import { GlobeMode, GlobeKind, ThemeInput, CountriesConfig, CountryLabelsConfig, CountryDataMap, MarkerConfig, HtmlMarkerConfig, ArcConfig, AtmosphereConfig, GlobeConfig, OutlineConfig, CinematicConfig, DottedConfig, WireframeConfig, PaperConfig, HologramConfig, StarfieldConfig, PostProcessingConfig, AutoRotateConfig, PerformanceConfig, LatLng, ZoomConfig, FramingConfig, CountryEvent, MarkerEvent, SurfaceClickEvent, StorySceneEvent, StoryCompleteEvent } from '@globiojs/core';
3
+ export { ArcConfig, AtmosphereConfig, AutoRotateConfig, CinematicConfig, CountriesConfig, CountryData, CountryDataMap, CountryEvent, CountryLabelsConfig, DottedConfig, FramingConfig, GlobeConfig, GlobeConfigInput, GlobeInstance, GlobeKind, GlobeMode, HologramConfig, HtmlMarkerConfig, LatLng, MarkerConfig, MarkerEvent, OutlineConfig, PaperConfig, PerformanceConfig, PostProcessingConfig, ResolutionLevel, StarfieldConfig, StoryCompleteEvent, StorySceneEvent, SurfaceClickEvent, ThemeInput, WireframeConfig, ZoomConfig } from '@globiojs/core';
4
+ import * as vue from 'vue';
5
+ import { PropType } from 'vue';
6
+
7
+ /**
8
+ * `<VueGlobe />` — every `GlobeConfig` key is a prop (kebab-case in
9
+ * templates), every globe event is an emit, and `getInstance()` on the
10
+ * component ref hands out the underlying `GlobeInstance` for anything
11
+ * imperative (camera moves, legends, stories).
12
+ */
13
+ declare const VueGlobe: vue.DefineComponent<vue.ExtractPropTypes<{
14
+ mode: {
15
+ type: PropType<GlobeMode>;
16
+ default: undefined;
17
+ };
18
+ kind: {
19
+ type: PropType<GlobeKind>;
20
+ default: undefined;
21
+ };
22
+ theme: {
23
+ type: PropType<ThemeInput>;
24
+ default: undefined;
25
+ };
26
+ countries: {
27
+ type: PropType<CountriesConfig>;
28
+ default: undefined;
29
+ };
30
+ countryLabels: {
31
+ type: PropType<CountryLabelsConfig>;
32
+ default: undefined;
33
+ };
34
+ countryData: {
35
+ type: PropType<CountryDataMap>;
36
+ default: undefined;
37
+ };
38
+ markers: {
39
+ type: PropType<ReadonlyArray<MarkerConfig>>;
40
+ default: undefined;
41
+ };
42
+ htmlMarkers: {
43
+ type: PropType<ReadonlyArray<HtmlMarkerConfig>>;
44
+ default: undefined;
45
+ };
46
+ arcs: {
47
+ type: PropType<ReadonlyArray<ArcConfig>>;
48
+ default: undefined;
49
+ };
50
+ atmosphere: {
51
+ type: PropType<AtmosphereConfig>;
52
+ default: undefined;
53
+ };
54
+ focusPulse: {
55
+ type: PropType<GlobeConfig["focusPulse"]>;
56
+ default: undefined;
57
+ };
58
+ outline: {
59
+ type: PropType<OutlineConfig>;
60
+ default: undefined;
61
+ };
62
+ cinematic: {
63
+ type: PropType<CinematicConfig>;
64
+ default: undefined;
65
+ };
66
+ dotted: {
67
+ type: PropType<DottedConfig>;
68
+ default: undefined;
69
+ };
70
+ wireframe: {
71
+ type: PropType<WireframeConfig>;
72
+ default: undefined;
73
+ };
74
+ paper: {
75
+ type: PropType<PaperConfig>;
76
+ default: undefined;
77
+ };
78
+ hologram: {
79
+ type: PropType<HologramConfig>;
80
+ default: undefined;
81
+ };
82
+ starfield: {
83
+ type: PropType<StarfieldConfig>;
84
+ default: undefined;
85
+ };
86
+ postprocessing: {
87
+ type: PropType<PostProcessingConfig>;
88
+ default: undefined;
89
+ };
90
+ axisTilt: {
91
+ type: NumberConstructor;
92
+ default: undefined;
93
+ };
94
+ autoRotate: {
95
+ type: PropType<AutoRotateConfig>;
96
+ default: undefined;
97
+ };
98
+ performance: {
99
+ type: PropType<PerformanceConfig>;
100
+ default: undefined;
101
+ };
102
+ initialPosition: {
103
+ type: PropType<LatLng>;
104
+ default: undefined;
105
+ };
106
+ minZoom: {
107
+ type: NumberConstructor;
108
+ default: undefined;
109
+ };
110
+ maxZoom: {
111
+ type: NumberConstructor;
112
+ default: undefined;
113
+ };
114
+ zoom: {
115
+ type: PropType<ZoomConfig>;
116
+ default: undefined;
117
+ };
118
+ transparent: {
119
+ type: BooleanConstructor;
120
+ default: undefined;
121
+ };
122
+ framing: {
123
+ type: PropType<FramingConfig>;
124
+ default: undefined;
125
+ };
126
+ }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
127
+ [key: string]: any;
128
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
129
+ countryClick: (event: CountryEvent) => boolean;
130
+ countryHover: (event: CountryEvent | null) => boolean;
131
+ markerClick: (event: MarkerEvent) => boolean;
132
+ markerHover: (event: MarkerEvent | null) => boolean;
133
+ surfaceClick: (event: SurfaceClickEvent) => boolean;
134
+ sceneEnter: (event: StorySceneEvent) => boolean;
135
+ sceneExit: (event: StorySceneEvent) => boolean;
136
+ storyComplete: (event: StoryCompleteEvent) => boolean;
137
+ ready: () => true;
138
+ error: (error: Error) => boolean;
139
+ }, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
140
+ mode: {
141
+ type: PropType<GlobeMode>;
142
+ default: undefined;
143
+ };
144
+ kind: {
145
+ type: PropType<GlobeKind>;
146
+ default: undefined;
147
+ };
148
+ theme: {
149
+ type: PropType<ThemeInput>;
150
+ default: undefined;
151
+ };
152
+ countries: {
153
+ type: PropType<CountriesConfig>;
154
+ default: undefined;
155
+ };
156
+ countryLabels: {
157
+ type: PropType<CountryLabelsConfig>;
158
+ default: undefined;
159
+ };
160
+ countryData: {
161
+ type: PropType<CountryDataMap>;
162
+ default: undefined;
163
+ };
164
+ markers: {
165
+ type: PropType<ReadonlyArray<MarkerConfig>>;
166
+ default: undefined;
167
+ };
168
+ htmlMarkers: {
169
+ type: PropType<ReadonlyArray<HtmlMarkerConfig>>;
170
+ default: undefined;
171
+ };
172
+ arcs: {
173
+ type: PropType<ReadonlyArray<ArcConfig>>;
174
+ default: undefined;
175
+ };
176
+ atmosphere: {
177
+ type: PropType<AtmosphereConfig>;
178
+ default: undefined;
179
+ };
180
+ focusPulse: {
181
+ type: PropType<GlobeConfig["focusPulse"]>;
182
+ default: undefined;
183
+ };
184
+ outline: {
185
+ type: PropType<OutlineConfig>;
186
+ default: undefined;
187
+ };
188
+ cinematic: {
189
+ type: PropType<CinematicConfig>;
190
+ default: undefined;
191
+ };
192
+ dotted: {
193
+ type: PropType<DottedConfig>;
194
+ default: undefined;
195
+ };
196
+ wireframe: {
197
+ type: PropType<WireframeConfig>;
198
+ default: undefined;
199
+ };
200
+ paper: {
201
+ type: PropType<PaperConfig>;
202
+ default: undefined;
203
+ };
204
+ hologram: {
205
+ type: PropType<HologramConfig>;
206
+ default: undefined;
207
+ };
208
+ starfield: {
209
+ type: PropType<StarfieldConfig>;
210
+ default: undefined;
211
+ };
212
+ postprocessing: {
213
+ type: PropType<PostProcessingConfig>;
214
+ default: undefined;
215
+ };
216
+ axisTilt: {
217
+ type: NumberConstructor;
218
+ default: undefined;
219
+ };
220
+ autoRotate: {
221
+ type: PropType<AutoRotateConfig>;
222
+ default: undefined;
223
+ };
224
+ performance: {
225
+ type: PropType<PerformanceConfig>;
226
+ default: undefined;
227
+ };
228
+ initialPosition: {
229
+ type: PropType<LatLng>;
230
+ default: undefined;
231
+ };
232
+ minZoom: {
233
+ type: NumberConstructor;
234
+ default: undefined;
235
+ };
236
+ maxZoom: {
237
+ type: NumberConstructor;
238
+ default: undefined;
239
+ };
240
+ zoom: {
241
+ type: PropType<ZoomConfig>;
242
+ default: undefined;
243
+ };
244
+ transparent: {
245
+ type: BooleanConstructor;
246
+ default: undefined;
247
+ };
248
+ framing: {
249
+ type: PropType<FramingConfig>;
250
+ default: undefined;
251
+ };
252
+ }>> & Readonly<{
253
+ onCountryClick?: (event: CountryEvent) => any;
254
+ onCountryHover?: (event: CountryEvent | null) => any;
255
+ onMarkerClick?: (event: MarkerEvent) => any;
256
+ onMarkerHover?: (event: MarkerEvent | null) => any;
257
+ onSurfaceClick?: (event: SurfaceClickEvent) => any;
258
+ onSceneEnter?: (event: StorySceneEvent) => any;
259
+ onSceneExit?: (event: StorySceneEvent) => any;
260
+ onStoryComplete?: (event: StoryCompleteEvent) => any;
261
+ onReady?: () => any;
262
+ onError?: (error: Error) => any;
263
+ }>, {
264
+ cinematic: CinematicConfig;
265
+ outline: OutlineConfig;
266
+ dotted: DottedConfig;
267
+ wireframe: WireframeConfig;
268
+ paper: PaperConfig;
269
+ hologram: HologramConfig;
270
+ focusPulse: {
271
+ readonly enabled?: boolean;
272
+ readonly origin?: "centroid" | "click";
273
+ readonly pulseOnSurfaceClick?: boolean;
274
+ } | undefined;
275
+ mode: GlobeMode;
276
+ kind: "cinematic" | "outline" | "dotted" | "wireframe" | "paper" | "hologram";
277
+ theme: ThemeInput;
278
+ countries: CountriesConfig;
279
+ countryLabels: CountryLabelsConfig;
280
+ countryData: Readonly<Record<string, _globiojs_core.CountryDataEntry>>;
281
+ markers: readonly MarkerConfig[];
282
+ htmlMarkers: readonly HtmlMarkerConfig[];
283
+ arcs: readonly ArcConfig[];
284
+ atmosphere: AtmosphereConfig;
285
+ starfield: StarfieldConfig;
286
+ postprocessing: PostProcessingConfig;
287
+ axisTilt: number;
288
+ autoRotate: AutoRotateConfig;
289
+ performance: PerformanceConfig;
290
+ initialPosition: LatLng;
291
+ minZoom: number;
292
+ maxZoom: number;
293
+ zoom: ZoomConfig;
294
+ transparent: boolean;
295
+ framing: FramingConfig;
296
+ }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
297
+
298
+ export { VueGlobe };
package/dist/index.d.ts ADDED
@@ -0,0 +1,298 @@
1
+ import * as _globiojs_core from '@globiojs/core';
2
+ import { GlobeMode, GlobeKind, ThemeInput, CountriesConfig, CountryLabelsConfig, CountryDataMap, MarkerConfig, HtmlMarkerConfig, ArcConfig, AtmosphereConfig, GlobeConfig, OutlineConfig, CinematicConfig, DottedConfig, WireframeConfig, PaperConfig, HologramConfig, StarfieldConfig, PostProcessingConfig, AutoRotateConfig, PerformanceConfig, LatLng, ZoomConfig, FramingConfig, CountryEvent, MarkerEvent, SurfaceClickEvent, StorySceneEvent, StoryCompleteEvent } from '@globiojs/core';
3
+ export { ArcConfig, AtmosphereConfig, AutoRotateConfig, CinematicConfig, CountriesConfig, CountryData, CountryDataMap, CountryEvent, CountryLabelsConfig, DottedConfig, FramingConfig, GlobeConfig, GlobeConfigInput, GlobeInstance, GlobeKind, GlobeMode, HologramConfig, HtmlMarkerConfig, LatLng, MarkerConfig, MarkerEvent, OutlineConfig, PaperConfig, PerformanceConfig, PostProcessingConfig, ResolutionLevel, StarfieldConfig, StoryCompleteEvent, StorySceneEvent, SurfaceClickEvent, ThemeInput, WireframeConfig, ZoomConfig } from '@globiojs/core';
4
+ import * as vue from 'vue';
5
+ import { PropType } from 'vue';
6
+
7
+ /**
8
+ * `<VueGlobe />` — every `GlobeConfig` key is a prop (kebab-case in
9
+ * templates), every globe event is an emit, and `getInstance()` on the
10
+ * component ref hands out the underlying `GlobeInstance` for anything
11
+ * imperative (camera moves, legends, stories).
12
+ */
13
+ declare const VueGlobe: vue.DefineComponent<vue.ExtractPropTypes<{
14
+ mode: {
15
+ type: PropType<GlobeMode>;
16
+ default: undefined;
17
+ };
18
+ kind: {
19
+ type: PropType<GlobeKind>;
20
+ default: undefined;
21
+ };
22
+ theme: {
23
+ type: PropType<ThemeInput>;
24
+ default: undefined;
25
+ };
26
+ countries: {
27
+ type: PropType<CountriesConfig>;
28
+ default: undefined;
29
+ };
30
+ countryLabels: {
31
+ type: PropType<CountryLabelsConfig>;
32
+ default: undefined;
33
+ };
34
+ countryData: {
35
+ type: PropType<CountryDataMap>;
36
+ default: undefined;
37
+ };
38
+ markers: {
39
+ type: PropType<ReadonlyArray<MarkerConfig>>;
40
+ default: undefined;
41
+ };
42
+ htmlMarkers: {
43
+ type: PropType<ReadonlyArray<HtmlMarkerConfig>>;
44
+ default: undefined;
45
+ };
46
+ arcs: {
47
+ type: PropType<ReadonlyArray<ArcConfig>>;
48
+ default: undefined;
49
+ };
50
+ atmosphere: {
51
+ type: PropType<AtmosphereConfig>;
52
+ default: undefined;
53
+ };
54
+ focusPulse: {
55
+ type: PropType<GlobeConfig["focusPulse"]>;
56
+ default: undefined;
57
+ };
58
+ outline: {
59
+ type: PropType<OutlineConfig>;
60
+ default: undefined;
61
+ };
62
+ cinematic: {
63
+ type: PropType<CinematicConfig>;
64
+ default: undefined;
65
+ };
66
+ dotted: {
67
+ type: PropType<DottedConfig>;
68
+ default: undefined;
69
+ };
70
+ wireframe: {
71
+ type: PropType<WireframeConfig>;
72
+ default: undefined;
73
+ };
74
+ paper: {
75
+ type: PropType<PaperConfig>;
76
+ default: undefined;
77
+ };
78
+ hologram: {
79
+ type: PropType<HologramConfig>;
80
+ default: undefined;
81
+ };
82
+ starfield: {
83
+ type: PropType<StarfieldConfig>;
84
+ default: undefined;
85
+ };
86
+ postprocessing: {
87
+ type: PropType<PostProcessingConfig>;
88
+ default: undefined;
89
+ };
90
+ axisTilt: {
91
+ type: NumberConstructor;
92
+ default: undefined;
93
+ };
94
+ autoRotate: {
95
+ type: PropType<AutoRotateConfig>;
96
+ default: undefined;
97
+ };
98
+ performance: {
99
+ type: PropType<PerformanceConfig>;
100
+ default: undefined;
101
+ };
102
+ initialPosition: {
103
+ type: PropType<LatLng>;
104
+ default: undefined;
105
+ };
106
+ minZoom: {
107
+ type: NumberConstructor;
108
+ default: undefined;
109
+ };
110
+ maxZoom: {
111
+ type: NumberConstructor;
112
+ default: undefined;
113
+ };
114
+ zoom: {
115
+ type: PropType<ZoomConfig>;
116
+ default: undefined;
117
+ };
118
+ transparent: {
119
+ type: BooleanConstructor;
120
+ default: undefined;
121
+ };
122
+ framing: {
123
+ type: PropType<FramingConfig>;
124
+ default: undefined;
125
+ };
126
+ }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
127
+ [key: string]: any;
128
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
129
+ countryClick: (event: CountryEvent) => boolean;
130
+ countryHover: (event: CountryEvent | null) => boolean;
131
+ markerClick: (event: MarkerEvent) => boolean;
132
+ markerHover: (event: MarkerEvent | null) => boolean;
133
+ surfaceClick: (event: SurfaceClickEvent) => boolean;
134
+ sceneEnter: (event: StorySceneEvent) => boolean;
135
+ sceneExit: (event: StorySceneEvent) => boolean;
136
+ storyComplete: (event: StoryCompleteEvent) => boolean;
137
+ ready: () => true;
138
+ error: (error: Error) => boolean;
139
+ }, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
140
+ mode: {
141
+ type: PropType<GlobeMode>;
142
+ default: undefined;
143
+ };
144
+ kind: {
145
+ type: PropType<GlobeKind>;
146
+ default: undefined;
147
+ };
148
+ theme: {
149
+ type: PropType<ThemeInput>;
150
+ default: undefined;
151
+ };
152
+ countries: {
153
+ type: PropType<CountriesConfig>;
154
+ default: undefined;
155
+ };
156
+ countryLabels: {
157
+ type: PropType<CountryLabelsConfig>;
158
+ default: undefined;
159
+ };
160
+ countryData: {
161
+ type: PropType<CountryDataMap>;
162
+ default: undefined;
163
+ };
164
+ markers: {
165
+ type: PropType<ReadonlyArray<MarkerConfig>>;
166
+ default: undefined;
167
+ };
168
+ htmlMarkers: {
169
+ type: PropType<ReadonlyArray<HtmlMarkerConfig>>;
170
+ default: undefined;
171
+ };
172
+ arcs: {
173
+ type: PropType<ReadonlyArray<ArcConfig>>;
174
+ default: undefined;
175
+ };
176
+ atmosphere: {
177
+ type: PropType<AtmosphereConfig>;
178
+ default: undefined;
179
+ };
180
+ focusPulse: {
181
+ type: PropType<GlobeConfig["focusPulse"]>;
182
+ default: undefined;
183
+ };
184
+ outline: {
185
+ type: PropType<OutlineConfig>;
186
+ default: undefined;
187
+ };
188
+ cinematic: {
189
+ type: PropType<CinematicConfig>;
190
+ default: undefined;
191
+ };
192
+ dotted: {
193
+ type: PropType<DottedConfig>;
194
+ default: undefined;
195
+ };
196
+ wireframe: {
197
+ type: PropType<WireframeConfig>;
198
+ default: undefined;
199
+ };
200
+ paper: {
201
+ type: PropType<PaperConfig>;
202
+ default: undefined;
203
+ };
204
+ hologram: {
205
+ type: PropType<HologramConfig>;
206
+ default: undefined;
207
+ };
208
+ starfield: {
209
+ type: PropType<StarfieldConfig>;
210
+ default: undefined;
211
+ };
212
+ postprocessing: {
213
+ type: PropType<PostProcessingConfig>;
214
+ default: undefined;
215
+ };
216
+ axisTilt: {
217
+ type: NumberConstructor;
218
+ default: undefined;
219
+ };
220
+ autoRotate: {
221
+ type: PropType<AutoRotateConfig>;
222
+ default: undefined;
223
+ };
224
+ performance: {
225
+ type: PropType<PerformanceConfig>;
226
+ default: undefined;
227
+ };
228
+ initialPosition: {
229
+ type: PropType<LatLng>;
230
+ default: undefined;
231
+ };
232
+ minZoom: {
233
+ type: NumberConstructor;
234
+ default: undefined;
235
+ };
236
+ maxZoom: {
237
+ type: NumberConstructor;
238
+ default: undefined;
239
+ };
240
+ zoom: {
241
+ type: PropType<ZoomConfig>;
242
+ default: undefined;
243
+ };
244
+ transparent: {
245
+ type: BooleanConstructor;
246
+ default: undefined;
247
+ };
248
+ framing: {
249
+ type: PropType<FramingConfig>;
250
+ default: undefined;
251
+ };
252
+ }>> & Readonly<{
253
+ onCountryClick?: (event: CountryEvent) => any;
254
+ onCountryHover?: (event: CountryEvent | null) => any;
255
+ onMarkerClick?: (event: MarkerEvent) => any;
256
+ onMarkerHover?: (event: MarkerEvent | null) => any;
257
+ onSurfaceClick?: (event: SurfaceClickEvent) => any;
258
+ onSceneEnter?: (event: StorySceneEvent) => any;
259
+ onSceneExit?: (event: StorySceneEvent) => any;
260
+ onStoryComplete?: (event: StoryCompleteEvent) => any;
261
+ onReady?: () => any;
262
+ onError?: (error: Error) => any;
263
+ }>, {
264
+ cinematic: CinematicConfig;
265
+ outline: OutlineConfig;
266
+ dotted: DottedConfig;
267
+ wireframe: WireframeConfig;
268
+ paper: PaperConfig;
269
+ hologram: HologramConfig;
270
+ focusPulse: {
271
+ readonly enabled?: boolean;
272
+ readonly origin?: "centroid" | "click";
273
+ readonly pulseOnSurfaceClick?: boolean;
274
+ } | undefined;
275
+ mode: GlobeMode;
276
+ kind: "cinematic" | "outline" | "dotted" | "wireframe" | "paper" | "hologram";
277
+ theme: ThemeInput;
278
+ countries: CountriesConfig;
279
+ countryLabels: CountryLabelsConfig;
280
+ countryData: Readonly<Record<string, _globiojs_core.CountryDataEntry>>;
281
+ markers: readonly MarkerConfig[];
282
+ htmlMarkers: readonly HtmlMarkerConfig[];
283
+ arcs: readonly ArcConfig[];
284
+ atmosphere: AtmosphereConfig;
285
+ starfield: StarfieldConfig;
286
+ postprocessing: PostProcessingConfig;
287
+ axisTilt: number;
288
+ autoRotate: AutoRotateConfig;
289
+ performance: PerformanceConfig;
290
+ initialPosition: LatLng;
291
+ minZoom: number;
292
+ maxZoom: number;
293
+ zoom: ZoomConfig;
294
+ transparent: boolean;
295
+ framing: FramingConfig;
296
+ }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
297
+
298
+ export { VueGlobe };
package/dist/index.js ADDED
@@ -0,0 +1,96 @@
1
+ import { defineComponent, ref, onMounted, watch, onBeforeUnmount, h } from 'vue';
2
+ import { createGlobe, pickGlobeConfig } from '@globiojs/core';
3
+
4
+ // src/VueGlobe.ts
5
+ var VueGlobe = defineComponent({
6
+ name: "VueGlobe",
7
+ props: {
8
+ mode: { type: String, default: void 0 },
9
+ kind: { type: String, default: void 0 },
10
+ theme: { type: [String, Object], default: void 0 },
11
+ countries: { type: Object, default: void 0 },
12
+ countryLabels: { type: Object, default: void 0 },
13
+ countryData: { type: Object, default: void 0 },
14
+ markers: { type: Array, default: void 0 },
15
+ htmlMarkers: { type: Array, default: void 0 },
16
+ arcs: { type: Array, default: void 0 },
17
+ atmosphere: { type: Object, default: void 0 },
18
+ focusPulse: { type: Object, default: void 0 },
19
+ outline: { type: Object, default: void 0 },
20
+ cinematic: { type: Object, default: void 0 },
21
+ dotted: { type: Object, default: void 0 },
22
+ wireframe: { type: Object, default: void 0 },
23
+ paper: { type: Object, default: void 0 },
24
+ hologram: { type: Object, default: void 0 },
25
+ starfield: { type: Object, default: void 0 },
26
+ postprocessing: { type: Object, default: void 0 },
27
+ axisTilt: { type: Number, default: void 0 },
28
+ autoRotate: { type: Object, default: void 0 },
29
+ performance: { type: Object, default: void 0 },
30
+ initialPosition: { type: Array, default: void 0 },
31
+ minZoom: { type: Number, default: void 0 },
32
+ maxZoom: { type: Number, default: void 0 },
33
+ zoom: { type: Object, default: void 0 },
34
+ transparent: { type: Boolean, default: void 0 },
35
+ framing: { type: Object, default: void 0 }
36
+ },
37
+ emits: {
38
+ countryClick: (event) => Boolean(event),
39
+ countryHover: (event) => event === null || Boolean(event),
40
+ markerClick: (event) => Boolean(event),
41
+ markerHover: (event) => event === null || Boolean(event),
42
+ surfaceClick: (event) => Boolean(event),
43
+ sceneEnter: (event) => Boolean(event),
44
+ sceneExit: (event) => Boolean(event),
45
+ storyComplete: (event) => Boolean(event),
46
+ ready: () => true,
47
+ error: (error) => Boolean(error)
48
+ },
49
+ setup(props, { emit, expose }) {
50
+ const hostRef = ref(null);
51
+ let instance = null;
52
+ const buildConfig = () => pickGlobeConfig(props);
53
+ onMounted(() => {
54
+ if (!hostRef.value) return;
55
+ const globe = createGlobe({ container: hostRef.value, ...buildConfig() });
56
+ globe.on("countryClick", (e) => emit("countryClick", e));
57
+ globe.on("countryHover", (e) => emit("countryHover", e));
58
+ globe.on("markerClick", (e) => emit("markerClick", e));
59
+ globe.on("markerHover", (e) => emit("markerHover", e));
60
+ globe.on("surfaceClick", (e) => emit("surfaceClick", e));
61
+ globe.on("sceneEnter", (e) => emit("sceneEnter", e));
62
+ globe.on("sceneExit", (e) => emit("sceneExit", e));
63
+ globe.on("storyComplete", (e) => emit("storyComplete", e));
64
+ globe.on("ready", () => emit("ready"));
65
+ globe.on("error", (err) => emit("error", err));
66
+ globe.mount();
67
+ instance = globe;
68
+ });
69
+ watch(
70
+ () => buildConfig(),
71
+ (config) => instance?.update(config),
72
+ { deep: true }
73
+ );
74
+ onBeforeUnmount(() => {
75
+ instance?.destroy();
76
+ instance = null;
77
+ });
78
+ expose({
79
+ /** The underlying engine instance, or null before mount / after unmount. */
80
+ getInstance: () => instance,
81
+ setRotation: (position, animate) => instance?.setRotation(position, animate),
82
+ addMarker: (marker) => instance?.addMarker(marker),
83
+ removeMarker: (id) => instance?.removeMarker(id),
84
+ resize: () => instance?.resize(),
85
+ getCanvas: () => instance?.getCanvas() ?? null
86
+ });
87
+ return () => h("div", {
88
+ ref: hostRef,
89
+ style: { width: "100%", height: "100%" }
90
+ });
91
+ }
92
+ });
93
+
94
+ export { VueGlobe };
95
+ //# sourceMappingURL=index.js.map
96
+ //# sourceMappingURL=index.js.map
package/dist/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/VueGlobe.ts"],"names":[],"mappings":";;;;AAkDO,IAAM,WAAW,eAAA,CAAgB;AAAA,EACtC,IAAA,EAAM,UAAA;AAAA,EACN,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,EAAE,IAAA,EAAM,MAAA,EAA+B,SAAS,MAAA,EAAU;AAAA,IAChE,IAAA,EAAM,EAAE,IAAA,EAAM,MAAA,EAA+B,SAAS,MAAA,EAAU;AAAA,IAChE,KAAA,EAAO,EAAE,IAAA,EAAM,CAAC,QAAQ,MAAM,CAAA,EAA2B,SAAS,MAAA,EAAU;AAAA,IAC5E,SAAA,EAAW,EAAE,IAAA,EAAM,MAAA,EAAqC,SAAS,MAAA,EAAU;AAAA,IAC3E,aAAA,EAAe,EAAE,IAAA,EAAM,MAAA,EAAyC,SAAS,MAAA,EAAU;AAAA,IACnF,WAAA,EAAa,EAAE,IAAA,EAAM,MAAA,EAAoC,SAAS,MAAA,EAAU;AAAA,IAC5E,OAAA,EAAS,EAAE,IAAA,EAAM,KAAA,EAAgD,SAAS,MAAA,EAAU;AAAA,IACpF,WAAA,EAAa,EAAE,IAAA,EAAM,KAAA,EAAoD,SAAS,MAAA,EAAU;AAAA,IAC5F,IAAA,EAAM,EAAE,IAAA,EAAM,KAAA,EAA6C,SAAS,MAAA,EAAU;AAAA,IAC9E,UAAA,EAAY,EAAE,IAAA,EAAM,MAAA,EAAsC,SAAS,MAAA,EAAU;AAAA,IAC7E,UAAA,EAAY,EAAE,IAAA,EAAM,MAAA,EAA+C,SAAS,MAAA,EAAU;AAAA,IACtF,OAAA,EAAS,EAAE,IAAA,EAAM,MAAA,EAAmC,SAAS,MAAA,EAAU;AAAA,IACvE,SAAA,EAAW,EAAE,IAAA,EAAM,MAAA,EAAqC,SAAS,MAAA,EAAU;AAAA,IAC3E,MAAA,EAAQ,EAAE,IAAA,EAAM,MAAA,EAAkC,SAAS,MAAA,EAAU;AAAA,IACrE,SAAA,EAAW,EAAE,IAAA,EAAM,MAAA,EAAqC,SAAS,MAAA,EAAU;AAAA,IAC3E,KAAA,EAAO,EAAE,IAAA,EAAM,MAAA,EAAiC,SAAS,MAAA,EAAU;AAAA,IACnE,QAAA,EAAU,EAAE,IAAA,EAAM,MAAA,EAAoC,SAAS,MAAA,EAAU;AAAA,IACzE,SAAA,EAAW,EAAE,IAAA,EAAM,MAAA,EAAqC,SAAS,MAAA,EAAU;AAAA,IAC3E,cAAA,EAAgB,EAAE,IAAA,EAAM,MAAA,EAA0C,SAAS,MAAA,EAAU;AAAA,IACrF,QAAA,EAAU,EAAE,IAAA,EAAM,MAAA,EAAQ,SAAS,MAAA,EAAU;AAAA,IAC7C,UAAA,EAAY,EAAE,IAAA,EAAM,MAAA,EAAsC,SAAS,MAAA,EAAU;AAAA,IAC7E,WAAA,EAAa,EAAE,IAAA,EAAM,MAAA,EAAuC,SAAS,MAAA,EAAU;AAAA,IAC/E,eAAA,EAAiB,EAAE,IAAA,EAAM,KAAA,EAAsC,SAAS,MAAA,EAAU;AAAA,IAClF,OAAA,EAAS,EAAE,IAAA,EAAM,MAAA,EAAQ,SAAS,MAAA,EAAU;AAAA,IAC5C,OAAA,EAAS,EAAE,IAAA,EAAM,MAAA,EAAQ,SAAS,MAAA,EAAU;AAAA,IAC5C,IAAA,EAAM,EAAE,IAAA,EAAM,MAAA,EAAgC,SAAS,MAAA,EAAU;AAAA,IACjE,WAAA,EAAa,EAAE,IAAA,EAAM,OAAA,EAAS,SAAS,MAAA,EAAU;AAAA,IACjD,OAAA,EAAS,EAAE,IAAA,EAAM,MAAA,EAAmC,SAAS,MAAA;AAAU,GACzE;AAAA,EACA,KAAA,EAAO;AAAA,IACL,YAAA,EAAc,CAAC,KAAA,KAAwB,OAAA,CAAQ,KAAK,CAAA;AAAA,IACpD,cAAc,CAAC,KAAA,KAA+B,KAAA,KAAU,IAAA,IAAQ,QAAQ,KAAK,CAAA;AAAA,IAC7E,WAAA,EAAa,CAAC,KAAA,KAAuB,OAAA,CAAQ,KAAK,CAAA;AAAA,IAClD,aAAa,CAAC,KAAA,KAA8B,KAAA,KAAU,IAAA,IAAQ,QAAQ,KAAK,CAAA;AAAA,IAC3E,YAAA,EAAc,CAAC,KAAA,KAA6B,OAAA,CAAQ,KAAK,CAAA;AAAA,IACzD,UAAA,EAAY,CAAC,KAAA,KAA2B,OAAA,CAAQ,KAAK,CAAA;AAAA,IACrD,SAAA,EAAW,CAAC,KAAA,KAA2B,OAAA,CAAQ,KAAK,CAAA;AAAA,IACpD,aAAA,EAAe,CAAC,KAAA,KAA8B,OAAA,CAAQ,KAAK,CAAA;AAAA,IAC3D,OAAO,MAAM,IAAA;AAAA,IACb,KAAA,EAAO,CAAC,KAAA,KAAiB,OAAA,CAAQ,KAAK;AAAA,GACxC;AAAA,EACA,KAAA,CAAM,KAAA,EAAO,EAAE,IAAA,EAAM,QAAO,EAAG;AAC7B,IAAA,MAAM,OAAA,GAAU,IAA2B,IAAI,CAAA;AAC/C,IAAA,IAAI,QAAA,GAAiC,IAAA;AAErC,IAAA,MAAM,WAAA,GAAc,MAAM,eAAA,CAAgB,KAA2C,CAAA;AAErF,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,QAAQ,KAAA,EAAO;AACpB,MAAA,MAAM,KAAA,GAAQ,YAAY,EAAE,SAAA,EAAW,QAAQ,KAAA,EAAO,GAAG,WAAA,EAAY,EAAG,CAAA;AACxE,MAAA,KAAA,CAAM,GAAG,cAAA,EAAgB,CAAC,MAAM,IAAA,CAAK,cAAA,EAAgB,CAAC,CAAC,CAAA;AACvD,MAAA,KAAA,CAAM,GAAG,cAAA,EAAgB,CAAC,MAAM,IAAA,CAAK,cAAA,EAAgB,CAAC,CAAC,CAAA;AACvD,MAAA,KAAA,CAAM,GAAG,aAAA,EAAe,CAAC,MAAM,IAAA,CAAK,aAAA,EAAe,CAAC,CAAC,CAAA;AACrD,MAAA,KAAA,CAAM,GAAG,aAAA,EAAe,CAAC,MAAM,IAAA,CAAK,aAAA,EAAe,CAAC,CAAC,CAAA;AACrD,MAAA,KAAA,CAAM,GAAG,cAAA,EAAgB,CAAC,MAAM,IAAA,CAAK,cAAA,EAAgB,CAAC,CAAC,CAAA;AACvD,MAAA,KAAA,CAAM,GAAG,YAAA,EAAc,CAAC,MAAM,IAAA,CAAK,YAAA,EAAc,CAAC,CAAC,CAAA;AACnD,MAAA,KAAA,CAAM,GAAG,WAAA,EAAa,CAAC,MAAM,IAAA,CAAK,WAAA,EAAa,CAAC,CAAC,CAAA;AACjD,MAAA,KAAA,CAAM,GAAG,eAAA,EAAiB,CAAC,MAAM,IAAA,CAAK,eAAA,EAAiB,CAAC,CAAC,CAAA;AACzD,MAAA,KAAA,CAAM,EAAA,CAAG,OAAA,EAAS,MAAM,IAAA,CAAK,OAAO,CAAC,CAAA;AACrC,MAAA,KAAA,CAAM,GAAG,OAAA,EAAS,CAAC,QAAQ,IAAA,CAAK,OAAA,EAAS,GAAG,CAAC,CAAA;AAC7C,MAAA,KAAA,CAAM,KAAA,EAAM;AACZ,MAAA,QAAA,GAAW,KAAA;AAAA,IACb,CAAC,CAAA;AAED,IAAA,KAAA;AAAA,MACE,MAAM,WAAA,EAAY;AAAA,MAClB,CAAC,MAAA,KAAW,QAAA,EAAU,MAAA,CAAO,MAAM,CAAA;AAAA,MACnC,EAAE,MAAM,IAAA;AAAK,KACf;AAEA,IAAA,eAAA,CAAgB,MAAM;AACpB,MAAA,QAAA,EAAU,OAAA,EAAQ;AAClB,MAAA,QAAA,GAAW,IAAA;AAAA,IACb,CAAC,CAAA;AAED,IAAA,MAAA,CAAO;AAAA;AAAA,MAEL,aAAa,MAA4B,QAAA;AAAA,MACzC,aAAa,CAAC,QAAA,EAAkB,YAAsB,QAAA,EAAU,WAAA,CAAY,UAAU,OAAO,CAAA;AAAA,MAC7F,SAAA,EAAW,CAAC,MAAA,KAAyB,QAAA,EAAU,UAAU,MAAM,CAAA;AAAA,MAC/D,YAAA,EAAc,CAAC,EAAA,KAAe,QAAA,EAAU,aAAa,EAAE,CAAA;AAAA,MACvD,MAAA,EAAQ,MAAM,QAAA,EAAU,MAAA,EAAO;AAAA,MAC/B,SAAA,EAAW,MAAM,QAAA,EAAU,SAAA,EAAU,IAAK;AAAA,KAC3C,CAAA;AAED,IAAA,OAAO,MACL,EAAE,KAAA,EAAO;AAAA,MACP,GAAA,EAAK,OAAA;AAAA,MACL,KAAA,EAAO,EAAE,KAAA,EAAO,MAAA,EAAQ,QAAQ,MAAA;AAAO,KACxC,CAAA;AAAA,EACL;AACF,CAAC","file":"index.js","sourcesContent":["import {\n defineComponent,\n h,\n onBeforeUnmount,\n onMounted,\n ref,\n watch,\n type PropType,\n} from 'vue';\nimport {\n createGlobe,\n pickGlobeConfig,\n type ArcConfig,\n type AtmosphereConfig,\n type AutoRotateConfig,\n type CinematicConfig,\n type CountriesConfig,\n type CountryDataMap,\n type CountryEvent,\n type CountryLabelsConfig,\n type DottedConfig,\n type FramingConfig,\n type GlobeConfig,\n type GlobeInstance,\n type GlobeKind,\n type GlobeMode,\n type HologramConfig,\n type HtmlMarkerConfig,\n type LatLng,\n type MarkerConfig,\n type MarkerEvent,\n type OutlineConfig,\n type PaperConfig,\n type PerformanceConfig,\n type PostProcessingConfig,\n type StarfieldConfig,\n type StoryCompleteEvent,\n type StorySceneEvent,\n type SurfaceClickEvent,\n type ThemeInput,\n type WireframeConfig,\n type ZoomConfig,\n} from '@globiojs/core';\n\n/**\n * `<VueGlobe />` — every `GlobeConfig` key is a prop (kebab-case in\n * templates), every globe event is an emit, and `getInstance()` on the\n * component ref hands out the underlying `GlobeInstance` for anything\n * imperative (camera moves, legends, stories).\n */\nexport const VueGlobe = defineComponent({\n name: 'VueGlobe',\n props: {\n mode: { type: String as PropType<GlobeMode>, default: undefined },\n kind: { type: String as PropType<GlobeKind>, default: undefined },\n theme: { type: [String, Object] as PropType<ThemeInput>, default: undefined },\n countries: { type: Object as PropType<CountriesConfig>, default: undefined },\n countryLabels: { type: Object as PropType<CountryLabelsConfig>, default: undefined },\n countryData: { type: Object as PropType<CountryDataMap>, default: undefined },\n markers: { type: Array as PropType<ReadonlyArray<MarkerConfig>>, default: undefined },\n htmlMarkers: { type: Array as PropType<ReadonlyArray<HtmlMarkerConfig>>, default: undefined },\n arcs: { type: Array as PropType<ReadonlyArray<ArcConfig>>, default: undefined },\n atmosphere: { type: Object as PropType<AtmosphereConfig>, default: undefined },\n focusPulse: { type: Object as PropType<GlobeConfig['focusPulse']>, default: undefined },\n outline: { type: Object as PropType<OutlineConfig>, default: undefined },\n cinematic: { type: Object as PropType<CinematicConfig>, default: undefined },\n dotted: { type: Object as PropType<DottedConfig>, default: undefined },\n wireframe: { type: Object as PropType<WireframeConfig>, default: undefined },\n paper: { type: Object as PropType<PaperConfig>, default: undefined },\n hologram: { type: Object as PropType<HologramConfig>, default: undefined },\n starfield: { type: Object as PropType<StarfieldConfig>, default: undefined },\n postprocessing: { type: Object as PropType<PostProcessingConfig>, default: undefined },\n axisTilt: { type: Number, default: undefined },\n autoRotate: { type: Object as PropType<AutoRotateConfig>, default: undefined },\n performance: { type: Object as PropType<PerformanceConfig>, default: undefined },\n initialPosition: { type: Array as unknown as PropType<LatLng>, default: undefined },\n minZoom: { type: Number, default: undefined },\n maxZoom: { type: Number, default: undefined },\n zoom: { type: Object as PropType<ZoomConfig>, default: undefined },\n transparent: { type: Boolean, default: undefined },\n framing: { type: Object as PropType<FramingConfig>, default: undefined },\n },\n emits: {\n countryClick: (event: CountryEvent) => Boolean(event),\n countryHover: (event: CountryEvent | null) => event === null || Boolean(event),\n markerClick: (event: MarkerEvent) => Boolean(event),\n markerHover: (event: MarkerEvent | null) => event === null || Boolean(event),\n surfaceClick: (event: SurfaceClickEvent) => Boolean(event),\n sceneEnter: (event: StorySceneEvent) => Boolean(event),\n sceneExit: (event: StorySceneEvent) => Boolean(event),\n storyComplete: (event: StoryCompleteEvent) => Boolean(event),\n ready: () => true,\n error: (error: Error) => Boolean(error),\n },\n setup(props, { emit, expose }) {\n const hostRef = ref<HTMLDivElement | null>(null);\n let instance: GlobeInstance | null = null;\n\n const buildConfig = () => pickGlobeConfig(props as unknown as Record<string, unknown>);\n\n onMounted(() => {\n if (!hostRef.value) return;\n const globe = createGlobe({ container: hostRef.value, ...buildConfig() });\n globe.on('countryClick', (e) => emit('countryClick', e));\n globe.on('countryHover', (e) => emit('countryHover', e));\n globe.on('markerClick', (e) => emit('markerClick', e));\n globe.on('markerHover', (e) => emit('markerHover', e));\n globe.on('surfaceClick', (e) => emit('surfaceClick', e));\n globe.on('sceneEnter', (e) => emit('sceneEnter', e));\n globe.on('sceneExit', (e) => emit('sceneExit', e));\n globe.on('storyComplete', (e) => emit('storyComplete', e));\n globe.on('ready', () => emit('ready'));\n globe.on('error', (err) => emit('error', err));\n globe.mount();\n instance = globe;\n });\n\n watch(\n () => buildConfig(),\n (config) => instance?.update(config),\n { deep: true }\n );\n\n onBeforeUnmount(() => {\n instance?.destroy();\n instance = null;\n });\n\n expose({\n /** The underlying engine instance, or null before mount / after unmount. */\n getInstance: (): GlobeInstance | null => instance,\n setRotation: (position: LatLng, animate?: boolean) => instance?.setRotation(position, animate),\n addMarker: (marker: MarkerConfig) => instance?.addMarker(marker),\n removeMarker: (id: string) => instance?.removeMarker(id),\n resize: () => instance?.resize(),\n getCanvas: () => instance?.getCanvas() ?? null,\n });\n\n return () =>\n h('div', {\n ref: hostRef,\n style: { width: '100%', height: '100%' },\n });\n },\n});\n"]}
package/package.json ADDED
@@ -0,0 +1,66 @@
1
+ {
2
+ "name": "@globiojs/vue",
3
+ "version": "0.1.0",
4
+ "description": "Vue 3 wrapper for @globiojs/core",
5
+ "keywords": [
6
+ "3d",
7
+ "globe",
8
+ "three.js",
9
+ "vue",
10
+ "webgl"
11
+ ],
12
+ "homepage": "https://globiojs.dev",
13
+ "bugs": {
14
+ "url": "https://github.com/SparrowVic/globiojs/issues"
15
+ },
16
+ "repository": {
17
+ "type": "git",
18
+ "url": "git+https://github.com/SparrowVic/globiojs.git",
19
+ "directory": "packages/vue"
20
+ },
21
+ "type": "module",
22
+ "sideEffects": false,
23
+ "main": "./dist/index.cjs",
24
+ "module": "./dist/index.js",
25
+ "types": "./dist/index.d.ts",
26
+ "exports": {
27
+ ".": {
28
+ "import": {
29
+ "types": "./dist/index.d.ts",
30
+ "default": "./dist/index.js"
31
+ },
32
+ "require": {
33
+ "types": "./dist/index.d.cts",
34
+ "default": "./dist/index.cjs"
35
+ }
36
+ }
37
+ },
38
+ "files": [
39
+ "dist",
40
+ "README.md",
41
+ "LICENSE"
42
+ ],
43
+ "peerDependencies": {
44
+ "three": ">=0.160.0",
45
+ "vue": ">=3.3.0",
46
+ "@globiojs/core": "^0.1.0"
47
+ },
48
+ "devDependencies": {
49
+ "three": "^0.160.0",
50
+ "tsup": "^8.0.1",
51
+ "typescript": "^5.3.3",
52
+ "vue": "^3.4.0",
53
+ "@globiojs/core": "^0.1.0"
54
+ },
55
+ "publishConfig": {
56
+ "access": "public"
57
+ },
58
+ "license": "MIT",
59
+ "author": "Wiktor Wróbel",
60
+ "scripts": {
61
+ "build": "tsup",
62
+ "dev": "tsup --watch",
63
+ "typecheck": "tsc --noEmit",
64
+ "clean": "rm -rf dist .turbo"
65
+ }
66
+ }