@effing/canvas 0.21.0 → 0.21.1

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.
package/dist/index.js CHANGED
@@ -880,37 +880,133 @@ function drawBorders(ctx, x, y, width, height, style, borderRadius) {
880
880
  }
881
881
  return;
882
882
  }
883
- if (tw > 0) {
884
- ctx.strokeStyle = tc;
885
- ctx.lineWidth = tw;
886
- ctx.beginPath();
887
- ctx.moveTo(x, y + tw / 2);
888
- ctx.lineTo(x + width, y + tw / 2);
889
- ctx.stroke();
890
- }
891
- if (rw > 0) {
892
- ctx.strokeStyle = rc;
893
- ctx.lineWidth = rw;
894
- ctx.beginPath();
895
- ctx.moveTo(x + width - rw / 2, y);
896
- ctx.lineTo(x + width - rw / 2, y + height);
897
- ctx.stroke();
898
- }
899
- if (bw > 0) {
900
- ctx.strokeStyle = bc;
901
- ctx.lineWidth = bw;
902
- ctx.beginPath();
903
- ctx.moveTo(x, y + height - bw / 2);
904
- ctx.lineTo(x + width, y + height - bw / 2);
905
- ctx.stroke();
906
- }
907
- if (lw > 0) {
908
- ctx.strokeStyle = lc;
909
- ctx.lineWidth = lw;
910
- ctx.beginPath();
911
- ctx.moveTo(x + lw / 2, y);
912
- ctx.lineTo(x + lw / 2, y + height);
913
- ctx.stroke();
883
+ if (hasRoundedCorners) {
884
+ const maxR = Math.min(width, height) / 2;
885
+ const tl = Math.min(borderRadius.topLeft, maxR);
886
+ const tr = Math.min(borderRadius.topRight, maxR);
887
+ const br = Math.min(borderRadius.bottomRight, maxR);
888
+ const bl = Math.min(borderRadius.bottomLeft, maxR);
889
+ const top = y + tw / 2;
890
+ const right = x + width - rw / 2;
891
+ const bottom = y + height - bw / 2;
892
+ const left = x + lw / 2;
893
+ const eTL = Math.max(0, tl - Math.max(tw, lw) / 2);
894
+ const eTR = Math.max(0, tr - Math.max(tw, rw) / 2);
895
+ const eBR = Math.max(0, br - Math.max(bw, rw) / 2);
896
+ const eBL = Math.max(0, bl - Math.max(bw, lw) / 2);
897
+ if (tw > 0) {
898
+ ctx.strokeStyle = tc;
899
+ ctx.lineWidth = tw;
900
+ ctx.beginPath();
901
+ if (eTL > 0 && lw === 0) {
902
+ ctx.moveTo(left, top + eTL);
903
+ ctx.arcTo(left, top, left + eTL, top, eTL);
904
+ } else if (eTL > 0) {
905
+ ctx.moveTo(left + eTL, top);
906
+ } else {
907
+ ctx.moveTo(x, top);
908
+ }
909
+ if (eTR > 0) {
910
+ ctx.lineTo(right - eTR, top);
911
+ ctx.arcTo(right, top, right, top + eTR, eTR);
912
+ } else {
913
+ ctx.lineTo(x + width, top);
914
+ }
915
+ ctx.stroke();
916
+ }
917
+ if (rw > 0) {
918
+ ctx.strokeStyle = rc;
919
+ ctx.lineWidth = rw;
920
+ ctx.beginPath();
921
+ if (eTR > 0 && tw === 0) {
922
+ ctx.moveTo(right - eTR, top);
923
+ ctx.arcTo(right, top, right, top + eTR, eTR);
924
+ } else if (eTR > 0) {
925
+ ctx.moveTo(right, top + eTR);
926
+ } else {
927
+ ctx.moveTo(right, y);
928
+ }
929
+ if (eBR > 0) {
930
+ ctx.lineTo(right, bottom - eBR);
931
+ ctx.arcTo(right, bottom, right - eBR, bottom, eBR);
932
+ } else {
933
+ ctx.lineTo(right, y + height);
934
+ }
935
+ ctx.stroke();
936
+ }
937
+ if (bw > 0) {
938
+ ctx.strokeStyle = bc;
939
+ ctx.lineWidth = bw;
940
+ ctx.beginPath();
941
+ if (eBR > 0 && rw === 0) {
942
+ ctx.moveTo(right, bottom - eBR);
943
+ ctx.arcTo(right, bottom, right - eBR, bottom, eBR);
944
+ } else if (eBR > 0) {
945
+ ctx.moveTo(right - eBR, bottom);
946
+ } else {
947
+ ctx.moveTo(x + width, bottom);
948
+ }
949
+ if (eBL > 0) {
950
+ ctx.lineTo(left + eBL, bottom);
951
+ ctx.arcTo(left, bottom, left, bottom - eBL, eBL);
952
+ } else {
953
+ ctx.lineTo(x, bottom);
954
+ }
955
+ ctx.stroke();
956
+ }
957
+ if (lw > 0) {
958
+ ctx.strokeStyle = lc;
959
+ ctx.lineWidth = lw;
960
+ ctx.beginPath();
961
+ if (eBL > 0 && bw === 0) {
962
+ ctx.moveTo(left + eBL, bottom);
963
+ ctx.arcTo(left, bottom, left, bottom - eBL, eBL);
964
+ } else if (eBL > 0) {
965
+ ctx.moveTo(left, bottom - eBL);
966
+ } else {
967
+ ctx.moveTo(left, y + height);
968
+ }
969
+ if (eTL > 0) {
970
+ ctx.lineTo(left, top + eTL);
971
+ ctx.arcTo(left, top, left + eTL, top, eTL);
972
+ } else {
973
+ ctx.lineTo(left, y);
974
+ }
975
+ ctx.stroke();
976
+ }
977
+ } else {
978
+ if (tw > 0) {
979
+ ctx.strokeStyle = tc;
980
+ ctx.lineWidth = tw;
981
+ ctx.beginPath();
982
+ ctx.moveTo(x, y + tw / 2);
983
+ ctx.lineTo(x + width, y + tw / 2);
984
+ ctx.stroke();
985
+ }
986
+ if (rw > 0) {
987
+ ctx.strokeStyle = rc;
988
+ ctx.lineWidth = rw;
989
+ ctx.beginPath();
990
+ ctx.moveTo(x + width - rw / 2, y);
991
+ ctx.lineTo(x + width - rw / 2, y + height);
992
+ ctx.stroke();
993
+ }
994
+ if (bw > 0) {
995
+ ctx.strokeStyle = bc;
996
+ ctx.lineWidth = bw;
997
+ ctx.beginPath();
998
+ ctx.moveTo(x, y + height - bw / 2);
999
+ ctx.lineTo(x + width, y + height - bw / 2);
1000
+ ctx.stroke();
1001
+ }
1002
+ if (lw > 0) {
1003
+ ctx.strokeStyle = lc;
1004
+ ctx.lineWidth = lw;
1005
+ ctx.beginPath();
1006
+ ctx.moveTo(x + lw / 2, y);
1007
+ ctx.lineTo(x + lw / 2, y + height);
1008
+ ctx.stroke();
1009
+ }
914
1010
  }
915
1011
  }
