@edifice.io/react 2.5.15-develop-enabling.20260326100838 → 2.5.15-develop-b2school.20260327180304
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/components/Card/Card.js +1 -1
- package/dist/components/Combobox/Combobox.js +1 -1
- package/dist/components/Dropdown/Dropdown.js +1 -1
- package/dist/components/Form/FormControl.js +1 -1
- package/dist/components/Layout/components/WidgetApps.js +1 -1
- package/dist/components/Modal/Modal.js +1 -1
- package/dist/components/PreventPropagation/PreventPropagation.js +1 -1
- package/dist/components/PromotionCard/PromotionCard.js +1 -1
- package/dist/components/SearchBar/SearchBar.d.ts +2 -2
- package/dist/components/Table/components/Table.js +1 -1
- package/dist/hooks/useConf/useConf.d.ts +1 -1
- package/dist/hooks/useDropdown/useDropdown.js +0 -2
- package/dist/hooks/useSession/useSession.d.ts +1 -1
- package/dist/hooks/useThumbnail/useThumbnail.d.ts +1 -1
- package/dist/hooks/useThumbnail/useThumbnail.js +1 -5
- package/dist/hooks/useUpload/useUpload.js +5 -2
- package/dist/hooks/useWorkspaceFolders/useWorkspaceFolders.js +1 -1
- package/dist/modules/editor/components/Editor/EditorPreview.js +1 -1
- package/dist/modules/modals/OnboardingModal/index.d.ts +1 -1
- package/dist/modules/modals/ResourceModal/ResourceModal.d.ts +1 -1
- package/dist/modules/modals/ResourceModal/ResourceModal.js +1 -1
- package/dist/modules/modals/ResourceModal/hooks/useUpdateMutation.d.ts +1 -1
- package/dist/modules/modals/ShareModal/ShareResources.d.ts +53 -4
- package/dist/modules/modals/ShareModal/apps/ShareBlog.d.ts +1 -1
- package/dist/modules/modals/ShareModal/hooks/useShareBookmark.js +1 -2
- package/dist/modules/modals/ShareModal/hooks/useShareMutation.d.ts +1 -1
- package/dist/modules/multimedia/FileCard/FileCard._.d.ts +17 -0
- package/dist/modules/multimedia/ImageEditor/components/ImageEditor.js +10 -24
- package/dist/modules/multimedia/ImageEditor/effects/blur.d.ts +5 -7
- package/dist/modules/multimedia/ImageEditor/effects/blur.js +18 -26
- package/dist/modules/multimedia/ImageEditor/effects/crop.d.ts +5 -4
- package/dist/modules/multimedia/ImageEditor/effects/crop.js +26 -42
- package/dist/modules/multimedia/ImageEditor/effects/misc.d.ts +16 -10
- package/dist/modules/multimedia/ImageEditor/effects/misc.js +12 -27
- package/dist/modules/multimedia/ImageEditor/effects/resize.d.ts +7 -3
- package/dist/modules/multimedia/ImageEditor/effects/resize.js +22 -31
- package/dist/modules/multimedia/ImageEditor/effects/rotate.js +3 -2
- package/dist/modules/multimedia/ImageEditor/hooks/useHistoryTool.js +41 -40
- package/dist/modules/multimedia/ImageEditor/hooks/useImageEditor.d.ts +1 -1
- package/dist/modules/multimedia/ImageEditor/hooks/useImageEditor.js +3 -9
- package/dist/modules/multimedia/ImageEditor/hooks/useImageEffects.js +1 -4
- package/dist/modules/multimedia/LinkerCard/LinkerCard._.d.ts +1 -1
- package/dist/modules/multimedia/MediaLibrary/MediaLibrary.js +0 -1
- package/dist/modules/multimedia/UploadCard/UploadCard._.d.ts +1 -1
- package/dist/modules/multimedia/UploadFiles/UploadFiles.js +4 -4
- package/dist/providers/EdificeClientProvider/EdificeClientProvider.context.d.ts +1 -1
- package/dist/utilities/react-query/react-query-utils.d.ts +1 -1
- package/package.json +53 -52
- package/dist/hooks/useWorkspaceFolders/useWorkspaceFolders.d.ts +0 -12
- package/dist/modules/multimedia/ImageEditor/effects/constants.d.ts +0 -2
- package/dist/modules/multimedia/ImageEditor/effects/constants.js +0 -4
|
@@ -8,25 +8,17 @@ function drawBackground(application, {
|
|
|
8
8
|
spriteName
|
|
9
9
|
}) {
|
|
10
10
|
removeBackground(application);
|
|
11
|
-
const sprite = application.stage.
|
|
12
|
-
if (
|
|
13
|
-
const spriteBounds = sprite.getBounds(), stageTexture = application.renderer.generateTexture(application.stage), clonedStage = new PIXI.Sprite(stageTexture);
|
|
11
|
+
const sprite = application.stage.getChildByName(spriteName);
|
|
12
|
+
if (sprite == null) return;
|
|
13
|
+
const spriteBounds = sprite.getBounds(), stageTexture = application.renderer.generateTexture(application.stage).clone(), clonedStage = new PIXI.Sprite(stageTexture);
|
|
14
14
|
clonedStage.height = spriteBounds.height, clonedStage.width = spriteBounds.width, clonedStage.position = new PIXI.Point(0, 0);
|
|
15
|
-
const background = new PIXI.
|
|
16
|
-
background.
|
|
17
|
-
const backdrop = new PIXI.Graphics();
|
|
18
|
-
backdrop.rect(0, 0, spriteBounds.width, spriteBounds.height), backdrop.fill({
|
|
19
|
-
color: 16777215,
|
|
20
|
-
alpha: 0.5
|
|
21
|
-
});
|
|
15
|
+
const background = new PIXI.Graphics();
|
|
16
|
+
background.beginFill(16777215, 0.5), background.drawRect(0, 0, spriteBounds.width, spriteBounds.height), background.endFill(), background.name = CROP_BACKGROUND_NAME, background.position = new PIXI.Point(spriteBounds.x, spriteBounds.y);
|
|
22
17
|
const rectMask = new PIXI.Graphics();
|
|
23
|
-
rectMask.
|
|
24
|
-
color: 0,
|
|
25
|
-
alpha: 1
|
|
26
|
-
}), rectMask.position = new PIXI.Point(PADDING, PADDING), rectMask.label = CROP_MASK_NAME, clonedStage.mask = rectMask, application.stage.addChild(background), background.addChild(backdrop), background.addChild(rectMask), background.addChild(clonedStage);
|
|
18
|
+
rectMask.beginFill(0, 1), rectMask.drawRect(0, 0, spriteBounds.width - 2 * PADDING, spriteBounds.height - 2 * PADDING), rectMask.endFill(), rectMask.position = new PIXI.Point(PADDING, PADDING), rectMask.name = CROP_MASK_NAME, clonedStage.mask = rectMask, application.stage.addChild(background), background.addChild(rectMask), background.addChild(clonedStage);
|
|
27
19
|
}
|
|
28
20
|
function removeBackground(application) {
|
|
29
|
-
const child = application.stage.
|
|
21
|
+
const child = application.stage.getChildByName(CROP_BACKGROUND_NAME, !0);
|
|
30
22
|
child == null || child.removeFromParent();
|
|
31
23
|
}
|
|
32
24
|
function computeCornerPosition(cornerType, bounds) {
|
|
@@ -62,10 +54,10 @@ function computeCornerPosition(cornerType, bounds) {
|
|
|
62
54
|
}
|
|
63
55
|
}
|
|
64
56
|
function refreshCorners(application) {
|
|
65
|
-
const mask = application.stage.
|
|
66
|
-
mask && CORNERS.forEach((cornerType) => {
|
|
67
|
-
const corner = application.stage.
|
|
68
|
-
if (
|
|
57
|
+
const mask = application.stage.getChildByName(CROP_MASK_NAME, !0);
|
|
58
|
+
mask != null && CORNERS.forEach((cornerType) => {
|
|
59
|
+
const corner = application.stage.getChildByName(getCornerName(cornerType), !0);
|
|
60
|
+
if (corner == null) return;
|
|
69
61
|
const position = computeCornerPosition(cornerType, {
|
|
70
62
|
height: mask.height,
|
|
71
63
|
width: mask.width,
|
|
@@ -78,10 +70,10 @@ function refreshCorners(application) {
|
|
|
78
70
|
function drawCorner(application, cornerType, {
|
|
79
71
|
spriteName
|
|
80
72
|
}) {
|
|
81
|
-
const previous = application.stage.
|
|
73
|
+
const previous = application.stage.getChildByName(getCornerName(cornerType), !0), scale = getApplicationScale(application);
|
|
82
74
|
previous == null || previous.removeFromParent();
|
|
83
|
-
const background = application.stage.
|
|
84
|
-
if (
|
|
75
|
+
const background = application.stage.getChildByName(CROP_BACKGROUND_NAME, !0), mask = application.stage.getChildByName(CROP_MASK_NAME, !0), sprite = application.stage.getChildByName(spriteName);
|
|
76
|
+
if (sprite == null || background === null || background === void 0 || mask === void 0 || mask === null)
|
|
85
77
|
return;
|
|
86
78
|
const position = computeCornerPosition(cornerType, {
|
|
87
79
|
height: mask.height,
|
|
@@ -89,17 +81,13 @@ function drawCorner(application, cornerType, {
|
|
|
89
81
|
x: mask.x,
|
|
90
82
|
y: mask.y
|
|
91
83
|
}), corner = new PIXI.Graphics();
|
|
92
|
-
corner.arc(0, 0, POINT_RADIUS / scale, position.start, position.end), corner.lineTo(0, 0), corner.
|
|
93
|
-
color: 4960213,
|
|
94
|
-
alpha: 1
|
|
95
|
-
}), corner.position = new PIXI.Point(position.x, position.y), corner.label = getCornerName(cornerType), corner.interactive = !0;
|
|
84
|
+
corner.beginFill(4960213, 1), corner.arc(0, 0, POINT_RADIUS / scale, position.start, position.end), corner.lineTo(0, 0), corner.endFill(), corner.position = new PIXI.Point(position.x, position.y), corner.name = getCornerName(cornerType), corner.interactive = !0;
|
|
96
85
|
let enable = !1;
|
|
97
|
-
|
|
98
|
-
if (!
|
|
86
|
+
application.stage.on("pointermove", (event) => {
|
|
87
|
+
if (enable === !1) return;
|
|
99
88
|
const localPosition = background.toLocal(event.global);
|
|
100
89
|
corner.position.x = localPosition.x, corner.position.y = localPosition.y, moveMask(application, cornerType, localPosition);
|
|
101
|
-
};
|
|
102
|
-
application.stage.on("pointermove", handlePointerMove);
|
|
90
|
+
});
|
|
103
91
|
const handlePointerDown = () => {
|
|
104
92
|
enable = !0;
|
|
105
93
|
};
|
|
@@ -108,12 +96,12 @@ function drawCorner(application, cornerType, {
|
|
|
108
96
|
enable = !1;
|
|
109
97
|
};
|
|
110
98
|
globalThis.addEventListener("pointerup", handlePointerUp), corner.once("destroyed", () => {
|
|
111
|
-
corner.off("pointerdown"),
|
|
99
|
+
corner.off("pointerdown"), globalThis.removeEventListener("pointerup", handlePointerUp);
|
|
112
100
|
}), background.addChild(corner);
|
|
113
101
|
}
|
|
114
102
|
function moveMask(application, cornerType, position) {
|
|
115
|
-
const mask = application.stage.
|
|
116
|
-
if (
|
|
103
|
+
const mask = application.stage.getChildByName(CROP_MASK_NAME, !0);
|
|
104
|
+
if (mask == null) return;
|
|
117
105
|
const right = mask.position.x + mask.width, bottom = mask.position.y + mask.height;
|
|
118
106
|
switch (cornerType) {
|
|
119
107
|
case "TOP_LEFT": {
|
|
@@ -154,15 +142,11 @@ function stop(application) {
|
|
|
154
142
|
removeBackground(application), application.stage.off("pointermove"), application.render();
|
|
155
143
|
}
|
|
156
144
|
function save(application) {
|
|
157
|
-
const mask = application.stage.
|
|
158
|
-
if (
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
target: application.stage,
|
|
163
|
-
frame
|
|
164
|
-
});
|
|
165
|
-
return removeBackground(application), application.stage.off("pointermove"), new PIXI.Sprite(croppedTexture);
|
|
145
|
+
const mask = application.stage.getChildByName(CROP_MASK_NAME, !0);
|
|
146
|
+
if (mask == null) return;
|
|
147
|
+
stop(application);
|
|
148
|
+
const stageTexture = application.renderer.generateTexture(application.stage).clone(), clonedStage = new PIXI.Sprite(stageTexture), maskBounds = mask.getBounds(), bounds = new PIXI.Rectangle(Math.floor(maskBounds.x), Math.floor(maskBounds.y), Math.floor(maskBounds.width), Math.floor(maskBounds.height)), cropped = new PIXI.Texture(clonedStage.texture.baseTexture, bounds);
|
|
149
|
+
return new PIXI.Sprite(cropped);
|
|
166
150
|
}
|
|
167
151
|
export {
|
|
168
152
|
save,
|
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import * as PIXI from 'pixi.js';
|
|
2
2
|
export declare const DEFAULT_SPRITE_NAME = "image";
|
|
3
3
|
/**
|
|
4
|
-
* A structure that
|
|
5
|
-
*
|
|
4
|
+
* A structure that define all setting of an image
|
|
5
|
+
* - positon
|
|
6
|
+
* - scale
|
|
7
|
+
* - size
|
|
8
|
+
* - size of the stage
|
|
6
9
|
*/
|
|
7
10
|
export interface ImageSettings {
|
|
8
11
|
stage: {
|
|
@@ -36,12 +39,13 @@ export interface ImageSettings {
|
|
|
36
39
|
};
|
|
37
40
|
}
|
|
38
41
|
/**
|
|
39
|
-
*
|
|
42
|
+
* This function update the image content using Blob datasource
|
|
40
43
|
*
|
|
41
44
|
* @param application the PIXI.Application context
|
|
42
45
|
* @param param.spriteName the name of the sprite in the context
|
|
43
|
-
* @param param.imgDatasource the
|
|
44
|
-
* @param param.
|
|
46
|
+
* @param param.imgDatasource the img data could be one of: string url, HTMLImageElement, PIXI.Sprite
|
|
47
|
+
* @param param.stageSize?: { width: number; height: number };
|
|
48
|
+
* @param param.spriteSize?: { width: number; height: number };
|
|
45
49
|
*/
|
|
46
50
|
export declare function updateImageFromBlob(application: PIXI.Application, { spriteName, imgDatasource, settings, }: {
|
|
47
51
|
spriteName: string;
|
|
@@ -49,12 +53,13 @@ export declare function updateImageFromBlob(application: PIXI.Application, { spr
|
|
|
49
53
|
settings?: ImageSettings;
|
|
50
54
|
}): Promise<PIXI.Sprite | null>;
|
|
51
55
|
/**
|
|
52
|
-
*
|
|
56
|
+
* This function update the image content for the sprite in the PIXI.Application context
|
|
53
57
|
*
|
|
54
58
|
* @param application the PIXI.Application context
|
|
55
59
|
* @param param.spriteName the name of the sprite in the context
|
|
56
|
-
* @param param.imgDatasource the
|
|
57
|
-
* @param param.
|
|
60
|
+
* @param param.imgDatasource the img data could be one of: string url, HTMLImageElement, PIXI.Sprite
|
|
61
|
+
* @param param.spriteSize
|
|
62
|
+
* @param param.stageSize
|
|
58
63
|
*/
|
|
59
64
|
export declare function updateImage(application: PIXI.Application, { spriteName, imgDatasource, settings, }: {
|
|
60
65
|
spriteName: string;
|
|
@@ -99,9 +104,10 @@ export declare function saveAsBlob(application: PIXI.Application): Promise<Blob>
|
|
|
99
104
|
*/
|
|
100
105
|
export declare function saveAsDataURL(application: PIXI.Application): string | undefined;
|
|
101
106
|
/**
|
|
102
|
-
* Calculates the scale
|
|
107
|
+
* Calculates the scale percentage for a PIXI.Sprite or the application view based on the parent container's dimensions.
|
|
103
108
|
* @param application - The PIXI.Application instance.
|
|
104
|
-
* @
|
|
109
|
+
* @param sprite - The PIXI.Sprite instance (optional).
|
|
110
|
+
* @returns The scale percentage.
|
|
105
111
|
*/
|
|
106
112
|
export declare function getApplicationScale(application: PIXI.Application): number;
|
|
107
113
|
export declare function toBlob(application: PIXI.Application): Promise<Blob>;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import * as PIXI from "pixi.js";
|
|
2
|
-
import { BLUR_LAYER_NAME } from "./constants.js";
|
|
3
2
|
const MIN_HEIGHT = 100, MIN_WIDTH = 100, MODAL_VERTICAL_PADDING = 450, MODAL_HORIZONTAL_PADDING = 64, DEFAULT_QUALITY = 0.5, DEFAULT_SPRITE_NAME = "image";
|
|
4
3
|
function updateImageFromBlob(application, {
|
|
5
4
|
spriteName,
|
|
@@ -7,17 +6,15 @@ function updateImageFromBlob(application, {
|
|
|
7
6
|
settings
|
|
8
7
|
}) {
|
|
9
8
|
const imageUrl = URL.createObjectURL(imgDatasource), image = new Image();
|
|
10
|
-
return image.src = imageUrl, new Promise((resolve
|
|
9
|
+
return image.src = imageUrl, new Promise((resolve) => {
|
|
11
10
|
image.onload = async () => {
|
|
12
|
-
|
|
11
|
+
await updateImage(application, {
|
|
13
12
|
spriteName,
|
|
14
13
|
imgDatasource: image,
|
|
15
14
|
settings
|
|
16
15
|
});
|
|
17
|
-
const newSprite = application == null ? void 0 : application.stage.
|
|
16
|
+
const newSprite = application == null ? void 0 : application.stage.getChildByName(spriteName, !0);
|
|
18
17
|
resolve(newSprite);
|
|
19
|
-
}, image.onerror = () => {
|
|
20
|
-
URL.revokeObjectURL(imageUrl), reject(new Error("Failed to load image from Blob"));
|
|
21
18
|
};
|
|
22
19
|
});
|
|
23
20
|
}
|
|
@@ -28,22 +25,10 @@ async function updateImage(application, {
|
|
|
28
25
|
}) {
|
|
29
26
|
if (application === void 0 || application.stage === null)
|
|
30
27
|
return;
|
|
31
|
-
const previous = application.stage.
|
|
28
|
+
const previous = application.stage.getChildByName(spriteName, !0);
|
|
32
29
|
previous == null || previous.removeFromParent();
|
|
33
|
-
const
|
|
34
|
-
|
|
35
|
-
let sprite;
|
|
36
|
-
if (imgDatasource instanceof PIXI.Sprite)
|
|
37
|
-
sprite = imgDatasource;
|
|
38
|
-
else if (imgDatasource instanceof HTMLImageElement)
|
|
39
|
-
sprite = new PIXI.Sprite(PIXI.Texture.from(imgDatasource));
|
|
40
|
-
else {
|
|
41
|
-
const img = new Image();
|
|
42
|
-
img.crossOrigin = "anonymous", img.src = imgDatasource, await new Promise((resolve, reject) => {
|
|
43
|
-
img.complete ? resolve() : (img.onload = () => resolve(), img.onerror = reject);
|
|
44
|
-
}), sprite = new PIXI.Sprite(PIXI.Texture.from(img));
|
|
45
|
-
}
|
|
46
|
-
if (sprite.interactive = !0, sprite.label = spriteName, settings) {
|
|
30
|
+
const texture = imgDatasource instanceof HTMLImageElement ? PIXI.Texture.from(imgDatasource) : imgDatasource instanceof PIXI.Sprite ? imgDatasource : await PIXI.Texture.fromURL(imgDatasource), sprite = texture instanceof PIXI.Sprite ? texture : PIXI.Sprite.from(texture, {});
|
|
31
|
+
if (sprite.interactive = !0, sprite.name = spriteName, settings) {
|
|
47
32
|
const {
|
|
48
33
|
sprite: {
|
|
49
34
|
anchor,
|
|
@@ -63,7 +48,7 @@ async function updateImage(application, {
|
|
|
63
48
|
}
|
|
64
49
|
function autoResize(application, sprite) {
|
|
65
50
|
var _a;
|
|
66
|
-
const parent = application.
|
|
51
|
+
const parent = application.view.parentNode, maxMobileWidth = window.innerWidth - MODAL_HORIZONTAL_PADDING, parentWidth = Math.max((parent == null ? void 0 : parent.offsetWidth) ?? 0, MIN_WIDTH), newSize = constraintSize({
|
|
67
52
|
width: sprite.width,
|
|
68
53
|
height: sprite.height
|
|
69
54
|
}, {
|
|
@@ -79,7 +64,7 @@ function autoResize(application, sprite) {
|
|
|
79
64
|
height: newHeight,
|
|
80
65
|
width: newWidth
|
|
81
66
|
} = newSize;
|
|
82
|
-
(_a = application.
|
|
67
|
+
(_a = application.view) != null && _a.style && (application.view.style.width = `${newWidth}px`, application.view.style.height = `${newHeight}px`);
|
|
83
68
|
}
|
|
84
69
|
function constraintSize(size, constraints) {
|
|
85
70
|
const {
|
|
@@ -98,22 +83,22 @@ function constraintSize(size, constraints) {
|
|
|
98
83
|
function saveAsBlob(application) {
|
|
99
84
|
return new Promise((resolve, reject) => {
|
|
100
85
|
var _a;
|
|
101
|
-
(_a = application == null ? void 0 : application.
|
|
86
|
+
(_a = application == null ? void 0 : application.view) != null && _a.toBlob ? application.view.toBlob((blob) => {
|
|
102
87
|
blob ? resolve(blob) : reject("EXTRACT_FAILED");
|
|
103
88
|
}, "image/jpeg", DEFAULT_QUALITY) : reject("EXTRACT_FAILED");
|
|
104
89
|
});
|
|
105
90
|
}
|
|
106
91
|
function saveAsDataURL(application) {
|
|
107
92
|
var _a, _b;
|
|
108
|
-
return (_b = (_a = application.
|
|
93
|
+
return (_b = (_a = application.view).toDataURL) == null ? void 0 : _b.call(_a);
|
|
109
94
|
}
|
|
110
95
|
function getApplicationScale(application) {
|
|
111
|
-
return application.
|
|
96
|
+
return application.view.getBoundingClientRect ? application.view.getBoundingClientRect().width / application.view.width : 1;
|
|
112
97
|
}
|
|
113
98
|
function toBlob(application) {
|
|
114
99
|
return new Promise((resolve, reject) => {
|
|
115
100
|
var _a, _b;
|
|
116
|
-
(_b = (_a = application.
|
|
101
|
+
(_b = (_a = application.view).toBlob) == null || _b.call(_a, (blob) => {
|
|
117
102
|
blob ? resolve(blob) : reject("EXTRACT_FAIL");
|
|
118
103
|
}, "image/png", 1);
|
|
119
104
|
});
|
|
@@ -7,15 +7,19 @@ import * as PIXI from 'pixi.js';
|
|
|
7
7
|
*/
|
|
8
8
|
export declare function start(application: PIXI.Application, spriteName: string): void;
|
|
9
9
|
/**
|
|
10
|
-
*
|
|
10
|
+
* If {saveChanges} is true remove all graphical controls then resize the sprite
|
|
11
|
+
* If {saveChanges} is false remove all graphical controls and keep original size
|
|
11
12
|
*
|
|
12
13
|
* @param application the PIXI.Application context
|
|
14
|
+
* @param param.saveChanges true if we should save the resize
|
|
15
|
+
* @param param.spriteName the name of the sprite representing the original image
|
|
13
16
|
*/
|
|
14
17
|
export declare function stop(application: PIXI.Application): void;
|
|
15
18
|
/**
|
|
16
|
-
* Apply the resize and return the result as a PIXI.Sprite
|
|
17
19
|
*
|
|
18
20
|
* @param application the PIXI.Application context
|
|
19
|
-
* @
|
|
21
|
+
* @param spriteName the name of the sprite representing the image
|
|
22
|
+
* @param size the target size of the image {width, height}
|
|
23
|
+
* @returns a PIXI.Sprite with a image resized or undefined if not found
|
|
20
24
|
*/
|
|
21
25
|
export declare function save(application: PIXI.Application): PIXI.Sprite | undefined;
|
|
@@ -42,8 +42,8 @@ function resizeContainer(application, {
|
|
|
42
42
|
position,
|
|
43
43
|
spriteName
|
|
44
44
|
}) {
|
|
45
|
-
const sprite = application.stage.
|
|
46
|
-
if (
|
|
45
|
+
const sprite = application.stage.getChildByName(spriteName, !0);
|
|
46
|
+
if (sprite == null) return;
|
|
47
47
|
const isRotated = sprite.rotation % Math.PI !== 0, spriteWidth = isRotated ? sprite.height : sprite.width, spriteHeight = isRotated ? sprite.width : sprite.height;
|
|
48
48
|
switch (cornerType) {
|
|
49
49
|
case "TOP_LEFT": {
|
|
@@ -68,23 +68,20 @@ function resizeContainer(application, {
|
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
70
|
function removeCorner(application, cornerType) {
|
|
71
|
-
const previous = application.stage.
|
|
71
|
+
const previous = application.stage.getChildByName(getCornerName(cornerType), !0);
|
|
72
72
|
previous == null || previous.removeFromParent();
|
|
73
73
|
}
|
|
74
74
|
function drawCorner(application, cornerType, {
|
|
75
75
|
spriteName
|
|
76
76
|
}) {
|
|
77
77
|
removeCorner(application, cornerType);
|
|
78
|
-
const sprite = application.stage.
|
|
79
|
-
if (
|
|
78
|
+
const sprite = application.stage.getChildByName(spriteName, !0), container = application.stage.getChildByName(CONTROL_NAME, !0);
|
|
79
|
+
if (sprite == null || container === null || container === void 0) return;
|
|
80
80
|
const position = computeCornerPosition(cornerType, container), corner = new PIXI.Graphics();
|
|
81
|
-
corner.arc(0, 0, POINT_RADIUS, position.start, position.end), corner.lineTo(0, 0), corner.
|
|
82
|
-
color: 4960213,
|
|
83
|
-
alpha: 1
|
|
84
|
-
}), corner.position = new PIXI.Point(position.x, position.y), corner.label = getCornerName(cornerType), corner.interactive = !0;
|
|
81
|
+
corner.beginFill(4960213, 1), corner.arc(0, 0, POINT_RADIUS, position.start, position.end), corner.lineTo(0, 0), corner.endFill(), corner.position = new PIXI.Point(position.x, position.y), corner.name = getCornerName(cornerType), corner.interactive = !0;
|
|
85
82
|
let enable = !1;
|
|
86
|
-
|
|
87
|
-
if (!
|
|
83
|
+
application.stage.on("pointermove", (event) => {
|
|
84
|
+
if (enable === !1) return;
|
|
88
85
|
const localPosition = application.stage.toLocal(event.global);
|
|
89
86
|
resizeContainer(application, {
|
|
90
87
|
cornerType,
|
|
@@ -92,37 +89,31 @@ function drawCorner(application, cornerType, {
|
|
|
92
89
|
container,
|
|
93
90
|
spriteName
|
|
94
91
|
});
|
|
95
|
-
};
|
|
96
|
-
application.stage.on("pointermove", handlePointerMove);
|
|
97
|
-
const handlePointerDown = () => {
|
|
98
|
-
enable = !0;
|
|
99
|
-
};
|
|
100
|
-
corner.on("pointerdown", handlePointerDown);
|
|
92
|
+
});
|
|
101
93
|
const handlePointerUp = () => {
|
|
102
94
|
enable = !1;
|
|
103
95
|
};
|
|
104
96
|
globalThis.addEventListener("pointerup", handlePointerUp), corner.once("destroyed", () => {
|
|
105
|
-
corner.off("pointerdown"),
|
|
106
|
-
})
|
|
97
|
+
corner.off("pointerdown"), globalThis.removeEventListener("pointerup", handlePointerUp);
|
|
98
|
+
});
|
|
99
|
+
const handlePointerDown = () => {
|
|
100
|
+
enable = !0;
|
|
101
|
+
};
|
|
102
|
+
corner.on("pointerdown", handlePointerDown), container.addChild(corner);
|
|
107
103
|
}
|
|
108
104
|
function drawContainer(application, spriteName) {
|
|
109
105
|
removeContainer(application);
|
|
110
|
-
const sprite = application.stage.
|
|
111
|
-
if (
|
|
106
|
+
const sprite = application.stage.getChildByName(spriteName, !0);
|
|
107
|
+
if (sprite == null) return;
|
|
112
108
|
const stageTexture = application.renderer.generateTexture(application.stage), clonedStage = new PIXI.Sprite(stageTexture);
|
|
113
109
|
application.stage.children.forEach((child) => {
|
|
114
110
|
child.alpha = 0;
|
|
115
111
|
});
|
|
116
|
-
const container = new PIXI.
|
|
117
|
-
container.
|
|
118
|
-
const bounds = new PIXI.Graphics();
|
|
119
|
-
bounds.rect(0, 0, sprite.width, sprite.height), bounds.fill({
|
|
120
|
-
color: 0,
|
|
121
|
-
alpha: 0
|
|
122
|
-
}), application.stage.interactive = !0, application.stage.interactiveChildren = !0, application.stage.addChild(container), container.addChild(bounds), container.addChild(clonedStage);
|
|
112
|
+
const container = new PIXI.Graphics();
|
|
113
|
+
container.drawRect(0, 0, sprite.width, sprite.height), container.name = CONTROL_NAME, container.interactive = !0, container.interactiveChildren = !0, application.stage.interactive = !0, application.stage.interactiveChildren = !0, application.stage.addChild(container), container.addChild(clonedStage);
|
|
123
114
|
}
|
|
124
115
|
function removeContainer(application) {
|
|
125
|
-
const container = application.stage.
|
|
116
|
+
const container = application.stage.getChildByName(CONTROL_NAME, !0);
|
|
126
117
|
container == null || container.removeFromParent(), application.stage.children.forEach((child) => {
|
|
127
118
|
child.alpha = 1;
|
|
128
119
|
});
|
|
@@ -149,12 +140,12 @@ function stop(application) {
|
|
|
149
140
|
}
|
|
150
141
|
function save(application) {
|
|
151
142
|
var _a;
|
|
152
|
-
const container = (_a = application == null ? void 0 : application.stage) == null ? void 0 : _a.
|
|
143
|
+
const container = (_a = application == null ? void 0 : application.stage) == null ? void 0 : _a.getChildByName(CONTROL_NAME, !0), size = container ? {
|
|
153
144
|
height: container.height,
|
|
154
145
|
width: container.width
|
|
155
146
|
} : void 0;
|
|
156
147
|
if (removeControl(application), size) {
|
|
157
|
-
const stageTexture = application.renderer.generateTexture(application.stage), clonedStage = new PIXI.Sprite(stageTexture);
|
|
148
|
+
const stageTexture = application.renderer.generateTexture(application.stage).clone(), clonedStage = new PIXI.Sprite(stageTexture);
|
|
158
149
|
return clonedStage.width = size.width, clonedStage.height = size.height, clonedStage;
|
|
159
150
|
} else
|
|
160
151
|
return;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { toBlob, updateImageFromBlob, createImageSettings, resizeStage } from "./misc.js";
|
|
2
2
|
async function rotate(application, spriteName) {
|
|
3
|
-
const sprite = application == null ? void 0 : application.stage.
|
|
3
|
+
const sprite = application == null ? void 0 : application.stage.getChildByName(spriteName, !0);
|
|
4
4
|
if (application && sprite) {
|
|
5
|
+
if (!application) return;
|
|
5
6
|
const blobBefore = await toBlob(application), mergedSprite = await updateImageFromBlob(application, {
|
|
6
7
|
imgDatasource: blobBefore,
|
|
7
8
|
spriteName,
|
|
@@ -13,7 +14,7 @@ async function rotate(application, spriteName) {
|
|
|
13
14
|
if (!mergedSprite)
|
|
14
15
|
return;
|
|
15
16
|
let backupOldMaxHeight, backupOldVisibility;
|
|
16
|
-
const canvas = application.
|
|
17
|
+
const canvas = application.view;
|
|
17
18
|
canvas.style && (backupOldMaxHeight = canvas.style.maxHeight ?? "", backupOldVisibility = canvas.style.visibility ?? "", canvas.style.maxHeight = `${canvas.clientHeight}px`, canvas.style.visibility = "hidden"), mergedSprite.rotation += Math.PI / 2, resizeStage({
|
|
18
19
|
application,
|
|
19
20
|
sprite: mergedSprite,
|
|
@@ -11,48 +11,49 @@ const DEFAULT_MAX_HISTORY = 20, useHistoryTool = ({
|
|
|
11
11
|
setHistory([]);
|
|
12
12
|
}, [application]);
|
|
13
13
|
const restore = async () => {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
14
|
+
const imgData = history.pop();
|
|
15
|
+
imgData && (onRestore(await imgData.backup, imgData), setHistory(history.filter((current) => current !== imgData)));
|
|
16
|
+
}, listSize = (arr) => (arr.length > maxSize && arr.splice(0, arr.length - maxSize), arr), historize = async (callback) => {
|
|
17
|
+
{
|
|
18
|
+
if (!application)
|
|
19
|
+
return;
|
|
20
|
+
const sprite = application.stage.getChildByName(spriteName, !0);
|
|
21
|
+
if (sprite == null)
|
|
22
|
+
return;
|
|
23
|
+
const promise = toBlob(application), state = {
|
|
24
|
+
backup: promise,
|
|
25
|
+
sprite: {
|
|
26
|
+
rotation: sprite.rotation,
|
|
27
|
+
size: {
|
|
28
|
+
width: sprite.width,
|
|
29
|
+
height: sprite.height
|
|
30
|
+
},
|
|
31
|
+
position: {
|
|
32
|
+
x: sprite.position.x,
|
|
33
|
+
y: sprite.position.y
|
|
34
|
+
},
|
|
35
|
+
scale: {
|
|
36
|
+
x: sprite.scale.x,
|
|
37
|
+
y: sprite.scale.y
|
|
38
|
+
},
|
|
39
|
+
anchor: {
|
|
40
|
+
x: sprite.anchor.x,
|
|
41
|
+
y: sprite.anchor.y
|
|
42
|
+
}
|
|
30
43
|
},
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
x: sprite.anchor.x,
|
|
41
|
-
y: sprite.anchor.y
|
|
42
|
-
}
|
|
43
|
-
},
|
|
44
|
-
stage: {
|
|
45
|
-
size: {
|
|
46
|
-
width: application.stage.width,
|
|
47
|
-
height: application.stage.height
|
|
48
|
-
},
|
|
49
|
-
scale: {
|
|
50
|
-
x: application.stage.scale.x,
|
|
51
|
-
y: application.stage.scale.y
|
|
44
|
+
stage: {
|
|
45
|
+
size: {
|
|
46
|
+
width: application.stage.width,
|
|
47
|
+
height: application.stage.height
|
|
48
|
+
},
|
|
49
|
+
scale: {
|
|
50
|
+
x: application.stage.scale.x,
|
|
51
|
+
y: application.stage.scale.y
|
|
52
|
+
}
|
|
52
53
|
}
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
|
|
54
|
+
};
|
|
55
|
+
return setHistory([...listSize(history), state]), await promise, callback.call(callback);
|
|
56
|
+
}
|
|
56
57
|
};
|
|
57
58
|
return {
|
|
58
59
|
historyCount: history.length,
|
|
@@ -14,7 +14,7 @@ export default function useImageEditor({ imageSrc, spriteName, }: {
|
|
|
14
14
|
spriteName?: string;
|
|
15
15
|
}): {
|
|
16
16
|
historyCount: number;
|
|
17
|
-
setApplication: import('react').Dispatch<import('react').SetStateAction<PIXI.Application<PIXI.
|
|
17
|
+
setApplication: import('react').Dispatch<import('react').SetStateAction<PIXI.Application<PIXI.ICanvas> | undefined>>;
|
|
18
18
|
restore: () => Promise<void>;
|
|
19
19
|
stopCrop: (save: boolean) => void;
|
|
20
20
|
stopBlur: () => void;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { useState, useEffect } from "react";
|
|
2
|
+
import "@pixi/mixin-get-child-by-name";
|
|
2
3
|
import useHistoryTool from "./useHistoryTool.js";
|
|
3
4
|
import useImageEffects from "./useImageEffects.js";
|
|
4
|
-
import { updateImage, DEFAULT_SPRITE_NAME, saveAsBlob, saveAsDataURL,
|
|
5
|
+
import { updateImage, DEFAULT_SPRITE_NAME, saveAsBlob, saveAsDataURL, updateImageFromBlob } from "../effects/misc.js";
|
|
5
6
|
function useImageEditor({
|
|
6
7
|
imageSrc,
|
|
7
8
|
spriteName = DEFAULT_SPRITE_NAME
|
|
@@ -46,14 +47,7 @@ function useImageEditor({
|
|
|
46
47
|
spriteName,
|
|
47
48
|
imgDatasource: imageSrc
|
|
48
49
|
}).finally(() => setLoading(!1)));
|
|
49
|
-
}, [application, imageSrc, spriteName]),
|
|
50
|
-
if (!application) return;
|
|
51
|
-
const handleResize = () => {
|
|
52
|
-
const sprite = application.stage.getChildByLabel(spriteName, !0);
|
|
53
|
-
sprite && autoResize(application, sprite);
|
|
54
|
-
};
|
|
55
|
-
return window.addEventListener("resize", handleResize), () => window.removeEventListener("resize", handleResize);
|
|
56
|
-
}, [application, spriteName]), {
|
|
50
|
+
}, [application, imageSrc, spriteName]), {
|
|
57
51
|
historyCount,
|
|
58
52
|
setApplication,
|
|
59
53
|
restore,
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
2
2
|
import { customSize } from "@edifice.io/utilities";
|
|
3
|
-
import { useRef, useEffect
|
|
3
|
+
import { useRef, useEffect } from "react";
|
|
4
4
|
import useUploadFiles from "../../../hooks/useUploadFiles/useUploadFiles.js";
|
|
5
5
|
import UploadCard from "../UploadCard/UploadCard.js";
|
|
6
|
-
import
|
|
7
|
-
const
|
|
6
|
+
import ImageEditor from "../ImageEditor/components/ImageEditor.js";
|
|
7
|
+
const UploadFiles = ({
|
|
8
8
|
onFilesChange,
|
|
9
9
|
visibility = "protected"
|
|
10
10
|
}) => {
|
|
@@ -48,7 +48,7 @@ const ImageEditor = /* @__PURE__ */ lazy(async () => await import("../ImageEdito
|
|
|
48
48
|
const resource = uploadedFiles.find((uploadedFile) => uploadedFile.name === file.name);
|
|
49
49
|
return /* @__PURE__ */ jsx(UploadCard, { status: getUploadStatus(file), item: renderItem(file), onEdit: () => setEditingImage(resource), onRetry: () => uploadFile(file), onDelete: () => handleRemoveFile(file) }, file.name);
|
|
50
50
|
}),
|
|
51
|
-
editingImage && /* @__PURE__ */ jsx(
|
|
51
|
+
editingImage && /* @__PURE__ */ jsx(ImageEditor, { altText: editingImage.alt, legend: editingImage.title, image: getUrl(editingImage, !0), isOpen: !!editingImage, onCancel: () => setEditingImage(void 0), onSave: updateImage, onError: console.error })
|
|
52
52
|
] });
|
|
53
53
|
};
|
|
54
54
|
export {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
import { App, IGetConf, IGetSession, IUserDescription, IUserInfo, IWebApp, UserProfile } from '@edifice.io/client';
|
|
3
|
-
import { UseQueryResult } from '
|
|
3
|
+
import { UseQueryResult } from '../../../node_modules/@tanstack/react-query';
|
|
4
4
|
export interface EdificeClientParams {
|
|
5
5
|
alternativeApp?: boolean;
|
|
6
6
|
app: App;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { InvalidateQueryFilters, QueryClient } from '
|
|
1
|
+
import { InvalidateQueryFilters, QueryClient } from '../../../node_modules/@tanstack/react-query';
|
|
2
2
|
/**
|
|
3
3
|
* Invalidates queries and resets infinite query data to only contain the first page.
|
|
4
4
|
*
|