OROR Forge: Figma to Code 도구 제작기 (1) 디자인을 코드로 만들어보자!

				
					const rect1 = node.parent.absoluteBoundingBox
const rect2 = node.absoluteBoundingBox


if (!rect1 || !rect2) {
 return
}


const {horizontal = "MIN", vertical = "MIN"} = node.constraints ?? {}


const x = rect2.x - rect1.x
const y = rect2.y - rect1.y
const right = rect1.x + rect1.width - rect2.x - rect2.width
const bottom = rect1.y + rect1.height - rect2.y - rect2.height


const offsetXFromCenter = rect2.x - rect1.x - (rect1.width / 2 - rect2.width / 2)
const offsetYFromCenter = rect2.y - rect1.y - (rect1.height / 2 - rect2.height / 2)


const percentLeft = (x / rect1.width) * 100
const percentRight = (right / rect1.width) * 100


const percentTop = (y / rect1.height) * 100
const percentBottom = (bottom / rect1.height) * 100


// position: absolute
addStyle("position", "absolute")


// 'CENTER' origin
if (horizontal === "CENTER" && vertical === "CENTER") {
 addStyle("transform", "translate(-50%,-50%)")
} else if (horizontal === "CENTER") {
 addStyle("transform", "translateX(-50%)")
} else if (vertical === "CENTER") {
 addStyle("transform", "translateY(-50%)")
}


// x: 'MIN' | 'CENTER' | 'MAX' | 'STRETCH' | 'SCALE'
switch (horizontal) {
 case "MIN": {
   addStyle("left", px(x))
   break
 }
 case "MAX": {
   addStyle("right", px(right))
   break
 }
 case "CENTER": {
   if (Math.abs(offsetXFromCenter) <= 1) addStyle("left", "50%")
   else addStyle("left", `calc(50% + ${px(offsetXFromCenter)})`)
   break
 }
 case "STRETCH": {
   addStyle("left", px(x))
   addStyle("right", px(right))
   break
 }
 case "SCALE": {
   addStyle("left", percent(percentLeft))
   addStyle("right", percent(percentRight))
 }
}