@anu3ev/fabric-image-editor 0.9.9 → 0.9.10

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 (2) hide show
  1. package/dist/main.js +260 -163
  2. package/package.json +1 -1
package/dist/main.js CHANGED
@@ -13573,208 +13573,200 @@ var cs = ({ anchors: e, bounds: t }) => {
13573
13573
  this._cacheAnchors({ activeObject: t });
13574
13574
  }
13575
13575
  _handleObjectMoving(e) {
13576
- let { target: t, e: n, transform: r } = e;
13576
+ let { target: t, transform: n } = e;
13577
13577
  if (!t) {
13578
13578
  this._clearSpacingContexts(), this._clearGuides();
13579
13579
  return;
13580
13580
  }
13581
- if (n?.ctrlKey) {
13582
- this._clearSpacingContexts(), this._clearGuides();
13583
- return;
13584
- }
13581
+ if (this._shouldAbortObjectMoving({
13582
+ target: t,
13583
+ event: e
13584
+ })) return;
13585
13585
  is({
13586
13586
  target: t,
13587
- transform: r
13587
+ transform: n
13588
13588
  }), !this.anchors.vertical.length && !this.anchors.horizontal.length && this._cacheAnchors({ activeObject: t });
13589
- let i = W({ object: t });
13590
- if (!i) {
13589
+ let r = W({ object: t });
13590
+ if (!r) {
13591
13591
  this._clearSpacingContexts(), this._clearGuides();
13592
13592
  return;
13593
13593
  }
13594
- let { canvas: a } = this, o = a.getZoom() || 1, s = 5 / o, { deltaX: c, deltaY: l } = Xo({
13595
- activeBounds: i,
13596
- threshold: s,
13594
+ let i = 5 / (this.canvas.getZoom() || 1), a = Xo({
13595
+ activeBounds: r,
13596
+ threshold: i,
13597
13597
  anchors: this.anchors
13598
13598
  });
13599
- if (c !== 0 || l !== 0) {
13600
- let { left: e = 0, top: n = 0 } = t;
13601
- t.set({
13602
- left: e + c,
13603
- top: n + l
13604
- }), t.setCoords(), i = W({ object: t }) ?? i;
13605
- }
13606
- let u = this._resolveCurrentTargetBounds({ activeObject: t }), d = this.spacingContexts.vertical || this.spacingContexts.horizontal ? 10 / o : s, f = $o({
13607
- activeBounds: i,
13608
- candidates: u,
13609
- threshold: d,
13610
- spacingPatterns: this.spacingPatterns,
13611
- previousContexts: this.spacingContexts,
13612
- switchDistance: 5
13613
- });
13614
- this.spacingContexts = f.contexts;
13615
- let p = f.deltaX !== 0 || f.deltaY !== 0;
13616
- if (p) {
13617
- let { left: e = 0, top: n = 0 } = t;
13618
- t.set({
13619
- left: e + f.deltaX,
13620
- top: n + f.deltaY
13621
- }), t.setCoords(), i = W({ object: t }) ?? i;
13622
- }
13623
- p || is({
13599
+ r = this._applyMovementDelta({
13624
13600
  target: t,
13625
- transform: r
13626
- });
13627
- let m = W({ object: t }) ?? i, h = Xo({
13628
- activeBounds: m,
13629
- threshold: s,
13630
- anchors: this.anchors
13631
- }), g = $o({
13632
- activeBounds: m,
13633
- candidates: u,
13634
- threshold: s,
13635
- spacingPatterns: this.spacingPatterns,
13636
- previousContexts: this.spacingContexts,
13637
- switchDistance: 5
13601
+ activeBounds: r,
13602
+ deltaX: a.deltaX,
13603
+ deltaY: a.deltaY
13604
+ });
13605
+ let o = this._resolveCurrentTargetBounds({ activeObject: t }), s = this._calculateSpacingResult({
13606
+ activeBounds: r,
13607
+ candidateBounds: o,
13608
+ threshold: i
13609
+ });
13610
+ this.spacingContexts = s.contexts;
13611
+ let c = s.deltaX !== 0 || s.deltaY !== 0;
13612
+ r = this._applyMovementDelta({
13613
+ target: t,
13614
+ activeBounds: r,
13615
+ deltaX: s.deltaX,
13616
+ deltaY: s.deltaY
13617
+ }), c || is({
13618
+ target: t,
13619
+ transform: n
13638
13620
  });
13639
- this.spacingContexts = g.contexts;
13640
- let _ = g.deltaX === 0 && g.deltaY === 0;
13641
- this._applyGuides({
13642
- guides: h.guides,
13643
- spacingGuides: _ ? g.guides : []
13621
+ let l = W({ object: t }) ?? r;
13622
+ this._applyMovementVisualGuides({
13623
+ activeBounds: l,
13624
+ candidateBounds: o,
13625
+ threshold: i
13644
13626
  });
13645
13627
  }
13646
13628
  _handleObjectScaling(t) {
13647
- let { target: n, e: r, transform: i } = t;
13648
- if (!n || !i) {
13629
+ let { target: n, transform: r } = t;
13630
+ if (!n || !r) {
13649
13631
  this._clearGuides();
13650
13632
  return;
13651
13633
  }
13652
- let a = rs({ target: n });
13653
- if (r?.ctrlKey) {
13654
- this._clearGuides(), a && ss({
13655
- target: n,
13656
- transform: i
13657
- });
13658
- return;
13659
- }
13660
- a && ss({
13634
+ let i = rs({ target: n });
13635
+ if (this._shouldAbortObjectScaling({
13661
13636
  target: n,
13662
- transform: i
13663
- });
13664
- let { shouldSnapX: o, shouldSnapY: s, isCornerHandle: c } = e._resolveScalingAxisState({ transform: i });
13665
- if (!o && !s) {
13637
+ transform: r,
13638
+ event: t,
13639
+ canApplyPixelScalingStep: i
13640
+ })) {
13666
13641
  this._clearGuides();
13667
13642
  return;
13668
13643
  }
13669
- let { anchors: l } = this, { vertical: u, horizontal: d } = l;
13670
- !u.length && !d.length && this._cacheAnchors({ activeObject: n });
13671
- let f = W({ object: n });
13672
- if (!f) {
13644
+ let { shouldSnapX: a, shouldSnapY: o, isCornerHandle: s } = e._resolveScalingAxisState({ transform: r });
13645
+ if (!a && !o) {
13673
13646
  this._clearGuides();
13674
13647
  return;
13675
13648
  }
13676
- let { canvas: p } = this, m = 5 / (p.getZoom() || 1), { originX: h, originY: g } = i, { originX: _ = "left", originY: v = "top", scaleX: y = 1, scaleY: b = 1 } = n, x = h ?? _, S = g ?? v, C = e._collectVerticalSnapCandidates({
13677
- bounds: f,
13678
- originX: x,
13679
- shouldSnapX: o
13680
- }), w = e._collectHorizontalSnapCandidates({
13681
- bounds: f,
13682
- originY: S,
13683
- shouldSnapY: s
13684
- }), T = e._findAxisSnapCandidate({
13685
- anchors: u,
13686
- candidates: C,
13687
- threshold: m
13688
- }), E = e._findAxisSnapCandidate({
13689
- anchors: d,
13690
- candidates: w,
13691
- threshold: m
13692
- }), { guidePosition: D } = T, { guidePosition: O } = E, k = D !== null, A = O !== null;
13693
- if (!k && !A) {
13649
+ let { anchors: c } = this, { vertical: l, horizontal: u } = c;
13650
+ !l.length && !u.length && this._cacheAnchors({ activeObject: n });
13651
+ let d = W({ object: n });
13652
+ if (!d) {
13694
13653
  this._clearGuides();
13695
13654
  return;
13696
13655
  }
13697
- let j = [], M = null, N = null;
13698
- if (c) {
13699
- let t = e._resolveUniformScale({
13700
- bounds: f,
13701
- originX: x,
13702
- originY: S,
13703
- verticalSnap: T,
13704
- horizontalSnap: E
13705
- });
13706
- if (t) {
13707
- let { scaleFactor: e, guide: n } = t;
13708
- M = y * e, N = b * e, j.push(n);
13709
- }
13710
- }
13711
- if (!c) {
13712
- let { angle: t = 0 } = n, { width: r, height: i } = e._resolveBaseDimensions({ target: n }), a = Math.abs(y) || 1, o = Math.abs(b) || 1;
13713
- if (k) {
13714
- let n = e._resolveDesiredWidth({
13715
- bounds: f,
13716
- originX: x,
13717
- snap: T
13718
- });
13719
- if (n !== null) {
13720
- let a = e._resolveScaleForWidth({
13721
- desiredWidth: n,
13722
- baseWidth: r,
13723
- baseHeight: i,
13724
- scaleY: o,
13725
- angle: t
13726
- });
13727
- a !== null && (M = a * (y < 0 ? -1 : 1), D !== null && j.push({
13728
- type: "vertical",
13729
- position: D
13730
- }));
13731
- }
13732
- }
13733
- if (A) {
13734
- let n = e._resolveDesiredHeight({
13735
- bounds: f,
13736
- originY: S,
13737
- snap: E
13738
- });
13739
- if (n !== null) {
13740
- let o = e._resolveScaleForHeight({
13741
- desiredHeight: n,
13742
- baseWidth: r,
13743
- baseHeight: i,
13744
- scaleX: a,
13745
- angle: t
13746
- });
13747
- o !== null && (N = o * (b < 0 ? -1 : 1), O !== null && j.push({
13748
- type: "horizontal",
13749
- position: O
13750
- }));
13751
- }
13752
- }
13753
- }
13754
- let P = M !== null || N !== null;
13755
- if (!P && !j.length) {
13656
+ let f = 5 / (this.canvas.getZoom() || 1), { originX: p, originY: m, scaleX: h, scaleY: g } = e._resolveScalingTransformState({
13657
+ target: n,
13658
+ transform: r
13659
+ }), _ = e._resolveScaleAxisSnaps({
13660
+ bounds: d,
13661
+ originX: p,
13662
+ originY: m,
13663
+ shouldSnapX: a,
13664
+ shouldSnapY: o,
13665
+ threshold: f,
13666
+ anchors: this.anchors
13667
+ });
13668
+ if (!_) {
13756
13669
  this._clearGuides();
13757
13670
  return;
13758
13671
  }
13759
- if (P) {
13760
- let e = this.editor.canvasManager.getObjectPlacement({
13761
- object: n,
13762
- originX: x,
13763
- originY: S
13764
- }), t = {};
13765
- M !== null && (t.scaleX = M, i.scaleX = M), N !== null && (t.scaleY = N, i.scaleY = N), Object.keys(t).length && (n.set(t), this.editor.canvasManager.applyObjectPlacement({
13766
- object: n,
13767
- placement: e
13768
- }), n.setCoords());
13672
+ let v = e._resolveScaleUpdatePlan({
13673
+ target: n,
13674
+ bounds: d,
13675
+ originX: p,
13676
+ originY: m,
13677
+ scaleX: h,
13678
+ scaleY: g,
13679
+ isCornerHandle: s,
13680
+ verticalSnap: _.verticalSnap,
13681
+ horizontalSnap: _.horizontalSnap
13682
+ });
13683
+ if (!v) {
13684
+ this._clearGuides();
13685
+ return;
13769
13686
  }
13770
- a && ss({
13687
+ this._applyScaleUpdatePlan({
13771
13688
  target: n,
13772
- transform: i
13689
+ transform: r,
13690
+ originX: p,
13691
+ originY: m,
13692
+ plan: v
13693
+ }), i && ss({
13694
+ target: n,
13695
+ transform: r
13773
13696
  }), this._applyGuides({
13774
- guides: j,
13697
+ guides: v.guides,
13775
13698
  spacingGuides: []
13776
13699
  });
13777
13700
  }
13701
+ _shouldAbortObjectMoving({ target: e, event: t }) {
13702
+ return t.e?.ctrlKey ? (this._clearSpacingContexts(), this._clearGuides(), !0) : this._shouldHideOverflowingCropFrameGuides({
13703
+ target: e,
13704
+ clearSpacingContexts: !0
13705
+ });
13706
+ }
13707
+ _shouldAbortObjectScaling({ target: e, transform: t, event: n, canApplyPixelScalingStep: r }) {
13708
+ return n.e?.ctrlKey ? (this._clearGuides(), r && ss({
13709
+ target: e,
13710
+ transform: t
13711
+ }), !0) : (r && ss({
13712
+ target: e,
13713
+ transform: t
13714
+ }), this._shouldHideOverflowingCropFrameGuides({ target: e }));
13715
+ }
13716
+ _shouldHideOverflowingCropFrameGuides({ target: e, clearSpacingContexts: t = !1 }) {
13717
+ return this.editor.cropManager.isFrameOverflowingSource({ target: e }) ? (t && this._clearSpacingContexts(), this._clearGuides(), !0) : !1;
13718
+ }
13719
+ _applyMovementDelta({ target: e, activeBounds: t, deltaX: n, deltaY: r }) {
13720
+ if (n === 0 && r === 0) return t;
13721
+ let { left: i = 0, top: a = 0 } = e;
13722
+ return e.set({
13723
+ left: i + n,
13724
+ top: a + r
13725
+ }), e.setCoords(), W({ object: e }) ?? t;
13726
+ }
13727
+ _calculateSpacingResult({ activeBounds: e, candidateBounds: t, threshold: n }) {
13728
+ return $o({
13729
+ activeBounds: e,
13730
+ candidates: t,
13731
+ threshold: this.spacingContexts.vertical || this.spacingContexts.horizontal ? 10 / (this.canvas.getZoom() || 1) : n,
13732
+ spacingPatterns: this.spacingPatterns,
13733
+ previousContexts: this.spacingContexts,
13734
+ switchDistance: 5
13735
+ });
13736
+ }
13737
+ _applyMovementVisualGuides({ activeBounds: e, candidateBounds: t, threshold: n }) {
13738
+ let r = Xo({
13739
+ activeBounds: e,
13740
+ threshold: n,
13741
+ anchors: this.anchors
13742
+ }), i = $o({
13743
+ activeBounds: e,
13744
+ candidates: t,
13745
+ threshold: n,
13746
+ spacingPatterns: this.spacingPatterns,
13747
+ previousContexts: this.spacingContexts,
13748
+ switchDistance: 5
13749
+ });
13750
+ this.spacingContexts = i.contexts;
13751
+ let a = i.deltaX === 0 && i.deltaY === 0;
13752
+ this._applyGuides({
13753
+ guides: r.guides,
13754
+ spacingGuides: a ? i.guides : []
13755
+ });
13756
+ }
13757
+ _applyScaleUpdatePlan({ target: e, transform: t, originX: n, originY: r, plan: i }) {
13758
+ let { nextScaleX: a, nextScaleY: o } = i;
13759
+ if (a === null && o === null) return;
13760
+ let s = this.editor.canvasManager.getObjectPlacement({
13761
+ object: e,
13762
+ originX: n,
13763
+ originY: r
13764
+ }), c = {};
13765
+ a !== null && (c.scaleX = a, t.scaleX = a), o !== null && (c.scaleY = o, t.scaleY = o), e.set(c), this.editor.canvasManager.applyObjectPlacement({
13766
+ object: e,
13767
+ placement: s
13768
+ }), e.setCoords();
13769
+ }
13778
13770
  applyTextResizingSnap({ target: t, transform: n, event: r }) {
13779
13771
  if (!t || !(t instanceof v)) return;
13780
13772
  if (!n) {
@@ -13901,6 +13893,102 @@ var cs = ({ anchors: e, bounds: t }) => {
13901
13893
  shouldSnapY: i || a
13902
13894
  };
13903
13895
  }
13896
+ static _resolveScalingTransformState({ target: e, transform: t }) {
13897
+ let { originX: n, originY: r } = t, { originX: i = "left", originY: a = "top", scaleX: o = 1, scaleY: s = 1 } = e;
13898
+ return {
13899
+ originX: n ?? i,
13900
+ originY: r ?? a,
13901
+ scaleX: o,
13902
+ scaleY: s
13903
+ };
13904
+ }
13905
+ static _resolveScaleAxisSnaps({ bounds: t, originX: n, originY: r, shouldSnapX: i, shouldSnapY: a, threshold: o, anchors: s }) {
13906
+ let c = e._collectVerticalSnapCandidates({
13907
+ bounds: t,
13908
+ originX: n,
13909
+ shouldSnapX: i
13910
+ }), l = e._collectHorizontalSnapCandidates({
13911
+ bounds: t,
13912
+ originY: r,
13913
+ shouldSnapY: a
13914
+ }), u = e._findAxisSnapCandidate({
13915
+ anchors: s.vertical,
13916
+ candidates: c,
13917
+ threshold: o
13918
+ }), d = e._findAxisSnapCandidate({
13919
+ anchors: s.horizontal,
13920
+ candidates: l,
13921
+ threshold: o
13922
+ });
13923
+ return u.guidePosition === null && d.guidePosition === null ? null : {
13924
+ verticalSnap: u,
13925
+ horizontalSnap: d
13926
+ };
13927
+ }
13928
+ static _resolveScaleUpdatePlan({ target: t, bounds: n, originX: r, originY: i, scaleX: a, scaleY: o, isCornerHandle: s, verticalSnap: c, horizontalSnap: l }) {
13929
+ let { guidePosition: u } = c, { guidePosition: d } = l, f = u !== null, p = d !== null, m = [], h = null, g = null;
13930
+ if (s) {
13931
+ let t = e._resolveUniformScale({
13932
+ bounds: n,
13933
+ originX: r,
13934
+ originY: i,
13935
+ verticalSnap: c,
13936
+ horizontalSnap: l
13937
+ });
13938
+ if (t) {
13939
+ let { scaleFactor: e, guide: n } = t;
13940
+ h = a * e, g = o * e, m.push(n);
13941
+ }
13942
+ }
13943
+ if (!s) {
13944
+ let { angle: s = 0 } = t, { width: _, height: v } = e._resolveBaseDimensions({ target: t }), y = Math.abs(a) || 1, b = Math.abs(o) || 1;
13945
+ if (f) {
13946
+ let t = e._resolveDesiredWidth({
13947
+ bounds: n,
13948
+ originX: r,
13949
+ snap: c
13950
+ });
13951
+ if (t !== null) {
13952
+ let n = e._resolveScaleForWidth({
13953
+ desiredWidth: t,
13954
+ baseWidth: _,
13955
+ baseHeight: v,
13956
+ scaleY: b,
13957
+ angle: s
13958
+ });
13959
+ n !== null && (h = n * (a < 0 ? -1 : 1), m.push({
13960
+ type: "vertical",
13961
+ position: u
13962
+ }));
13963
+ }
13964
+ }
13965
+ if (p) {
13966
+ let t = e._resolveDesiredHeight({
13967
+ bounds: n,
13968
+ originY: i,
13969
+ snap: l
13970
+ });
13971
+ if (t !== null) {
13972
+ let n = e._resolveScaleForHeight({
13973
+ desiredHeight: t,
13974
+ baseWidth: _,
13975
+ baseHeight: v,
13976
+ scaleX: y,
13977
+ angle: s
13978
+ });
13979
+ n !== null && (g = n * (o < 0 ? -1 : 1), m.push({
13980
+ type: "horizontal",
13981
+ position: d
13982
+ }));
13983
+ }
13984
+ }
13985
+ }
13986
+ return h === null && g === null && !m.length ? null : {
13987
+ guides: m,
13988
+ nextScaleX: h,
13989
+ nextScaleY: g
13990
+ };
13991
+ }
13904
13992
  static _collectVerticalSnapCandidates({ bounds: e, originX: t, shouldSnapX: n }) {
13905
13993
  let r = [];
13906
13994
  if (!n) return r;
@@ -14987,6 +15075,15 @@ var Fc = {
14987
15075
  rect: xc({ session: e })
14988
15076
  } : null;
14989
15077
  }
15078
+ isFrameOverflowingSource({ target: e }) {
15079
+ let { _session: t } = this;
15080
+ if (!t || !e || t.options.allowFrameOverflow || t.frame !== e) return !1;
15081
+ let n = ws({
15082
+ source: t.source,
15083
+ frame: t.frame
15084
+ }), r = Cs({ source: t.source }), i = -r.width / 2, a = -r.height / 2, o = r.width / 2, s = r.height / 2;
15085
+ return n.left < i || n.top < a || n.left + n.width > o || n.top + n.height > s;
15086
+ }
14990
15087
  startCanvasCrop(e = {}) {
14991
15088
  this.cancel();
14992
15089
  let t = this._createCanvasSession({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anu3ev/fabric-image-editor",
3
- "version": "0.9.9",
3
+ "version": "0.9.10",
4
4
  "description": "TypeScript image editor library built on FabricJS, allowing you to create instances with an integrated montage area and providing an API to modify and manage state.",
5
5
  "module": "dist/main.js",
6
6
  "files": [