@knotx/plugins-canvas-scrollbar 0.5.7 → 0.5.8

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 (3) hide show
  1. package/dist/index.cjs +53 -40
  2. package/dist/index.js +53 -40
  3. package/package.json +10 -10
package/dist/index.cjs CHANGED
@@ -104,56 +104,69 @@ class CanvasScrollbar extends (_a = core.BasePlugin, _showScrollbars_dec = [deco
104
104
  __publicField(this, "handleMouseDown", (e, type) => {
105
105
  e.preventDefault();
106
106
  e.stopPropagation();
107
- if (type === "horizontal") {
107
+ if (!this.transform || !this.contentSize)
108
+ return;
109
+ const isHorizontal = type === "horizontal";
110
+ const tracker = this.getScrollTracker(type);
111
+ const thumb = this.getScrollThumb(type);
112
+ if (!tracker || !thumb)
113
+ return;
114
+ const trackRect = tracker.getBoundingClientRect();
115
+ const thumbRect = thumb.getBoundingClientRect();
116
+ const trackSize = isHorizontal ? trackRect.width : trackRect.height;
117
+ const thumbSize = isHorizontal ? thumbRect.width : thumbRect.height;
118
+ const contentSize = isHorizontal ? this.contentSize.width * this.transform.scale : this.contentSize.height * this.transform.scale;
119
+ const containerSize = isHorizontal ? this.container.width : this.container.height;
120
+ const maxScroll = contentSize - containerSize;
121
+ const scrollableTrackSize = trackSize - thumbSize;
122
+ if (scrollableTrackSize <= 0)
123
+ return;
124
+ const ratio = maxScroll / scrollableTrackSize;
125
+ const startMousePos = isHorizontal ? e.clientX : e.clientY;
126
+ const startScrollPos = isHorizontal ? -this.transform.positionX : -this.transform.positionY;
127
+ if (isHorizontal) {
108
128
  this.isDraggingHorizontal = true;
109
129
  this.startDragPos.x = e.clientX;
110
- this.startScrollPos.x = -this.transform.positionX;
130
+ this.startScrollPos.x = startScrollPos;
111
131
  } else {
112
132
  this.isDraggingVertical = true;
113
133
  this.startDragPos.y = e.clientY;
114
- this.startScrollPos.y = -this.transform.positionY;
134
+ this.startScrollPos.y = startScrollPos;
115
135
  }
136
+ let rafId = null;
116
137
  const handleMouseMove = (e2) => {
117
- if (!this.transform || !this.contentSize)
138
+ if (rafId)
118
139
  return;
119
- if (this.isDraggingHorizontal) {
120
- const horizontalTracker = this.getScrollTracker("horizontal");
121
- const horizontalThumb = this.getScrollThumb("vertical");
122
- const trackWidth = (horizontalTracker == null ? void 0 : horizontalTracker.clientWidth) || 0;
123
- const thumbWidth = (horizontalThumb == null ? void 0 : horizontalThumb.clientWidth) || 0;
124
- const contentWidth = this.contentSize.width * this.transform.scale;
125
- const maxScroll = contentWidth - this.container.width;
126
- const deltaX = e2.clientX - this.startDragPos.x;
127
- const deltaScrollPercentage = deltaX / (trackWidth - thumbWidth);
128
- const deltaScroll = deltaScrollPercentage * maxScroll;
129
- const newScrollX = Math.max(0, Math.min(maxScroll, this.startScrollPos.x + deltaScroll));
130
- this.callTool("canvas", "setTransform", {
131
- positionX: -newScrollX,
132
- positionY: this.transform.positionY,
133
- scale: this.transform.scale,
134
- animationTime: 0
135
- });
136
- }
137
- if (this.isDraggingVertical) {
138
- const verticalTracker = this.getScrollTracker("vertical");
139
- const verticalThumb = this.getScrollThumb("vertical");
140
- const trackHeight = (verticalTracker == null ? void 0 : verticalTracker.clientHeight) || 0;
141
- const thumbHeight = (verticalThumb == null ? void 0 : verticalThumb.clientHeight) || 0;
142
- const contentHeight = this.contentSize.height * this.transform.scale;
143
- const maxScroll = contentHeight - this.container.height;
144
- const deltaY = e2.clientY - this.startDragPos.y;
145
- const deltaScrollPercentage = deltaY / (trackHeight - thumbHeight);
146
- const deltaScroll = deltaScrollPercentage * maxScroll;
147
- const newScrollY = Math.max(0, Math.min(maxScroll, this.startScrollPos.y + deltaScroll));
148
- this.callTool("canvas", "setTransform", {
149
- positionX: this.transform.positionX,
150
- positionY: -newScrollY,
151
- scale: this.transform.scale,
152
- animationTime: 0
153
- });
154
- }
140
+ rafId = requestAnimationFrame(() => {
141
+ if (!this.transform)
142
+ return;
143
+ const currentMousePos = isHorizontal ? e2.clientX : e2.clientY;
144
+ const deltaMouse = currentMousePos - startMousePos;
145
+ const deltaScroll = deltaMouse * ratio;
146
+ const newScroll = Math.max(0, Math.min(maxScroll, startScrollPos + deltaScroll));
147
+ if (isHorizontal) {
148
+ this.callTool("canvas", "setTransform", {
149
+ positionX: -newScroll,
150
+ positionY: this.transform.positionY,
151
+ scale: this.transform.scale,
152
+ animationTime: 0
153
+ });
154
+ } else {
155
+ this.callTool("canvas", "setTransform", {
156
+ positionX: this.transform.positionX,
157
+ positionY: -newScroll,
158
+ scale: this.transform.scale,
159
+ animationTime: 0
160
+ });
161
+ }
162
+ rafId = null;
163
+ });
155
164
  };
156
165
  const handleMouseUp = () => {
166
+ if (rafId) {
167
+ cancelAnimationFrame(rafId);
168
+ rafId = null;
169
+ }
157
170
  this.isDraggingHorizontal = false;
158
171
  this.isDraggingVertical = false;
159
172
  document.removeEventListener("mousemove", handleMouseMove);
package/dist/index.js CHANGED
@@ -102,56 +102,69 @@ class CanvasScrollbar extends (_a = BasePlugin, _showScrollbars_dec = [observabl
102
102
  __publicField(this, "handleMouseDown", (e, type) => {
103
103
  e.preventDefault();
104
104
  e.stopPropagation();
105
- if (type === "horizontal") {
105
+ if (!this.transform || !this.contentSize)
106
+ return;
107
+ const isHorizontal = type === "horizontal";
108
+ const tracker = this.getScrollTracker(type);
109
+ const thumb = this.getScrollThumb(type);
110
+ if (!tracker || !thumb)
111
+ return;
112
+ const trackRect = tracker.getBoundingClientRect();
113
+ const thumbRect = thumb.getBoundingClientRect();
114
+ const trackSize = isHorizontal ? trackRect.width : trackRect.height;
115
+ const thumbSize = isHorizontal ? thumbRect.width : thumbRect.height;
116
+ const contentSize = isHorizontal ? this.contentSize.width * this.transform.scale : this.contentSize.height * this.transform.scale;
117
+ const containerSize = isHorizontal ? this.container.width : this.container.height;
118
+ const maxScroll = contentSize - containerSize;
119
+ const scrollableTrackSize = trackSize - thumbSize;
120
+ if (scrollableTrackSize <= 0)
121
+ return;
122
+ const ratio = maxScroll / scrollableTrackSize;
123
+ const startMousePos = isHorizontal ? e.clientX : e.clientY;
124
+ const startScrollPos = isHorizontal ? -this.transform.positionX : -this.transform.positionY;
125
+ if (isHorizontal) {
106
126
  this.isDraggingHorizontal = true;
107
127
  this.startDragPos.x = e.clientX;
108
- this.startScrollPos.x = -this.transform.positionX;
128
+ this.startScrollPos.x = startScrollPos;
109
129
  } else {
110
130
  this.isDraggingVertical = true;
111
131
  this.startDragPos.y = e.clientY;
112
- this.startScrollPos.y = -this.transform.positionY;
132
+ this.startScrollPos.y = startScrollPos;
113
133
  }
134
+ let rafId = null;
114
135
  const handleMouseMove = (e2) => {
115
- if (!this.transform || !this.contentSize)
136
+ if (rafId)
116
137
  return;
117
- if (this.isDraggingHorizontal) {
118
- const horizontalTracker = this.getScrollTracker("horizontal");
119
- const horizontalThumb = this.getScrollThumb("vertical");
120
- const trackWidth = (horizontalTracker == null ? void 0 : horizontalTracker.clientWidth) || 0;
121
- const thumbWidth = (horizontalThumb == null ? void 0 : horizontalThumb.clientWidth) || 0;
122
- const contentWidth = this.contentSize.width * this.transform.scale;
123
- const maxScroll = contentWidth - this.container.width;
124
- const deltaX = e2.clientX - this.startDragPos.x;
125
- const deltaScrollPercentage = deltaX / (trackWidth - thumbWidth);
126
- const deltaScroll = deltaScrollPercentage * maxScroll;
127
- const newScrollX = Math.max(0, Math.min(maxScroll, this.startScrollPos.x + deltaScroll));
128
- this.callTool("canvas", "setTransform", {
129
- positionX: -newScrollX,
130
- positionY: this.transform.positionY,
131
- scale: this.transform.scale,
132
- animationTime: 0
133
- });
134
- }
135
- if (this.isDraggingVertical) {
136
- const verticalTracker = this.getScrollTracker("vertical");
137
- const verticalThumb = this.getScrollThumb("vertical");
138
- const trackHeight = (verticalTracker == null ? void 0 : verticalTracker.clientHeight) || 0;
139
- const thumbHeight = (verticalThumb == null ? void 0 : verticalThumb.clientHeight) || 0;
140
- const contentHeight = this.contentSize.height * this.transform.scale;
141
- const maxScroll = contentHeight - this.container.height;
142
- const deltaY = e2.clientY - this.startDragPos.y;
143
- const deltaScrollPercentage = deltaY / (trackHeight - thumbHeight);
144
- const deltaScroll = deltaScrollPercentage * maxScroll;
145
- const newScrollY = Math.max(0, Math.min(maxScroll, this.startScrollPos.y + deltaScroll));
146
- this.callTool("canvas", "setTransform", {
147
- positionX: this.transform.positionX,
148
- positionY: -newScrollY,
149
- scale: this.transform.scale,
150
- animationTime: 0
151
- });
152
- }
138
+ rafId = requestAnimationFrame(() => {
139
+ if (!this.transform)
140
+ return;
141
+ const currentMousePos = isHorizontal ? e2.clientX : e2.clientY;
142
+ const deltaMouse = currentMousePos - startMousePos;
143
+ const deltaScroll = deltaMouse * ratio;
144
+ const newScroll = Math.max(0, Math.min(maxScroll, startScrollPos + deltaScroll));
145
+ if (isHorizontal) {
146
+ this.callTool("canvas", "setTransform", {
147
+ positionX: -newScroll,
148
+ positionY: this.transform.positionY,
149
+ scale: this.transform.scale,
150
+ animationTime: 0
151
+ });
152
+ } else {
153
+ this.callTool("canvas", "setTransform", {
154
+ positionX: this.transform.positionX,
155
+ positionY: -newScroll,
156
+ scale: this.transform.scale,
157
+ animationTime: 0
158
+ });
159
+ }
160
+ rafId = null;
161
+ });
153
162
  };
154
163
  const handleMouseUp = () => {
164
+ if (rafId) {
165
+ cancelAnimationFrame(rafId);
166
+ rafId = null;
167
+ }
155
168
  this.isDraggingHorizontal = false;
156
169
  this.isDraggingVertical = false;
157
170
  document.removeEventListener("mousemove", handleMouseMove);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@knotx/plugins-canvas-scrollbar",
3
- "version": "0.5.7",
3
+ "version": "0.5.8",
4
4
  "description": "Canvas Scrollbar Plugin for Knotx",
5
5
  "author": "boenfu",
6
6
  "license": "MIT",
@@ -29,21 +29,21 @@
29
29
  ],
30
30
  "peerDependencies": {
31
31
  "react": ">=17.0.0",
32
- "@knotx/jsx": "0.5.7",
33
- "@knotx/plugins-canvas": "0.5.7"
32
+ "@knotx/jsx": "0.5.8",
33
+ "@knotx/plugins-canvas": "0.5.8"
34
34
  },
35
35
  "dependencies": {
36
- "@knotx/core": "0.5.7",
37
- "@knotx/decorators": "0.5.7"
36
+ "@knotx/core": "0.5.8",
37
+ "@knotx/decorators": "0.5.8"
38
38
  },
39
39
  "devDependencies": {
40
40
  "@types/react": "^17.0.0",
41
41
  "react": "^17.0.0",
42
- "@knotx/build-config": "0.5.7",
43
- "@knotx/eslint-config": "0.5.7",
44
- "@knotx/jsx": "0.5.7",
45
- "@knotx/plugins-canvas": "0.5.7",
46
- "@knotx/typescript-config": "0.5.7"
42
+ "@knotx/build-config": "0.5.8",
43
+ "@knotx/eslint-config": "0.5.8",
44
+ "@knotx/jsx": "0.5.8",
45
+ "@knotx/plugins-canvas": "0.5.8",
46
+ "@knotx/typescript-config": "0.5.8"
47
47
  },
48
48
  "scripts": {
49
49
  "build": "unbuild",