@inweb/viewer-visualize 25.6.0 → 25.6.2

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 (14) hide show
  1. package/dist/viewer-visualize.js +106 -58
  2. package/dist/viewer-visualize.js.map +1 -1
  3. package/dist/viewer-visualize.min.js +1 -1
  4. package/dist/viewer-visualize.module.js +88 -65
  5. package/dist/viewer-visualize.module.js.map +1 -1
  6. package/package.json +4 -4
  7. package/src/Viewer/Markup/Api/Impl/Konva/KonvaArrow.ts +1 -1
  8. package/src/Viewer/Markup/Api/Impl/Konva/KonvaCloud.ts +14 -11
  9. package/src/Viewer/Markup/Api/Impl/Konva/KonvaEllipse.ts +19 -14
  10. package/src/Viewer/Markup/Api/Impl/Konva/KonvaImage.ts +25 -11
  11. package/src/Viewer/Markup/Api/Impl/Konva/KonvaLine.ts +1 -1
  12. package/src/Viewer/Markup/Api/Impl/Konva/KonvaRectangle.ts +14 -11
  13. package/src/Viewer/Markup/Api/Impl/Konva/KonvaText.ts +12 -9
  14. package/src/Viewer/Markup/Impl/Konva/KonvaMarkup.ts +1 -0
package/dist/viewer-visualize.module.js CHANGED
@@ -3063,7 +3063,7 @@ class KonvaLine {
3063
3063
  });
3064
3064
  this._ref.on("transform", (e => {
3065
3065
  const attrs = e.target.attrs;
3066
- if (attrs.rotation !== this.getRotation()) this.setRotation(attrs.rotation);
3066
+ if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
3067
3067
  }));
3068
3068
  this._ref.id(this._ref._id.toString());
3069
3069
  }
