@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
|
@@ -39,7 +39,7 @@ const Root = /* @__PURE__ */ forwardRef(({
|
|
|
39
39
|
/* @__PURE__ */ jsx(Card.Header, {}),
|
|
40
40
|
typeof children == "function" ? children(appCode) : children
|
|
41
41
|
] }) });
|
|
42
|
-
}), Card = Object.assign(Root, {
|
|
42
|
+
}), Card = /* @__PURE__ */ Object.assign(Root, {
|
|
43
43
|
Title: CardTitle,
|
|
44
44
|
Text: CardText,
|
|
45
45
|
Image: CardImage,
|
|
@@ -53,7 +53,7 @@ const ComboboxComponent = /* @__PURE__ */ forwardRef(({
|
|
|
53
53
|
}, value, variant, renderInputGroup, renderSelectedItems, hasDefault: !!options.length, onFocus, onBlur, inputRef }),
|
|
54
54
|
/* @__PURE__ */ jsx(Dropdown.Menu, { "data-testid": "combobox-search-menu", children: renderContent() })
|
|
55
55
|
] });
|
|
56
|
-
}), Combobox = Object.assign(ComboboxComponent, {
|
|
56
|
+
}), Combobox = /* @__PURE__ */ Object.assign(ComboboxComponent, {
|
|
57
57
|
Trigger: ComboboxTrigger
|
|
58
58
|
});
|
|
59
59
|
export {
|
|
@@ -67,7 +67,7 @@ const Root = /* @__PURE__ */ forwardRef(({
|
|
|
67
67
|
return useEffect(() => {
|
|
68
68
|
onToggle == null || onToggle(visible);
|
|
69
69
|
}, [visible]), /* @__PURE__ */ jsx(DropdownContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { ref, className: dropdown, children: typeof children == "function" ? children(triggerProps, itemRefs, setVisible) : children }) });
|
|
70
|
-
}), Dropdown = Object.assign(Root, {
|
|
70
|
+
}), Dropdown = /* @__PURE__ */ Object.assign(Root, {
|
|
71
71
|
Trigger: DropdownTrigger,
|
|
72
72
|
Menu: DropdownMenu,
|
|
73
73
|
Item: DropdownItem,
|
|
@@ -22,7 +22,7 @@ const Root = /* @__PURE__ */ forwardRef(({
|
|
|
22
22
|
status
|
|
23
23
|
}), [id, isOptional, isReadOnly, isRequired, status]);
|
|
24
24
|
return /* @__PURE__ */ jsx(Context.Provider, { value: values, children: /* @__PURE__ */ jsx("div", { ref, className, ...restProps, children }) });
|
|
25
|
-
}), FormControl = Object.assign(Root, {
|
|
25
|
+
}), FormControl = /* @__PURE__ */ Object.assign(Root, {
|
|
26
26
|
Label,
|
|
27
27
|
Input,
|
|
28
28
|
Text: FormText
|
|
@@ -14,7 +14,7 @@ const WidgetAppsFooter = () => {
|
|
|
14
14
|
} = useTranslation(), getAppName = (data) => data.prefix && data.prefix.length > 1 ? t(data.prefix.substring(1)) : t(data.displayName) || "";
|
|
15
15
|
return /* @__PURE__ */ jsxs("div", { className: "widget-body d-flex flex-wrap", children: [
|
|
16
16
|
!bookmarkedApps.length && /* @__PURE__ */ jsx("div", { className: "text-dark", children: t("navbar.myapps.more") }),
|
|
17
|
-
bookmarkedApps.slice(0, 6).map((app, index) => /* @__PURE__ */ jsx("a", { href: app.address, title: getAppName(app), className: "bookmarked-app", target: appToOpenOnBlank.includes(app.name) || app.isExternal || app.
|
|
17
|
+
bookmarkedApps.slice(0, 6).map((app, index) => /* @__PURE__ */ jsx("a", { href: app.address, title: getAppName(app), className: "bookmarked-app", target: appToOpenOnBlank.includes(app.name) || app.isExternal || app.category === "connector" ? "_blank" : void 0, rel: appToOpenOnBlank.includes(app.name) || app.isExternal || app.category === "connector" ? "noopener noreferrer" : void 0, children: /* @__PURE__ */ jsx(AppIcon, { app, size: "32" }) }, index))
|
|
18
18
|
] });
|
|
19
19
|
};
|
|
20
20
|
export {
|
|
@@ -3,7 +3,7 @@ const Root = ({
|
|
|
3
3
|
children
|
|
4
4
|
}) => /* @__PURE__ */ jsx("div", { onClick: (e) => {
|
|
5
5
|
e.stopPropagation();
|
|
6
|
-
}, children }), PreventPropagation = Object.assign(Root, {});
|
|
6
|
+
}, children }), PreventPropagation = /* @__PURE__ */ Object.assign(Root, {});
|
|
7
7
|
export {
|
|
8
8
|
PreventPropagation as default
|
|
9
9
|
};
|
|
@@ -17,7 +17,7 @@ const Root = ({
|
|
|
17
17
|
borderColor,
|
|
18
18
|
backgroundColor
|
|
19
19
|
}, children });
|
|
20
|
-
}, PromotionCard = Object.assign(Root, {
|
|
20
|
+
}, PromotionCard = /* @__PURE__ */ Object.assign(Root, {
|
|
21
21
|
Header: PromotionCardHeader,
|
|
22
22
|
Body: PromotionCardBody,
|
|
23
23
|
Icon: PromotionCardIcon,
|
|
@@ -3,7 +3,7 @@ import { Size } from '../../types';
|
|
|
3
3
|
/**
|
|
4
4
|
* Base props shared by both SearchBar variants
|
|
5
5
|
*/
|
|
6
|
-
interface BaseProps extends Omit<React.ComponentPropsWithoutRef<'input'>, 'size'> {
|
|
6
|
+
export interface BaseProps extends Omit<React.ComponentPropsWithoutRef<'input'>, 'size'> {
|
|
7
7
|
/**
|
|
8
8
|
* String or template literal key for i18next translation
|
|
9
9
|
*/
|
|
@@ -67,7 +67,7 @@ type DynamicSearchBar = {
|
|
|
67
67
|
/**
|
|
68
68
|
* Props for the SearchBar component
|
|
69
69
|
*/
|
|
70
|
-
type Props = DefaultSearchBar | DynamicSearchBar;
|
|
70
|
+
export type Props = DefaultSearchBar | DynamicSearchBar;
|
|
71
71
|
export type SearchBarProps = BaseProps & Props;
|
|
72
72
|
/**
|
|
73
73
|
* SearchBar component to handle dynamic or static search input
|
|
@@ -13,7 +13,7 @@ const Root = /* @__PURE__ */ forwardRef(({
|
|
|
13
13
|
overflowY: "auto"
|
|
14
14
|
} : {}, children: /* @__PURE__ */ jsx("table", { ref, className: "table align-middle mb-0", style: {
|
|
15
15
|
overflow: maxHeight ? "visible" : "hidden"
|
|
16
|
-
}, children }) })), Table = Object.assign(Root, {
|
|
16
|
+
}, children }) })), Table = /* @__PURE__ */ Object.assign(Root, {
|
|
17
17
|
Thead: TableThead,
|
|
18
18
|
Th: TableTh,
|
|
19
19
|
Tbody: TableTbody,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { App, IGetConf } from '@edifice.io/client';
|
|
2
2
|
export default function useConf({ appCode }: {
|
|
3
3
|
appCode: App;
|
|
4
|
-
}): import('
|
|
4
|
+
}): import('../../../node_modules/@tanstack/react-query').UseQueryResult<IGetConf, Error>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { IGetSession } from '@edifice.io/client';
|
|
2
|
-
export default function useSession(): import('
|
|
2
|
+
export default function useSession(): import('../../../node_modules/@tanstack/react-query').UseQueryResult<IGetSession, Error>;
|
|
@@ -10,5 +10,5 @@ type LazyLoadOptions = {
|
|
|
10
10
|
* with respect to the [`intersectionOptions`](https://github.com/thebuilder/react-intersection-observer/tree/dceba7f52aebea4d62d539bc55a1db129226bb6c?tab=readme-ov-file#options)
|
|
11
11
|
* @return `true` if `src` is available, or false otherwise, or `null` while not tested.
|
|
12
12
|
*/
|
|
13
|
-
export default function useThumbnail(src: string
|
|
13
|
+
export default function useThumbnail(src: string, options?: LazyLoadOptions): boolean | null;
|
|
14
14
|
export {};
|
|
@@ -13,10 +13,6 @@ function useThumbnail(src, options) {
|
|
|
13
13
|
(_a = options == null ? void 0 : options.ref) != null && _a.current && (inViewRef == null || inViewRef(options.ref.current));
|
|
14
14
|
}, [options == null ? void 0 : options.ref, inViewRef]), useEffect(() => {
|
|
15
15
|
if ((options == null ? void 0 : options.ref) === void 0 || inView) {
|
|
16
|
-
if (!src) {
|
|
17
|
-
setStatus(!1);
|
|
18
|
-
return;
|
|
19
|
-
}
|
|
20
16
|
const img = new Image();
|
|
21
17
|
return img.src = src, img.onload = () => {
|
|
22
18
|
setStatus(!0);
|
|
@@ -26,7 +22,7 @@ function useThumbnail(src, options) {
|
|
|
26
22
|
img.onload = null, img.onerror = null, setStatus(null);
|
|
27
23
|
};
|
|
28
24
|
}
|
|
29
|
-
}, [inView
|
|
25
|
+
}, [inView]), status;
|
|
30
26
|
}
|
|
31
27
|
export {
|
|
32
28
|
useThumbnail as default
|
|
@@ -87,8 +87,11 @@ const useUpload = (visibility, application = "media-library") => {
|
|
|
87
87
|
children: [],
|
|
88
88
|
created: /* @__PURE__ */ new Date(),
|
|
89
89
|
_shared: [],
|
|
90
|
-
|
|
91
|
-
owner:
|
|
90
|
+
_isShared: !1,
|
|
91
|
+
owner: {
|
|
92
|
+
userId: "",
|
|
93
|
+
displayName: ""
|
|
94
|
+
}
|
|
92
95
|
};
|
|
93
96
|
throw uploadResponse.state === "error" ? new Error(uploadResponse.code || "Error while uploading video") : new Error("Video encoding is still running");
|
|
94
97
|
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { odeServices } from "@edifice.io/client";
|
|
2
2
|
import { useQueryClient, useQuery, useMutation } from "@tanstack/react-query";
|
|
3
3
|
import { useMemo, useCallback } from "react";
|
|
4
|
-
import { useTranslation } from "react-i18next";
|
|
5
4
|
import { useEdificeClient } from "../../providers/EdificeClientProvider/EdificeClientProvider.hook.js";
|
|
5
|
+
import { useTranslation } from "react-i18next";
|
|
6
6
|
import useToast from "../useToast/useToast.js";
|
|
7
7
|
function useWorkspaceFolders() {
|
|
8
8
|
const queryClient = useQueryClient(), {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { default as OnboardingModal } from './OnboardingModal';
|
|
2
|
-
export type { OnboardingModalRef } from './OnboardingModal';
|
|
2
|
+
export type { DisplayRuleCheckResult, OnboardingModalRef, OnboardingProps, } from './OnboardingModal';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
import { CreateParameters, CreateResult, ID, IFolder, UpdateParameters, UpdateResult } from '@edifice.io/client';
|
|
3
|
-
import { UseMutationResult } from '
|
|
3
|
+
import { UseMutationResult } from '../../../../node_modules/@tanstack/react-query';
|
|
4
4
|
export interface FormInputs {
|
|
5
5
|
title: string;
|
|
6
6
|
description: string;
|
|
@@ -157,7 +157,7 @@ const DEFAULT_INPUT_MAX_LENGTH = 60, DEFAULT_TEXTAREA_MAX_LENGTH = 400, Resource
|
|
|
157
157
|
/* @__PURE__ */ jsx(Button, { form: formId, type: "submit", color: "primary", isLoading: isSubmitting, variant: "filled", disabled: !isValid || isSubmitting, children: isCreating ? customT.create ?? t("explorer.create") : customT.save ?? t("save") })
|
|
158
158
|
] }),
|
|
159
159
|
/* @__PURE__ */ jsx(MediaLibrary, { appCode: application, ref: mediaLibraryRef, multiple: !1, visibility: "protected", ...mediaLibraryHandlers })
|
|
160
|
-
] }), document.getElementById("portal")
|
|
160
|
+
] }), document.getElementById("portal"));
|
|
161
161
|
};
|
|
162
162
|
export {
|
|
163
163
|
ResourceModal
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { UpdateParameters, UpdateResult } from '@edifice.io/client';
|
|
2
|
-
import { UseMutationOptions, UseMutationResult } from '
|
|
2
|
+
import { UseMutationOptions, UseMutationResult } from '../../../../../node_modules/@tanstack/react-query';
|
|
3
3
|
declare const useUpdateMutation: ({ application, options, }: {
|
|
4
4
|
application: string;
|
|
5
5
|
options?: UseMutationOptions<UpdateResult, Error, UpdateParameters>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ID, PutShareResponse, RightStringified, ShareRight, ShareRightAction, ShareRightActionDisplayName, ShareUrls } from '@edifice.io/client';
|
|
2
|
-
import { UseMutationResult } from '
|
|
2
|
+
import { UseMutationResult } from '../../../../node_modules/@tanstack/react-query';
|
|
3
3
|
/**
|
|
4
4
|
* Configuration options for sharing a resource
|
|
5
5
|
*
|
|
@@ -118,11 +118,21 @@ interface ShareResourceProps {
|
|
|
118
118
|
classNameSearchInput?: string;
|
|
119
119
|
}
|
|
120
120
|
/**
|
|
121
|
-
* Ref interface exposed by ShareResources component
|
|
122
|
-
* Use useRef with this type and call ref.current?.handleShare() to trigger share programmatically.
|
|
121
|
+
* Ref interface exposed by ShareResources component
|
|
123
122
|
*
|
|
124
123
|
* @interface ShareResourcesRef
|
|
125
124
|
* @property {() => void} handleShare - Method to trigger the share operation
|
|
125
|
+
*
|
|
126
|
+
* @example
|
|
127
|
+
* ```tsx
|
|
128
|
+
* const ref = useRef<ShareResourcesRef>(null);
|
|
129
|
+
*
|
|
130
|
+
* // Trigger share programmatically
|
|
131
|
+
* ref.current?.handleShare();
|
|
132
|
+
*
|
|
133
|
+
* // Check sharing status
|
|
134
|
+
* const sharing = ref.current?.isSharing();
|
|
135
|
+
* ```
|
|
126
136
|
*/
|
|
127
137
|
export interface ShareResourcesRef {
|
|
128
138
|
handleShare: (notify?: boolean) => void;
|
|
@@ -132,7 +142,46 @@ export interface ShareResourcesRef {
|
|
|
132
142
|
*
|
|
133
143
|
* A component for managing resource sharing permissions with users and groups.
|
|
134
144
|
* Provides search functionality, bookmark management, and granular rights control.
|
|
135
|
-
*
|
|
145
|
+
*
|
|
146
|
+
* @example
|
|
147
|
+
* ```tsx
|
|
148
|
+
* import { useRef } from 'react';
|
|
149
|
+
* import ShareResources, { ShareResourcesRef, ShareOptions } from './ShareResources';
|
|
150
|
+
*
|
|
151
|
+
* function MyComponent() {
|
|
152
|
+
* const shareRef = useRef<ShareResourcesRef>(null);
|
|
153
|
+
*
|
|
154
|
+
* const shareOptions: ShareOptions = {
|
|
155
|
+
* resourceId: '123',
|
|
156
|
+
* resourceRights: [],
|
|
157
|
+
* resourceCreatorId: 'user-456',
|
|
158
|
+
* filteredActions: ['read', 'contrib'],
|
|
159
|
+
* urls: {
|
|
160
|
+
* getResourceRights: '/api/share/rights',
|
|
161
|
+
* putResourceRights: '/api/share/update'
|
|
162
|
+
* }
|
|
163
|
+
* };
|
|
164
|
+
*
|
|
165
|
+
* const handleSave = () => {
|
|
166
|
+
* if (shareRef.current) {
|
|
167
|
+
* shareRef.current.handleShare();
|
|
168
|
+
* }
|
|
169
|
+
* };
|
|
170
|
+
*
|
|
171
|
+
* return (
|
|
172
|
+
* <>
|
|
173
|
+
* <ShareResources
|
|
174
|
+
* ref={shareRef}
|
|
175
|
+
* shareOptions={shareOptions}
|
|
176
|
+
* onSuccess={() => console.log('Shared successfully')}
|
|
177
|
+
* onChange={(rights, isDirty) => console.log('Rights changed:', isDirty)}
|
|
178
|
+
* onSubmit={(isSubmitting) => console.log('Submitting share...', isSubmitting)}
|
|
179
|
+
* />
|
|
180
|
+
* <button onClick={handleSave}>Save Changes</button>
|
|
181
|
+
* </>
|
|
182
|
+
* );
|
|
183
|
+
* }
|
|
184
|
+
* ```
|
|
136
185
|
*
|
|
137
186
|
* @component
|
|
138
187
|
* @forwardRef
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ID, UpdateParameters, UpdateResult } from '@edifice.io/client';
|
|
2
|
-
import { UseMutationResult } from '
|
|
2
|
+
import { UseMutationResult } from '../../../../../node_modules/@tanstack/react-query';
|
|
3
3
|
export type PublicationType = 'RESTRAINT' | 'IMMEDIATE' | undefined;
|
|
4
4
|
export interface ShareBlogProps {
|
|
5
5
|
resourceId: ID;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { PutShareResponse, ShareRight } from '@edifice.io/client';
|
|
2
|
-
import { UseMutationOptions, UseMutationResult } from '
|
|
2
|
+
import { UseMutationOptions, UseMutationResult } from '../../../../../node_modules/@tanstack/react-query';
|
|
3
3
|
declare const useShareMutation: ({ application, options, }: {
|
|
4
4
|
application: string;
|
|
5
5
|
options?: UseMutationOptions<PutShareResponse, Error, {
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { default as FileCard } from './FileCard';
|
|
3
|
+
declare const meta: Meta<typeof FileCard>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof FileCard>;
|
|
6
|
+
export declare const Base: Story;
|
|
7
|
+
export declare const AudioFile: Story;
|
|
8
|
+
export declare const ImageFile: Story;
|
|
9
|
+
export declare const VideoFile: Story;
|
|
10
|
+
export declare const TextFile: Story;
|
|
11
|
+
export declare const DocFile: Story;
|
|
12
|
+
export declare const PptFile: Story;
|
|
13
|
+
export declare const PdfFile: Story;
|
|
14
|
+
export declare const ZipFile: Story;
|
|
15
|
+
export declare const CsvFile: Story;
|
|
16
|
+
export declare const XlsFile: Story;
|
|
17
|
+
export declare const MdFile: Story;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useState
|
|
3
|
-
import
|
|
2
|
+
import { useState } from "react";
|
|
3
|
+
import { Stage } from "@pixi/react";
|
|
4
4
|
import { useTranslation } from "react-i18next";
|
|
5
5
|
import useImageEditor from "../hooks/useImageEditor.js";
|
|
6
6
|
import ImageEditorToolbar from "./ImageEditorToolbar.js";
|
|
@@ -21,11 +21,7 @@ const ImageEditor = ({
|
|
|
21
21
|
}) => {
|
|
22
22
|
const {
|
|
23
23
|
t
|
|
24
|
-
} = useTranslation(), [currentOperation, setCurrentOperation] = useState(void 0), [isSaving, setSaving] = useState(!1), [altText, setAltText] = useState(altTextParam ?? ""), [legend, setLegend] = useState(legendParam ?? ""), [dirty, setDirty] = useState(!1)
|
|
25
|
-
useEffect(() => {
|
|
26
|
-
setAltText(altTextParam ?? ""), setLegend(legendParam ?? ""), setDirty(!1);
|
|
27
|
-
}, [altTextParam, legendParam]);
|
|
28
|
-
const {
|
|
24
|
+
} = useTranslation(), [currentOperation, setCurrentOperation] = useState(void 0), [isSaving, setSaving] = useState(!1), [altText, setAltText] = useState(altTextParam ?? ""), [legend, setLegend] = useState(legendParam ?? ""), [dirty, setDirty] = useState(!1), {
|
|
29
25
|
toBlob,
|
|
30
26
|
setApplication,
|
|
31
27
|
startBlur,
|
|
@@ -40,21 +36,7 @@ const ImageEditor = ({
|
|
|
40
36
|
loading
|
|
41
37
|
} = useImageEditor({
|
|
42
38
|
imageSrc
|
|
43
|
-
}),
|
|
44
|
-
if (node && !appRef.current) {
|
|
45
|
-
const app = new PIXI.Application();
|
|
46
|
-
appRef.current = app, app.init({
|
|
47
|
-
backgroundAlpha: 0,
|
|
48
|
-
resolution: 1,
|
|
49
|
-
preserveDrawingBuffer: !0
|
|
50
|
-
}).then(() => {
|
|
51
|
-
appRef.current === app && (node.appendChild(app.canvas), setApplication(app));
|
|
52
|
-
}).catch(() => {
|
|
53
|
-
appRef.current === app && (appRef.current = null);
|
|
54
|
-
});
|
|
55
|
-
}
|
|
56
|
-
!node && appRef.current && (appRef.current.destroy(!0), appRef.current = null);
|
|
57
|
-
}, [setApplication]), stopAll = () => {
|
|
39
|
+
}), stopAll = () => {
|
|
58
40
|
stopBlur(), stopCrop(currentOperation === "CROP"), stopResize(currentOperation === "RESIZE");
|
|
59
41
|
}, handleSave = async () => {
|
|
60
42
|
try {
|
|
@@ -101,8 +83,12 @@ const ImageEditor = ({
|
|
|
101
83
|
/* @__PURE__ */ jsx(Modal.Body, { className: "d-flex flex-column align-items-center", children: /* @__PURE__ */ jsxs("div", { className: "d-flex flex-column gap-12 w-100 flex-grow-1", children: [
|
|
102
84
|
/* @__PURE__ */ jsx(ImageEditorToolbar, { handle: handleOperation, historyCount }),
|
|
103
85
|
/* @__PURE__ */ jsxs("div", { className: "position-relative d-flex flex-column align-items-center justify-content-center flex-grow-1 w-100 image-editor", children: [
|
|
104
|
-
/* @__PURE__ */ jsx(
|
|
105
|
-
|
|
86
|
+
/* @__PURE__ */ jsx(Stage, { onMount: (app) => setApplication(app), options: {
|
|
87
|
+
preserveDrawingBuffer: !0,
|
|
88
|
+
backgroundAlpha: 0,
|
|
89
|
+
resolution: 1
|
|
90
|
+
} }),
|
|
91
|
+
!!loading && /* @__PURE__ */ jsx("div", { className: "position-absolute top-0 start-0 bottom-0 end-0 m-10 d-flex align-items-center justify-content-center bg-black opacity-25", children: /* @__PURE__ */ jsx(LoadingScreen, {}) })
|
|
106
92
|
] }),
|
|
107
93
|
/* @__PURE__ */ jsxs("div", { className: "d-flex flex-column flex-md-row m-10 gap-12 w-100", children: [
|
|
108
94
|
/* @__PURE__ */ jsxs(FormControl, { id: "alt", className: "flex-grow-1", children: [
|
|
@@ -1,20 +1,18 @@
|
|
|
1
1
|
import * as PIXI from 'pixi.js';
|
|
2
2
|
/**
|
|
3
|
-
* This function
|
|
3
|
+
* This function start the blur controler
|
|
4
4
|
* - drawing cursor
|
|
5
5
|
* - listening mouse move to move cursor
|
|
6
|
-
* - listening
|
|
6
|
+
* - listening
|
|
7
7
|
*
|
|
8
|
-
* @param application
|
|
9
|
-
* @param
|
|
8
|
+
* @param application
|
|
9
|
+
* @param param1
|
|
10
10
|
*/
|
|
11
11
|
export declare function start(application: PIXI.Application, { spriteName }: {
|
|
12
12
|
spriteName: string;
|
|
13
13
|
}): void;
|
|
14
14
|
/**
|
|
15
|
-
* This function
|
|
16
|
-
* The blur layer is kept on stage so it gets captured by toBlob/generateTexture
|
|
17
|
-
* when the image is saved or another operation is applied.
|
|
15
|
+
* This function remove cursor and all mouse event listeners
|
|
18
16
|
*
|
|
19
17
|
* @param application the PIXI.Application context
|
|
20
18
|
*/
|
|
@@ -1,53 +1,45 @@
|
|
|
1
1
|
import * as PIXI from "pixi.js";
|
|
2
2
|
import { aggregate } from "../utilities/aggregate.js";
|
|
3
|
-
import { BLUR_LAYER_NAME } from "./constants.js";
|
|
4
3
|
import { getApplicationScale } from "./misc.js";
|
|
5
4
|
const BRUSH_SIZE = 20, DEBOUNCE = 50, CURSOR_NAME = "BRUSH_CURSOR";
|
|
6
|
-
function getOrCreateBlurLayer(application) {
|
|
7
|
-
let layer = application.stage.getChildByLabel(BLUR_LAYER_NAME);
|
|
8
|
-
return layer || (layer = new PIXI.Container(), layer.label = BLUR_LAYER_NAME, application.stage.addChild(layer)), layer;
|
|
9
|
-
}
|
|
10
5
|
function drawBrush(points, scale) {
|
|
11
6
|
const container = new PIXI.Graphics();
|
|
12
7
|
for (const point of points)
|
|
13
|
-
point && (container.
|
|
14
|
-
color: 16777215,
|
|
15
|
-
alpha: 1
|
|
16
|
-
}));
|
|
8
|
+
point && (container.beginFill(16777215, 1), container.drawCircle(point.x, point.y, BRUSH_SIZE / scale), container.lineStyle(0), container.endFill());
|
|
17
9
|
return container;
|
|
18
10
|
}
|
|
19
11
|
function drawBlurListener(application, {
|
|
20
12
|
spriteName
|
|
21
13
|
}) {
|
|
22
14
|
return aggregate(DEBOUNCE, (event) => application.stage.toLocal(event.global), (points) => {
|
|
23
|
-
const child = application.stage.
|
|
24
|
-
if (
|
|
25
|
-
const
|
|
26
|
-
newSprite.filters = [
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
15
|
+
const child = application.stage.getChildByName(spriteName), scale = getApplicationScale(application);
|
|
16
|
+
if (child == null) return;
|
|
17
|
+
const newSprite = new PIXI.Sprite(child.texture);
|
|
18
|
+
newSprite.filters = [
|
|
19
|
+
new PIXI.BlurFilter(
|
|
20
|
+
8,
|
|
21
|
+
// PIXI Default value for strength of the blur effect
|
|
22
|
+
4,
|
|
23
|
+
// Quality of the blur effect depending on the scale (4 is the PIXI default value)
|
|
24
|
+
Math.min(scale, 1)
|
|
25
|
+
)
|
|
26
|
+
// Resolution of the blur effect depending on the scale
|
|
27
|
+
], newSprite.width = child.width, newSprite.height = child.height, newSprite.scale = new PIXI.Point(1, 1), newSprite.anchor = child.anchor, newSprite.mask = drawBrush(points, scale), child.addChild(newSprite);
|
|
33
28
|
});
|
|
34
29
|
}
|
|
35
30
|
function drawCursor(application) {
|
|
36
31
|
removeCursor(application);
|
|
37
32
|
const scale = getApplicationScale(application), circle = new PIXI.Graphics();
|
|
38
|
-
return circle.circle(0, 0, BRUSH_SIZE / scale), circle.
|
|
39
|
-
width: Math.max(1, 1 / scale),
|
|
40
|
-
color: 16711680
|
|
41
|
-
}), circle.label = CURSOR_NAME, application.stage.addChild(circle), circle;
|
|
33
|
+
return circle.lineStyle(Math.max(1, 1 / scale), 16711680), circle.drawCircle(0, 0, BRUSH_SIZE / scale), circle.endFill(), circle.name = CURSOR_NAME, application.stage.addChild(circle), circle;
|
|
42
34
|
}
|
|
43
35
|
function removeCursor(application) {
|
|
44
|
-
const child = application.stage.
|
|
36
|
+
const child = application.stage.getChildByName(CURSOR_NAME);
|
|
45
37
|
child && child.removeFromParent();
|
|
46
38
|
}
|
|
47
39
|
function moveCursorListener(application) {
|
|
48
40
|
return (event) => {
|
|
49
41
|
if (!application) return;
|
|
50
|
-
const point = application.stage.toLocal(event.global), child = application.stage.
|
|
42
|
+
const point = application.stage.toLocal(event.global), child = application.stage.getChildByName(CURSOR_NAME, !0);
|
|
51
43
|
child && (child.position.x = point.x, child.position.y = point.y);
|
|
52
44
|
};
|
|
53
45
|
}
|
|
@@ -61,7 +53,7 @@ function start(application, {
|
|
|
61
53
|
spriteName
|
|
62
54
|
});
|
|
63
55
|
application.stage.on("pointerdown", () => {
|
|
64
|
-
application.stage.
|
|
56
|
+
application.stage.on("pointermove", blurListener);
|
|
65
57
|
});
|
|
66
58
|
const stopListening = () => {
|
|
67
59
|
var _a;
|
|
@@ -7,7 +7,7 @@ export type CornerType = 'TOP_LEFT' | 'TOP_RIGHT' | 'BOTTOM_LEFT' | 'BOTTOM_RIGH
|
|
|
7
7
|
* - A mask applied to the original image
|
|
8
8
|
*
|
|
9
9
|
* @param application The PIXI.Application context
|
|
10
|
-
* @param spriteName The sprite name identifying the original image
|
|
10
|
+
* @param {spriteName:string} {spriteName} The sprite name identifying the original image
|
|
11
11
|
*/
|
|
12
12
|
export declare function start(application: PIXI.Application, { spriteName }: {
|
|
13
13
|
spriteName: string;
|
|
@@ -19,9 +19,10 @@ export declare function start(application: PIXI.Application, { spriteName }: {
|
|
|
19
19
|
*/
|
|
20
20
|
export declare function stop(application: PIXI.Application): void;
|
|
21
21
|
/**
|
|
22
|
-
* This function
|
|
22
|
+
* This function apply a crop to the imageSrc and return the result as a PIXI.Sprite object
|
|
23
23
|
*
|
|
24
|
-
* @param application
|
|
25
|
-
* @
|
|
24
|
+
* @param application
|
|
25
|
+
* @param imageSrc a string URI of the image to crop
|
|
26
|
+
* @returns a PIXI.Sprite with a imageSrc cropped or undefined if the image has not been cropped
|
|
26
27
|
*/
|
|
27
28
|
export declare function save(application: PIXI.Application): PIXI.Sprite | undefined;
|