ugcinc-render 1.8.76 → 1.8.78
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/index.js +99 -17
- package/dist/index.mjs +99 -17
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -2890,6 +2890,8 @@ function DebugOverlay({
|
|
|
2890
2890
|
const [mousePos, setMousePos] = (0, import_react7.useState)(null);
|
|
2891
2891
|
const [crosshairPos, setCrosshairPos] = (0, import_react7.useState)(null);
|
|
2892
2892
|
const [viewportPos, setViewportPos] = (0, import_react7.useState)(null);
|
|
2893
|
+
const [pinnedPos, setPinnedPos] = (0, import_react7.useState)(null);
|
|
2894
|
+
const [pinnedCrosshairPos, setPinnedCrosshairPos] = (0, import_react7.useState)(null);
|
|
2893
2895
|
const [isDragging, setIsDragging] = (0, import_react7.useState)(false);
|
|
2894
2896
|
const lastDragPos = (0, import_react7.useRef)(null);
|
|
2895
2897
|
const zoomScale = zoom / 100;
|
|
@@ -2906,6 +2908,22 @@ function DebugOverlay({
|
|
|
2906
2908
|
pixelHeightPercent: pixelHeight / height * 100
|
|
2907
2909
|
});
|
|
2908
2910
|
}, [mousePos, zoomScale, scrollX, scrollY, width, height]);
|
|
2911
|
+
(0, import_react7.useEffect)(() => {
|
|
2912
|
+
if (pinnedPos === null) {
|
|
2913
|
+
setPinnedCrosshairPos(null);
|
|
2914
|
+
return;
|
|
2915
|
+
}
|
|
2916
|
+
const snappedScreenX = (pinnedPos.x + 0.5) * zoomScale - scrollX;
|
|
2917
|
+
const snappedScreenY = (pinnedPos.y + 0.5) * zoomScale - scrollY;
|
|
2918
|
+
const pixelWidth = zoomScale;
|
|
2919
|
+
const pixelHeight = zoomScale;
|
|
2920
|
+
setPinnedCrosshairPos({
|
|
2921
|
+
xPercent: snappedScreenX / width * 100,
|
|
2922
|
+
yPercent: snappedScreenY / height * 100,
|
|
2923
|
+
pixelWidthPercent: pixelWidth / width * 100,
|
|
2924
|
+
pixelHeightPercent: pixelHeight / height * 100
|
|
2925
|
+
});
|
|
2926
|
+
}, [pinnedPos, zoomScale, scrollX, scrollY, width, height]);
|
|
2909
2927
|
const handleMouseMove = (0, import_react7.useCallback)(
|
|
2910
2928
|
(e) => {
|
|
2911
2929
|
const rect = e.currentTarget.getBoundingClientRect();
|
|
@@ -2933,11 +2951,22 @@ function DebugOverlay({
|
|
|
2933
2951
|
[width, height, zoomScale, scrollX, scrollY, isDragging, zoom, onZoomChange]
|
|
2934
2952
|
);
|
|
2935
2953
|
const handleMouseDown = (0, import_react7.useCallback)((e) => {
|
|
2936
|
-
|
|
2954
|
+
const tagName = e.target.tagName;
|
|
2955
|
+
if (tagName === "BUTTON" || tagName === "INPUT" || tagName === "LABEL") return;
|
|
2937
2956
|
e.preventDefault();
|
|
2957
|
+
if (e.ctrlKey || e.metaKey) {
|
|
2958
|
+
if (mousePos) {
|
|
2959
|
+
setPinnedPos({ x: mousePos.x, y: mousePos.y });
|
|
2960
|
+
}
|
|
2961
|
+
return;
|
|
2962
|
+
}
|
|
2963
|
+
if (pinnedPos) {
|
|
2964
|
+
setPinnedPos(null);
|
|
2965
|
+
return;
|
|
2966
|
+
}
|
|
2938
2967
|
setIsDragging(true);
|
|
2939
2968
|
lastDragPos.current = { x: e.clientX, y: e.clientY };
|
|
2940
|
-
}, []);
|
|
2969
|
+
}, [mousePos, pinnedPos]);
|
|
2941
2970
|
const handleMouseUp = (0, import_react7.useCallback)(() => {
|
|
2942
2971
|
setIsDragging(false);
|
|
2943
2972
|
lastDragPos.current = null;
|
|
@@ -2989,6 +3018,38 @@ function DebugOverlay({
|
|
|
2989
3018
|
cursor: none !important;
|
|
2990
3019
|
}
|
|
2991
3020
|
` }),
|
|
3021
|
+
pinnedCrosshairPos && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
|
|
3022
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
3023
|
+
"div",
|
|
3024
|
+
{
|
|
3025
|
+
style: {
|
|
3026
|
+
position: "absolute",
|
|
3027
|
+
top: 0,
|
|
3028
|
+
left: `${pinnedCrosshairPos.xPercent}%`,
|
|
3029
|
+
width: `${Math.max(pinnedCrosshairPos.pixelWidthPercent, 0.1)}%`,
|
|
3030
|
+
height: "100%",
|
|
3031
|
+
backgroundColor: "#00FFFF",
|
|
3032
|
+
pointerEvents: "none",
|
|
3033
|
+
transform: "translateX(-50%)"
|
|
3034
|
+
}
|
|
3035
|
+
}
|
|
3036
|
+
),
|
|
3037
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
3038
|
+
"div",
|
|
3039
|
+
{
|
|
3040
|
+
style: {
|
|
3041
|
+
position: "absolute",
|
|
3042
|
+
top: `${pinnedCrosshairPos.yPercent}%`,
|
|
3043
|
+
left: 0,
|
|
3044
|
+
width: "100%",
|
|
3045
|
+
height: `${Math.max(pinnedCrosshairPos.pixelHeightPercent, 0.1)}%`,
|
|
3046
|
+
backgroundColor: "#00FFFF",
|
|
3047
|
+
pointerEvents: "none",
|
|
3048
|
+
transform: "translateY(-50%)"
|
|
3049
|
+
}
|
|
3050
|
+
}
|
|
3051
|
+
)
|
|
3052
|
+
] }),
|
|
2992
3053
|
crosshairPos && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
|
|
2993
3054
|
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
2994
3055
|
"div",
|
|
@@ -3047,6 +3108,17 @@ function DebugOverlay({
|
|
|
3047
3108
|
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
|
|
3048
3109
|
"Y: ",
|
|
3049
3110
|
mousePos.y
|
|
3111
|
+
] }),
|
|
3112
|
+
pinnedPos && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { marginTop: 12, paddingTop: 12, borderTop: "1px solid rgba(0, 255, 255, 0.5)" }, children: [
|
|
3113
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { color: "#00FFFF", fontSize: 20 }, children: "Pinned:" }),
|
|
3114
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { color: "#00FFFF" }, children: [
|
|
3115
|
+
"X: ",
|
|
3116
|
+
pinnedPos.x
|
|
3117
|
+
] }),
|
|
3118
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { color: "#00FFFF" }, children: [
|
|
3119
|
+
"Y: ",
|
|
3120
|
+
pinnedPos.y
|
|
3121
|
+
] })
|
|
3050
3122
|
] })
|
|
3051
3123
|
]
|
|
3052
3124
|
}
|
|
@@ -3079,24 +3151,34 @@ function DebugOverlay({
|
|
|
3079
3151
|
"%"
|
|
3080
3152
|
] }),
|
|
3081
3153
|
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { color: "#888", fontSize: 14, marginTop: 4, pointerEvents: "none" }, children: "Scroll to zoom, drag to pan" }),
|
|
3082
|
-
/* @__PURE__ */ (0, import_jsx_runtime9.
|
|
3083
|
-
"
|
|
3154
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
3155
|
+
"label",
|
|
3084
3156
|
{
|
|
3085
|
-
onClick: onToggleReference,
|
|
3086
3157
|
style: {
|
|
3158
|
+
display: "flex",
|
|
3159
|
+
alignItems: "center",
|
|
3160
|
+
gap: 8,
|
|
3087
3161
|
marginTop: 12,
|
|
3088
|
-
|
|
3089
|
-
|
|
3090
|
-
fontWeight: "bold",
|
|
3091
|
-
fontFamily: "monospace",
|
|
3092
|
-
backgroundColor: referenceVisible ? "#FF6B6B" : "#4CAF50",
|
|
3093
|
-
color: "#FFFFFF",
|
|
3094
|
-
border: "none",
|
|
3095
|
-
borderRadius: 4,
|
|
3096
|
-
cursor: "none",
|
|
3097
|
-
width: "100%"
|
|
3162
|
+
cursor: "pointer",
|
|
3163
|
+
userSelect: "none"
|
|
3098
3164
|
},
|
|
3099
|
-
children:
|
|
3165
|
+
children: [
|
|
3166
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
3167
|
+
"input",
|
|
3168
|
+
{
|
|
3169
|
+
type: "checkbox",
|
|
3170
|
+
checked: referenceVisible,
|
|
3171
|
+
onChange: onToggleReference,
|
|
3172
|
+
style: {
|
|
3173
|
+
width: 20,
|
|
3174
|
+
height: 20,
|
|
3175
|
+
cursor: "pointer",
|
|
3176
|
+
accentColor: "#4CAF50"
|
|
3177
|
+
}
|
|
3178
|
+
}
|
|
3179
|
+
),
|
|
3180
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "#FFFFFF", fontSize: 16 }, children: "Show Reference" })
|
|
3181
|
+
]
|
|
3100
3182
|
}
|
|
3101
3183
|
)
|
|
3102
3184
|
]
|
|
@@ -3281,7 +3363,7 @@ function InstagramDmComposition({
|
|
|
3281
3363
|
bottom: 0,
|
|
3282
3364
|
zIndex: 100,
|
|
3283
3365
|
pointerEvents: "none",
|
|
3284
|
-
opacity:
|
|
3366
|
+
opacity: clampedReferenceOpacity / 100
|
|
3285
3367
|
},
|
|
3286
3368
|
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
3287
3369
|
import_remotion9.Img,
|
package/dist/index.mjs
CHANGED
|
@@ -1998,6 +1998,8 @@ function DebugOverlay({
|
|
|
1998
1998
|
const [mousePos, setMousePos] = useState2(null);
|
|
1999
1999
|
const [crosshairPos, setCrosshairPos] = useState2(null);
|
|
2000
2000
|
const [viewportPos, setViewportPos] = useState2(null);
|
|
2001
|
+
const [pinnedPos, setPinnedPos] = useState2(null);
|
|
2002
|
+
const [pinnedCrosshairPos, setPinnedCrosshairPos] = useState2(null);
|
|
2001
2003
|
const [isDragging, setIsDragging] = useState2(false);
|
|
2002
2004
|
const lastDragPos = useRef(null);
|
|
2003
2005
|
const zoomScale = zoom / 100;
|
|
@@ -2014,6 +2016,22 @@ function DebugOverlay({
|
|
|
2014
2016
|
pixelHeightPercent: pixelHeight / height * 100
|
|
2015
2017
|
});
|
|
2016
2018
|
}, [mousePos, zoomScale, scrollX, scrollY, width, height]);
|
|
2019
|
+
useEffect2(() => {
|
|
2020
|
+
if (pinnedPos === null) {
|
|
2021
|
+
setPinnedCrosshairPos(null);
|
|
2022
|
+
return;
|
|
2023
|
+
}
|
|
2024
|
+
const snappedScreenX = (pinnedPos.x + 0.5) * zoomScale - scrollX;
|
|
2025
|
+
const snappedScreenY = (pinnedPos.y + 0.5) * zoomScale - scrollY;
|
|
2026
|
+
const pixelWidth = zoomScale;
|
|
2027
|
+
const pixelHeight = zoomScale;
|
|
2028
|
+
setPinnedCrosshairPos({
|
|
2029
|
+
xPercent: snappedScreenX / width * 100,
|
|
2030
|
+
yPercent: snappedScreenY / height * 100,
|
|
2031
|
+
pixelWidthPercent: pixelWidth / width * 100,
|
|
2032
|
+
pixelHeightPercent: pixelHeight / height * 100
|
|
2033
|
+
});
|
|
2034
|
+
}, [pinnedPos, zoomScale, scrollX, scrollY, width, height]);
|
|
2017
2035
|
const handleMouseMove = useCallback(
|
|
2018
2036
|
(e) => {
|
|
2019
2037
|
const rect = e.currentTarget.getBoundingClientRect();
|
|
@@ -2041,11 +2059,22 @@ function DebugOverlay({
|
|
|
2041
2059
|
[width, height, zoomScale, scrollX, scrollY, isDragging, zoom, onZoomChange]
|
|
2042
2060
|
);
|
|
2043
2061
|
const handleMouseDown = useCallback((e) => {
|
|
2044
|
-
|
|
2062
|
+
const tagName = e.target.tagName;
|
|
2063
|
+
if (tagName === "BUTTON" || tagName === "INPUT" || tagName === "LABEL") return;
|
|
2045
2064
|
e.preventDefault();
|
|
2065
|
+
if (e.ctrlKey || e.metaKey) {
|
|
2066
|
+
if (mousePos) {
|
|
2067
|
+
setPinnedPos({ x: mousePos.x, y: mousePos.y });
|
|
2068
|
+
}
|
|
2069
|
+
return;
|
|
2070
|
+
}
|
|
2071
|
+
if (pinnedPos) {
|
|
2072
|
+
setPinnedPos(null);
|
|
2073
|
+
return;
|
|
2074
|
+
}
|
|
2046
2075
|
setIsDragging(true);
|
|
2047
2076
|
lastDragPos.current = { x: e.clientX, y: e.clientY };
|
|
2048
|
-
}, []);
|
|
2077
|
+
}, [mousePos, pinnedPos]);
|
|
2049
2078
|
const handleMouseUp = useCallback(() => {
|
|
2050
2079
|
setIsDragging(false);
|
|
2051
2080
|
lastDragPos.current = null;
|
|
@@ -2097,6 +2126,38 @@ function DebugOverlay({
|
|
|
2097
2126
|
cursor: none !important;
|
|
2098
2127
|
}
|
|
2099
2128
|
` }),
|
|
2129
|
+
pinnedCrosshairPos && /* @__PURE__ */ jsxs7(Fragment, { children: [
|
|
2130
|
+
/* @__PURE__ */ jsx9(
|
|
2131
|
+
"div",
|
|
2132
|
+
{
|
|
2133
|
+
style: {
|
|
2134
|
+
position: "absolute",
|
|
2135
|
+
top: 0,
|
|
2136
|
+
left: `${pinnedCrosshairPos.xPercent}%`,
|
|
2137
|
+
width: `${Math.max(pinnedCrosshairPos.pixelWidthPercent, 0.1)}%`,
|
|
2138
|
+
height: "100%",
|
|
2139
|
+
backgroundColor: "#00FFFF",
|
|
2140
|
+
pointerEvents: "none",
|
|
2141
|
+
transform: "translateX(-50%)"
|
|
2142
|
+
}
|
|
2143
|
+
}
|
|
2144
|
+
),
|
|
2145
|
+
/* @__PURE__ */ jsx9(
|
|
2146
|
+
"div",
|
|
2147
|
+
{
|
|
2148
|
+
style: {
|
|
2149
|
+
position: "absolute",
|
|
2150
|
+
top: `${pinnedCrosshairPos.yPercent}%`,
|
|
2151
|
+
left: 0,
|
|
2152
|
+
width: "100%",
|
|
2153
|
+
height: `${Math.max(pinnedCrosshairPos.pixelHeightPercent, 0.1)}%`,
|
|
2154
|
+
backgroundColor: "#00FFFF",
|
|
2155
|
+
pointerEvents: "none",
|
|
2156
|
+
transform: "translateY(-50%)"
|
|
2157
|
+
}
|
|
2158
|
+
}
|
|
2159
|
+
)
|
|
2160
|
+
] }),
|
|
2100
2161
|
crosshairPos && /* @__PURE__ */ jsxs7(Fragment, { children: [
|
|
2101
2162
|
/* @__PURE__ */ jsx9(
|
|
2102
2163
|
"div",
|
|
@@ -2155,6 +2216,17 @@ function DebugOverlay({
|
|
|
2155
2216
|
/* @__PURE__ */ jsxs7("div", { children: [
|
|
2156
2217
|
"Y: ",
|
|
2157
2218
|
mousePos.y
|
|
2219
|
+
] }),
|
|
2220
|
+
pinnedPos && /* @__PURE__ */ jsxs7("div", { style: { marginTop: 12, paddingTop: 12, borderTop: "1px solid rgba(0, 255, 255, 0.5)" }, children: [
|
|
2221
|
+
/* @__PURE__ */ jsx9("div", { style: { color: "#00FFFF", fontSize: 20 }, children: "Pinned:" }),
|
|
2222
|
+
/* @__PURE__ */ jsxs7("div", { style: { color: "#00FFFF" }, children: [
|
|
2223
|
+
"X: ",
|
|
2224
|
+
pinnedPos.x
|
|
2225
|
+
] }),
|
|
2226
|
+
/* @__PURE__ */ jsxs7("div", { style: { color: "#00FFFF" }, children: [
|
|
2227
|
+
"Y: ",
|
|
2228
|
+
pinnedPos.y
|
|
2229
|
+
] })
|
|
2158
2230
|
] })
|
|
2159
2231
|
]
|
|
2160
2232
|
}
|
|
@@ -2187,24 +2259,34 @@ function DebugOverlay({
|
|
|
2187
2259
|
"%"
|
|
2188
2260
|
] }),
|
|
2189
2261
|
/* @__PURE__ */ jsx9("div", { style: { color: "#888", fontSize: 14, marginTop: 4, pointerEvents: "none" }, children: "Scroll to zoom, drag to pan" }),
|
|
2190
|
-
/* @__PURE__ */
|
|
2191
|
-
"
|
|
2262
|
+
/* @__PURE__ */ jsxs7(
|
|
2263
|
+
"label",
|
|
2192
2264
|
{
|
|
2193
|
-
onClick: onToggleReference,
|
|
2194
2265
|
style: {
|
|
2266
|
+
display: "flex",
|
|
2267
|
+
alignItems: "center",
|
|
2268
|
+
gap: 8,
|
|
2195
2269
|
marginTop: 12,
|
|
2196
|
-
|
|
2197
|
-
|
|
2198
|
-
fontWeight: "bold",
|
|
2199
|
-
fontFamily: "monospace",
|
|
2200
|
-
backgroundColor: referenceVisible ? "#FF6B6B" : "#4CAF50",
|
|
2201
|
-
color: "#FFFFFF",
|
|
2202
|
-
border: "none",
|
|
2203
|
-
borderRadius: 4,
|
|
2204
|
-
cursor: "none",
|
|
2205
|
-
width: "100%"
|
|
2270
|
+
cursor: "pointer",
|
|
2271
|
+
userSelect: "none"
|
|
2206
2272
|
},
|
|
2207
|
-
children:
|
|
2273
|
+
children: [
|
|
2274
|
+
/* @__PURE__ */ jsx9(
|
|
2275
|
+
"input",
|
|
2276
|
+
{
|
|
2277
|
+
type: "checkbox",
|
|
2278
|
+
checked: referenceVisible,
|
|
2279
|
+
onChange: onToggleReference,
|
|
2280
|
+
style: {
|
|
2281
|
+
width: 20,
|
|
2282
|
+
height: 20,
|
|
2283
|
+
cursor: "pointer",
|
|
2284
|
+
accentColor: "#4CAF50"
|
|
2285
|
+
}
|
|
2286
|
+
}
|
|
2287
|
+
),
|
|
2288
|
+
/* @__PURE__ */ jsx9("span", { style: { color: "#FFFFFF", fontSize: 16 }, children: "Show Reference" })
|
|
2289
|
+
]
|
|
2208
2290
|
}
|
|
2209
2291
|
)
|
|
2210
2292
|
]
|
|
@@ -2389,7 +2471,7 @@ function InstagramDmComposition({
|
|
|
2389
2471
|
bottom: 0,
|
|
2390
2472
|
zIndex: 100,
|
|
2391
2473
|
pointerEvents: "none",
|
|
2392
|
-
opacity:
|
|
2474
|
+
opacity: clampedReferenceOpacity / 100
|
|
2393
2475
|
},
|
|
2394
2476
|
children: /* @__PURE__ */ jsx11(
|
|
2395
2477
|
Img5,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ugcinc-render",
|
|
3
|
-
"version": "1.8.
|
|
3
|
+
"version": "1.8.78",
|
|
4
4
|
"description": "Unified rendering package for UGC Inc - shared types, components, and compositions for pixel-perfect client/server rendering",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|