@bwp-web/canvas 0.7.0 → 0.8.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.
- package/dist/index.cjs +84 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +83 -1
- package/dist/index.js.map +1 -1
- package/dist/overlay/FixedSizeContent.d.ts.map +1 -1
- package/dist/overlay/ObjectOverlay.d.ts.map +1 -1
- package/dist/overlay/OverlayBadge.d.ts +51 -0
- package/dist/overlay/OverlayBadge.d.ts.map +1 -0
- package/dist/overlay/OverlayContent.d.ts.map +1 -1
- package/dist/overlay/index.d.ts +2 -0
- package/dist/overlay/index.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -17,6 +17,8 @@ export { OverlayContent } from './overlay';
|
|
|
17
17
|
export type { OverlayContentProps } from './overlay';
|
|
18
18
|
export { FixedSizeContent } from './overlay';
|
|
19
19
|
export type { FixedSizeContentProps } from './overlay';
|
|
20
|
+
export { OverlayBadge } from './overlay';
|
|
21
|
+
export type { OverlayBadgeProps } from './overlay';
|
|
20
22
|
export type { Point2D, ShapeStyleOptions, SnappingOptions, InteractionModeOptions, SnappableInteractionOptions, DragBounds, ModeSetup, CanvasJSON, } from './types';
|
|
21
23
|
export type { ObjectDataType } from './fabricAugmentation';
|
|
22
24
|
export { createRectangle, createRectangleAtPoint, editRectangle, } from './shapes';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,sBAAsB,CAAC;AAG9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,YAAY,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,YAAY,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAC3C,YAAY,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,YAAY,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1C,YAAY,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAC3C,YAAY,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,YAAY,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -3034,7 +3034,6 @@ function ObjectOverlay({
|
|
|
3034
3034
|
alignItems: "center",
|
|
3035
3035
|
justifyContent: "center",
|
|
3036
3036
|
zIndex: 1,
|
|
3037
|
-
overflow: "hidden",
|
|
3038
3037
|
...sx
|
|
3039
3038
|
},
|
|
3040
3039
|
...rest,
|
|
@@ -3103,6 +3102,7 @@ function OverlayContent({
|
|
|
3103
3102
|
{
|
|
3104
3103
|
ref: innerRef,
|
|
3105
3104
|
sx: {
|
|
3105
|
+
alignItems: "center",
|
|
3106
3106
|
transformOrigin: "center center",
|
|
3107
3107
|
flexShrink: 0,
|
|
3108
3108
|
width: "max-content"
|
|
@@ -3174,6 +3174,7 @@ function FixedSizeContent({
|
|
|
3174
3174
|
flexShrink: 0,
|
|
3175
3175
|
width: "max-content",
|
|
3176
3176
|
overflow: "hidden",
|
|
3177
|
+
alignItems: "center",
|
|
3177
3178
|
"& > *": {
|
|
3178
3179
|
maxWidth: "100%",
|
|
3179
3180
|
overflow: "hidden",
|
|
@@ -3187,6 +3188,86 @@ function FixedSizeContent({
|
|
|
3187
3188
|
);
|
|
3188
3189
|
}
|
|
3189
3190
|
|
|
3191
|
+
// src/overlay/OverlayBadge.tsx
|
|
3192
|
+
import { Stack as Stack4 } from "@mui/material";
|
|
3193
|
+
import { useEffect as useEffect9, useRef as useRef10 } from "react";
|
|
3194
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
3195
|
+
function toPx(v) {
|
|
3196
|
+
if (v === void 0) return void 0;
|
|
3197
|
+
return typeof v === "number" ? `${v}px` : v;
|
|
3198
|
+
}
|
|
3199
|
+
function OverlayBadge({
|
|
3200
|
+
children,
|
|
3201
|
+
maxScale = 2,
|
|
3202
|
+
minScale = 0.75,
|
|
3203
|
+
top,
|
|
3204
|
+
right,
|
|
3205
|
+
bottom,
|
|
3206
|
+
left,
|
|
3207
|
+
sx,
|
|
3208
|
+
...rest
|
|
3209
|
+
}) {
|
|
3210
|
+
const ref = useRef10(null);
|
|
3211
|
+
const baseSize = useRef10(null);
|
|
3212
|
+
useEffect9(() => {
|
|
3213
|
+
const el = ref.current;
|
|
3214
|
+
if (!el) return;
|
|
3215
|
+
const ancestor = el.parentElement;
|
|
3216
|
+
if (!ancestor) return;
|
|
3217
|
+
function update() {
|
|
3218
|
+
requestAnimationFrame(() => {
|
|
3219
|
+
if (!el || !ancestor) return;
|
|
3220
|
+
const containerW = ancestor.clientWidth;
|
|
3221
|
+
const containerH = ancestor.clientHeight;
|
|
3222
|
+
if (containerW <= 0 || containerH <= 0) {
|
|
3223
|
+
el.style.transform = "";
|
|
3224
|
+
return;
|
|
3225
|
+
}
|
|
3226
|
+
if (!baseSize.current) {
|
|
3227
|
+
baseSize.current = { w: containerW, h: containerH };
|
|
3228
|
+
}
|
|
3229
|
+
const ratio = Math.min(
|
|
3230
|
+
containerW / baseSize.current.w,
|
|
3231
|
+
containerH / baseSize.current.h
|
|
3232
|
+
);
|
|
3233
|
+
const ownScale = Math.max(minScale, Math.min(ratio, maxScale));
|
|
3234
|
+
const overlayScale = parseFloat(
|
|
3235
|
+
getComputedStyle(el).getPropertyValue("--overlay-scale")
|
|
3236
|
+
) || 1;
|
|
3237
|
+
el.style.transform = `scale(${ownScale / overlayScale})`;
|
|
3238
|
+
});
|
|
3239
|
+
}
|
|
3240
|
+
const observer = new ResizeObserver(update);
|
|
3241
|
+
observer.observe(ancestor);
|
|
3242
|
+
update();
|
|
3243
|
+
return () => {
|
|
3244
|
+
observer.disconnect();
|
|
3245
|
+
baseSize.current = null;
|
|
3246
|
+
};
|
|
3247
|
+
}, [maxScale, minScale]);
|
|
3248
|
+
return /* @__PURE__ */ jsx5(
|
|
3249
|
+
Stack4,
|
|
3250
|
+
{
|
|
3251
|
+
ref,
|
|
3252
|
+
sx: {
|
|
3253
|
+
position: "absolute",
|
|
3254
|
+
top: toPx(top),
|
|
3255
|
+
right: toPx(right),
|
|
3256
|
+
bottom: toPx(bottom),
|
|
3257
|
+
left: toPx(left),
|
|
3258
|
+
transformOrigin: "center center",
|
|
3259
|
+
pointerEvents: "auto",
|
|
3260
|
+
width: "max-content",
|
|
3261
|
+
height: "max-content",
|
|
3262
|
+
flexShrink: 0,
|
|
3263
|
+
...sx
|
|
3264
|
+
},
|
|
3265
|
+
...rest,
|
|
3266
|
+
children
|
|
3267
|
+
}
|
|
3268
|
+
);
|
|
3269
|
+
}
|
|
3270
|
+
|
|
3190
3271
|
// src/index.ts
|
|
3191
3272
|
import {
|
|
3192
3273
|
Canvas as Canvas2,
|
|
@@ -3210,6 +3291,7 @@ export {
|
|
|
3210
3291
|
FabricObject5 as FabricObject,
|
|
3211
3292
|
FixedSizeContent,
|
|
3212
3293
|
ObjectOverlay,
|
|
3294
|
+
OverlayBadge,
|
|
3213
3295
|
OverlayContent,
|
|
3214
3296
|
Point9 as Point,
|
|
3215
3297
|
Polygon5 as Polygon,
|