| 78 | root.appendChild(list); |
| 79 | |
| 80 | const applyPositionStyles = (p: LegendPosition): void => { |
| 81 | // Clear positional styles first so changing position is safe/idempotent. |
| 82 | root.style.top = ''; |
| 83 | root.style.right = ''; |
| 84 | root.style.bottom = ''; |
| 85 | root.style.left = ''; |
| 86 | root.style.maxWidth = ''; |
| 87 | |
| 88 | list.style.flexDirection = ''; |
| 89 | list.style.flexWrap = ''; |
| 90 | list.style.alignItems = ''; |
| 91 | |
| 92 | switch (p) { |
| 93 | case 'right': { |
| 94 | root.style.top = '8px'; |
| 95 | root.style.right = '8px'; |
| 96 | root.style.maxWidth = '40%'; |
| 97 | |
| 98 | list.style.flexDirection = 'column'; |
| 99 | list.style.flexWrap = 'nowrap'; |
| 100 | list.style.alignItems = 'flex-start'; |
| 101 | return; |
| 102 | } |
| 103 | case 'left': { |
| 104 | root.style.top = '8px'; |
| 105 | root.style.left = '8px'; |
| 106 | root.style.maxWidth = '40%'; |
| 107 | |
| 108 | list.style.flexDirection = 'column'; |
| 109 | list.style.flexWrap = 'nowrap'; |
| 110 | list.style.alignItems = 'flex-start'; |
| 111 | return; |
| 112 | } |
| 113 | case 'top': { |
| 114 | root.style.top = '8px'; |
| 115 | root.style.left = '8px'; |
| 116 | root.style.right = '8px'; |
| 117 | |
| 118 | list.style.flexDirection = 'row'; |
| 119 | list.style.flexWrap = 'wrap'; |
| 120 | list.style.alignItems = 'center'; |
| 121 | return; |
| 122 | } |
| 123 | case 'bottom': { |
| 124 | root.style.bottom = '8px'; |
| 125 | root.style.left = '8px'; |
| 126 | root.style.right = '8px'; |
| 127 | |
| 128 | list.style.flexDirection = 'row'; |
| 129 | list.style.flexWrap = 'wrap'; |
| 130 | list.style.alignItems = 'center'; |
| 131 | return; |
| 132 | } |
| 133 | } |
| 134 | }; |
| 135 | |
| 136 | applyPositionStyles(position); |
| 137 | container.appendChild(root); |