Skip to content

Commit bd64a5d

Browse files
hahaxiaowaihahaxiaowai
committed
feat: tag v1.1
1 parent 1acf816 commit bd64a5d

File tree

3 files changed

+221
-97
lines changed

3 files changed

+221
-97
lines changed

‎dist/ruler.es.js‎

Lines changed: 110 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ var Ruler = /*#__PURE__*/function () {
5656
return _createClass(Ruler, [{
5757
key: "_initRuler",
5858
value: function _initRuler(options) {
59-
var _options$grid, _options$gridChange, _options$dragButton, _options$listener;
59+
var _options$grid, _options$minGridSize, _options$gridChange, _options$reverseY, _options$zoomToCursor, _options$dragButton, _options$listener;
6060
// canvas
6161
if (this.dom.width === 300 && this.dom.height === 150) {
6262
this.dom.width = this.dom.parentElement.clientWidth;
@@ -69,6 +69,7 @@ var Ruler = /*#__PURE__*/function () {
6969
// grid
7070
this.grid = (_options$grid = options.grid) !== null && _options$grid !== void 0 ? _options$grid : true;
7171
this._gridSize = 50;
72+
this.minGridSize = (_options$minGridSize = options.minGridSize) !== null && _options$minGridSize !== void 0 ? _options$minGridSize : 20;
7273
this.gridChange = (_options$gridChange = options.gridChange) !== null && _options$gridChange !== void 0 ? _options$gridChange : true;
7374
// ruler
7475
this.rulerWidth = options.rulerWidth || 20;
@@ -77,16 +78,22 @@ var Ruler = /*#__PURE__*/function () {
7778
this.scaleHeight = options.scaleHeight || 6;
7879
this.topNumberPadding = options.topNumberPadding || 11;
7980
this.leftNumberPadding = options.leftNumberPadding || 2;
80-
this._scaleStepList = [1, 2, 5, 10, 25, 50, 100, 150, 300, 750, 1500]; // 必须从小到大
81-
this._scaleStep = 50; // 必须是scaleStepList中的一个 标尺上的数值
82-
this._scaleStepOrigin = this._scaleStep;
81+
this.scaleStepList = options.scaleStepList || [1, 2, 5, 10, 25, 50, 100, 150, 300]; // 必须从小到大
82+
this.scaleStep = options.scaleStep || this.scaleStepList[0]; // 必须是scaleStepList中的一个 标尺上的数值
83+
this._scaleOrigin = this.scaleStep;
84+
this._scaleGridRatio = this._gridSize / this.scaleStep; // 标尺上的数值和像素的比例
85+
this.reverseY = (_options$reverseY = options.reverseY) !== null && _options$reverseY !== void 0 ? _options$reverseY : false;
86+
// zoom
87+
this.zoom = 1;
88+
this._scale = 1;
89+
this.minZoom = 0;
90+
this.maxZoom = Infinity;
8391
this._zoomRatioList = [];
84-
for (var i = 0; i < this._scaleStepList.length; i++) {
85-
this._zoomRatioList.push(this._scaleStepList[i] / this._scaleStepOrigin);
86-
}
87-
if (this._scaleStepList.indexOf(this._scaleStep) < 0) {
88-
throw new Error('scaleStep must be one of _scaleStepList');
92+
for (var i = 0; i < this.scaleStepList.length; i++) {
93+
this._zoomRatioList.push(this.scaleStepList[i] / this.scaleStep);
8994
}
95+
this.zoomSpeed = options.zoomSpeed || 1;
96+
this.zoomToCursor = (_options$zoomToCursor = options.zoomToCursor) !== null && _options$zoomToCursor !== void 0 ? _options$zoomToCursor : true;
9097
// event
9198
this._isDrag = false;
9299
this.dragButton = (_options$dragButton = options.dragButton) !== null && _options$dragButton !== void 0 ? _options$dragButton : 0;
@@ -102,12 +109,25 @@ var Ruler = /*#__PURE__*/function () {
102109
this._isBindThree = false;
103110
this._controls = null;
104111
// translate
112+
// 均为像素，非标尺比例
105113
this.x = 0;
106114
this.y = 0;
107-
// scale
108-
this._zoomOrigin = 1;
109-
this.zoom = 1;
110-
this.zoomStep = options.zoomStep || 0.2;
115+
this.checkParameter();
116+
}
117+
}, {
118+
key: "checkParameter",
119+
value: function checkParameter() {
120+
for (var i = 0; i < this.scaleStepList.length; i++) {
121+
if (this.scaleStepList[i] < 0) {
122+
throw new Error('scaleStepList must be greater than 0');
123+
}
124+
if (i > 0 && this.scaleStepList[i] <= this.scaleStepList[i - 1]) {
125+
throw new Error('scaleStepList must be from small to large');
126+
}
127+
}
128+
if (this.scaleStepList.indexOf(this.scaleStep) < 0) {
129+
throw new Error('scaleStep must be one of scaleStepList');
130+
}
111131
}
112132
}, {
113133
key: "reDraw",
@@ -147,7 +167,7 @@ var Ruler = /*#__PURE__*/function () {
147167
this.ctx.closePath();
148168
this.ctx.fillText(drawXNum, drawX, this.topNumberPadding);
149169
drawX += this._gridSize;
150-
drawXNum += this._scaleStep;
170+
drawXNum += this.scaleStep;
151171
}
152172
var drawY = startY;
153173
var drawYNum = startYNum;
@@ -164,10 +184,10 @@ var Ruler = /*#__PURE__*/function () {
164184
this.ctx.save();
165185
this.ctx.translate(margin - this.leftNumberPadding, drawY);
166186
this.ctx.rotate(-Math.PI / 2);
167-
this.ctx.fillText(drawYNum, 0, 0);
187+
this.ctx.fillText(drawYNum * (this.reverseY ? -1 : 1), 0, 0);
168188
this.ctx.restore();
169189
drawY += this._gridSize;
170-
drawYNum += this._scaleStep;
190+
drawYNum += this.scaleStep;
171191
}
172192
}
173193
}, {
@@ -178,19 +198,19 @@ var Ruler = /*#__PURE__*/function () {
178198
var screenY = this.y + this.dom.height / 2;
179199
var n = Math.floor(screenX / gridSize);
180200
var startX = screenX - n * gridSize;
181-
var startXNum = -n * this._scaleStep;
201+
var startXNum = -n * this.scaleStep;
182202
// 最左侧如果和Y轴标尺重叠，则向右+1
183203
if (startX < this.rulerWidth) {
184204
startX += gridSize;
185-
startXNum += this._scaleStep;
205+
startXNum += this.scaleStep;
186206
}
187207
var n2 = Math.floor(screenY / gridSize);
188208
var startY = screenY - n2 * gridSize;
189-
var startYNum = -n2 * this._scaleStep;
209+
var startYNum = -n2 * this.scaleStep;
190210
// 同上
191211
if (startY < this.rulerWidth) {
192212
startY += gridSize;
193-
startYNum += this._scaleStep;
213+
startYNum += this.scaleStep;
194214
}
195215
return {
196216
startX: startX,
@@ -203,7 +223,7 @@ var Ruler = /*#__PURE__*/function () {
203223
key: "bindThreeCamera",
204224
value: function bindThreeCamera(camera, controls, origin) {
205225
this._isBindThree = true;
206-
this.controls = controls;
226+
this._controls = controls;
207227
this._events.three = this._threeEvent.bind(this, camera, origin);
208228
controls.addEventListener('change', this._events.three);
209229
}
@@ -215,13 +235,19 @@ var Ruler = /*#__PURE__*/function () {
215235
var halfHeight = this.dom.height / 2;
216236
var originX = -(coords.x * halfWidth + halfWidth);
217237
var originY = -(coords.y * halfHeight + halfHeight);
238+
var tempZoom = this.zoom;
218239
this.zoom = camera.zoom;
219-
if (this.zoom <= 0) this.zoom = this.zoomStep;
220-
this._gridSize = this.zoom * this._scaleStepOrigin;
240+
if (this.zoom < 0) this.zoom = 0.0001;
241+
this._gridSize = this.zoom * this._scaleGridRatio;
221242
if (this.gridChange) {
222243
var step = this._getScaleStep();
223-
this._scaleStep = step;
224-
this._gridSize = this._scaleStep * this.zoom;
244+
this.scaleStep = step;
245+
this._gridSize = this.scaleStep * this.zoom * this._scaleGridRatio;
246+
}
247+
if (this._gridSize < this.minGridSize) {
248+
// if minGridSize is greater than the minimum of scaleStepList, gridSize will be changed when gridSize > minGridSize
249+
this._gridSize = this.minGridSize;
250+
this.zoom = tempZoom; // reset zoom, greater than minGridSize
225251
}
226252
this.reDraw(-originX - halfWidth, originY + halfHeight, this.zoom);
227253
}
@@ -267,40 +293,41 @@ var Ruler = /*#__PURE__*/function () {
267293
}, {
268294
key: "_wheelEvent",
269295
value: function _wheelEvent(e) {
296+
var scale = this._getZoomScale(e.deltaY);
270297
if (e.deltaY > 0) {
271298
// 缩小
272-
this.zoom -= this.zoomStep;
273-
274-
// this.zoom = this.zoom * (this._zoomOrigin - this.zoomStep);
275-
// this._gridSize = this._gridSize * (this._zoomOrigin - this.zoomStep);
299+
this._scale /= scale;
276300
} else {
277301
// 放大
278-
this.zoom += this.zoomStep;
279-
// this.zoom = this.zoom / (this._zoomOrigin - this.zoomStep);
280-
// this._gridSize = this._gridSize / (this._zoomOrigin - this.zoomStep);
302+
this._scale *= scale;
281303
}
282-
this.zoom = parseFloat(this.zoom.toFixed(2));
283-
if (this.zoom <= 0) this.zoom = this.zoomStep;
284-
this._gridSize = this.zoom * this._scaleStepOrigin;
285-
286-
// 平移
287-
var centerX = this.dom.width / 2;
288-
var centerY = this.dom.height / 2;
289-
var dx = e.offsetX - centerX;
290-
var dy = e.offsetY - centerY;
291-
var nx = this.x + dx * this.zoomStep;
292-
var ny = this.y + dy * this.zoomStep;
304+
var tempZoom = this.zoom;
305+
this.zoom = Math.max(this.minZoom, Math.min(this.maxZoom, this.zoom / this._scale));
306+
if (this.zoom <= 0) this.zoom = 0.0001;
307+
this._gridSize = this.zoom * this._scaleGridRatio;
293308
if (this.gridChange) {
294309
var step = this._getScaleStep();
295-
this._scaleStep = step;
296-
this._gridSize = this._scaleStep * this.zoom;
310+
this.scaleStep = step;
311+
this._gridSize = this.scaleStep * this.zoom * this._scaleGridRatio;
312+
}
313+
if (this._gridSize < this.minGridSize) {
314+
// if minGridSize is greater than the minimum of scaleStepList, gridSize will be changed when gridSize > minGridSize
315+
this._gridSize = this.minGridSize;
316+
this.zoom = tempZoom; // reset zoom, greater than minGridSize
297317
}
318+
// 平移
319+
var beforeZoom = this._unproject(e.offsetX, e.offsetY, tempZoom);
320+
var afterZoom = this._unproject(e.offsetX, e.offsetY);
321+
var nx = this.x - beforeZoom.x + afterZoom.x;
322+
var ny = this.y - beforeZoom.y + afterZoom.y;
298323
this.reDraw(nx, ny, this.zoom);
324+
this._scale = 1;
299325
}
326+
// 接近哪个刻度，就返回哪个刻度
300327
}, {
301328
key: "_getScaleStep",
302329
value: function _getScaleStep() {
303-
var origin = this._scaleStepList.indexOf(this._scaleStepOrigin);
330+
var origin = this.scaleStepList.indexOf(this._scaleOrigin);
304331
for (var i = 1; i < this._zoomRatioList.length; i++) {
305332
if (this.zoom >= this._zoomRatioList[i - 1] && this.zoom < this._zoomRatioList[i]) {
306333
var left = this.zoom - this._zoomRatioList[i - 1];
@@ -313,10 +340,41 @@ var Ruler = /*#__PURE__*/function () {
313340
}
314341
if (index > this._zoomRatioList.length - 1) index = this._zoomRatioList.length - 1;
315342
if (index < 0) index = 0;
316-
return this._scaleStepList[index];
343+
return this.scaleStepList[index];
317344
}
318345
}
319-
return this._scaleStep;
346+
return this.scaleStep;
347+
}
348+
// 跨过哪个刻度，就返回哪个刻度
349+
}, {
350+
key: "_getScaleStep2",
351+
value: function _getScaleStep2() {}
352+
}, {
353+
key: "_getZoomScale",
354+
value: function _getZoomScale(delta) {
355+
var normalizedDelta = Math.abs(delta / 100);
356+
return Math.pow(0.95, this.zoomSpeed * normalizedDelta);
357+
}
358+
// 鼠标坐标转换为世界坐标(像素)
359+
}, {
360+
key: "_unproject",
361+
value: function _unproject(x, y) {
362+
var zoom = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.zoom;
363+
var halfWidth = this.dom.width / 2;
364+
var halfHeight = this.dom.height / 2;
365+
return {
366+
x: (x - halfWidth) / zoom - this.x,
367+
y: (y - halfHeight) / zoom - this.y
368+
};
369+
}
370+
// 世界坐标(像素)转换为鼠标坐标
371+
}, {
372+
key: "toScale",
373+
value: function toScale(x, y) {
374+
return {
375+
x: x / this._scaleGridRatio,
376+
y: y / this._scaleGridRatio * (this.reverseY ? -1 : 1)
377+
};
320378
}
321379
}, {
322380
key: "destroy",
@@ -327,6 +385,10 @@ var Ruler = /*#__PURE__*/function () {
327385
this.dom.removeEventListener('mouseup', this._events.mouseUp);
328386
this.dom.removeEventListener('wheel', this._events.wheel);
329387
}
388+
if (this._isBindThree) {
389+
this._controls.removeEventListener('change', this._events.three);
390+
this._controls = null;
391+
}
330392
}
331393
}]);
332394
}();

0 commit comments

Comments
 (0)