FilesExpand file tree

 master

/

commonPosition.ts

Copy path

Blame

More file actions

Blame

More file actions

Latest commit

 

History

History

History

103 lines (89 loc) · 2.71 KB

 master

/

commonPosition.ts

Copy path

Top

File metadata and controls

• Code
• Blame

103 lines (89 loc) · 2.71 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

import { AltSceneNode } from "../altNodes/altMixins";

import { parentCoordinates } from "./parentCoordinates";

type position =

| ""

| "Absolute"

| "TopStart"

| "TopCenter"

| "TopEnd"

| "CenterStart"

| "Center"

| "CenterEnd"

| "BottomStart"

| "BottomCenter"

| "BottomEnd";

export const commonPosition = (node: AltSceneNode): position => {

// if node is same size as height, position is not necessary

// detect if Frame's width is same as Child when Frame has Padding.

// warning: this may return true even when false, if size is same, but position is different. However, it would be an unexpected layout.

let hPadding = 0;

let vPadding = 0;

if (node.parent && "layoutMode" in node.parent) {

hPadding = (node.parent.paddingLeft ?? 0) + (node.parent.paddingRight ?? 0);

vPadding = (node.parent.paddingTop ?? 0) + (node.parent.paddingBottom ?? 0);

}

if (

!node.parent ||

(node.width === node.parent.width - hPadding &&

node.height === node.parent.height - vPadding)

) {

return "";

}

// position is absolute, parent is relative

// return "absolute inset-0 m-auto ";

const [parentX, parentY] = parentCoordinates(node.parent);

// if view is too small, anything will be detected; this is necessary to reduce the tolerance.

let threshold = 8;

if (node.width < 16 || node.height < 16) {

threshold = 1;

}

// < 4 is a threshold. If === is used, there can be rounding errors (28.002 !== 28)

const centerX =

Math.abs(2 * (node.x - parentX) + node.width - node.parent.width) <

threshold;

const centerY =

Math.abs(2 * (node.y - parentY) + node.height - node.parent.height) <

threshold;

const minX = node.x - parentX < threshold;

const minY = node.y - parentY < threshold;

const maxX = node.parent.width - (node.x - parentX + node.width) < threshold;

const maxY =

node.parent.height - (node.y - parentY + node.height) < threshold;

// this needs to be on top, because Tailwind is incompatible with Center, so this will give preference.

if (minX && minY) {

// x left, y top

return "TopStart";

} else if (minX && maxY) {

// x left, y bottom

return "BottomStart";

} else if (maxX && minY) {

// x right, y top

return "TopEnd";

} else if (maxX && maxY) {

// x right, y bottom

return "BottomEnd";

}

if (centerX && centerY) {

return "Center";

}

if (centerX) {

if (minY) {

// x center, y top

return "TopCenter";

}

if (maxY) {

// x center, y bottom

return "BottomCenter";

}

} else if (centerY) {

if (minX) {

// x left, y center

return "CenterStart";

}

if (maxX) {

// x right, y center

return "CenterEnd";

}

}

return "Absolute";

};