@bubblydoo/uxp-toolkit-react 0.0.5 → 0.0.7
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.d.ts +14 -6
- package/dist/index.js +113 -103
- package/package.json +6 -3
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import * as _tanstack_react_query from '@tanstack/react-query';
|
|
2
1
|
import { Document } from 'photoshop/dom/Document';
|
|
2
|
+
import * as _tanstack_react_query from '@tanstack/react-query';
|
|
3
|
+
import { UTLayer } from '@bubblydoo/uxp-toolkit';
|
|
3
4
|
|
|
4
5
|
declare function useEventListenerSkippable({ subscribe, trigger, skip, filter, }: {
|
|
5
6
|
subscribe: (boundTrigger: () => void) => (() => void);
|
|
@@ -10,7 +11,11 @@ declare function useEventListenerSkippable({ subscribe, trigger, skip, filter, }
|
|
|
10
11
|
filter: boolean;
|
|
11
12
|
}): void;
|
|
12
13
|
|
|
13
|
-
declare function
|
|
14
|
+
declare function useActiveDocument(): Document | null;
|
|
15
|
+
|
|
16
|
+
declare function useApplicationInfoQuery({ refetchInterval }?: {
|
|
17
|
+
refetchInterval?: number;
|
|
18
|
+
}): _tanstack_react_query.UseQueryResult<{
|
|
14
19
|
active: boolean;
|
|
15
20
|
autoShowHomeScreen: boolean;
|
|
16
21
|
available: number;
|
|
@@ -41,14 +46,17 @@ declare function useApplicationInfoQuery(refetchInterval?: number): _tanstack_re
|
|
|
41
46
|
declare function useIsPluginPanelVisible(panelId: string): boolean | null;
|
|
42
47
|
|
|
43
48
|
declare function useOnDocumentEdited(document: Document, trigger: () => void): void;
|
|
44
|
-
declare function useActiveDocument(): Document | null;
|
|
45
|
-
|
|
46
49
|
declare function useOnDocumentLayersEdited(document: Document, trigger: () => void): void;
|
|
47
|
-
|
|
48
50
|
declare function useOnDocumentLayersSelection(document: Document, trigger: () => void): void;
|
|
49
51
|
|
|
50
52
|
declare function useOnEvent(document: Document, events: string[], trigger: () => void): void;
|
|
51
53
|
|
|
52
54
|
declare function useOpenDocuments(): Document[];
|
|
53
55
|
|
|
54
|
-
|
|
56
|
+
declare function useDocumentTreeQuery<TSelect = UTLayer>(document: Document, { skip, invalidateRefetchType, select }?: {
|
|
57
|
+
skip?: boolean;
|
|
58
|
+
invalidateRefetchType?: 'none' | 'active' | 'inactive' | 'all';
|
|
59
|
+
select?: (utLayers: UTLayer[]) => TSelect;
|
|
60
|
+
}): _tanstack_react_query.UseQueryResult<_tanstack_react_query.NoInfer<TSelect>, Error>;
|
|
61
|
+
|
|
62
|
+
export { useActiveDocument, useApplicationInfoQuery, useDocumentTreeQuery, useEventListenerSkippable, useIsPluginPanelVisible, useOnDocumentEdited, useOnDocumentLayersEdited, useOnDocumentLayersSelection, useOnEvent, useOpenDocuments };
|
package/dist/index.js
CHANGED
|
@@ -27,23 +27,55 @@ function useEventListenerSkippable({
|
|
|
27
27
|
}, [queuedWhileSkipped, trigger, skip]);
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
+
// src/useActiveDocument.ts
|
|
31
|
+
import { action, app } from "photoshop";
|
|
32
|
+
import { useSyncExternalStore } from "react";
|
|
33
|
+
var DOCUMENT_CHANGE_EVENTS = [
|
|
34
|
+
"select",
|
|
35
|
+
"open",
|
|
36
|
+
"close",
|
|
37
|
+
"smartBrushWorkspace",
|
|
38
|
+
"layersFiltered"
|
|
39
|
+
];
|
|
40
|
+
var activeDocumentExternalStore = {
|
|
41
|
+
subscribe: (fn) => {
|
|
42
|
+
action.addNotificationListener(DOCUMENT_CHANGE_EVENTS, fn);
|
|
43
|
+
return () => {
|
|
44
|
+
action.removeNotificationListener(DOCUMENT_CHANGE_EVENTS, fn);
|
|
45
|
+
};
|
|
46
|
+
},
|
|
47
|
+
getSnapshot: () => app.activeDocument
|
|
48
|
+
};
|
|
49
|
+
function useActiveDocument() {
|
|
50
|
+
return useSyncExternalStore(
|
|
51
|
+
activeDocumentExternalStore.subscribe,
|
|
52
|
+
activeDocumentExternalStore.getSnapshot
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
|
|
30
56
|
// src/useIsPluginVisible.tsx
|
|
31
57
|
import { useQuery } from "@tanstack/react-query";
|
|
32
58
|
import { entrypoints } from "uxp";
|
|
33
59
|
import { photoshopGetApplicationInfo, uxpEntrypointsSchema } from "@bubblydoo/uxp-toolkit";
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
queryKey: ["
|
|
60
|
+
import { createQueryKeys } from "@lukemorales/query-key-factory";
|
|
61
|
+
var applicationQueries = createQueryKeys("application", {
|
|
62
|
+
info: () => ({
|
|
63
|
+
queryKey: ["info"],
|
|
38
64
|
queryFn: async () => {
|
|
39
65
|
const appInfo = await photoshopGetApplicationInfo();
|
|
40
66
|
return appInfo;
|
|
41
|
-
}
|
|
42
|
-
|
|
67
|
+
}
|
|
68
|
+
})
|
|
69
|
+
});
|
|
70
|
+
var pluginInfo = uxpEntrypointsSchema.parse(entrypoints)._pluginInfo;
|
|
71
|
+
function useApplicationInfoQuery({ refetchInterval } = {}) {
|
|
72
|
+
return useQuery({
|
|
73
|
+
...applicationQueries.info(),
|
|
74
|
+
refetchInterval: refetchInterval ?? 1e3
|
|
43
75
|
});
|
|
44
76
|
}
|
|
45
77
|
function useIsPluginPanelVisible(panelId) {
|
|
46
|
-
const appInfoQuery = useApplicationInfoQuery(1e3);
|
|
78
|
+
const appInfoQuery = useApplicationInfoQuery({ refetchInterval: 1e3 });
|
|
47
79
|
if (!appInfoQuery.data) return null;
|
|
48
80
|
const pluginPanel = appInfoQuery.data.panelList.find((panel) => {
|
|
49
81
|
const idParts = panel.ID.split("/");
|
|
@@ -53,7 +85,7 @@ function useIsPluginPanelVisible(panelId) {
|
|
|
53
85
|
return pluginPanel.visible;
|
|
54
86
|
}
|
|
55
87
|
function useIsAnyPluginPanelVisible() {
|
|
56
|
-
const appInfoQuery = useApplicationInfoQuery(1e3);
|
|
88
|
+
const appInfoQuery = useApplicationInfoQuery({ refetchInterval: 1e3 });
|
|
57
89
|
if (!appInfoQuery.data) return null;
|
|
58
90
|
const pluginPanel = appInfoQuery.data.panelList.find((panel) => {
|
|
59
91
|
const idParts = panel.ID.split("/");
|
|
@@ -63,63 +95,39 @@ function useIsAnyPluginPanelVisible() {
|
|
|
63
95
|
return pluginPanel.visible;
|
|
64
96
|
}
|
|
65
97
|
|
|
66
|
-
// src/
|
|
67
|
-
import { action, app } from "photoshop";
|
|
68
|
-
|
|
69
|
-
var EVENTS = [
|
|
70
|
-
"select",
|
|
71
|
-
"delete",
|
|
72
|
-
"make",
|
|
73
|
-
"set",
|
|
74
|
-
"move",
|
|
75
|
-
"close",
|
|
76
|
-
"show",
|
|
77
|
-
"hide",
|
|
78
|
-
"convertToProfile",
|
|
79
|
-
"selectNoLayers",
|
|
80
|
-
"historyStateChanged"
|
|
81
|
-
// this might have changed the document
|
|
82
|
-
];
|
|
83
|
-
function useOnDocumentEdited(document, trigger) {
|
|
98
|
+
// src/useOnEvent.tsx
|
|
99
|
+
import { action as action2, app as app2 } from "photoshop";
|
|
100
|
+
function useOnEvent(document, events, trigger) {
|
|
84
101
|
const isPluginPanelVisible = useIsAnyPluginPanelVisible() ?? true;
|
|
85
102
|
useEventListenerSkippable({
|
|
86
103
|
trigger,
|
|
87
104
|
subscribe: (boundTrigger) => {
|
|
88
|
-
|
|
105
|
+
action2.addNotificationListener(events, boundTrigger);
|
|
89
106
|
return () => {
|
|
90
|
-
|
|
107
|
+
action2.removeNotificationListener(events, boundTrigger);
|
|
91
108
|
};
|
|
92
109
|
},
|
|
93
110
|
skip: !isPluginPanelVisible,
|
|
94
|
-
filter: document ===
|
|
111
|
+
filter: document === app2.activeDocument
|
|
95
112
|
});
|
|
96
113
|
}
|
|
97
|
-
|
|
114
|
+
|
|
115
|
+
// src/events.ts
|
|
116
|
+
var DOCUMENT_EDITED_EVENTS = [
|
|
98
117
|
"select",
|
|
99
|
-
"
|
|
118
|
+
"delete",
|
|
119
|
+
"make",
|
|
120
|
+
"set",
|
|
121
|
+
"move",
|
|
100
122
|
"close",
|
|
101
|
-
"
|
|
102
|
-
"
|
|
123
|
+
"show",
|
|
124
|
+
"hide",
|
|
125
|
+
"convertToProfile",
|
|
126
|
+
"selectNoLayers",
|
|
127
|
+
"historyStateChanged"
|
|
128
|
+
// this might have changed the document
|
|
103
129
|
];
|
|
104
|
-
var
|
|
105
|
-
subscribe: (fn) => {
|
|
106
|
-
action.addNotificationListener(DOCUMENT_CHANGE_EVENTS, fn);
|
|
107
|
-
return () => {
|
|
108
|
-
action.removeNotificationListener(DOCUMENT_CHANGE_EVENTS, fn);
|
|
109
|
-
};
|
|
110
|
-
},
|
|
111
|
-
getSnapshot: () => app.activeDocument
|
|
112
|
-
};
|
|
113
|
-
function useActiveDocument() {
|
|
114
|
-
return useSyncExternalStore(
|
|
115
|
-
activeDocumentExternalStore.subscribe,
|
|
116
|
-
activeDocumentExternalStore.getSnapshot
|
|
117
|
-
);
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
// src/useOnDocumentLayersEdited.tsx
|
|
121
|
-
import { action as action2, app as app2 } from "photoshop";
|
|
122
|
-
var EVENTS2 = [
|
|
130
|
+
var DOCUMENT_LAYERS_EDITED_EVENTS = [
|
|
123
131
|
// "select",
|
|
124
132
|
"delete",
|
|
125
133
|
"make",
|
|
@@ -133,24 +141,7 @@ var EVENTS2 = [
|
|
|
133
141
|
"historyStateChanged"
|
|
134
142
|
// this might have changed the layers
|
|
135
143
|
];
|
|
136
|
-
|
|
137
|
-
const isPluginPanelVisible = useIsAnyPluginPanelVisible() ?? true;
|
|
138
|
-
useEventListenerSkippable({
|
|
139
|
-
trigger,
|
|
140
|
-
subscribe: (boundTrigger) => {
|
|
141
|
-
action2.addNotificationListener(EVENTS2, boundTrigger);
|
|
142
|
-
return () => {
|
|
143
|
-
action2.removeNotificationListener(EVENTS2, boundTrigger);
|
|
144
|
-
};
|
|
145
|
-
},
|
|
146
|
-
skip: !isPluginPanelVisible,
|
|
147
|
-
filter: document === app2.activeDocument
|
|
148
|
-
});
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
// src/useOnDocumentLayersSelection.tsx
|
|
152
|
-
import { action as action3, app as app3 } from "photoshop";
|
|
153
|
-
var EVENTS3 = [
|
|
144
|
+
var DOCUMENT_LAYERS_SELECTION_EVENTS = [
|
|
154
145
|
"select",
|
|
155
146
|
"deselect",
|
|
156
147
|
// "delete",
|
|
@@ -165,53 +156,33 @@ var EVENTS3 = [
|
|
|
165
156
|
"historyStateChanged"
|
|
166
157
|
// this might have changed the layers selection, e.g. when deleting an undo
|
|
167
158
|
];
|
|
168
|
-
function useOnDocumentLayersSelection(document, trigger) {
|
|
169
|
-
const isPluginPanelVisible = useIsAnyPluginPanelVisible() ?? true;
|
|
170
|
-
useEventListenerSkippable({
|
|
171
|
-
trigger,
|
|
172
|
-
subscribe: (boundTrigger) => {
|
|
173
|
-
action3.addNotificationListener(EVENTS3, boundTrigger);
|
|
174
|
-
return () => {
|
|
175
|
-
action3.removeNotificationListener(EVENTS3, boundTrigger);
|
|
176
|
-
};
|
|
177
|
-
},
|
|
178
|
-
skip: !isPluginPanelVisible,
|
|
179
|
-
filter: document === app3.activeDocument
|
|
180
|
-
});
|
|
181
|
-
}
|
|
182
159
|
|
|
183
|
-
// src/
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
action4.removeNotificationListener(events, boundTrigger);
|
|
193
|
-
};
|
|
194
|
-
},
|
|
195
|
-
skip: !isPluginPanelVisible,
|
|
196
|
-
filter: document === app4.activeDocument
|
|
197
|
-
});
|
|
160
|
+
// src/useDocumentEventsHooks.tsx
|
|
161
|
+
function useOnDocumentEdited(document, trigger) {
|
|
162
|
+
return useOnEvent(document, DOCUMENT_EDITED_EVENTS, trigger);
|
|
163
|
+
}
|
|
164
|
+
function useOnDocumentLayersEdited(document, trigger) {
|
|
165
|
+
return useOnEvent(document, DOCUMENT_LAYERS_EDITED_EVENTS, trigger);
|
|
166
|
+
}
|
|
167
|
+
function useOnDocumentLayersSelection(document, trigger) {
|
|
168
|
+
return useOnEvent(document, DOCUMENT_LAYERS_SELECTION_EVENTS, trigger);
|
|
198
169
|
}
|
|
199
170
|
|
|
200
171
|
// src/useOpenDocuments.tsx
|
|
201
|
-
import { action as
|
|
172
|
+
import { action as action3, app as app3 } from "photoshop";
|
|
202
173
|
import { useSyncExternalStore as useSyncExternalStore2 } from "react";
|
|
203
174
|
var OPEN_DOCUMENTS_EVENTS = ["open", "close"];
|
|
204
175
|
var cachedDocuments = null;
|
|
205
176
|
var cachedDocumentsSnapshot = null;
|
|
206
177
|
var openDocumentsExternalStore = {
|
|
207
178
|
subscribe: (fn) => {
|
|
208
|
-
|
|
179
|
+
action3.addNotificationListener(OPEN_DOCUMENTS_EVENTS, fn);
|
|
209
180
|
return () => {
|
|
210
|
-
|
|
181
|
+
action3.removeNotificationListener(OPEN_DOCUMENTS_EVENTS, fn);
|
|
211
182
|
};
|
|
212
183
|
},
|
|
213
184
|
getSnapshot: () => {
|
|
214
|
-
const currentDocuments = Array.from(
|
|
185
|
+
const currentDocuments = Array.from(app3.documents);
|
|
215
186
|
const currentSnapshot = currentDocuments.map((doc) => doc.id || doc.name).join(",");
|
|
216
187
|
if (currentSnapshot !== cachedDocumentsSnapshot) {
|
|
217
188
|
cachedDocuments = currentDocuments;
|
|
@@ -226,9 +197,48 @@ function useOpenDocuments() {
|
|
|
226
197
|
openDocumentsExternalStore.getSnapshot
|
|
227
198
|
);
|
|
228
199
|
}
|
|
200
|
+
|
|
201
|
+
// src/useDocumentTreeQuery.ts
|
|
202
|
+
import { useCallback } from "react";
|
|
203
|
+
import { useQuery as useQuery2, useQueryClient } from "@tanstack/react-query";
|
|
204
|
+
import { getDocumentLayerDescriptors } from "@bubblydoo/uxp-toolkit";
|
|
205
|
+
import { photoshopLayerDescriptorsToUTLayers } from "@bubblydoo/uxp-toolkit";
|
|
206
|
+
import { createQueryKeys as createQueryKeys2 } from "@lukemorales/query-key-factory";
|
|
207
|
+
var documentQueries = createQueryKeys2("document", {
|
|
208
|
+
tree: (documentId) => ({
|
|
209
|
+
queryKey: [documentId, "tree"],
|
|
210
|
+
queryFn: async () => {
|
|
211
|
+
const layerDescriptors = await getDocumentLayerDescriptors(documentId);
|
|
212
|
+
return photoshopLayerDescriptorsToUTLayers(layerDescriptors);
|
|
213
|
+
}
|
|
214
|
+
})
|
|
215
|
+
});
|
|
216
|
+
function useDocumentTreeQuery(document, { skip, invalidateRefetchType, select } = {}) {
|
|
217
|
+
const queryClient = useQueryClient();
|
|
218
|
+
const isPluginVisible = useIsAnyPluginPanelVisible() ?? true;
|
|
219
|
+
const enabled = !skip && isPluginVisible;
|
|
220
|
+
const treeQuery = useQuery2({
|
|
221
|
+
...documentQueries.tree(document.id),
|
|
222
|
+
enabled,
|
|
223
|
+
staleTime: Infinity,
|
|
224
|
+
refetchOnWindowFocus: false,
|
|
225
|
+
select
|
|
226
|
+
});
|
|
227
|
+
useOnDocumentLayersEdited(
|
|
228
|
+
document,
|
|
229
|
+
useCallback(() => {
|
|
230
|
+
queryClient.invalidateQueries({
|
|
231
|
+
queryKey: documentQueries.tree(document.id).queryKey,
|
|
232
|
+
refetchType: invalidateRefetchType
|
|
233
|
+
});
|
|
234
|
+
}, [queryClient, invalidateRefetchType, document.id])
|
|
235
|
+
);
|
|
236
|
+
return treeQuery;
|
|
237
|
+
}
|
|
229
238
|
export {
|
|
230
239
|
useActiveDocument,
|
|
231
240
|
useApplicationInfoQuery,
|
|
241
|
+
useDocumentTreeQuery,
|
|
232
242
|
useEventListenerSkippable,
|
|
233
243
|
useIsPluginPanelVisible,
|
|
234
244
|
useOnDocumentEdited,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bubblydoo/uxp-toolkit-react",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.7",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "Hans Otto Wirtz <hansottowirtz@gmail.com>",
|
|
@@ -22,11 +22,14 @@
|
|
|
22
22
|
"publishConfig": {
|
|
23
23
|
"access": "public"
|
|
24
24
|
},
|
|
25
|
+
"dependencies": {
|
|
26
|
+
"@lukemorales/query-key-factory": "^1.3.4"
|
|
27
|
+
},
|
|
25
28
|
"peerDependencies": {
|
|
26
29
|
"@tanstack/react-query": "^5.0.0",
|
|
27
30
|
"react": "^18.0.0 || ^19.0.0",
|
|
28
31
|
"zod": "^4.0.0",
|
|
29
|
-
"@bubblydoo/uxp-toolkit": "0.0.
|
|
32
|
+
"@bubblydoo/uxp-toolkit": "0.0.7"
|
|
30
33
|
},
|
|
31
34
|
"devDependencies": {
|
|
32
35
|
"@adobe-uxp-types/uxp": "^0.0.9",
|
|
@@ -39,7 +42,7 @@
|
|
|
39
42
|
"tsup": "^8.5.1",
|
|
40
43
|
"zod": "^4.3.6",
|
|
41
44
|
"@bubblydoo/tsconfig": "0.0.3",
|
|
42
|
-
"@bubblydoo/uxp-toolkit": "0.0.
|
|
45
|
+
"@bubblydoo/uxp-toolkit": "0.0.7"
|
|
43
46
|
},
|
|
44
47
|
"scripts": {
|
|
45
48
|
"build": "tsup"
|