오브젝트 3각도머 작업

src/components/fabric/QPolygon.js

@@ -121,13 +121,13 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
 
     this.on('modified', (e) => {
       this.addLengthText()
-      if (this.arrow) {
+      // if (this.arrow) {
-        drawDirectionArrow(this)
+      //   drawDirectionArrow(this)
-      }
+      // }
     })
 
     this.on('selected', () => {
-      drawDirectionArrow(this)
+      // drawDirectionArrow(this)
       Object.keys(this.controls).forEach((controlKey) => {
         if (controlKey !== 'ml' && controlKey !== 'mr') {
           this.setControlVisible(controlKey, false)

src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx

@@ -1,3 +1,4 @@
+import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { useState } from 'react'
 import PowerConditionalSelect from '@/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect'
 import CircuitAllocation from '@/components/floor-plan/modal/circuitTrestle/step/CircuitAllocation'

src/components/floor-plan/modal/object/ObjectSetting.jsx

@@ -1,13 +1,13 @@
 'use client'
 
-import { useState, useRef } from 'react'
+import { useState, useRef, useEffect } from 'react'
 import { useRecoilValue } from 'recoil'
 import { useMessage } from '@/hooks/useMessage'
 import { useEvent } from '@/hooks/useEvent'
 import { canvasState } from '@/store/canvasAtom'
 import { useSwal } from '@/hooks/useSwal'
 import { useObjectBatch } from '@/hooks/object/useObjectBatch'
-
+import { POLYGON_TYPE } from '@/common/common'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 import OpenSpace from '@/components/floor-plan/modal/object/type/OpenSpace'
 import Shadow from '@/components/floor-plan/modal/object/type/Shadow'
@@ -19,7 +19,17 @@ export default function ObjectSetting({ setShowObjectSettingModal }) {
   const canvas = useRecoilValue(canvasState)
   const [buttonAct, setButtonAct] = useState(1)
   const { swalFire } = useSwal()
-  const { applyOpeningAndShadow } = useObjectBatch()
+  const { applyOpeningAndShadow, applyDormers } = useObjectBatch()
+
+  const surfaceShapePolygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
+
+  //오브젝트 배치로 넘어오면 면형상 선택 불가
+  useEffect(() => {
+    canvas.discardActiveObject()
+    surfaceShapePolygons.forEach((obj) => {
+      obj.set({ selectable: false })
+    })
+  }, [])
 
   /**
    * 개구배치, 그림자배치
@@ -31,17 +41,28 @@ export default function ObjectSetting({ setShowObjectSettingModal }) {
     isCrossRef: useRef(null),
   }
 
-  const applyObject = () => {
+  const dormerPlacement = {
-    const surfaceShapePolygons = canvas?.getObjects().filter((obj) => obj.name === 'surfaceShapeBatch')
+    widthRef: useRef(null),
+    heightRef: useRef(null),
+    pitchRef: useRef(null),
+    offsetRef: useRef(null),
+    directionRef: useRef(null),
+  }
 
-    if (surfaceShapePolygons.length === 0) {
+  const applyObject = () => {
-      swalFire({ text: '지붕이 없어요 지붕부터 그리세요', icon: 'error' })
+    // if (surfaceShapePolygons.length === 0) {
-      return
+    //   swalFire({ text: '지붕이 없어요 지붕부터 그리세요', icon: 'error' })
-    }
+    //   return
+    // }
 
     //개구배치, 그림자배치
+
+    console.log(surfaceShapePolygons)
+
     if (buttonAct === 1 || buttonAct === 2) {
-      applyOpeningAndShadow(objectPlacement, buttonAct, surfaceShapePolygons, setShowObjectSettingModal)
+      applyOpeningAndShadow(objectPlacement, buttonAct, surfaceShapePolygons)
+    } else {
+      applyDormers(dormerPlacement, buttonAct, surfaceShapePolygons)
     }
   }
 
@@ -72,8 +93,8 @@ export default function ObjectSetting({ setShowObjectSettingModal }) {
             <div className="setting-tit">{getMessage('setting')}</div>
             {buttonAct === 1 && <OpenSpace ref={objectPlacement} />}
             {buttonAct === 2 && <Shadow ref={objectPlacement} />}
-            {buttonAct === 3 && <TriangleDormer />}
+            {buttonAct === 3 && <TriangleDormer ref={dormerPlacement} />}
-            {buttonAct === 4 && <PentagonDormer />}
+            {buttonAct === 4 && <PentagonDormer ref={dormerPlacement} />}
           </div>
           <div className="grid-btn-wrap">
             <button

src/components/floor-plan/modal/object/type/TriangleDormer.jsx

@@ -1,8 +1,18 @@
 import Image from 'next/image'
 import { useMessage } from '@/hooks/useMessage'
+import { forwardRef, useState } from 'react'
 
-export default function TriangleDormer() {
+const TriangleDormer = forwardRef((props, refs) => {
   const { getMessage } = useMessage()
+  const [direction, setDirection] = useState('down')
+
+  refs.directionRef.current = direction
+
+  const getDirection = (e) => {
+    setDirection(e.target.value)
+    refs.directionRef.current = e.target.value
+  }
+
   return (
     <>
       <div className="discrimination-box mb10">
@@ -18,7 +28,7 @@ export default function TriangleDormer() {
                 <div className="eaves-keraba-td">
                   <div className="outline-form">
                     <div className="input-grid mr5" style={{ width: '60px' }}>
-                      <input type="text" className="input-origin block" defaultValue={2000} />
+                      <input type="text" className="input-origin block" placeholder={0} ref={refs.heightRef} defaultValue={1500} />
                     </div>
                     <span className="thin">mm</span>
                   </div>
@@ -29,7 +39,7 @@ export default function TriangleDormer() {
                 <div className="eaves-keraba-td">
                   <div className="outline-form">
                     <div className="input-grid mr5" style={{ width: '60px' }}>
-                      <input type="text" className="input-origin block" defaultValue={1000} />
+                      <input type="text" className="input-origin block" placeholder={0} ref={refs.offsetRef} />
                     </div>
                     <span className="thin">mm</span>
                   </div>
@@ -40,7 +50,7 @@ export default function TriangleDormer() {
                 <div className="eaves-keraba-td">
                   <div className="outline-form">
                     <div className="input-grid mr5" style={{ width: '60px' }}>
-                      <input type="text" className="input-origin block" defaultValue={4} />
+                      <input type="text" className="input-origin block" placeholder={0} ref={refs.pitchRef} defaultValue={4} />
                     </div>
                     <span className="thin">寸</span>
                   </div>
@@ -58,13 +68,15 @@ export default function TriangleDormer() {
             <span className="right">{getMessage('commons.east')}</span>
             <span className="bottom">{getMessage('commons.south')}</span>
             <span className="left">{getMessage('commons.west')}</span>
-            <button className="plane-btn up"></button>
+            <button className={`plane-btn up ${direction === 'up' ? ' act' : ''}`} value="up" onClick={getDirection}></button>
-            <button className="plane-btn right"></button>
+            <button className={`plane-btn right ${direction === 'right' ? ' act' : ''}`} value="right" onClick={getDirection}></button>
-            <button className="plane-btn down act"></button>
+            <button className={`plane-btn down ${direction === 'down' ? ' act' : ''}`} value="down" onClick={getDirection}></button>
-            <button className="plane-btn left"></button>
+            <button className={`plane-btn left ${direction === 'left' ? ' act' : ''}`} value="left" onClick={getDirection}></button>
           </div>
         </div>
       </div>
     </>
   )
-}
+})
+
+export default TriangleDormer

src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx

@@ -4,17 +4,29 @@ import { useEffect, useState, useRef } from 'react'
 import Image from 'next/image'
 import PlacementSurface from '@/components/floor-plan/modal/placementSurface/PlacementSurface'
 import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
+import { useRecoilValue } from 'recoil'
+import { canvasState } from '@/store/canvasAtom'
+import { POLYGON_TYPE } from '@/common/common'
 
 export default function PlacementSurfaceSetting({ setShowPlacementSurfaceSettingModal }) {
   const { getMessage } = useMessage()
-
   const [selectedType, setSelectedType] = useState()
   const [rotate, setRotate] = useState(0)
   const [xInversion, setXInversion] = useState(false)
   const [yInversion, setYInversion] = useState(false)
+  const canvas = useRecoilValue(canvasState)
 
   const { applySurfaceShape } = useSurfaceShapeBatch()
 
+  const surfaceShapePolygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
+
+  //오브젝트 배치에서 넘어오면 면형상 선택 가능
+  useEffect(() => {
+    surfaceShapePolygons.forEach((obj) => {
+      obj.set({ selectable: true })
+    })
+  }, [])
+
   const surfaceRefs = {
     length1: useRef(null),
     length2: useRef(null),

src/hooks/object/useObjectBatch.js

@@ -4,9 +4,18 @@ import { useRecoilState, useRecoilValue } from 'recoil'
 import { canvasState } from '@/store/canvasAtom'
 import { INPUT_TYPE, BATCH_TYPE } from '@/common/common'
 import { useEvent } from '@/hooks/useEvent'
-import { polygonToTurfPolygon, rectToPolygon, pointsToTurfPolygon } from '@/util/canvas-util'
+import {
+  polygonToTurfPolygon,
+  rectToPolygon,
+  triangleToPolygon,
+  pointsToTurfPolygon,
+  splitDormerTriangle,
+  setSurfaceShapePattern,
+} from '@/util/canvas-util'
 import { useSwal } from '@/hooks/useSwal'
 import * as turf from '@turf/turf'
+import { QPolygon } from '@/components/fabric/QPolygon'
+import { drawDirectionArrow } from '@/util/qpolygon-utils'
 
 export function useObjectBatch() {
   const { getMessage } = useMessage()
@@ -14,11 +23,11 @@ export function useObjectBatch() {
   const { addCanvasMouseEventListener, initEvent } = useEvent()
   const { swalFire } = useSwal()
 
-  const applyOpeningAndShadow = (objectPlacement, buttonAct, surfaceShapePolygons, setShowObjectSettingModal) => {
+  const applyOpeningAndShadow = (objectPlacement, buttonAct, surfaceShapePolygons) => {
     const selectedType = objectPlacement.typeRef.current.find((radio) => radio.checked).value
     const isCrossChecked = buttonAct === 1 ? objectPlacement.isCrossRef.current.checked : false
-    const objTempName = buttonAct === 1 ? BATCH_TYPE.OPENING_TEMP : BATCH_TYPE.SHADOW_TEMP
     const objName = buttonAct === 1 ? BATCH_TYPE.OPENING : BATCH_TYPE.SHADOW
+    const objTempName = buttonAct === 1 ? BATCH_TYPE.OPENING_TEMP : BATCH_TYPE.SHADOW_TEMP
 
     let rect, isDown, origX, origY
     let selectedSurface
@@ -94,7 +103,7 @@ export function useObjectBatch() {
           if (!turf.booleanWithin(rectPolygon, selectedSurfacePolygon)) {
             swalFire({ text: '개구를 배치할 수 없습니다.', icon: 'error' })
             //일단 지워
-            deleteTempObjects(setShowObjectSettingModal)
+            deleteTempObjects()
             return
           }
 
@@ -105,7 +114,7 @@ export function useObjectBatch() {
 
             if (isCross) {
               swalFire({ text: '겹치기 불가요...', icon: 'error' })
-              deleteTempObjects(setShowObjectSettingModal)
+              deleteTempObjects()
               return
             }
           }
@@ -173,7 +182,7 @@ export function useObjectBatch() {
           if (!turf.booleanWithin(rectPolygon, selectedSurfacePolygon)) {
             swalFire({ text: '개구를 배치할 수 없습니다.', icon: 'error' })
             //일단 지워
-            deleteTempObjects(setShowObjectSettingModal)
+            deleteTempObjects()
             return
           }
 
@@ -184,7 +193,7 @@ export function useObjectBatch() {
 
             if (isCross) {
               swalFire({ text: '겹치기 불가요...', icon: 'error' })
-              deleteTempObjects(setShowObjectSettingModal)
+              deleteTempObjects()
               return
             }
           }
@@ -198,13 +207,209 @@ export function useObjectBatch() {
     }
   }
 
-  const deleteTempObjects = (setShowObjectSettingModal) => {
+  const applyDormers = (dormerPlacement, buttonAct, surfaceShapePolygons) => {
-    const deleteTarget = canvas?.getObjects().filter((obj) => obj.name === BATCH_TYPE.OPENING_TEMP || obj.name === BATCH_TYPE.SHADOW_TEMP)
+    const dormerName = buttonAct === 3 ? BATCH_TYPE.TRIANGLE_DORMER : BATCH_TYPE.PENTAGON_DORMER
+    const dormerTempName = buttonAct === 3 ? BATCH_TYPE.TRIANGLE_DORMER_TEMP : BATCH_TYPE.PENTAGON_DORMER_TEMP
+    const height = dormerPlacement.heightRef.current.value / 10
+    const pitch = dormerPlacement.pitchRef.current.value
+    const directionRef = dormerPlacement.directionRef.current
+    const offsetRef = dormerPlacement.offsetRef.current.value === '' ? 0 : parseInt(dormerPlacement.offsetRef.current.value) / 10
+
+    let dormer, dormerOffset, isDown, selectedSurface
+
+    console.log('dormerPlacement', dormerPlacement)
+
+    if (height === '' || pitch === '' || height <= 0 || pitch <= 0) {
+      swalFire({ text: getMessage('common.canvas.validate.size'), icon: 'error' })
+      return
+    }
+
+    //삼각형 도머
+    if (buttonAct === 3) {
+      const bottomLength = height / (pitch * 0.25)
+      const bottomOffsetLength = (height + offsetRef) / (pitch * 0.25)
+
+      console.log(bottomOffsetLength)
+
+      addCanvasMouseEventListener('mouse:move', (e) => {
+        isDown = true
+        if (!isDown) return
+
+        canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === dormerTempName)) //움직일때 일단 지워가면서 움직임
+        const pointer = canvas.getPointer(e.e)
+
+        surfaceShapePolygons.forEach((surface) => {
+          if (surface.inPolygon({ x: pointer.x, y: pointer.y })) {
+            selectedSurface = surface
+          }
+        })
+
+        let angle = 0
+        if (directionRef === 'left') {
+          //서
+          angle = 90
+        } else if (directionRef === 'right') {
+          //동
+          angle = 270
+        } else if (directionRef === 'up') {
+          //북
+          angle = 180
+        }
+
+        dormer = new fabric.Triangle({
+          fill: 'white',
+          stroke: 'red',
+          strokeDashArray: [5, 5],
+          strokeWidth: 1,
+          width: bottomLength * 2,
+          height: height,
+          left: pointer.x,
+          top: pointer.y,
+          selectable: true,
+          lockMovementX: true,
+          lockMovementY: true,
+          lockRotation: true,
+          lockScalingX: true,
+          lockScalingY: true,
+          name: dormerTempName,
+          originX: 'center',
+          originY: 'top',
+          angle: angle,
+        })
+        canvas?.add(dormer)
+
+        if (offsetRef > 0) {
+          dormerOffset = new fabric.Triangle({
+            fill: 'gray',
+            stroke: 'red',
+            strokeDashArray: [5, 5],
+            strokeWidth: 1,
+            width: bottomOffsetLength * 2,
+            height: height + offsetRef,
+            left: pointer.x,
+            top: pointer.y,
+            selectable: true,
+            lockMovementX: true,
+            lockMovementY: true,
+            lockRotation: true,
+            lockScalingX: true,
+            lockScalingY: true,
+            name: dormerTempName,
+            originX: 'center',
+            originY: 'top',
+            angle: angle,
+          })
+          canvas?.add(dormerOffset)
+        }
+      })
+
+      addCanvasMouseEventListener('mouse:up', (e) => {
+        if (dormer) {
+          // const trianglePolygon = pointsToTurfPolygon(triangleToPolygon(dormer))
+          // const selectedSurfacePolygon = polygonToTurfPolygon(selectedSurface)
+
+          // //지붕 밖으로 그렸을때
+          // if (!turf.booleanWithin(trianglePolygon, selectedSurfacePolygon)) {
+          //   swalFire({ text: '개구를 배치할 수 없습니다.', icon: 'error' })
+          //   //일단 지워
+          //   deleteTempObjects()
+          //   return
+          // }
+
+          //각도 추가
+          let originAngle = 0 //기본 남쪽
+          let direction = 'south'
+
+          if (directionRef === 'left') {
+            //서
+            originAngle = 90
+            direction = 'west'
+          } else if (directionRef === 'right') {
+            //동
+            originAngle = 270
+            direction = 'east'
+          } else if (directionRef === 'up') {
+            //북
+            originAngle = 180
+            direction = 'north'
+          }
+
+          let splitedTriangle = offsetRef > 0 ? splitDormerTriangle(dormerOffset, directionRef) : splitDormerTriangle(dormer, directionRef)
+          canvas?.remove(offsetRef > 0 ? dormerOffset : dormer)
+
+          if (offsetRef > 0)
+            dormer.set({
+              name: dormerName,
+              stroke: 'black',
+              strokeWidth: 1,
+              strokeDashArray: [0],
+            }) //오프셋이 있을땐 같이 도머로 만든다
+
+          const leftTriangle = new QPolygon(splitedTriangle[0], {
+            fill: 'transparent',
+            stroke: 'black',
+            strokeWidth: 1,
+            selectable: true,
+            lockMovementX: true, // X 축 이동 잠금
+            lockMovementY: true, // Y 축 이동 잠금
+            lockRotation: true, // 회전 잠금
+            viewLengthText: true,
+            fontSize: 14,
+            direction: direction,
+            originX: 'center',
+            originY: 'center',
+            name: dormerName,
+          })
+
+          const rightTriangle = new QPolygon(splitedTriangle[1], {
+            fill: 'transparent',
+            stroke: 'black',
+            strokeWidth: 1,
+            selectable: true,
+            lockMovementX: true, // X 축 이동 잠금
+            lockMovementY: true, // Y 축 이동 잠금
+            lockRotation: true, // 회전 잠금
+            viewLengthText: true,
+            fontSize: 14,
+            direction: direction,
+            originX: 'center',
+            originY: 'center',
+            name: dormerName,
+          })
+
+          canvas?.add(leftTriangle)
+          canvas?.add(rightTriangle)
+
+          //패턴
+          setSurfaceShapePattern(leftTriangle)
+          setSurfaceShapePattern(rightTriangle)
+          //방향
+          drawDirectionArrow(leftTriangle)
+          drawDirectionArrow(rightTriangle)
+
+          isDown = false
+          initEvent()
+        }
+      })
+    }
+  }
+
+  const deleteTempObjects = () => {
+    const deleteTarget = canvas
+      ?.getObjects()
+      .filter(
+        (obj) =>
+          obj.name === BATCH_TYPE.OPENING_TEMP ||
+          obj.name === BATCH_TYPE.SHADOW_TEMP ||
+          obj.name === BATCH_TYPE.TRIANGLE_DORMER_TEMP ||
+          obj.name === BATCH_TYPE.PENTAGON_DORMER_TEMP,
+      )
     canvas?.remove(...deleteTarget)
     initEvent() //이벤트 초기화
   }
 
   return {
     applyOpeningAndShadow,
+    applyDormers,
   }
 }

src/hooks/surface/useSurfaceShapeBatch.js

@@ -2,11 +2,10 @@
 
 import { useRecoilValue } from 'recoil'
 import { canvasState } from '@/store/canvasAtom'
-import { MENU, BATCH_TYPE } from '@/common/common'
+import { MENU, BATCH_TYPE, POLYGON_TYPE } from '@/common/common'
 import { getIntersectionPoint, setSurfaceShapePattern } from '@/util/canvas-util'
 import { degreesToRadians } from '@turf/turf'
 import { QPolygon } from '@/components/fabric/QPolygon'
-import { fabric } from 'fabric'
 import { useSwal } from '@/hooks/useSwal'
 import { useMessage } from '@/hooks/useMessage'
 import { useEvent } from '@/hooks/useEvent'
@@ -116,7 +115,7 @@ export function useSurfaceShapeBatch() {
 
       addCanvasMouseEventListener('mouse:down', (e) => {
         isDrawing = false
-        obj.set('name', MENU.BATCH_CANVAS.SURFACE_SHAPE_BATCH)
+        obj.set('name', POLYGON_TYPE.ROOF)
         initEvent()
         setSurfaceShapePattern(obj)
         setShowPlacementSurfaceSettingModal(true)
@@ -567,19 +566,25 @@ export function useSurfaceShapeBatch() {
 
   const deleteAllSurfacesAndObjects = () => {
     swalFire({
-      text: '삭제 ㄱㄱ?',
+      text: '배치면 내용을 전부 삭제하시겠습니까?',
       type: 'confirm',
       confirmFn: () => {
         canvas?.getObjects().forEach((obj) => {
-          if (obj.name === MENU.BATCH_CANVAS.SURFACE_SHAPE_BATCH || obj.name === BATCH_TYPE.OPENING || obj.name === BATCH_TYPE.SHADOW) {
+          if (
+            obj.name === POLYGON_TYPE.ROOF ||
+            obj.name === BATCH_TYPE.OPENING ||
+            obj.name === BATCH_TYPE.SHADOW ||
+            obj.name === BATCH_TYPE.TRIANGLE_DORMER ||
+            obj.name === BATCH_TYPE.PENTAGON_DORMER
+          ) {
             canvas?.remove(obj)
           }
         })
         swalFire({ text: '삭제 완료 되었습니다.' })
       },
-      denyFn: () => {
+      // denyFn: () => {
-        swalFire({ text: '취소되었습니다.' })
+      //   swalFire({ text: '취소되었습니다.', icon: 'error' })
-      },
+      // },
     })
   }
 

src/util/canvas-util.js

@@ -744,6 +744,79 @@ export const polygonToTurfPolygon = (polygon) => {
   )
 }
 
+export const splitDormerTriangle = (triangle, direction) => {
+  const halfWidth = triangle.width / 2
+
+  let leftPoints = []
+  let rightPoints = []
+  let leftPointOffset = []
+  let rightPointOffset = []
+
+  if (direction === 'down') {
+    leftPoints = [
+      { x: triangle.left, y: triangle.top },
+      { x: triangle.left - halfWidth, y: triangle.top + triangle.height },
+      { x: triangle.left, y: triangle.top + triangle.height },
+    ]
+
+    rightPoints = [
+      { x: triangle.left, y: triangle.top },
+      { x: triangle.left, y: triangle.top + triangle.height },
+      { x: triangle.left + halfWidth, y: triangle.top + triangle.height },
+    ]
+  } else if (direction === 'up') {
+    leftPoints = [
+      { x: triangle.left, y: triangle.top },
+      { x: triangle.left - halfWidth, y: triangle.top - triangle.height },
+      { x: triangle.left, y: triangle.top - triangle.height },
+    ]
+
+    rightPoints = [
+      { x: triangle.left, y: triangle.top },
+      { x: triangle.left, y: triangle.top - triangle.height },
+      { x: triangle.left + halfWidth, y: triangle.top - triangle.height },
+    ]
+  } else if (direction === 'left') {
+    leftPoints = [
+      { x: triangle.left, y: triangle.top },
+      { x: triangle.left - triangle.height, y: triangle.top - halfWidth },
+      { x: triangle.left - triangle.height, y: triangle.top },
+    ]
+
+    rightPoints = [
+      { x: triangle.left, y: triangle.top },
+      { x: triangle.left - triangle.height, y: triangle.top },
+      { x: triangle.left - triangle.height, y: triangle.top + halfWidth },
+    ]
+  } else if (direction === 'right') {
+    leftPoints = [
+      { x: triangle.left, y: triangle.top },
+      { x: triangle.left + triangle.height, y: triangle.top },
+      { x: triangle.left + triangle.height, y: triangle.top + triangle.height },
+    ]
+
+    rightPoints = [
+      { x: triangle.left, y: triangle.top },
+      { x: triangle.left + triangle.height, y: triangle.top },
+      { x: triangle.left + triangle.height, y: triangle.top - triangle.height },
+    ]
+  }
+
+  return [leftPoints, rightPoints]
+}
+
+export const triangleToPolygon = (triangle) => {
+  const points = []
+  const halfWidth = triangle.width / 2
+  const height = triangle.height
+
+  points.push({ x: triangle.left + halfWidth, y: triangle.top })
+  points.push({ x: triangle.left, y: triangle.top + height })
+  points.push({ x: triangle.left + triangle.width, y: triangle.top + height })
+
+  return points
+}
+
 export const rectToPolygon = (rect) => {
   const points = []
   const left = rect.left