@knotx/plugins-canvas 0.2.12 → 0.2.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +16 -3
- package/dist/index.d.cts +23 -0
- package/dist/index.d.mts +23 -0
- package/dist/index.d.ts +23 -0
- package/dist/index.js +16 -3
- package/package.json +3 -3
package/dist/index.cjs
CHANGED
|
@@ -75,7 +75,7 @@ var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use
|
|
|
75
75
|
var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
|
|
76
76
|
var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
|
|
77
77
|
var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
|
|
78
|
-
var _init_dec, _render_dec, _zoomOut_dec, _zoomIn_dec, _scrollNodeIntoView_dec, _removeListener_dec, _addListener_dec, _container_dec, _getNode_dec, _transform_dec, _ref_dec, _a, _init;
|
|
78
|
+
var _init_dec, _render_dec, _setTransform_dec, _zoomOut_dec, _zoomIn_dec, _scrollNodeIntoView_dec, _removeListener_dec, _addListener_dec, _container_dec, _getNode_dec, _transform_dec, _ref_dec, _a, _init;
|
|
79
79
|
class Canvas extends (_a = core.BasePlugin, _ref_dec = [decorators.register("ref")], _transform_dec = [decorators.register("transform")], _getNode_dec = [decorators.inject.getNode()], _container_dec = [decorators.inject.container()], _addListener_dec = [decorators.register("addListener")], _removeListener_dec = [decorators.register("removeListener")], _scrollNodeIntoView_dec = [decorators.tool("Scroll node into viewport center", {
|
|
80
80
|
type: "object",
|
|
81
81
|
properties: {
|
|
@@ -106,6 +106,14 @@ class Canvas extends (_a = core.BasePlugin, _ref_dec = [decorators.register("ref
|
|
|
106
106
|
step: { type: "number" },
|
|
107
107
|
animationTime: { type: "number" }
|
|
108
108
|
}
|
|
109
|
+
})], _setTransform_dec = [decorators.tool("Set transform", {
|
|
110
|
+
type: "object",
|
|
111
|
+
properties: {
|
|
112
|
+
positionX: { type: "number" },
|
|
113
|
+
positionY: { type: "number" },
|
|
114
|
+
scale: { type: "number" },
|
|
115
|
+
animationTime: { type: "number" }
|
|
116
|
+
}
|
|
109
117
|
})], _render_dec = [decorators.layer(core.Layer.Canvas)], _init_dec = [decorators.OnInit], _a) {
|
|
110
118
|
constructor() {
|
|
111
119
|
super(...arguments);
|
|
@@ -199,6 +207,10 @@ class Canvas extends (_a = core.BasePlugin, _ref_dec = [decorators.register("ref
|
|
|
199
207
|
var _a2;
|
|
200
208
|
(_a2 = this.ref) == null ? void 0 : _a2.zoomOut(step, animationTime);
|
|
201
209
|
}
|
|
210
|
+
setTransform({ positionX, positionY, scale, animationTime }) {
|
|
211
|
+
var _a2;
|
|
212
|
+
(_a2 = this.ref) == null ? void 0 : _a2.setTransform(positionX != null ? positionX : this.transform.positionX, positionY != null ? positionY : this.transform.positionY, scale != null ? scale : this.transform.scale, animationTime);
|
|
213
|
+
}
|
|
202
214
|
render({ children } = { children: null }) {
|
|
203
215
|
const [transform, setTransform] = react.useState(null);
|
|
204
216
|
const [fixedLayers, childrenLayers] = react.useMemo(() => {
|
|
@@ -240,8 +252,8 @@ class Canvas extends (_a = core.BasePlugin, _ref_dec = [decorators.register("ref
|
|
|
240
252
|
});
|
|
241
253
|
let frame;
|
|
242
254
|
return transform == null ? void 0 : transform.instance.onChange((ref) => {
|
|
243
|
-
|
|
244
|
-
frame =
|
|
255
|
+
cancelAnimationFrame(frame);
|
|
256
|
+
frame = requestAnimationFrame(() => {
|
|
245
257
|
this.transform = __spreadValues({}, ref.state);
|
|
246
258
|
});
|
|
247
259
|
});
|
|
@@ -320,6 +332,7 @@ _init = __decoratorStart(_a);
|
|
|
320
332
|
__decorateElement(_init, 1, "scrollNodeIntoView", _scrollNodeIntoView_dec, Canvas);
|
|
321
333
|
__decorateElement(_init, 1, "zoomIn", _zoomIn_dec, Canvas);
|
|
322
334
|
__decorateElement(_init, 1, "zoomOut", _zoomOut_dec, Canvas);
|
|
335
|
+
__decorateElement(_init, 1, "setTransform", _setTransform_dec, Canvas);
|
|
323
336
|
__decorateElement(_init, 1, "render", _render_dec, Canvas);
|
|
324
337
|
__decorateElement(_init, 1, "init", _init_dec, Canvas);
|
|
325
338
|
__decorateElement(_init, 5, "ref", _ref_dec, Canvas);
|
package/dist/index.d.cts
CHANGED
|
@@ -36,6 +36,12 @@ declare module '@knotx/core' {
|
|
|
36
36
|
step?: number;
|
|
37
37
|
animationTime?: number;
|
|
38
38
|
}) => void;
|
|
39
|
+
setTransform: (params: {
|
|
40
|
+
positionX: number;
|
|
41
|
+
positionY: number;
|
|
42
|
+
scale: number;
|
|
43
|
+
animationTime?: number;
|
|
44
|
+
}) => void;
|
|
39
45
|
};
|
|
40
46
|
}
|
|
41
47
|
}
|
|
@@ -107,6 +113,23 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
|
|
|
107
113
|
};
|
|
108
114
|
};
|
|
109
115
|
}>): void;
|
|
116
|
+
setTransform({ positionX, positionY, scale, animationTime }: InferParamsFromSchema<{
|
|
117
|
+
type: 'object';
|
|
118
|
+
properties: {
|
|
119
|
+
positionX: {
|
|
120
|
+
type: 'number';
|
|
121
|
+
};
|
|
122
|
+
positionY: {
|
|
123
|
+
type: 'number';
|
|
124
|
+
};
|
|
125
|
+
scale: {
|
|
126
|
+
type: 'number';
|
|
127
|
+
};
|
|
128
|
+
animationTime: {
|
|
129
|
+
type: 'number';
|
|
130
|
+
};
|
|
131
|
+
};
|
|
132
|
+
}>): void;
|
|
110
133
|
render({ children }?: {
|
|
111
134
|
children: ReactNode;
|
|
112
135
|
}): JSX.Element;
|
package/dist/index.d.mts
CHANGED
|
@@ -36,6 +36,12 @@ declare module '@knotx/core' {
|
|
|
36
36
|
step?: number;
|
|
37
37
|
animationTime?: number;
|
|
38
38
|
}) => void;
|
|
39
|
+
setTransform: (params: {
|
|
40
|
+
positionX: number;
|
|
41
|
+
positionY: number;
|
|
42
|
+
scale: number;
|
|
43
|
+
animationTime?: number;
|
|
44
|
+
}) => void;
|
|
39
45
|
};
|
|
40
46
|
}
|
|
41
47
|
}
|
|
@@ -107,6 +113,23 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
|
|
|
107
113
|
};
|
|
108
114
|
};
|
|
109
115
|
}>): void;
|
|
116
|
+
setTransform({ positionX, positionY, scale, animationTime }: InferParamsFromSchema<{
|
|
117
|
+
type: 'object';
|
|
118
|
+
properties: {
|
|
119
|
+
positionX: {
|
|
120
|
+
type: 'number';
|
|
121
|
+
};
|
|
122
|
+
positionY: {
|
|
123
|
+
type: 'number';
|
|
124
|
+
};
|
|
125
|
+
scale: {
|
|
126
|
+
type: 'number';
|
|
127
|
+
};
|
|
128
|
+
animationTime: {
|
|
129
|
+
type: 'number';
|
|
130
|
+
};
|
|
131
|
+
};
|
|
132
|
+
}>): void;
|
|
110
133
|
render({ children }?: {
|
|
111
134
|
children: ReactNode;
|
|
112
135
|
}): JSX.Element;
|
package/dist/index.d.ts
CHANGED
|
@@ -36,6 +36,12 @@ declare module '@knotx/core' {
|
|
|
36
36
|
step?: number;
|
|
37
37
|
animationTime?: number;
|
|
38
38
|
}) => void;
|
|
39
|
+
setTransform: (params: {
|
|
40
|
+
positionX: number;
|
|
41
|
+
positionY: number;
|
|
42
|
+
scale: number;
|
|
43
|
+
animationTime?: number;
|
|
44
|
+
}) => void;
|
|
39
45
|
};
|
|
40
46
|
}
|
|
41
47
|
}
|
|
@@ -107,6 +113,23 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
|
|
|
107
113
|
};
|
|
108
114
|
};
|
|
109
115
|
}>): void;
|
|
116
|
+
setTransform({ positionX, positionY, scale, animationTime }: InferParamsFromSchema<{
|
|
117
|
+
type: 'object';
|
|
118
|
+
properties: {
|
|
119
|
+
positionX: {
|
|
120
|
+
type: 'number';
|
|
121
|
+
};
|
|
122
|
+
positionY: {
|
|
123
|
+
type: 'number';
|
|
124
|
+
};
|
|
125
|
+
scale: {
|
|
126
|
+
type: 'number';
|
|
127
|
+
};
|
|
128
|
+
animationTime: {
|
|
129
|
+
type: 'number';
|
|
130
|
+
};
|
|
131
|
+
};
|
|
132
|
+
}>): void;
|
|
110
133
|
render({ children }?: {
|
|
111
134
|
children: ReactNode;
|
|
112
135
|
}): JSX.Element;
|
package/dist/index.js
CHANGED
|
@@ -73,7 +73,7 @@ var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use
|
|
|
73
73
|
var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
|
|
74
74
|
var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
|
|
75
75
|
var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
|
|
76
|
-
var _init_dec, _render_dec, _zoomOut_dec, _zoomIn_dec, _scrollNodeIntoView_dec, _removeListener_dec, _addListener_dec, _container_dec, _getNode_dec, _transform_dec, _ref_dec, _a, _init;
|
|
76
|
+
var _init_dec, _render_dec, _setTransform_dec, _zoomOut_dec, _zoomIn_dec, _scrollNodeIntoView_dec, _removeListener_dec, _addListener_dec, _container_dec, _getNode_dec, _transform_dec, _ref_dec, _a, _init;
|
|
77
77
|
class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_dec = [register("transform")], _getNode_dec = [inject.getNode()], _container_dec = [inject.container()], _addListener_dec = [register("addListener")], _removeListener_dec = [register("removeListener")], _scrollNodeIntoView_dec = [tool("Scroll node into viewport center", {
|
|
78
78
|
type: "object",
|
|
79
79
|
properties: {
|
|
@@ -104,6 +104,14 @@ class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_
|
|
|
104
104
|
step: { type: "number" },
|
|
105
105
|
animationTime: { type: "number" }
|
|
106
106
|
}
|
|
107
|
+
})], _setTransform_dec = [tool("Set transform", {
|
|
108
|
+
type: "object",
|
|
109
|
+
properties: {
|
|
110
|
+
positionX: { type: "number" },
|
|
111
|
+
positionY: { type: "number" },
|
|
112
|
+
scale: { type: "number" },
|
|
113
|
+
animationTime: { type: "number" }
|
|
114
|
+
}
|
|
107
115
|
})], _render_dec = [layer(Layer.Canvas)], _init_dec = [OnInit], _a) {
|
|
108
116
|
constructor() {
|
|
109
117
|
super(...arguments);
|
|
@@ -197,6 +205,10 @@ class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_
|
|
|
197
205
|
var _a2;
|
|
198
206
|
(_a2 = this.ref) == null ? void 0 : _a2.zoomOut(step, animationTime);
|
|
199
207
|
}
|
|
208
|
+
setTransform({ positionX, positionY, scale, animationTime }) {
|
|
209
|
+
var _a2;
|
|
210
|
+
(_a2 = this.ref) == null ? void 0 : _a2.setTransform(positionX != null ? positionX : this.transform.positionX, positionY != null ? positionY : this.transform.positionY, scale != null ? scale : this.transform.scale, animationTime);
|
|
211
|
+
}
|
|
200
212
|
render({ children } = { children: null }) {
|
|
201
213
|
const [transform, setTransform] = useState(null);
|
|
202
214
|
const [fixedLayers, childrenLayers] = useMemo(() => {
|
|
@@ -238,8 +250,8 @@ class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_
|
|
|
238
250
|
});
|
|
239
251
|
let frame;
|
|
240
252
|
return transform == null ? void 0 : transform.instance.onChange((ref) => {
|
|
241
|
-
|
|
242
|
-
frame =
|
|
253
|
+
cancelAnimationFrame(frame);
|
|
254
|
+
frame = requestAnimationFrame(() => {
|
|
243
255
|
this.transform = __spreadValues({}, ref.state);
|
|
244
256
|
});
|
|
245
257
|
});
|
|
@@ -318,6 +330,7 @@ _init = __decoratorStart(_a);
|
|
|
318
330
|
__decorateElement(_init, 1, "scrollNodeIntoView", _scrollNodeIntoView_dec, Canvas);
|
|
319
331
|
__decorateElement(_init, 1, "zoomIn", _zoomIn_dec, Canvas);
|
|
320
332
|
__decorateElement(_init, 1, "zoomOut", _zoomOut_dec, Canvas);
|
|
333
|
+
__decorateElement(_init, 1, "setTransform", _setTransform_dec, Canvas);
|
|
321
334
|
__decorateElement(_init, 1, "render", _render_dec, Canvas);
|
|
322
335
|
__decorateElement(_init, 1, "init", _init_dec, Canvas);
|
|
323
336
|
__decorateElement(_init, 5, "ref", _ref_dec, Canvas);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@knotx/plugins-canvas",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.13",
|
|
4
4
|
"description": "Canvas Plugin for Knotx",
|
|
5
5
|
"author": "boenfu",
|
|
6
6
|
"license": "MIT",
|
|
@@ -35,8 +35,8 @@
|
|
|
35
35
|
"lodash-es": "^4.17.21",
|
|
36
36
|
"react-zoom-pan-pinch": "^3.7.0",
|
|
37
37
|
"rxjs": "^7.8.1",
|
|
38
|
-
"@knotx/core": "0.2.
|
|
39
|
-
"@knotx/decorators": "0.2.
|
|
38
|
+
"@knotx/core": "0.2.12",
|
|
39
|
+
"@knotx/decorators": "0.2.13"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
42
|
"@types/lodash-es": "^4.17.12",
|