@clikvn/showroom-visualizer 0.3.2 → 0.3.3
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/dist/hooks/Visualizer/useTourVisualizer.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/utils/Visualizer/miniMap.utils.d.ts +18 -0
- package/dist/utils/Visualizer/miniMap.utils.d.ts.map +1 -0
- package/dist/web.js +1 -1
- package/package.json +1 -1
- package/dist/context/SwizzleContext.d.ts +0 -21
- package/dist/context/SwizzleContext.d.ts.map +0 -1
- package/dist/index.html +0 -110
- package/dist/types/swizzle.d.ts +0 -59
- package/dist/types/swizzle.d.ts.map +0 -1
package/package.json
CHANGED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import React, { ReactNode, ComponentType } from 'react';
|
|
2
|
-
import { SwizzleConfig, SwizzlePath } from '../types/swizzle';
|
|
3
|
-
type SwizzleContextType = {
|
|
4
|
-
swizzle: SwizzleConfig;
|
|
5
|
-
getSwizzledComponent: <T = unknown>(path: SwizzlePath, defaultComponent: ComponentType<T>) => ComponentType<T>;
|
|
6
|
-
};
|
|
7
|
-
/**
|
|
8
|
-
* Hook để access swizzle configuration
|
|
9
|
-
*/
|
|
10
|
-
export declare const useSwizzle: () => SwizzleContextType;
|
|
11
|
-
type Props = {
|
|
12
|
-
swizzle?: SwizzleConfig;
|
|
13
|
-
children: ReactNode;
|
|
14
|
-
};
|
|
15
|
-
/**
|
|
16
|
-
* SwizzleProvider - Wrap app với provider này để enable component swizzling
|
|
17
|
-
* Giống như Docusaurus swizzle pattern
|
|
18
|
-
*/
|
|
19
|
-
export declare const SwizzleProvider: React.FC<Props>;
|
|
20
|
-
export {};
|
|
21
|
-
//# sourceMappingURL=SwizzleContext.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SwizzleContext.d.ts","sourceRoot":"","sources":["../../src/context/SwizzleContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAGZ,SAAS,EACT,aAAa,EAGd,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAQ9D,KAAK,kBAAkB,GAAG;IACxB,OAAO,EAAE,aAAa,CAAC;IACvB,oBAAoB,EAAE,CAAC,CAAC,GAAG,OAAO,EAChC,IAAI,EAAE,WAAW,EACjB,gBAAgB,EAAE,aAAa,CAAC,CAAC,CAAC,KAC/B,aAAa,CAAC,CAAC,CAAC,CAAC;CACvB,CAAC;AAOF;;GAEG;AACH,eAAO,MAAM,UAAU,0BAAmC,CAAC;AAE3D,KAAK,KAAK,GAAG;IACX,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAkG3C,CAAC"}
|
package/dist/index.html
DELETED
|
@@ -1,110 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8" />
|
|
5
|
-
<meta
|
|
6
|
-
name="viewport"
|
|
7
|
-
content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"
|
|
8
|
-
/>
|
|
9
|
-
<title>Title</title>
|
|
10
|
-
</head>
|
|
11
|
-
<body>
|
|
12
|
-
<div class="flex h-screen w-screen">
|
|
13
|
-
<!-- <div class="h-full" style="width: 72px"></div>-->
|
|
14
|
-
<div class="h-full" style="width: /*calc(100% - 462px);*/ 100%">
|
|
15
|
-
<div class="h-full w-full relative">
|
|
16
|
-
<showroom-visualizer></showroom-visualizer>
|
|
17
|
-
</div>
|
|
18
|
-
</div>
|
|
19
|
-
<!-- <div class="h-full" style="width: 390px"></div>-->
|
|
20
|
-
</div>
|
|
21
|
-
<script type="module">
|
|
22
|
-
// import ShowroomVisualizer from 'https://85f81d7dc992.ngrok-free.app/web.js';
|
|
23
|
-
import ShowroomVisualizer from 'http://localhost:3000/web.js';
|
|
24
|
-
|
|
25
|
-
ShowroomVisualizer.initVisualizer({
|
|
26
|
-
apiHost: 'https://ci-api.clik.vn/vt360',
|
|
27
|
-
webRotateApiHost: 'https://ci-api.clik.vn/cms',
|
|
28
|
-
webRotateClientHost: 'https://ci-webrotate360-client.clik.vn',
|
|
29
|
-
config: {
|
|
30
|
-
language: 'VI',
|
|
31
|
-
// tourCode: 'TOUR_FXYCEN7ZZVW6',
|
|
32
|
-
|
|
33
|
-
// startScene: 'scene_kr3rgeezzvw6',
|
|
34
|
-
// hLookAt: -254,
|
|
35
|
-
// vLookAt: 1
|
|
36
|
-
// tourCode: 'TOUR_GEVEXLWNPT74',
|
|
37
|
-
// tourCode: 'TOUR_7YUL2ALGFL94',
|
|
38
|
-
tourCode: 'TOUR_KUFGDEPDTJA4',
|
|
39
|
-
hLookAt: 10,
|
|
40
|
-
vLookAt: 28,
|
|
41
|
-
// startScene: 'SCENE_KNLRAKUHFL94',
|
|
42
|
-
// hLookAt: -54.11884505373274,
|
|
43
|
-
// vLookAt: -9.111287009391969
|
|
44
|
-
|
|
45
|
-
// tourCode: 'tour_7a6hchjljga4'.toUpperCase(),
|
|
46
|
-
|
|
47
|
-
// tourCode: 'TOUR_ZJMHKMJEACAH',
|
|
48
|
-
// startScene: 'SCENE_LVN4DLUFACAH',
|
|
49
|
-
// hLookAt: -179.145,
|
|
50
|
-
// vLookAt: 11.597,
|
|
51
|
-
|
|
52
|
-
// tourCode: 'tour_7yul2algfl94'.toUpperCase(),
|
|
53
|
-
// startScene: 'scene_vrz9v2uhfl94'.toUpperCase(),
|
|
54
|
-
// hLookAt: -87,
|
|
55
|
-
// vLookAt: 9,
|
|
56
|
-
// hotspot: 'item27getn2d2m94'.toUpperCase(),
|
|
57
|
-
},
|
|
58
|
-
listeners: {
|
|
59
|
-
onTourSwitchLoaded: (tool) => {
|
|
60
|
-
window.switchTour = tool.switchTour;
|
|
61
|
-
},
|
|
62
|
-
onSceneCompleted: (...args) => {
|
|
63
|
-
// console.log('onSceneCompleted', args);
|
|
64
|
-
},
|
|
65
|
-
onLoaded: (tool) => {
|
|
66
|
-
// console.log('TOOL_LOADED')
|
|
67
|
-
window.tool = tool;
|
|
68
|
-
},
|
|
69
|
-
onPoiClicked: (poi) => {
|
|
70
|
-
console.log('onPoiClicked', poi);
|
|
71
|
-
},
|
|
72
|
-
onPoiOut: () => {
|
|
73
|
-
// console.log('onPoiOut');
|
|
74
|
-
},
|
|
75
|
-
onPoiOver: (poi) => {
|
|
76
|
-
console.log('onPoiOver', poi);
|
|
77
|
-
},
|
|
78
|
-
onPoiInCenter: (poi) => {
|
|
79
|
-
// console.log('onPoiInCenter', poi);
|
|
80
|
-
},
|
|
81
|
-
onStartScenario: (code) => {
|
|
82
|
-
// console.log('onStartScenario', code);
|
|
83
|
-
},
|
|
84
|
-
onScenarioPaused: (code) => {
|
|
85
|
-
// console.log('onScenarioPaused', code);
|
|
86
|
-
},
|
|
87
|
-
onScenarioEnded: (code) => {
|
|
88
|
-
// console.log('onScenarioEnded', code);
|
|
89
|
-
},
|
|
90
|
-
onChanged: (args) => {
|
|
91
|
-
console.log('onChanged', args);
|
|
92
|
-
},
|
|
93
|
-
onStartLoadingTour: (code) => {
|
|
94
|
-
// console.log('onStartLoadingTour', code);
|
|
95
|
-
},
|
|
96
|
-
onFinishedLoadingTour: (code) => {
|
|
97
|
-
// console.log('onFinishedLoadingTour', code);
|
|
98
|
-
},
|
|
99
|
-
onStateChanged: (changes) => {
|
|
100
|
-
// console.log('changes', changes);
|
|
101
|
-
},
|
|
102
|
-
onShareProductClicked: (code) => {
|
|
103
|
-
console.log('onShareProductClicked----->', code);
|
|
104
|
-
},
|
|
105
|
-
},
|
|
106
|
-
mobile: false,
|
|
107
|
-
});
|
|
108
|
-
</script>
|
|
109
|
-
</body>
|
|
110
|
-
</html>
|
package/dist/types/swizzle.d.ts
DELETED
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Swizzle Config - Cho phép customize components theo nested path
|
|
3
|
-
* Giống như Docusaurus swizzle pattern
|
|
4
|
-
*
|
|
5
|
-
* @example
|
|
6
|
-
* ```tsx
|
|
7
|
-
* // ✅ ĐÚNG - Pass component function
|
|
8
|
-
* swizzle={{
|
|
9
|
-
* 'Floorplan.Minimap.Marker': CustomMarker,
|
|
10
|
-
* 'Floorplan.Minimap': CustomMinimap,
|
|
11
|
-
* }}
|
|
12
|
-
*
|
|
13
|
-
* // ❌ SAI - Không pass React element
|
|
14
|
-
* swizzle={{
|
|
15
|
-
* 'Floorplan.Minimap.Marker': <CustomMarker />, // ❌ Wrong!
|
|
16
|
-
* }}
|
|
17
|
-
* ```
|
|
18
|
-
*
|
|
19
|
-
* @important Pass component functions, NOT React elements!
|
|
20
|
-
*/
|
|
21
|
-
export type SwizzleConfig = {
|
|
22
|
-
Floorplan?: any;
|
|
23
|
-
'Floorplan.Map'?: any;
|
|
24
|
-
'Floorplan.Minimap'?: any;
|
|
25
|
-
'Floorplan.Minimap.Marker'?: any;
|
|
26
|
-
'Floorplan.Minimap.Polygon'?: any;
|
|
27
|
-
'Floorplan.Minimap.Radar'?: any;
|
|
28
|
-
};
|
|
29
|
-
/**
|
|
30
|
-
* Helper type để auto-complete swizzle paths
|
|
31
|
-
*/
|
|
32
|
-
export type SwizzlePath = keyof SwizzleConfig;
|
|
33
|
-
/**
|
|
34
|
-
* Registry của tất cả components có thể swizzle
|
|
35
|
-
* Dùng để documentation và validation
|
|
36
|
-
*/
|
|
37
|
-
export declare const SWIZZLEABLE_COMPONENTS: {
|
|
38
|
-
readonly Floorplan: {
|
|
39
|
-
readonly path: "src/components/SkinLayer/Floorplan/index.tsx";
|
|
40
|
-
readonly description: "Main Floorplan container with bottom sheet";
|
|
41
|
-
};
|
|
42
|
-
readonly 'Floorplan.Map': {
|
|
43
|
-
readonly path: "src/components/SkinLayer/Floorplan/Map.tsx";
|
|
44
|
-
readonly description: "Floorplan map wrapper with controls";
|
|
45
|
-
};
|
|
46
|
-
readonly 'Floorplan.Minimap': {
|
|
47
|
-
readonly path: "src/components/SkinLayer/Floorplan/Minimap/index.tsx";
|
|
48
|
-
readonly description: "Interactive minimap with markers and polygons";
|
|
49
|
-
};
|
|
50
|
-
readonly 'Floorplan.Minimap.Marker': {
|
|
51
|
-
readonly path: "src/components/SkinLayer/Floorplan/Minimap/MiniMapMarker.tsx";
|
|
52
|
-
readonly description: "Individual marker on minimap";
|
|
53
|
-
};
|
|
54
|
-
readonly 'Floorplan.Minimap.Polygon': {
|
|
55
|
-
readonly path: "src/components/SkinLayer/Floorplan/Minimap/MiniMapPolygons/index.tsx";
|
|
56
|
-
readonly description: "Polygon areas on minimap";
|
|
57
|
-
};
|
|
58
|
-
};
|
|
59
|
-
//# sourceMappingURL=swizzle.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"swizzle.d.ts","sourceRoot":"","sources":["../../src/types/swizzle.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,MAAM,aAAa,GAAG;IAE1B,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,eAAe,CAAC,EAAE,GAAG,CAAC;IACtB,mBAAmB,CAAC,EAAE,GAAG,CAAC;IAC1B,0BAA0B,CAAC,EAAE,GAAG,CAAC;IACjC,2BAA2B,CAAC,EAAE,GAAG,CAAC;IAClC,yBAAyB,CAAC,EAAE,GAAG,CAAC;CAGjC,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,aAAa,CAAC;AAE9C;;;GAGG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;CAsBzB,CAAC"}
|