@bwp-web/canvas 0.7.1 → 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 +83 -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 +82 -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/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,
|
|
@@ -3175,6 +3174,7 @@ function FixedSizeContent({
|
|
|
3175
3174
|
flexShrink: 0,
|
|
3176
3175
|
width: "max-content",
|
|
3177
3176
|
overflow: "hidden",
|
|
3177
|
+
alignItems: "center",
|
|
3178
3178
|
"& > *": {
|
|
3179
3179
|
maxWidth: "100%",
|
|
3180
3180
|
overflow: "hidden",
|
|
@@ -3188,6 +3188,86 @@ function FixedSizeContent({
|
|
|
3188
3188
|
);
|
|
3189
3189
|
}
|
|
3190
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
|
+
|
|
3191
3271
|
// src/index.ts
|
|
3192
3272
|
import {
|
|
3193
3273
|
Canvas as Canvas2,
|
|
@@ -3211,6 +3291,7 @@ export {
|
|
|
3211
3291
|
FabricObject5 as FabricObject,
|
|
3212
3292
|
FixedSizeContent,
|
|
3213
3293
|
ObjectOverlay,
|
|
3294
|
+
OverlayBadge,
|
|
3214
3295
|
OverlayContent,
|
|
3215
3296
|
Point9 as Point,
|
|
3216
3297
|
Polygon5 as Polygon,
|