import chroma from 'chroma-js' ; export const getLayerNotes = ( layerId , notes ) => { return notes . find ( ( layerNote ) => { return layerNote . id === layerId ; } ) ; } ; export const getNestedNoteCount = ( groupLayer , notes ) => { let groups = [ groupLayer ] ; let count = 0 ; let i = 0 ; while ( i < groups . length ) { groups [ i ] . layers . forEach ( ( layer ) => { const layerNotes = notes . find ( ( layerNote ) => { return layerNote . id === layer . id ; } ) ; count = count + ( layerNotes ? layerNotes . notes . length : 0 ) ; if ( layer . type === 'Group' ) { groups . push ( layer ) ; } } ) ; i ++ ; } return count ; } ; export const getCSSUrl = ( prop , value ) => { if ( prop === 'WebkitMaskBoxImage' ) { let nonUrl = ` 100 100 0 0 stretch stretch` ; return value . slice ( 0 , value . length - nonUrl . length ) ; } else { return value ; } } ; export const getScaledImage = ( image ) : string => { const dpr = window . devicePixelRatio ; return dpr > 1 ? image . src [ `2x` ] : image . src [ `1x` ] ; } ; export const getImage = ( images , id ) : next . ImgAsset | undefined => { return images . find ( ( image ) => image . id === id ) ; } ; export const getSVG = ( svgs , id ) : next . SvgAsset | undefined => { return svgs . find ( ( svg ) => svg . id === id ) ; } ; export const getAbsolutePosition = ( artboardId , layerId ) => { const layerEl = document . getElementById ( layerId ) ; var x = 0 ; var y = 0 ; var layer = layerEl ; while ( layer && layer . id !== artboardId ) { x = x + layer ?. offsetLeft ; y = y + layer ?. offsetTop ; layer = layer . offsetParent ; } return { x , y } ; } ; export const cssColor = ( color ) : string => { return chroma ( color ) . css ( ) ; } ; export const styleReducer = ( combinedStyles ) => { const filtered = combinedStyles . filter ( ( style ) => style !== null ) ; return filtered . reduce ( ( styles , style ) => { return { ... styles , ... style } ; } , { } ) ; } ; export const getOrigin = ( layer , artboard ) : next . Origin => { const absolutePosition = getAbsolutePosition ( artboard . id , layer . id ) ; const layerFrame = { ... layer . frame , ... absolutePosition } ; const { x , y , width , height } = layerFrame ; return { top : y , right : x + width , bottom : y + height , left : x , yCenter : y + height / 2 , xCenter : x + width / 2 } ; } ; export const placeLeft = ( selectionOriginLeft , artboardWidth ) : boolean => { if ( selectionOriginLeft > artboardWidth / 2 ) { return true ; } else { return false ; } } ; export const placeTop = ( selectionOriginTop , artboardHeight ) : boolean => { if ( selectionOriginTop > artboardHeight / 2 ) { return true ; } else { return false ; } } ;