@@ -3164,21 +3164,20 @@ class KonvaText {
3164
3164
  this._ref.width(this._ref.getTextWidth());
3165
3165
  this._ref.on("transform", (e => {
3166
3166
  const attrs = e.target.attrs;
3167
- if (attrs.rotation !== this.getRotation()) this.setRotation(attrs.rotation);
3168
- const newWidth = this._ref.width() * attrs.scaleX;
3169
- const newHeight = this._ref.height() * attrs.scaleY;
3167
+ if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
3168
+ const scaleByX = Math.abs(attrs.scaleX - 1) > 1e-5;
3169
+ const scaleByY = Math.abs(attrs.scaleY - 1) > 1e-5;
3170
+ let newWidth = this._ref.width();
3171
+ if (scaleByX) newWidth *= attrs.scaleX;
3172
+ let newHeight = this._ref.height();
3173
+ if (scaleByY) newHeight *= attrs.scaleY;
3170
3174
  const minWidth = 50;
3171
- if (newWidth < minWidth || newHeight < Math.round(this.getFontSize())) {
3172
- this._ref.scale({
3173
- x: 1,
3174
- y: 1
3175
- });
3176
- return;
3177
- }
3178
- if (Math.abs(attrs.scaleX - 1) > 1e-5) {
3175
+ if (newWidth < minWidth) newWidth = minWidth;
3176
+ if (newHeight < Math.round(this.getFontSize())) newHeight = Math.round(this.getFontSize());
3177
+ if (scaleByX) {
3179
3178
  this._ref.width(newWidth);
3180
3179
  }
3181
- if (Math.abs(attrs.scaleY - 1) > 1e-5) {
3180
+ if (scaleByY) {
3182
3181
  this._ref.height(newHeight);
3183
3182
  }
3184
3183
  this._ref.scale({
@@ -3268,23 +3267,22 @@ class KonvaRectangle {
3268
3267
  });
3269
3268
  this._ref.on("transform", (e => {
3270
3269
  const attrs = e.target.attrs;
3271
- if (attrs.rotation !== this.getRotation()) this.setRotation(attrs.rotation);
3272
- let newWidth = this._ref.width() * attrs.scaleX;
3273
- let newHeight = this._ref.height() * attrs.scaleY;
3270
+ if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
3271
+ const scaleByX = Math.abs(attrs.scaleX - 1) > 1e-5;
3272
+ const scaleByY = Math.abs(attrs.scaleY - 1) > 1e-5;
3273
+ let newWidth = this._ref.width();
3274
+ if (scaleByX) newWidth *= attrs.scaleX;
3275
+ let newHeight = this._ref.height();
3276
+ if (scaleByY) newHeight *= attrs.scaleY;
3274
3277
  const minWidth = 50;
3275
3278
  const minHeight = 50;
3276
- if (newWidth < minWidth || newHeight < minHeight) {
3277
- this._ref.scale({
3278
- x: 1,
3279
- y: 1
3280
- });
3281
- return;
3282
- }
3283
- if (Math.abs(attrs.scaleX - 1) > 1e-5) {
3284
- this.setWidth(newWidth);
3279
+ if (newWidth < minWidth) newWidth = minWidth;
3280
+ if (newHeight < minHeight) newHeight = minHeight;
3281
+ if (scaleByX) {
3282
+ this._ref.width(newWidth);
3285
3283
  }
3286
- if (Math.abs(attrs.scaleY - 1) > 1e-5) {
3287
- this.setHeight(newHeight);
3284
+ if (scaleByY) {
3285
+ this._ref.height(newHeight);
3288
3286
  }
3289
3287
  this._ref.scale({
3290
3288
  x: 1,
@@ -3379,23 +3377,34 @@ class KonvaEllipse {
3379
3377
  });
3380
3378
  this._ref.on("transform", (e => {
3381
3379
  const attrs = e.target.attrs;
3382
- if (attrs.rotation !== this.getRotation()) this.setRotation(attrs.rotation);
3383
- const newRadiusX = this._ref.radiusX() * attrs.scaleX;
3384
- const newRadiusY = this._ref.radiusY() * attrs.scaleY;
3380
+ if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
3381
+ const scaleByX = Math.abs(attrs.scaleX - 1) > 1e-5;
3382
+ const scaleByY = Math.abs(attrs.scaleY - 1) > 1e-5;
3383
+ let newRadiusX = this._ref.radiusX();
3384
+ if (scaleByX) newRadiusX *= attrs.scaleX;
3385
+ let newRadiusY = this._ref.radiusY();
3386
+ if (scaleByY) newRadiusY *= attrs.scaleY;
3385
3387
  const minRadiusX = 25;
3386
3388
  const minRadiusY = 25;
3387
- if (newRadiusX < minRadiusX || newRadiusY < minRadiusY) {
3388
- this._ref.scale({
3389
- x: 1,
3390
- y: 1
3389
+ if (newRadiusX < minRadiusX) newRadiusX = minRadiusX;
3390
+ if (newRadiusY < minRadiusY) newRadiusY = minRadiusY;
3391
+ if (e.evt.ctrlKey || e.evt.shiftKey) {
3392
+ if (scaleByX) {
3393
+ this._ref.radius({
3394
+ x: newRadiusX,
3395
+ y: newRadiusX
3396
+ });
3397
+ } else {
3398
+ this._ref.radius({
3399
+ x: newRadiusY,
3400
+ y: newRadiusY
3401
+ });
3402
+ }
3403
+ } else {
3404
+ this._ref.radius({
3405
+ x: newRadiusX,
3406
+ y: newRadiusY
3391
3407
  });
3392
- return;
3393
- }
3394
- if (Math.abs(attrs.scaleX - 1) > 1e-5) {
3395
- this.setRadiusX(newRadiusX);
3396
- }
3397
- if (Math.abs(attrs.scaleY - 1) > 1e-5) {
3398
- this.setRadiusY(newRadiusY);
3399
3408
  }
3400
3409
  this._ref.scale({
3401
3410
  x: 1,
@@ -3488,7 +3497,7 @@ class KonvaArrow {
3488
3497
  });
3489
3498
  this._ref.on("transform", (e => {
3490
3499
  const attrs = e.target.attrs;
3491
- if (attrs.rotation !== this.getRotation()) this.setRotation(attrs.rotation);
3500
+ if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
3492
3501
  }));
3493
3502
  this._ref.id(this._ref._id.toString());
3494
3503
  }
@@ -3595,14 +3604,28 @@ class KonvaImage {
3595
3604
  this._canvasImage.src = params.src;
3596
3605
  this._ref.on("transform", (e => {
3597
3606
  const attrs = e.target.attrs;
3598
- if (attrs.rotation !== this.getRotation()) this.setRotation(attrs.rotation);
3599
- const newWidth = this._ref.width() * attrs.scaleX;
3600
- const newHeight = this._ref.height() * attrs.scaleY;
3601
- if (Math.abs(attrs.scaleX - 1) > 1e-5) {
3602
- this.setWidth(newWidth);
3603
- }
3604
- if (Math.abs(attrs.scaleY - 1) > 1e-5) {
3605
- this.setHeight(newHeight);
3607
+ if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
3608
+ const scaleByX = Math.abs(attrs.scaleX - 1) > 1e-5;
3609
+ const scaleByY = Math.abs(attrs.scaleY - 1) > 1e-5;
3610
+ let newWidth = this._ref.width();
3611
+ if (scaleByX) newWidth *= attrs.scaleX;
3612
+ let newHeight = this._ref.height();
3613
+ if (scaleByY) newHeight *= attrs.scaleY;
3614
+ if (e.evt.ctrlKey || e.evt.shiftKey) {
3615
+ if (scaleByX) {
3616
+ this._ref.width(newWidth);
3617
+ this._ref.height(newWidth * this._ratio);
3618
+ } else {
3619
+ this._ref.width(newHeight / this._ratio);
3620
+ this._ref.height(newHeight);
3621
+ }
3622
+ } else {
3623
+ if (scaleByX) {
3624
+ this._ref.width(newWidth);
3625
+ }
3626
+ if (scaleByY) {
3627
+ this._ref.height(newHeight);
3628
+ }
3606
3629
  }
3607
3630
  this._ref.scale({
3608
3631
  x: 1,
@@ -3752,23 +3775,22 @@ class KonvaCloud {
3752
3775
  this._ref.className = "Cloud";
3753
3776
  this._ref.on("transform", (e => {
3754
3777
  const attrs = e.target.attrs;
3755
- if (attrs.rotation !== this.getRotation()) this.setRotation(attrs.rotation);
3756
- const newWidth = this._ref.width() * attrs.scaleX;
3757
- const newHeight = this._ref.height() * attrs.scaleY;
3778
+ if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
3779
+ const scaleByX = Math.abs(attrs.scaleX - 1) > 1e-5;
3780
+ const scaleByY = Math.abs(attrs.scaleY - 1) > 1e-5;
3781
+ let newWidth = this._ref.width();
3782
+ if (scaleByX) newWidth *= attrs.scaleX;
3783
+ let newHeight = this._ref.height();
3784
+ if (scaleByY) newHeight *= attrs.scaleY;
3758
3785
  const minWidth = 100;
3759
3786
  const minHeight = 100;
3760
- if (newWidth < minWidth || newHeight < minHeight) {
3761
- this._ref.scale({
3762
- x: 1,
3763
- y: 1
3764
- });
3765
- return;
3766
- }
3767
- if (Math.abs(attrs.scaleX - 1) > 1e-5) {
3768
- this.setWidth(newWidth);
3787
+ if (newWidth < minWidth) newWidth = minWidth;
3788
+ if (newHeight < minHeight) newHeight = minHeight;
3789
+ if (scaleByX) {
3790
+ this._ref.width(newWidth);
3769
3791
  }
3770
- if (Math.abs(attrs.scaleY - 1) > 1e-5) {
3771
- this.setHeight(newHeight);
3792
+ if (scaleByY) {
3793
+ this._ref.height(newHeight);
3772
3794
  }
3773
3795
  this._ref.scale({
3774
3796
  x: 1,
@@ -4201,7 +4223,8 @@ class KonvaMarkup {
4201
4223
  this._konvaLayer = layer;
4202
4224
  const transformer = new Konva.Transformer({
4203
4225
  shouldOverdrawWholeArea: false,
4204
- keepRatio: false
4226
+ keepRatio: false,
4227
+ flipEnabled: false
4205
4228
  });
4206
4229
  this._konvaTransformer = transformer;
4207
4230
  layer.add(transformer);