@zcomponent/core 0.0.5 → 0.0.6
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/css/zcomponent.css
CHANGED
|
@@ -44,4 +44,51 @@
|
|
|
44
44
|
|
|
45
45
|
#zcomponent-overlay > * {
|
|
46
46
|
pointer-events: auto;
|
|
47
|
+
position: absolute;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
.zcomponent-align {
|
|
52
|
+
position: absolute;
|
|
53
|
+
transform-origin: 0 0;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.zcomponent-h-left {
|
|
57
|
+
left: 0px;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.zcomponent-h-center {
|
|
61
|
+
left: 50%;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.zcomponent-h-right {
|
|
65
|
+
right: 0px;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.zcomponent-v-top {
|
|
69
|
+
top: 0px;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.zcomponent-v-center {
|
|
73
|
+
top: 50%;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.zcomponent-v-bottom {
|
|
77
|
+
bottom: 0px;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.zcomponent-hc-v {
|
|
81
|
+
transform: translate(-50%, 0);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.zcomponent-h-vc {
|
|
85
|
+
transform: translate(0%, -50%);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.zcomponent-h-v {
|
|
89
|
+
transform: translate(0%, 0%);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.zcomponent-hc-vc {
|
|
93
|
+
transform: translate(-50%, -50%);
|
|
47
94
|
}
|
|
@@ -14,8 +14,19 @@ export interface CanvasContextOptions {
|
|
|
14
14
|
overlay: HTMLDivElement;
|
|
15
15
|
}
|
|
16
16
|
export declare const CanvasContext: import("../context").ContextTypeWithDefault<CanvasContext, [canvas?: HTMLCanvasElement | undefined, options?: CanvasContextOptions | undefined]>;
|
|
17
|
+
export declare enum HorizontalAlignment {
|
|
18
|
+
'left' = "left",
|
|
19
|
+
'center' = "center",
|
|
20
|
+
'right' = "right"
|
|
21
|
+
}
|
|
22
|
+
export declare enum VerticalAlignment {
|
|
23
|
+
'top' = "top",
|
|
24
|
+
'center' = "center",
|
|
25
|
+
'bottom' = "bottom"
|
|
26
|
+
}
|
|
17
27
|
export declare function useCanvas(mgr: ContextManager): HTMLCanvasElement;
|
|
18
28
|
export declare function useOverlay(mgr: ContextManager): Observable<HTMLDivElement, never>;
|
|
19
29
|
export declare function useCanvasSize(mgr: ContextManager): Observable<[number, number], never>;
|
|
20
30
|
export declare function useOnBeforeRender(mgr: ContextManager): Event<[number]>;
|
|
21
31
|
export declare function useOnAfterRender(mgr: ContextManager): Event<[number]>;
|
|
32
|
+
export declare function classNameForAlignment(h: HorizontalAlignment, v: VerticalAlignment): string;
|
|
@@ -53,6 +53,18 @@ export const CanvasContext = defineContextType((ctx, canvas, options) => {
|
|
|
53
53
|
}
|
|
54
54
|
};
|
|
55
55
|
});
|
|
56
|
+
export var HorizontalAlignment;
|
|
57
|
+
(function (HorizontalAlignment) {
|
|
58
|
+
HorizontalAlignment["left"] = "left";
|
|
59
|
+
HorizontalAlignment["center"] = "center";
|
|
60
|
+
HorizontalAlignment["right"] = "right";
|
|
61
|
+
})(HorizontalAlignment || (HorizontalAlignment = {}));
|
|
62
|
+
export var VerticalAlignment;
|
|
63
|
+
(function (VerticalAlignment) {
|
|
64
|
+
VerticalAlignment["top"] = "top";
|
|
65
|
+
VerticalAlignment["center"] = "center";
|
|
66
|
+
VerticalAlignment["bottom"] = "bottom";
|
|
67
|
+
})(VerticalAlignment || (VerticalAlignment = {}));
|
|
56
68
|
export function useCanvas(mgr) {
|
|
57
69
|
return mgr.get(CanvasContext).canvas;
|
|
58
70
|
}
|
|
@@ -68,3 +80,37 @@ export function useOnBeforeRender(mgr) {
|
|
|
68
80
|
export function useOnAfterRender(mgr) {
|
|
69
81
|
return mgr.get(CanvasContext).onAfterRender;
|
|
70
82
|
}
|
|
83
|
+
export function classNameForAlignment(h, v) {
|
|
84
|
+
const names = ['zcomponent-align'];
|
|
85
|
+
switch (h) {
|
|
86
|
+
case HorizontalAlignment.left:
|
|
87
|
+
names.push('zcomponent-h-left');
|
|
88
|
+
break;
|
|
89
|
+
case HorizontalAlignment.center:
|
|
90
|
+
names.push('zcomponent-h-center');
|
|
91
|
+
break;
|
|
92
|
+
case HorizontalAlignment.right:
|
|
93
|
+
names.push('zcomponent-h-right');
|
|
94
|
+
break;
|
|
95
|
+
}
|
|
96
|
+
switch (v) {
|
|
97
|
+
case VerticalAlignment.top:
|
|
98
|
+
names.push('zcomponent-v-top');
|
|
99
|
+
break;
|
|
100
|
+
case VerticalAlignment.center:
|
|
101
|
+
names.push('zcomponent-v-center');
|
|
102
|
+
break;
|
|
103
|
+
case VerticalAlignment.bottom:
|
|
104
|
+
names.push('zcomponent-v-bottom');
|
|
105
|
+
break;
|
|
106
|
+
}
|
|
107
|
+
if (h !== HorizontalAlignment.center && v !== VerticalAlignment.center)
|
|
108
|
+
names.push('zcomponent-h-v');
|
|
109
|
+
if (h === HorizontalAlignment.center && v !== VerticalAlignment.center)
|
|
110
|
+
names.push('zcomponent-hc-v');
|
|
111
|
+
if (h === HorizontalAlignment.center && v === VerticalAlignment.center)
|
|
112
|
+
names.push('zcomponent-hc-vc');
|
|
113
|
+
if (h !== HorizontalAlignment.center && v === VerticalAlignment.center)
|
|
114
|
+
names.push('zcomponent-h-vc');
|
|
115
|
+
return names.join(' ');
|
|
116
|
+
}
|