@knotx/plugins-canvas 0.3.9 → 0.4.0

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.
Files changed (6) hide show
  1. package/dist/index.cjs +19 -11
  2. package/dist/index.d.cts +2 -2
  3. package/dist/index.d.mts +2 -2
  4. package/dist/index.d.ts +2 -2
  5. package/dist/index.js +19 -11
  6. package/package.json +8 -8
package/dist/index.cjs CHANGED
@@ -202,9 +202,9 @@ class Canvas extends (_a = core.BasePlugin, _ref_dec = [decorators.register("ref
202
202
  __publicField(this, "edgeScroll", __runInitializers(_init, 24, this, {
203
203
  config: {
204
204
  enabled: false,
205
- edgeSize: 50,
205
+ edgeSize: 100,
206
206
  maxSpeed: 10,
207
- cornerSize: 25
207
+ cornerSize: 50
208
208
  },
209
209
  setConfig: (config) => {
210
210
  this.edgeScroll.config = __spreadValues(__spreadValues({}, this.edgeScroll.config), config);
@@ -350,26 +350,31 @@ class Canvas extends (_a = core.BasePlugin, _ref_dec = [decorators.register("ref
350
350
  }, [children]);
351
351
  react.useLayoutEffect(() => {
352
352
  const wrapperElement = transformRef == null ? void 0 : transformRef.instance.wrapperComponent;
353
+ const onScroll = (event) => {
354
+ var _a3;
355
+ (_a3 = event.currentTarget) == null ? void 0 : _a3.scrollTo(0, 0);
356
+ event.preventDefault();
357
+ event.stopPropagation();
358
+ };
353
359
  if (wrapperElement) {
354
360
  Object.defineProperty(wrapperElement, "scrollTop", {
355
361
  get() {
356
- return -transformRef.instance.transformState.positionY;
362
+ return 0;
357
363
  },
358
- set(value) {
359
- transformRef.instance.setTransformState(transformRef.instance.transformState.scale, transformRef.instance.transformState.positionX, -value);
364
+ set() {
360
365
  }
361
366
  });
362
367
  Object.defineProperty(wrapperElement, "scrollLeft", {
363
368
  get() {
364
- return -transformRef.instance.transformState.positionX;
369
+ return 0;
365
370
  },
366
- set(value) {
367
- transformRef.instance.setTransformState(transformRef.instance.transformState.scale, -value, transformRef.instance.transformState.positionY);
371
+ set() {
368
372
  }
369
373
  });
374
+ wrapperElement.addEventListener("scroll", onScroll, { capture: true });
370
375
  }
371
376
  let frame;
372
- return transformRef == null ? void 0 : transformRef.instance.onChange((ref) => {
377
+ const unsubscribe = transformRef == null ? void 0 : transformRef.instance.onChange((ref) => {
373
378
  cancelAnimationFrame(frame);
374
379
  frame = requestAnimationFrame(() => {
375
380
  if (lodashEs.isEqual(this.transform, ref.state)) {
@@ -378,6 +383,10 @@ class Canvas extends (_a = core.BasePlugin, _ref_dec = [decorators.register("ref
378
383
  this.transform = __spreadValues({}, ref.state);
379
384
  });
380
385
  });
386
+ return () => {
387
+ unsubscribe == null ? void 0 : unsubscribe();
388
+ wrapperElement == null ? void 0 : wrapperElement.removeEventListener("scroll", onScroll, { capture: true });
389
+ };
381
390
  }, [transformRef]);
382
391
  const onClick = react.useCallback((e) => {
383
392
  if (!this.isCanvasEvent(e)) {
@@ -449,8 +458,7 @@ class Canvas extends (_a = core.BasePlugin, _ref_dec = [decorators.register("ref
449
458
  contentStyle: {
450
459
  position: "relative",
451
460
  width: (_b = (_a2 = this.contentSize) == null ? void 0 : _a2.width) != null ? _b : "100%",
452
- height: (_d = (_c = this.contentSize) == null ? void 0 : _c.height) != null ? _d : "100%",
453
- willChange: "auto"
461
+ height: (_d = (_c = this.contentSize) == null ? void 0 : _c.height) != null ? _d : "100%"
454
462
  },
455
463
  children: childrenLayers
456
464
  }
package/dist/index.d.cts CHANGED
@@ -50,7 +50,7 @@ declare module '@knotx/core' {
50
50
  scale?: number;
51
51
  block?: 'center' | 'end' | 'nearest' | 'start';
52
52
  inline?: 'center' | 'end' | 'nearest' | 'start';
53
- offset?: number | {
53
+ offset?: {
54
54
  x: number;
55
55
  y: number;
56
56
  };
@@ -112,7 +112,7 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
112
112
  enum: ['center', 'end', 'nearest', 'start'];
113
113
  };
114
114
  offset: {
115
- type: ['number', 'object'];
115
+ type: 'object';
116
116
  properties: {
117
117
  x: {
118
118
  type: 'number';
package/dist/index.d.mts CHANGED
@@ -50,7 +50,7 @@ declare module '@knotx/core' {
50
50
  scale?: number;
51
51
  block?: 'center' | 'end' | 'nearest' | 'start';
52
52
  inline?: 'center' | 'end' | 'nearest' | 'start';
53
- offset?: number | {
53
+ offset?: {
54
54
  x: number;
55
55
  y: number;
56
56
  };
@@ -112,7 +112,7 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
112
112
  enum: ['center', 'end', 'nearest', 'start'];
113
113
  };
114
114
  offset: {
115
- type: ['number', 'object'];
115
+ type: 'object';
116
116
  properties: {
117
117
  x: {
118
118
  type: 'number';
package/dist/index.d.ts CHANGED
@@ -50,7 +50,7 @@ declare module '@knotx/core' {
50
50
  scale?: number;
51
51
  block?: 'center' | 'end' | 'nearest' | 'start';
52
52
  inline?: 'center' | 'end' | 'nearest' | 'start';
53
- offset?: number | {
53
+ offset?: {
54
54
  x: number;
55
55
  y: number;
56
56
  };
@@ -112,7 +112,7 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
112
112
  enum: ['center', 'end', 'nearest', 'start'];
113
113
  };
114
114
  offset: {
115
- type: ['number', 'object'];
115
+ type: 'object';
116
116
  properties: {
117
117
  x: {
118
118
  type: 'number';
package/dist/index.js CHANGED
@@ -200,9 +200,9 @@ class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_
200
200
  __publicField(this, "edgeScroll", __runInitializers(_init, 24, this, {
201
201
  config: {
202
202
  enabled: false,
203
- edgeSize: 50,
203
+ edgeSize: 100,
204
204
  maxSpeed: 10,
205
- cornerSize: 25
205
+ cornerSize: 50
206
206
  },
207
207
  setConfig: (config) => {
208
208
  this.edgeScroll.config = __spreadValues(__spreadValues({}, this.edgeScroll.config), config);
@@ -348,26 +348,31 @@ class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_
348
348
  }, [children]);
349
349
  useLayoutEffect(() => {
350
350
  const wrapperElement = transformRef == null ? void 0 : transformRef.instance.wrapperComponent;
351
+ const onScroll = (event) => {
352
+ var _a3;
353
+ (_a3 = event.currentTarget) == null ? void 0 : _a3.scrollTo(0, 0);
354
+ event.preventDefault();
355
+ event.stopPropagation();
356
+ };
351
357
  if (wrapperElement) {
352
358
  Object.defineProperty(wrapperElement, "scrollTop", {
353
359
  get() {
354
- return -transformRef.instance.transformState.positionY;
360
+ return 0;
355
361
  },
356
- set(value) {
357
- transformRef.instance.setTransformState(transformRef.instance.transformState.scale, transformRef.instance.transformState.positionX, -value);
362
+ set() {
358
363
  }
359
364
  });
360
365
  Object.defineProperty(wrapperElement, "scrollLeft", {
361
366
  get() {
362
- return -transformRef.instance.transformState.positionX;
367
+ return 0;
363
368
  },
364
- set(value) {
365
- transformRef.instance.setTransformState(transformRef.instance.transformState.scale, -value, transformRef.instance.transformState.positionY);
369
+ set() {
366
370
  }
367
371
  });
372
+ wrapperElement.addEventListener("scroll", onScroll, { capture: true });
368
373
  }
369
374
  let frame;
370
- return transformRef == null ? void 0 : transformRef.instance.onChange((ref) => {
375
+ const unsubscribe = transformRef == null ? void 0 : transformRef.instance.onChange((ref) => {
371
376
  cancelAnimationFrame(frame);
372
377
  frame = requestAnimationFrame(() => {
373
378
  if (isEqual(this.transform, ref.state)) {
@@ -376,6 +381,10 @@ class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_
376
381
  this.transform = __spreadValues({}, ref.state);
377
382
  });
378
383
  });
384
+ return () => {
385
+ unsubscribe == null ? void 0 : unsubscribe();
386
+ wrapperElement == null ? void 0 : wrapperElement.removeEventListener("scroll", onScroll, { capture: true });
387
+ };
379
388
  }, [transformRef]);
380
389
  const onClick = useCallback((e) => {
381
390
  if (!this.isCanvasEvent(e)) {
@@ -447,8 +456,7 @@ class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_
447
456
  contentStyle: {
448
457
  position: "relative",
449
458
  width: (_b = (_a2 = this.contentSize) == null ? void 0 : _a2.width) != null ? _b : "100%",
450
- height: (_d = (_c = this.contentSize) == null ? void 0 : _c.height) != null ? _d : "100%",
451
- willChange: "auto"
459
+ height: (_d = (_c = this.contentSize) == null ? void 0 : _c.height) != null ? _d : "100%"
452
460
  },
453
461
  children: childrenLayers
454
462
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@knotx/plugins-canvas",
3
- "version": "0.3.9",
3
+ "version": "0.4.0",
4
4
  "description": "Canvas Plugin for Knotx",
5
5
  "author": "boenfu",
6
6
  "license": "MIT",
@@ -29,23 +29,23 @@
29
29
  ],
30
30
  "peerDependencies": {
31
31
  "react": ">=17.0.0",
32
- "@knotx/jsx": "0.3.9"
32
+ "@knotx/jsx": "0.4.0"
33
33
  },
34
34
  "dependencies": {
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.3.9",
39
- "@knotx/decorators": "0.3.9"
38
+ "@knotx/core": "0.4.0",
39
+ "@knotx/decorators": "0.4.0"
40
40
  },
41
41
  "devDependencies": {
42
42
  "@types/lodash-es": "^4.17.12",
43
43
  "@types/react": "^17.0.0",
44
44
  "react": "^17.0.0",
45
- "@knotx/build-config": "0.3.9",
46
- "@knotx/eslint-config": "0.3.9",
47
- "@knotx/jsx": "0.3.9",
48
- "@knotx/typescript-config": "0.3.9"
45
+ "@knotx/build-config": "0.4.0",
46
+ "@knotx/eslint-config": "0.4.0",
47
+ "@knotx/jsx": "0.4.0",
48
+ "@knotx/typescript-config": "0.4.0"
49
49
  },
50
50
  "scripts": {
51
51
  "build": "unbuild",