916
1012
  function drawBoxShadow(ctx, x, y, width, height, boxShadow, borderRadius) {
@@ -2853,36 +2949,6 @@ async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewport
2853
2949
  yogaNode
2854
2950
  };
2855
2951
  }
2856
- if (Array.isArray(element)) {
2857
- const style2 = resolveStyle(void 0, parentStyle);
2858
- const children2 = [];
2859
- for (let i = 0; i < element.length; i++) {
2860
- const child = element[i];
2861
- if (child === null || child === void 0 || typeof child === "boolean")
2862
- continue;
2863
- const childYogaNode = createYogaNode();
2864
- yogaNode.insertChild(childYogaNode, children2.length);
2865
- children2.push(
2866
- await buildNode(
2867
- child,
2868
- style2,
2869
- childYogaNode,
2870
- viewportWidth,
2871
- viewportHeight,
2872
- ctx,
2873
- emojiEnabled,
2874
- fontFamilies
2875
- )
2876
- );
2877
- }
2878
- return {
2879
- type: "div",
2880
- style: style2,
2881
- children: children2,
2882
- props: {},
2883
- yogaNode
2884
- };
2885
- }
2886
2952
  const el = element;
2887
2953
  const type = el.type;
2888
2954
  if (typeof type === "function") {
@@ -3006,7 +3072,7 @@ async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewport
3006
3072
  const children = [];
3007
3073
  const rawChildren = props.children;
3008
3074
  if (rawChildren !== void 0 && rawChildren !== null) {
3009
- const childArray = Array.isArray(rawChildren) ? rawChildren : [rawChildren];
3075
+ const childArray = Array.isArray(rawChildren) ? rawChildren.flat(Infinity) : [rawChildren];
3010
3076
  for (const child of childArray) {
3011
3077
  if (child === null || child === void 0 || typeof child === "boolean")
3012
3078
  continue;