@dxtmisha/wiki 0.57.1 → 0.57.4
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/{defineProperty-3CuEayIP.js → defineProperty-Dcl1xgfx.js} +4 -4
- package/dist/library.js +2 -1
- package/dist/storybook.js +1 -1
- package/package.json +1 -1
- package/src/media/functional/figma/classes/FigmaPostAbstract/FigmaPostAbstract.en.mdx +46 -0
- package/src/media/functional/figma/classes/FigmaPostAbstract/FigmaPostAbstract.ru.mdx +46 -0
- package/src/media/functional/figma/classes/FigmaPostAbstract/FigmaPostAbstract.vi.mdx +46 -0
- package/src/media/functional/figma/classes/FigmaPostCode/FigmaPostCode.en.mdx +3 -23
- package/src/media/functional/figma/classes/FigmaPostCode/FigmaPostCode.ru.mdx +3 -23
- package/src/media/functional/figma/classes/FigmaPostCode/FigmaPostCode.vi.mdx +3 -23
- package/src/media/functional/figma/functions/fetchClientStorage/fetchClientStorage.en.mdx +46 -0
- package/src/media/functional/figma/functions/fetchClientStorage/fetchClientStorage.ru.mdx +46 -0
- package/src/media/functional/figma/functions/fetchClientStorage/fetchClientStorage.vi.mdx +46 -0
- package/src/media/functional/figma/functions/fetchFrameSelection/fetchFrameSelection.en.mdx +34 -0
- package/src/media/functional/figma/functions/fetchFrameSelection/fetchFrameSelection.ru.mdx +34 -0
- package/src/media/functional/figma/functions/fetchFrameSelection/fetchFrameSelection.vi.mdx +34 -0
- package/src/media/functional/figma/functions/fetchFrameStyles/fetchFrameStyles.en.mdx +49 -0
- package/src/media/functional/figma/functions/fetchFrameStyles/fetchFrameStyles.ru.mdx +49 -0
- package/src/media/functional/figma/functions/fetchFrameStyles/fetchFrameStyles.vi.mdx +49 -0
- package/src/media/functional/figma/functions/fetchFramesSelected/fetchFramesSelected.en.mdx +19 -8
- package/src/media/functional/figma/functions/fetchFramesSelected/fetchFramesSelected.ru.mdx +18 -7
- package/src/media/functional/figma/functions/fetchFramesSelected/fetchFramesSelected.vi.mdx +19 -8
- package/src/media/functional/figma/functions/fetchStorage/fetchStorage.en.mdx +42 -0
- package/src/media/functional/figma/functions/fetchStorage/fetchStorage.ru.mdx +42 -0
- package/src/media/functional/figma/functions/fetchStorage/fetchStorage.vi.mdx +42 -0
- package/src/media/functional/figma/functions/fetchTopLevelFrames/fetchTopLevelFrames.en.mdx +29 -7
- package/src/media/functional/figma/functions/fetchTopLevelFrames/fetchTopLevelFrames.ru.mdx +28 -6
- package/src/media/functional/figma/functions/fetchTopLevelFrames/fetchTopLevelFrames.vi.mdx +29 -7
- package/src/media/functional/figma/functions/sendClientStorage/sendClientStorage.en.mdx +29 -0
- package/src/media/functional/figma/functions/sendClientStorage/sendClientStorage.ru.mdx +29 -0
- package/src/media/functional/figma/functions/sendClientStorage/sendClientStorage.vi.mdx +29 -0
- package/src/media/functional/figma/functions/sendFrameSelection/sendFrameSelection.en.mdx +28 -0
- package/src/media/functional/figma/functions/sendFrameSelection/sendFrameSelection.ru.mdx +28 -0
- package/src/media/functional/figma/functions/sendFrameSelection/sendFrameSelection.vi.mdx +28 -0
- package/src/media/functional/figma/functions/sendFrameStyles/sendFrameStyles.en.mdx +40 -0
- package/src/media/functional/figma/functions/sendFrameStyles/sendFrameStyles.ru.mdx +40 -0
- package/src/media/functional/figma/functions/sendFrameStyles/sendFrameStyles.vi.mdx +40 -0
- package/src/media/functional/figma/functions/sendFramesSelected/sendFramesSelected.en.mdx +29 -0
- package/src/media/functional/figma/functions/sendFramesSelected/sendFramesSelected.ru.mdx +29 -0
- package/src/media/functional/figma/functions/sendFramesSelected/sendFramesSelected.vi.mdx +29 -0
- package/src/media/functional/figma/functions/sendStorage/sendStorage.en.mdx +30 -0
- package/src/media/functional/figma/functions/sendStorage/sendStorage.ru.mdx +30 -0
- package/src/media/functional/figma/functions/sendStorage/sendStorage.vi.mdx +30 -0
- package/src/media/functional/figma-code/classes/FigmaClientStorage/FigmaClientStorage.en.mdx +64 -0
- package/src/media/functional/figma-code/classes/FigmaClientStorage/FigmaClientStorage.ru.mdx +64 -0
- package/src/media/functional/figma-code/classes/FigmaClientStorage/FigmaClientStorage.vi.mdx +64 -0
- package/src/media/functional/figma-code/classes/FigmaFrame/FigmaFrame.en.mdx +168 -35
- package/src/media/functional/figma-code/classes/FigmaFrame/FigmaFrame.ru.mdx +168 -35
- package/src/media/functional/figma-code/classes/FigmaFrame/FigmaFrame.vi.mdx +168 -35
- package/src/media/functional/figma-code/classes/FigmaFramesSelected/FigmaFramesSelected.en.mdx +23 -69
- package/src/media/functional/figma-code/classes/FigmaFramesSelected/FigmaFramesSelected.ru.mdx +22 -68
- package/src/media/functional/figma-code/classes/FigmaFramesSelected/FigmaFramesSelected.vi.mdx +23 -69
- package/src/media/functional/figma-code/classes/FigmaItem/FigmaItem.en.mdx +79 -56
- package/src/media/functional/figma-code/classes/FigmaItem/FigmaItem.ru.mdx +79 -56
- package/src/media/functional/figma-code/classes/FigmaItem/FigmaItem.vi.mdx +79 -56
- package/src/media/functional/figma-code/classes/FigmaPluginMessenger/FigmaPluginMessenger.en.mdx +18 -48
- package/src/media/functional/figma-code/classes/FigmaPluginMessenger/FigmaPluginMessenger.ru.mdx +18 -48
- package/src/media/functional/figma-code/classes/FigmaPluginMessenger/FigmaPluginMessenger.vi.mdx +18 -48
- package/src/media/functional/figma-code/classes/FigmaStorage/FigmaStorage.en.mdx +22 -67
- package/src/media/functional/figma-code/classes/FigmaStorage/FigmaStorage.ru.mdx +22 -67
- package/src/media/functional/figma-code/classes/FigmaStorage/FigmaStorage.vi.mdx +22 -67
- package/src/media/functional/figma-code/classes/FigmaStorageData/FigmaStorageData.en.mdx +57 -0
- package/src/media/functional/figma-code/classes/FigmaStorageData/FigmaStorageData.ru.mdx +57 -0
- package/src/media/functional/figma-code/classes/FigmaStorageData/FigmaStorageData.vi.mdx +57 -0
- package/src/media/functional/figma-code/classes/FigmaTopLevelFrames/FigmaTopLevelFrames.en.mdx +24 -27
- package/src/media/functional/figma-code/classes/FigmaTopLevelFrames/FigmaTopLevelFrames.ru.mdx +23 -26
- package/src/media/functional/figma-code/classes/FigmaTopLevelFrames/FigmaTopLevelFrames.vi.mdx +24 -27
- package/src/media/functional/figma-code/functions/getFigmaFrameById/getFigmaFrameById.en.mdx +28 -0
- package/src/media/functional/figma-code/functions/getFigmaFrameById/getFigmaFrameById.ru.mdx +28 -0
- package/src/media/functional/figma-code/functions/getFigmaFrameById/getFigmaFrameById.vi.mdx +28 -0
- package/src/media/functional/figma-code/functions/getFigmaItemById/getFigmaItemById.en.mdx +43 -0
- package/src/media/functional/figma-code/functions/getFigmaItemById/getFigmaItemById.ru.mdx +43 -0
- package/src/media/functional/figma-code/functions/getFigmaItemById/getFigmaItemById.vi.mdx +43 -0
- package/src/media/functional/figma-code/functions/getFigmaItemByIdOrRoot/getFigmaItemByIdOrRoot.en.mdx +30 -0
- package/src/media/functional/figma-code/functions/getFigmaItemByIdOrRoot/getFigmaItemByIdOrRoot.ru.mdx +30 -0
- package/src/media/functional/figma-code/functions/getFigmaItemByIdOrRoot/getFigmaItemByIdOrRoot.vi.mdx +30 -0
- package/src/media/functional/figma-code/functions/makeFigmaFrameSelection/makeFigmaFrameSelection.en.mdx +21 -0
- package/src/media/functional/figma-code/functions/makeFigmaFrameSelection/makeFigmaFrameSelection.ru.mdx +21 -0
- package/src/media/functional/figma-code/functions/makeFigmaFrameSelection/makeFigmaFrameSelection.vi.mdx +21 -0
- package/src/media/functional/figma-code/functions/makeFigmaTexts/makeFigmaTexts.en.mdx +28 -0
- package/src/media/functional/figma-code/functions/makeFigmaTexts/makeFigmaTexts.ru.mdx +28 -0
- package/src/media/functional/figma-code/functions/makeFigmaTexts/makeFigmaTexts.vi.mdx +28 -0
- package/src/media/functional/figma-code/functions/setupClientStorage/setupClientStorage.en.mdx +28 -0
- package/src/media/functional/figma-code/functions/setupClientStorage/setupClientStorage.ru.mdx +28 -0
- package/src/media/functional/figma-code/functions/setupClientStorage/setupClientStorage.vi.mdx +28 -0
- package/src/media/functional/figma-code/functions/setupFrameSelection/setupFrameSelection.en.mdx +22 -0
- package/src/media/functional/figma-code/functions/setupFrameSelection/setupFrameSelection.ru.mdx +22 -0
- package/src/media/functional/figma-code/functions/setupFrameSelection/setupFrameSelection.vi.mdx +22 -0
- package/src/media/functional/figma-code/functions/setupFrameStyles/setupFrameStyles.en.mdx +19 -0
- package/src/media/functional/figma-code/functions/setupFrameStyles/setupFrameStyles.ru.mdx +19 -0
- package/src/media/functional/figma-code/functions/setupFrameStyles/setupFrameStyles.vi.mdx +19 -0
- package/src/media/functional/figma-code/functions/setupStorage/setupStorage.en.mdx +28 -0
- package/src/media/functional/figma-code/functions/setupStorage/setupStorage.ru.mdx +28 -0
- package/src/media/functional/figma-code/functions/setupStorage/setupStorage.vi.mdx +28 -0
- package/src/media/functional/figma-code/functions/toFrameSelection/toFrameSelection.en.mdx +27 -0
- package/src/media/functional/figma-code/functions/toFrameSelection/toFrameSelection.ru.mdx +27 -0
- package/src/media/functional/figma-code/functions/toFrameSelection/toFrameSelection.vi.mdx +27 -0
- package/src/media/functional/figma-ref/composables/useFigmaClientStorage/useFigmaClientStorage.en.mdx +26 -0
- package/src/media/functional/figma-ref/composables/useFigmaClientStorage/useFigmaClientStorage.ru.mdx +26 -0
- package/src/media/functional/figma-ref/composables/useFigmaClientStorage/useFigmaClientStorage.vi.mdx +26 -0
- package/src/media/functional/figma-ref/composables/useFigmaFrameSelection/useFigmaFrameSelection.en.mdx +35 -0
- package/src/media/functional/figma-ref/composables/useFigmaFrameSelection/useFigmaFrameSelection.ru.mdx +35 -0
- package/src/media/functional/figma-ref/composables/useFigmaFrameSelection/useFigmaFrameSelection.vi.mdx +35 -0
- package/src/media/functional/figma-ref/composables/useFigmaFrameStyles/useFigmaFrameStyles.en.mdx +33 -0
- package/src/media/functional/figma-ref/composables/useFigmaFrameStyles/useFigmaFrameStyles.ru.mdx +33 -0
- package/src/media/functional/figma-ref/composables/useFigmaFrameStyles/useFigmaFrameStyles.vi.mdx +33 -0
- package/src/media/functional/figma-ref/composables/useFigmaStorage/useFigmaStorage.en.mdx +28 -0
- package/src/media/functional/figma-ref/composables/useFigmaStorage/useFigmaStorage.ru.mdx +28 -0
- package/src/media/functional/figma-ref/composables/useFigmaStorage/useFigmaStorage.vi.mdx +28 -0
- package/src/media/functional/figma-ref/composables/useFigmaUiFrames/useFigmaUiFrames.en.mdx +7 -12
- package/src/media/functional/figma-ref/composables/useFigmaUiFrames/useFigmaUiFrames.ru.mdx +7 -12
- package/src/media/functional/figma-ref/composables/useFigmaUiFrames/useFigmaUiFrames.vi.mdx +8 -13
- package/src/media/functional/figma-ref/composables/useFigmaUiSelected/useFigmaUiSelected.en.mdx +12 -17
- package/src/media/functional/figma-ref/composables/useFigmaUiSelected/useFigmaUiSelected.ru.mdx +13 -18
- package/src/media/functional/figma-ref/composables/useFigmaUiSelected/useFigmaUiSelected.vi.mdx +14 -19
- package/src/media/functional/functional/composables/useApiAsyncRef/useApiAsyncRef.en.mdx +2 -3
- package/src/media/functional/functional/composables/useApiAsyncRef/useApiAsyncRef.ru.mdx +2 -3
- package/src/media/functional/functional/composables/useApiAsyncRef/useApiAsyncRef.vi.mdx +2 -3
- package/src/media/functional/functional/composables/useApiManagementRef/useApiManagementAsyncRef.en.mdx +41 -0
- package/src/media/functional/functional/composables/useApiManagementRef/useApiManagementAsyncRef.ru.mdx +41 -0
- package/src/media/functional/functional/composables/useApiManagementRef/useApiManagementAsyncRef.vi.mdx +41 -0
- package/src/media/functional/functional/composables/useApiManagementRef/useApiManagementRef.en.mdx +12 -0
- package/src/media/functional/functional/composables/useApiManagementRef/useApiManagementRef.ru.mdx +12 -0
- package/src/media/functional/functional/composables/useApiManagementRef/useApiManagementRef.vi.mdx +6 -0
- package/src/media/functional/functional/composables/useApiRef/useApiRef.en.mdx +12 -9
- package/src/media/functional/functional/composables/useApiRef/useApiRef.ru.mdx +12 -9
- package/src/media/functional/functional/composables/useApiRef/useApiRef.vi.mdx +11 -9
- package/src/media/functional/nitro-basic/functions/getInject.en.mdx +27 -0
- package/src/media/functional/nitro-basic/functions/getInject.ru.mdx +27 -0
- package/src/media/functional/nitro-basic/functions/getInject.vi.mdx +20 -0
- package/src/media/functional/ui-figma/about/about.en.mdx +52 -0
- package/src/media/functional/ui-figma/about/about.ru.mdx +52 -0
- package/src/media/functional/ui-figma/about/about.vi.mdx +52 -0
- package/src/media/functional/ui-figma/frames/frames.en.mdx +58 -0
- package/src/media/functional/ui-figma/frames/frames.ru.mdx +58 -0
- package/src/media/functional/ui-figma/frames/frames.vi.mdx +58 -0
- package/src/media/functional/ui-figma/messenger/messenger.en.mdx +67 -0
- package/src/media/functional/ui-figma/messenger/messenger.ru.mdx +67 -0
- package/src/media/functional/ui-figma/messenger/messenger.vi.mdx +67 -0
- package/src/media/functional/ui-figma/selection/selection.en.mdx +65 -0
- package/src/media/functional/ui-figma/selection/selection.ru.mdx +65 -0
- package/src/media/functional/ui-figma/selection/selection.vi.mdx +65 -0
- package/src/media/functional/ui-figma/storage/storage.en.mdx +53 -0
- package/src/media/functional/ui-figma/storage/storage.ru.mdx +53 -0
- package/src/media/functional/ui-figma/storage/storage.vi.mdx +53 -0
- package/src/media/functional/ui-figma/styles/styles.en.mdx +57 -0
- package/src/media/functional/ui-figma/styles/styles.ru.mdx +57 -0
- package/src/media/functional/ui-figma/styles/styles.vi.mdx +57 -0
- /package/src/media/functional/ui/{wiki-data.en.mdx → wiki/wiki-data.en.mdx} +0 -0
- /package/src/media/functional/ui/{wiki-data.ru.mdx → wiki/wiki-data.ru.mdx} +0 -0
- /package/src/media/functional/ui/{wiki-data.vi.mdx → wiki/wiki-data.vi.mdx} +0 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
//#region \0@oxc-project+runtime@0.
|
|
1
|
+
//#region \0@oxc-project+runtime@0.128.0/helpers/typeof.js
|
|
2
2
|
function e(t) {
|
|
3
3
|
"@babel/helpers - typeof";
|
|
4
4
|
return e = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(e) {
|
|
@@ -8,7 +8,7 @@ function e(t) {
|
|
|
8
8
|
}, e(t);
|
|
9
9
|
}
|
|
10
10
|
//#endregion
|
|
11
|
-
//#region \0@oxc-project+runtime@0.
|
|
11
|
+
//#region \0@oxc-project+runtime@0.128.0/helpers/toPrimitive.js
|
|
12
12
|
function t(t, n) {
|
|
13
13
|
if (e(t) != "object" || !t) return t;
|
|
14
14
|
var r = t[Symbol.toPrimitive];
|
|
@@ -20,13 +20,13 @@ function t(t, n) {
|
|
|
20
20
|
return (n === "string" ? String : Number)(t);
|
|
21
21
|
}
|
|
22
22
|
//#endregion
|
|
23
|
-
//#region \0@oxc-project+runtime@0.
|
|
23
|
+
//#region \0@oxc-project+runtime@0.128.0/helpers/toPropertyKey.js
|
|
24
24
|
function n(n) {
|
|
25
25
|
var r = t(n, "string");
|
|
26
26
|
return e(r) == "symbol" ? r : r + "";
|
|
27
27
|
}
|
|
28
28
|
//#endregion
|
|
29
|
-
//#region \0@oxc-project+runtime@0.
|
|
29
|
+
//#region \0@oxc-project+runtime@0.128.0/helpers/defineProperty.js
|
|
30
30
|
function r(e, t, r) {
|
|
31
31
|
return (t = n(t)) in e ? Object.defineProperty(e, t, {
|
|
32
32
|
value: r,
|
package/dist/library.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { n as e, t } from "./storybookTypes-RNr8gPGw.js";
|
|
2
|
-
import { t as n } from "./defineProperty-
|
|
2
|
+
import { t as n } from "./defineProperty-Dcl1xgfx.js";
|
|
3
3
|
import { Geo as r, forEach as i, isArray as a, isObjectNotArray as o, toCamelCase as s } from "@dxtmisha/functional";
|
|
4
4
|
import { isString as c, toKebabCase as l } from "@dxtmisha/functional-basic";
|
|
5
5
|
//#region src/classes/WikiStorybookItem.ts
|
|
@@ -42,6 +42,7 @@ var u = class {
|
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
44
|
to() {
|
|
45
|
+
if (this.item.options.options) return this.toSelect();
|
|
45
46
|
switch (this.item.type) {
|
|
46
47
|
case e.text:
|
|
47
48
|
case e.string: return this.toString();
|
package/dist/storybook.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { t as e } from "./defineProperty-
|
|
1
|
+
import { t as e } from "./defineProperty-Dcl1xgfx.js";
|
|
2
2
|
import { t } from "./wikiDescriptions-7XaHU3Yk.js";
|
|
3
3
|
import { Geo as n, executeFunction as ee, isObjectNotArray as te } from "@dxtmisha/functional";
|
|
4
4
|
import "react";
|
package/package.json
CHANGED
|
@@ -70,3 +70,49 @@ The structure of the data object passed through the messaging pipeline:
|
|
|
70
70
|
- `code: string` — The verification code from `FigmaPostCode`.
|
|
71
71
|
- `type: string` — The identifier of the message.
|
|
72
72
|
- `message: Message` — The actual payload data.
|
|
73
|
+
|
|
74
|
+
## Extending the Class
|
|
75
|
+
|
|
76
|
+
`FigmaPostAbstract` is an abstract class that serves as a foundation for creating custom messengers. To use it, you must create a subclass and implement two required methods:
|
|
77
|
+
|
|
78
|
+
### `post`
|
|
79
|
+
|
|
80
|
+
An abstract method for implementing the logic to send messages to the other side. In a derived class, this method should encapsulate the system-specific send call (e.g., `postMessage`).
|
|
81
|
+
|
|
82
|
+
**Parameters:**
|
|
83
|
+
- `type: string` — The unique identifier for the message type.
|
|
84
|
+
- `message: Message` — The message data to be sent.
|
|
85
|
+
|
|
86
|
+
```typescript
|
|
87
|
+
post<Message>(type: string, message?: Message): void {
|
|
88
|
+
// Implementation of system sending
|
|
89
|
+
}
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
### `prepare`
|
|
93
|
+
|
|
94
|
+
An abstract protected method for setting up the system's incoming event listener. This method is called automatically once when `make()` is executed. Within the implementation, `this.onMessage(data)` must be called whenever data is received.
|
|
95
|
+
|
|
96
|
+
```typescript
|
|
97
|
+
protected prepare(): void {
|
|
98
|
+
// Setup subscription to system events
|
|
99
|
+
}
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
## Usage
|
|
103
|
+
|
|
104
|
+
Once you have implemented your custom class, work with it as follows:
|
|
105
|
+
|
|
106
|
+
1. **Initialization**: Call the `make()` method to start the listener (triggers your `prepare` implementation).
|
|
107
|
+
2. **Subscribing**: Use the `add(type, callback)` method to handle incoming data.
|
|
108
|
+
3. **Sending**: Use the `post(type, data)` method.
|
|
109
|
+
|
|
110
|
+
```typescript
|
|
111
|
+
const messenger = new MyMessenger().make();
|
|
112
|
+
|
|
113
|
+
messenger.add('my-event', (data) => {
|
|
114
|
+
console.log('Message received:', data);
|
|
115
|
+
});
|
|
116
|
+
|
|
117
|
+
messenger.post('my-event', { hello: 'world' });
|
|
118
|
+
```
|
|
@@ -61,6 +61,52 @@ messenger
|
|
|
61
61
|
.remove('update-selection', onUpdate)
|
|
62
62
|
```
|
|
63
63
|
|
|
64
|
+
## Расширение класса
|
|
65
|
+
|
|
66
|
+
`FigmaPostAbstract` является абстрактным классом и служит основой для создания собственных мессенджеров. Для его использования необходимо создать производный класс и реализовать два обязательных метода:
|
|
67
|
+
|
|
68
|
+
### `post`
|
|
69
|
+
|
|
70
|
+
Абстрактный метод для реализации логики отправки сообщений на другую сторону. В производном классе этот метод должен инкапсулировать системный вызов отправки (например, `postMessage`).
|
|
71
|
+
|
|
72
|
+
**Параметры:**
|
|
73
|
+
- `type: string` — Уникальный идентификатор типа сообщения.
|
|
74
|
+
- `message: Message` — Данные сообщения для отправки.
|
|
75
|
+
|
|
76
|
+
```typescript
|
|
77
|
+
post<Message>(type: string, message?: Message): void {
|
|
78
|
+
// Реализация системной отправки
|
|
79
|
+
}
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
### `prepare`
|
|
83
|
+
|
|
84
|
+
Абстрактный защищенный метод для настройки системного слушателя входящих событий. Метод вызывается автоматически один раз при вызове `make()`. Внутри реализации при получении данных необходимо вызвать `this.onMessage(data)`.
|
|
85
|
+
|
|
86
|
+
```typescript
|
|
87
|
+
protected prepare(): void {
|
|
88
|
+
// Настройка подписки на системные события
|
|
89
|
+
}
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
## Использование
|
|
93
|
+
|
|
94
|
+
После реализации собственного класса, работа с ним строится следующим образом:
|
|
95
|
+
|
|
96
|
+
1. **Создание экземпляра и инициализация**: Вызовите метод `make()` для запуска слушателя (вызывает ваш `prepare`).
|
|
97
|
+
2. **Подписка на сообщения**: Используйте метод `add(type, callback)` для обработки входящих данных.
|
|
98
|
+
3. **Отправка сообщений**: Используйте метод `post(type, data)`.
|
|
99
|
+
|
|
100
|
+
```typescript
|
|
101
|
+
const messenger = new MyMessenger().make();
|
|
102
|
+
|
|
103
|
+
messenger.add('my-event', (data) => {
|
|
104
|
+
console.log('Получено сообщение:', data);
|
|
105
|
+
});
|
|
106
|
+
|
|
107
|
+
messenger.post('my-event', { hello: 'world' });
|
|
108
|
+
```
|
|
109
|
+
|
|
64
110
|
## Структуры данных
|
|
65
111
|
|
|
66
112
|
### `UiFigmaMessengerData`
|
|
@@ -70,3 +70,49 @@ Cấu trúc của đối tượng dữ liệu được truyền qua đường tr
|
|
|
70
70
|
- `code: string` — Mã xác minh từ `FigmaPostCode`.
|
|
71
71
|
- `type: string` — Mã định danh của tin nhắn.
|
|
72
72
|
- `message: Message` — Dữ liệu payload thực tế.
|
|
73
|
+
|
|
74
|
+
## Mở rộng lớp
|
|
75
|
+
|
|
76
|
+
`FigmaPostAbstract` là một lớp trừu tượng và đóng vai trò là nền tảng để tạo các messenger tùy chỉnh. Để sử dụng nó, bạn phải tạo một lớp con và thực hiện hai phương thức bắt buộc:
|
|
77
|
+
|
|
78
|
+
### `post`
|
|
79
|
+
|
|
80
|
+
Một phương thức trừu tượng để thực hiện logic gửi tin nhắn đến phía bên kia. Trong lớp dẫn xuất, phương thức này sẽ đóng gói lệnh gọi gửi theo hệ thống cụ thể (ví dụ: `postMessage`).
|
|
81
|
+
|
|
82
|
+
**Tham số:**
|
|
83
|
+
- `type: string` — Mã định danh duy nhất cho loại tin nhắn.
|
|
84
|
+
- `message: Message` — Dữ liệu tin nhắn sẽ được gửi.
|
|
85
|
+
|
|
86
|
+
```typescript
|
|
87
|
+
post<Message>(type: string, message?: Message): void {
|
|
88
|
+
// Thực hiện gửi theo hệ thống
|
|
89
|
+
}
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
### `prepare`
|
|
93
|
+
|
|
94
|
+
Một phương thức được bảo vệ trừu tượng để thiết lập trình lắng nghe sự kiện đến của hệ thống. Phương thức này được gọi tự động một lần khi `make()` được thực thi. Trong quá trình thực hiện, `this.onMessage(data)` phải được gọi bất cứ khi nào nhận được dữ liệu.
|
|
95
|
+
|
|
96
|
+
```typescript
|
|
97
|
+
protected prepare(): void {
|
|
98
|
+
// Thiết lập đăng ký các sự kiện hệ thống
|
|
99
|
+
}
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
## Cách sử dụng
|
|
103
|
+
|
|
104
|
+
Sau khi đã triển khai lớp tùy chỉnh của mình, hãy làm việc với nó như sau:
|
|
105
|
+
|
|
106
|
+
1. **Khởi tạo**: Gọi phương thức `make()` để bắt đầu trình lắng nghe (kích hoạt triển khai `prepare` của bạn).
|
|
107
|
+
2. **Đăng ký**: Sử dụng phương thức `add(type, callback)` để xử lý dữ liệu đến.
|
|
108
|
+
3. **Gửi**: Sử dụng phương thức `post(type, data)`.
|
|
109
|
+
|
|
110
|
+
```typescript
|
|
111
|
+
const messenger = new MyMessenger().make();
|
|
112
|
+
|
|
113
|
+
messenger.add('my-event', (data) => {
|
|
114
|
+
console.log('Nhận được tin nhắn:', data);
|
|
115
|
+
});
|
|
116
|
+
|
|
117
|
+
messenger.post('my-event', { hello: 'world' });
|
|
118
|
+
```
|
|
@@ -14,29 +14,9 @@ A utility class for managing a unique verification code used for message integri
|
|
|
14
14
|
|
|
15
15
|
## Static Methods
|
|
16
16
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
**Parameters:**
|
|
22
|
-
- `code: string` — The verification code string to check.
|
|
23
|
-
|
|
24
|
-
**Returns:** `boolean` — `true` if the code matches the internal session code.
|
|
25
|
-
|
|
26
|
-
### `get`
|
|
27
|
-
|
|
28
|
-
Returns the current post code used for message verification in the current session.
|
|
29
|
-
|
|
30
|
-
**Returns:** `string`
|
|
31
|
-
|
|
32
|
-
### `set`
|
|
33
|
-
|
|
34
|
-
Sets a new post code. This method can only be successful once; once a code is set (or after the first access to `get`), the session is locked and the code can no longer be changed.
|
|
35
|
-
|
|
36
|
-
**Parameters:**
|
|
37
|
-
- `code: string` — The new code to be used for the remainder of the session.
|
|
38
|
-
|
|
39
|
-
**Returns:** `void`
|
|
17
|
+
- `is(code: string): boolean` — Checks if the provided code matches the current post code.
|
|
18
|
+
- `get(): string` — Returns the current post code.
|
|
19
|
+
- `set(code: string): void` — Sets a new post code. Can only be successfully called once.
|
|
40
20
|
|
|
41
21
|
## Recommendation
|
|
42
22
|
|
|
@@ -14,29 +14,9 @@ import {Meta} from '@storybook/addon-docs/blocks'
|
|
|
14
14
|
|
|
15
15
|
## Статические методы
|
|
16
16
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
**Параметры:**
|
|
22
|
-
- `code: string` — Строка проверочного кода для сверки с внутренним кодом сессии.
|
|
23
|
-
|
|
24
|
-
**Возвращает:** `boolean` — `true`, если код совпадает.
|
|
25
|
-
|
|
26
|
-
### `get`
|
|
27
|
-
|
|
28
|
-
Возвращает текущий код сообщения, используемый для верификации в текущей сессии.
|
|
29
|
-
|
|
30
|
-
**Возвращает:** `string`
|
|
31
|
-
|
|
32
|
-
### `set`
|
|
33
|
-
|
|
34
|
-
Устанавливает новый код сообщения. Этот метод может быть успешно выполнен только один раз; как только код установлен (или после первого обращения к `get`), сессия блокируется, и код больше не может быть изменен.
|
|
35
|
-
|
|
36
|
-
**Параметры:**
|
|
37
|
-
- `code: string` — Новое значение кода для использования в текущей сессии.
|
|
38
|
-
|
|
39
|
-
**Возвращает:** `void`
|
|
17
|
+
- `is(code: string): boolean` — Проверяет, совпадает ли предоставленный код с текущим кодом сообщения.
|
|
18
|
+
- `get(): string` — Возвращает текущий код сообщения.
|
|
19
|
+
- `set(code: string): void` — Устанавливает новый код сообщения. Можно вызвать только один раз.
|
|
40
20
|
|
|
41
21
|
## Рекомендации
|
|
42
22
|
|
|
@@ -14,29 +14,9 @@ Lớp tiện ích để quản lý mã xác minh duy nhất được sử dụng
|
|
|
14
14
|
|
|
15
15
|
## Các phương thức tĩnh
|
|
16
16
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
**Tham số:**
|
|
22
|
-
- `code: string` — Chuỗi mã xác minh để kiểm tra với mã phiên nội bộ.
|
|
23
|
-
|
|
24
|
-
**Trả về:** `boolean` — `true` nếu mã khớp.
|
|
25
|
-
|
|
26
|
-
### `get`
|
|
27
|
-
|
|
28
|
-
Trả về mã tin nhắn hiện tại được sử dụng để xác minh trong phiên hiện tại.
|
|
29
|
-
|
|
30
|
-
**Trả về:** `string`
|
|
31
|
-
|
|
32
|
-
### `set`
|
|
33
|
-
|
|
34
|
-
Đặt một mã tin nhắn mới. Phương thức này chỉ có thể thành công một lần; sau khi mã đã được đặt (hoặc sau lần truy cập đầu tiên vào `get`), phiên sẽ được khóa và mã không còn có thể thay đổi.
|
|
35
|
-
|
|
36
|
-
**Tham số:**
|
|
37
|
-
- `code: string` — Mã mới sẽ được sử dụng cho phần còn lại của phiên.
|
|
38
|
-
|
|
39
|
-
**Trả về:** `void`
|
|
17
|
+
- `is(code: string): boolean` — Kiểm tra xem mã được cung cấp có khớp với mã tin nhắn hiện tại hay không.
|
|
18
|
+
- `get(): string` — Trả về mã tin nhắn hiện tại.
|
|
19
|
+
- `set(code: string): void` — Đặt một mã tin nhắn mới. Chỉ có thể thành công một lần.
|
|
40
20
|
|
|
41
21
|
## Khuyến nghị
|
|
42
22
|
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { Meta, Source } from '@storybook/addon-docs/blocks'
|
|
2
|
+
|
|
3
|
+
<Meta title='@dxtmisha/en/figma/Functions/fetchClientStorage - Fetch client storage data'/>
|
|
4
|
+
|
|
5
|
+
# `fetchClientStorage`
|
|
6
|
+
|
|
7
|
+
A utility for fetching data from Figma's client storage. It facilitates communication between the Figma UI and the plugin side to retrieve stored values.
|
|
8
|
+
|
|
9
|
+
**Parameters:**
|
|
10
|
+
- `name: string` — The key name in the client storage.
|
|
11
|
+
- `callback: (value: T) => void` — The function executed once the data is retrieved.
|
|
12
|
+
- `defaultValue?: T` — (Optional) A default value returned if the storage key does not exist.
|
|
13
|
+
- `isOnce: boolean = true` — If `true`, the callback will be executed only once.
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
**Returns:**
|
|
17
|
+
`void`
|
|
18
|
+
|
|
19
|
+
## Examples
|
|
20
|
+
|
|
21
|
+
<Source
|
|
22
|
+
language='typescript'
|
|
23
|
+
code={`
|
|
24
|
+
import { fetchClientStorage } from '@dxtmisha/figma'
|
|
25
|
+
|
|
26
|
+
// 1. Basic usage with a string value
|
|
27
|
+
fetchClientStorage<string>('user-theme', (theme) => {
|
|
28
|
+
console.log('Current theme:', theme)
|
|
29
|
+
}, 'light')
|
|
30
|
+
|
|
31
|
+
// 2. Fetching an object
|
|
32
|
+
interface UserSettings {
|
|
33
|
+
notifications: boolean
|
|
34
|
+
zoom: number
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
fetchClientStorage<UserSettings>('settings', (settings) => {
|
|
38
|
+
console.log('User settings:', settings)
|
|
39
|
+
}, { notifications: true, zoom: 100 })
|
|
40
|
+
|
|
41
|
+
// 3. Persistent subscription (isOnce = false)
|
|
42
|
+
fetchClientStorage<number>('counter', (count) => {
|
|
43
|
+
console.log('Counter updated:', count)
|
|
44
|
+
}, 0, false)
|
|
45
|
+
`}
|
|
46
|
+
/>
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { Meta, Source } from '@storybook/addon-docs/blocks'
|
|
2
|
+
|
|
3
|
+
<Meta title='@dxtmisha/ru/figma/Functions/fetchClientStorage - Получение данных из клиентского хранилища'/>
|
|
4
|
+
|
|
5
|
+
# `fetchClientStorage`
|
|
6
|
+
|
|
7
|
+
Утилита для получения данных из клиентского хранилища Figma (`clientStorage`). Обеспечивает связь между интерфейсом (UI) и основной частью плагина для извлечения сохраненных значений.
|
|
8
|
+
|
|
9
|
+
**Параметры:**
|
|
10
|
+
- `name: string` — Ключ (имя) в хранилище.
|
|
11
|
+
- `callback: (value: T) => void` — Функция, которая будет вызвана после получения данных.
|
|
12
|
+
- `defaultValue?: T` — (Опционально) Значение по умолчанию, если ключ в хранилище отсутствует.
|
|
13
|
+
- `isOnce: boolean = true` — Если `true`, колбэк будет вызван только один раз.
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
**Возвращает:**
|
|
17
|
+
`void`
|
|
18
|
+
|
|
19
|
+
## Примеры
|
|
20
|
+
|
|
21
|
+
<Source
|
|
22
|
+
language='typescript'
|
|
23
|
+
code={`
|
|
24
|
+
import { fetchClientStorage } from '@dxtmisha/figma'
|
|
25
|
+
|
|
26
|
+
// 1. Базовое использование со строковым значением
|
|
27
|
+
fetchClientStorage<string>('user-theme', (theme) => {
|
|
28
|
+
console.log('Текущая тема:', theme)
|
|
29
|
+
}, 'light')
|
|
30
|
+
|
|
31
|
+
// 2. Получение объекта
|
|
32
|
+
interface UserSettings {
|
|
33
|
+
notifications: boolean
|
|
34
|
+
zoom: number
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
fetchClientStorage<UserSettings>('settings', (settings) => {
|
|
38
|
+
console.log('Настройки пользователя:', settings)
|
|
39
|
+
}, { notifications: true, zoom: 100 })
|
|
40
|
+
|
|
41
|
+
// 3. Постоянная подписка (isOnce = false)
|
|
42
|
+
fetchClientStorage<number>('counter', (count) => {
|
|
43
|
+
console.log('Счетчик обновлен:', count)
|
|
44
|
+
}, 0, false)
|
|
45
|
+
`}
|
|
46
|
+
/>
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { Meta, Source } from '@storybook/addon-docs/blocks'
|
|
2
|
+
|
|
3
|
+
<Meta title='@dxtmisha/vi/figma/Functions/fetchClientStorage - Lấy dữ liệu từ bộ nhớ client'/>
|
|
4
|
+
|
|
5
|
+
# `fetchClientStorage`
|
|
6
|
+
|
|
7
|
+
Một tiện ích để lấy dữ liệu từ bộ nhớ client (`clientStorage`) của Figma. Nó tạo điều kiện giao tiếp giữa giao diện người dùng (UI) và phần plugin để truy xuất các giá trị đã lưu trữ.
|
|
8
|
+
|
|
9
|
+
**Tham số:**
|
|
10
|
+
- `name: string` — Tên khóa trong bộ nhớ client.
|
|
11
|
+
- `callback: (value: T) => void` — Hàm được thực thi sau khi dữ liệu được truy xuất.
|
|
12
|
+
- `defaultValue?: T` — (Tùy chọn) Giá trị mặc định được trả về nếu khóa bộ nhớ không tồn tại.
|
|
13
|
+
- `isOnce: boolean = true` — Nếu `true`, hàm callback sẽ chỉ được thực thi một lần.
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
**Trả về:**
|
|
17
|
+
`void`
|
|
18
|
+
|
|
19
|
+
## Ví dụ
|
|
20
|
+
|
|
21
|
+
<Source
|
|
22
|
+
language='typescript'
|
|
23
|
+
code={`
|
|
24
|
+
import { fetchClientStorage } from '@dxtmisha/figma'
|
|
25
|
+
|
|
26
|
+
// 1. Cách sử dụng cơ bản với giá trị chuỗi
|
|
27
|
+
fetchClientStorage<string>('user-theme', (theme) => {
|
|
28
|
+
console.log('Giao diện hiện tại:', theme)
|
|
29
|
+
}, 'light')
|
|
30
|
+
|
|
31
|
+
// 2. Lấy một đối tượng (object)
|
|
32
|
+
interface UserSettings {
|
|
33
|
+
notifications: boolean
|
|
34
|
+
zoom: number
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
fetchClientStorage<UserSettings>('settings', (settings) => {
|
|
38
|
+
console.log('Cài đặt người dùng:', settings)
|
|
39
|
+
}, { notifications: true, zoom: 100 })
|
|
40
|
+
|
|
41
|
+
// 3. Đăng ký nhận cập nhật liên tục (isOnce = false)
|
|
42
|
+
fetchClientStorage<number>('counter', (count) => {
|
|
43
|
+
console.log('Bộ đếm đã cập nhật:', count)
|
|
44
|
+
}, 0, false)
|
|
45
|
+
`}
|
|
46
|
+
/>
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { Meta, Source } from '@storybook/addon-docs/blocks'
|
|
2
|
+
|
|
3
|
+
<Meta title='@dxtmisha/en/figma/Functions/fetchFrameSelection - Fetching current selection'/>
|
|
4
|
+
|
|
5
|
+
# `fetchFrameSelection`
|
|
6
|
+
|
|
7
|
+
A utility for retrieving and observing the list of elements currently selected by the user in Figma. It provides detailed information about the current selection, including names, IDs, and screenshots.
|
|
8
|
+
|
|
9
|
+
**Parameters:**
|
|
10
|
+
- `callback: (value: UiFigmaFramesList) => void` — A function called whenever the selection is updated.
|
|
11
|
+
|
|
12
|
+
**Returns:**
|
|
13
|
+
`void`
|
|
14
|
+
|
|
15
|
+
## Usage Example
|
|
16
|
+
|
|
17
|
+
```typescript
|
|
18
|
+
import { fetchFrameSelection } from '@dxtmisha/figma'
|
|
19
|
+
|
|
20
|
+
fetchFrameSelection((frames) => {
|
|
21
|
+
console.log('Current selection updated:', frames)
|
|
22
|
+
})
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Data Types
|
|
26
|
+
|
|
27
|
+
#### `UiFigmaFramesItem`
|
|
28
|
+
Represents a simplified frame element for the UI.
|
|
29
|
+
- `name: string` — The name of the frame.
|
|
30
|
+
- `id: string` — The unique identifier of the element.
|
|
31
|
+
- `image: Uint8Array | string` — The image of the frame (optional).
|
|
32
|
+
|
|
33
|
+
#### `UiFigmaFramesList`
|
|
34
|
+
A list of `UiFigmaFramesItem` objects.
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { Meta, Source } from '@storybook/addon-docs/blocks'
|
|
2
|
+
|
|
3
|
+
<Meta title='@dxtmisha/ru/figma/Functions/fetchFrameSelection - Получение текущего выделения'/>
|
|
4
|
+
|
|
5
|
+
# `fetchFrameSelection`
|
|
6
|
+
|
|
7
|
+
Утилита для получения и отслеживания списка элементов, выделенных пользователем в Figma. Обеспечивает получение детальной информации о текущем выделении (имена, ID и скриншоты).
|
|
8
|
+
|
|
9
|
+
**Параметры:**
|
|
10
|
+
- `callback: (value: UiFigmaFramesList) => void` — функция, которая будет вызываться при каждом обновлении выделения.
|
|
11
|
+
|
|
12
|
+
**Возвращает:**
|
|
13
|
+
`void`
|
|
14
|
+
|
|
15
|
+
## Пример использования
|
|
16
|
+
|
|
17
|
+
```typescript
|
|
18
|
+
import { fetchFrameSelection } from '@dxtmisha/figma'
|
|
19
|
+
|
|
20
|
+
fetchFrameSelection((frames) => {
|
|
21
|
+
console.log('Текущее выделение обновлено:', frames)
|
|
22
|
+
})
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Типы данных
|
|
26
|
+
|
|
27
|
+
#### `UiFigmaFramesItem`
|
|
28
|
+
Представляет упрощенный элемент фрейма для пользовательского интерфейса.
|
|
29
|
+
- `name: string` — Название фрейма.
|
|
30
|
+
- `id: string` — Уникальный идентификатор элемента.
|
|
31
|
+
- `image: Uint8Array | string` — Изображение фрейма (опционально).
|
|
32
|
+
|
|
33
|
+
#### `UiFigmaFramesList`
|
|
34
|
+
Список объектов типа `UiFigmaFramesItem`.
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { Meta, Source } from '@storybook/addon-docs/blocks'
|
|
2
|
+
|
|
3
|
+
<Meta title='@dxtmisha/vi/figma/Functions/fetchFrameSelection - Lấy vùng chọn hiện tại'/>
|
|
4
|
+
|
|
5
|
+
# `fetchFrameSelection`
|
|
6
|
+
|
|
7
|
+
Một tiện ích để truy xuất và quan sát danh sách các phần tử hiện đang được người dùng chọn trong Figma. Nó cung cấp thông tin chi tiết về vùng chọn hiện tại, bao gồm tên, ID và ảnh chụp màn hình.
|
|
8
|
+
|
|
9
|
+
**Tham số:**
|
|
10
|
+
- `callback: (value: UiFigmaFramesList) => void` — Một hàm được gọi bất cứ khi nào vùng chọn được cập nhật.
|
|
11
|
+
|
|
12
|
+
**Trả về:**
|
|
13
|
+
`void`
|
|
14
|
+
|
|
15
|
+
## Ví dụ sử dụng
|
|
16
|
+
|
|
17
|
+
```typescript
|
|
18
|
+
import { fetchFrameSelection } from '@dxtmisha/figma'
|
|
19
|
+
|
|
20
|
+
fetchFrameSelection((frames) => {
|
|
21
|
+
console.log('Vùng chọn hiện tại đã được cập nhật:', frames)
|
|
22
|
+
})
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Các kiểu dữ liệu
|
|
26
|
+
|
|
27
|
+
#### `UiFigmaFramesItem`
|
|
28
|
+
Đại diện cho một phần tử frame được đơn giản hóa cho UI.
|
|
29
|
+
- `name: string` — Tên của frame.
|
|
30
|
+
- `id: string` — Định danh duy nhất của phần tử.
|
|
31
|
+
- `image: Uint8Array | string` — Hình ảnh của frame (tùy chọn).
|
|
32
|
+
|
|
33
|
+
#### `UiFigmaFramesList`
|
|
34
|
+
Một danh sách các đối tượng `UiFigmaFramesItem`.
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { Meta, Source } from '@storybook/addon-docs/blocks'
|
|
2
|
+
|
|
3
|
+
<Meta title='@dxtmisha/en/figma/Functions/fetchFrameStyles - Fetch frame styles'/>
|
|
4
|
+
|
|
5
|
+
# `fetchFrameStyles`
|
|
6
|
+
|
|
7
|
+
A utility for retrieving style information for specified frames from the Figma plugin. It allows access to CSS styles, JSON data, and text content for nodes and their children.
|
|
8
|
+
|
|
9
|
+
**Parameters:**
|
|
10
|
+
- `callback: (value: UiFigmaFrameStylesMessengerResponse) => void` — The function executed once the style data for the requested frames is received.
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
**Returns:**
|
|
14
|
+
`void`
|
|
15
|
+
|
|
16
|
+
## Examples
|
|
17
|
+
|
|
18
|
+
<Source
|
|
19
|
+
language='typescript'
|
|
20
|
+
code={`
|
|
21
|
+
import { fetchFrameStyles } from '@dxtmisha/figma'
|
|
22
|
+
|
|
23
|
+
// Fetch styles for frames and log the result
|
|
24
|
+
fetchFrameStyles((response) => {
|
|
25
|
+
response.forEach(item => {
|
|
26
|
+
console.log('Frame ID:', item.id)
|
|
27
|
+
console.log('Style data:', item.data)
|
|
28
|
+
})
|
|
29
|
+
})
|
|
30
|
+
`}
|
|
31
|
+
/>
|
|
32
|
+
|
|
33
|
+
## Types
|
|
34
|
+
|
|
35
|
+
### UiFigmaFrameStylesMessengerResponse
|
|
36
|
+
An array of `UiFigmaFrameStylesMessengerResponseItem` objects.
|
|
37
|
+
|
|
38
|
+
### UiFigmaFrameStylesMessengerResponseItem
|
|
39
|
+
- `id: string` — Unique frame identifier.
|
|
40
|
+
- `data: UiFigmaFrameStylesList` — List of style data for the frame.
|
|
41
|
+
|
|
42
|
+
### UiFigmaFrameStylesItem
|
|
43
|
+
Extends `UiFigmaFramesItem`.
|
|
44
|
+
- `name: string` — Frame name.
|
|
45
|
+
- `id: string` — Unique element identifier.
|
|
46
|
+
- `json?: UiFigmaFrameStylesData` — (Optional) Compact node data in JSON format.
|
|
47
|
+
- `text?: string` — (Optional) Text content (for text nodes).
|
|
48
|
+
- `styles?: UiFigmaFrameStylesCssItem` — (Optional) Map of CSS styles for the element.
|
|
49
|
+
- `childrenStyles?: UiFigmaFrameStylesCssList` — (Optional) Map of CSS styles for children elements.
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { Meta, Source } from '@storybook/addon-docs/blocks'
|
|
2
|
+
|
|
3
|
+
<Meta title='@dxtmisha/ru/figma/Functions/fetchFrameStyles - Получение стилей фреймов'/>
|
|
4
|
+
|
|
5
|
+
# `fetchFrameStyles`
|
|
6
|
+
|
|
7
|
+
Утилита для получения информации о стилях указанных фреймов из плагина Figma. Позволяет получить доступ к CSS-стилям, JSON-данным и текстовому содержимому для узлов и их дочерних элементов.
|
|
8
|
+
|
|
9
|
+
**Параметры:**
|
|
10
|
+
- `callback: (value: UiFigmaFrameStylesMessengerResponse) => void` — Функция, которая будет вызвана после получения данных о стилях для запрошенных фреймов.
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
**Возвращает:**
|
|
14
|
+
`void`
|
|
15
|
+
|
|
16
|
+
## Примеры
|
|
17
|
+
|
|
18
|
+
<Source
|
|
19
|
+
language='typescript'
|
|
20
|
+
code={`
|
|
21
|
+
import { fetchFrameStyles } from '@dxtmisha/figma'
|
|
22
|
+
|
|
23
|
+
// Получить стили для фреймов и вывести результат в консоль
|
|
24
|
+
fetchFrameStyles((response) => {
|
|
25
|
+
response.forEach(item => {
|
|
26
|
+
console.log('ID фрейма:', item.id)
|
|
27
|
+
console.log('Данные стилей:', item.data)
|
|
28
|
+
})
|
|
29
|
+
})
|
|
30
|
+
`}
|
|
31
|
+
/>
|
|
32
|
+
|
|
33
|
+
## Типы
|
|
34
|
+
|
|
35
|
+
### UiFigmaFrameStylesMessengerResponse
|
|
36
|
+
Массив элементов `UiFigmaFrameStylesMessengerResponseItem`.
|
|
37
|
+
|
|
38
|
+
### UiFigmaFrameStylesMessengerResponseItem
|
|
39
|
+
- `id: string` — Уникальный идентификатор фрейма.
|
|
40
|
+
- `data: UiFigmaFrameStylesList` — Список данных стилей для фрейма.
|
|
41
|
+
|
|
42
|
+
### UiFigmaFrameStylesItem
|
|
43
|
+
Расширяет `UiFigmaFramesItem`.
|
|
44
|
+
- `name: string` — Название фрейма.
|
|
45
|
+
- `id: string` — Уникальный идентификатор элемента.
|
|
46
|
+
- `json?: UiFigmaFrameStylesData` — (Опционально) Компактные данные узла в формате JSON.
|
|
47
|
+
- `text?: string` — (Опционально) Текстовое содержимое (для текстовых узлов).
|
|
48
|
+
- `styles?: UiFigmaFrameStylesCssItem` — (Опционально) Карта CSS-стилей элемента.
|
|
49
|
+
- `childrenStyles?: UiFigmaFrameStylesCssList` — (Опционально) Карта CSS-стилей дочерних элементов.
|