@@ -1064,7 +1064,7 @@ module ControlPanel = {
1064
1064
1065
1065
let onClick = evt => {
1066
1066
ReactEvent .Mouse .preventDefault (evt )
1067
- let ret = copyToClipboard (Webapi . Window . Location .href )
1067
+ let ret = copyToClipboard (window . location .href )
1068
1068
if ret {
1069
1069
setState (_ => CopySuccess )
1070
1070
}
@@ -1129,12 +1129,12 @@ module ControlPanel = {
1129
1129
}
1130
1130
1131
1131
React .useEffect (() => {
1132
- Webapi .Window .addEventListener ("keydown" , onKeyDown )
1133
- Some (() => Webapi .Window .removeEventListener ("keydown" , onKeyDown ))
1132
+ WebAPI .Window .addEventListener (window , WebAPI . EventAPI . Keydown , onKeyDown )
1133
+ Some (() => WebAPI .Window .removeEventListener (window , WebAPI . EventAPI . Keydown , onKeyDown ))
1134
1134
}, [])
1135
1135
1136
1136
let runButtonText = {
1137
- let userAgent = Webapi . Window . Navigator .userAgent
1137
+ let userAgent = window . navigator .userAgent
1138
1138
let run = "Run"
1139
1139
if userAgent -> String .includes ("iPhone" ) || userAgent -> String .includes ("Android" ) {
1140
1140
run
@@ -1496,9 +1496,7 @@ let make = (~versions: array<string>) => {
1496
1496
None
1497
1497
}, (compilerState , compilerDispatch ))
1498
1498
1499
- let (layout , setLayout ) = React .useState (_ =>
1500
- Webapi .Window .innerWidth < breakingPoint ? Column : Row
1501
- )
1499
+ let (layout , setLayout ) = React .useState (_ => window .innerWidth < breakingPoint ? Column : Row )
1502
1500
1503
1501
let isDragging = React .useRef (false )
1504
1502
@@ -1510,26 +1508,34 @@ let make = (~versions: array<string>) => {
1510
1508
let subPanelRef = React .useRef (Nullable .null )
1511
1509
1512
1510
let onResize = () => {
1513
- let newLayout = Webapi . Window .innerWidth < breakingPoint ? Column : Row
1511
+ let newLayout = window .innerWidth < breakingPoint ? Column : Row
1514
1512
setLayout (_ => newLayout )
1515
1513
switch panelRef .current -> Nullable .toOption {
1516
1514
| Some (element ) =>
1517
- let offsetTop = Webapi .Element .getBoundingClientRect (element )["top" ]
1518
- Webapi .Element .Style .height (element , ` calc(100vh - ${offsetTop-> Float.toString}px)` )
1515
+ let offsetTop = WebAPI .Element .getBoundingClientRect (element ).top
1516
+ WebAPI .Element .setAttribute (
1517
+ element ,
1518
+ ~qualifiedName = "style" ,
1519
+ ~value = ` height: calc(100vh - ${offsetTop-> Float.toString}px)` ,
1520
+ )
1519
1521
| None => ()
1520
1522
}
1521
1523
1522
1524
switch subPanelRef .current -> Nullable .toOption {
1523
1525
| Some (element ) =>
1524
- let offsetTop = Webapi .Element .getBoundingClientRect (element )["top" ]
1525
- Webapi .Element .Style .height (element , ` calc(100vh - ${offsetTop-> Float.toString}px)` )
1526
+ let offsetTop = WebAPI .Element .getBoundingClientRect (element ).top
1527
+ WebAPI .Element .setAttribute (
1528
+ element ,
1529
+ ~qualifiedName = "style" ,
1530
+ ~value = ` height: calc(100vh - ${offsetTop-> Float.toString}px)` ,
1531
+ )
1526
1532
| None => ()
1527
1533
}
1528
1534
}
1529
1535
1530
1536
React .useEffect (() => {
1531
- Webapi .Window .addEventListener ("resize" , onResize )
1532
- Some (() => Webapi .Window .removeEventListener ("resize" , onResize ))
1537
+ WebAPI .Window .addEventListener (window , WebAPI . EventAPI . Resize , onResize )
1538
+ Some (() => WebAPI .Window .removeEventListener (window , WebAPI . EventAPI . Resize , onResize ))
1533
1539
}, [])
1534
1540
1535
1541
// To force CodeMirror render scrollbar on first render
@@ -1552,30 +1558,50 @@ let make = (~versions: array<string>) => {
1552
1558
subPanelRef .current -> Nullable .toOption ,
1553
1559
) {
1554
1560
| (Some (panelElement ), Some (leftElement ), Some (rightElement ), Some (subElement )) =>
1555
- let rectPanel = Webapi .Element .getBoundingClientRect (panelElement )
1561
+ let rectPanel = WebAPI .Element .getBoundingClientRect (panelElement )
1556
1562
1557
1563
// Update OutputPanel height
1558
- let offsetTop = Webapi .Element .getBoundingClientRect (subElement )["top" ]
1559
- Webapi .Element .Style .height (subElement , ` calc(100vh - ${offsetTop-> Float.toString}px)` )
1564
+ let offsetTop = WebAPI .Element .getBoundingClientRect (subElement ).top
1565
+ WebAPI .Element .setAttribute (
1566
+ subElement ,
1567
+ ~qualifiedName = "style" ,
1568
+ ~value = ` height: calc(100vh - ${offsetTop-> Float.toString}px)` ,
1569
+ )
1560
1570
1561
1571
switch layout {
1562
1572
| Row =>
1563
- let delta = Int .toFloat (position ) -. rectPanel [ " left" ]
1573
+ let delta = Int .toFloat (position ) -. rectPanel . left
1564
1574
1565
- let leftWidth = delta /. rectPanel [ " width" ] *. 100.0
1566
- let rightWidth = (rectPanel [ " width" ] -. delta ) /. rectPanel [ " width" ] *. 100.0
1575
+ let leftWidth = delta /. rectPanel . width *. 100.0
1576
+ let rightWidth = (rectPanel . width -. delta ) /. rectPanel . width *. 100.0
1567
1577
1568
- Webapi .Element .Style .width (leftElement , ` ${leftWidth-> Float.toString}%` )
1569
- Webapi .Element .Style .width (rightElement , ` ${rightWidth-> Float.toString}%` )
1578
+ WebAPI .Element .setAttribute (
1579
+ leftElement ,
1580
+ ~qualifiedName = "style" ,
1581
+ ~value = ` width: ${leftWidth-> Float.toString}%` ,
1582
+ )
1583
+ WebAPI .Element .setAttribute (
1584
+ rightElement ,
1585
+ ~qualifiedName = "style" ,
1586
+ ~value = ` width: ${rightWidth-> Float.toString}%` ,
1587
+ )
1570
1588
1571
1589
| Column =>
1572
- let delta = Int .toFloat (position ) -. rectPanel [ " top" ]
1590
+ let delta = Int .toFloat (position ) -. rectPanel . top
1573
1591
1574
- let topHeight = delta /. rectPanel [ " height" ] *. 100 .
1575
- let bottomHeight = (rectPanel [ " height" ] -. delta ) /. rectPanel [ " height" ] *. 100 .
1592
+ let topHeight = delta /. rectPanel . height *. 100 .
1593
+ let bottomHeight = (rectPanel . height -. delta ) /. rectPanel . height *. 100 .
1576
1594
1577
- Webapi .Element .Style .height (leftElement , ` ${topHeight-> Float.toString}%` )
1578
- Webapi .Element .Style .height (rightElement , ` ${bottomHeight-> Float.toString}%` )
1595
+ WebAPI .Element .setAttribute (
1596
+ leftElement ,
1597
+ ~qualifiedName = "style" ,
1598
+ ~value = ` height: ${topHeight-> Float.toString}%` ,
1599
+ )
1600
+ WebAPI .Element .setAttribute (
1601
+ rightElement ,
1602
+ ~qualifiedName = "style" ,
1603
+ ~value = ` height: ${bottomHeight-> Float.toString}%` ,
1604
+ )
1579
1605
}
1580
1606
| _ => ()
1581
1607
}
@@ -1594,15 +1620,15 @@ let make = (~versions: array<string>) => {
1594
1620
onMove (position )
1595
1621
}
1596
1622
1597
- Webapi .Window .addEventListener ("mousemove" , onMouseMove )
1598
- Webapi .Window .addEventListener ("touchmove" , onTouchMove )
1599
- Webapi .Window .addEventListener ("mouseup" , onMouseUp )
1623
+ WebAPI .Window .addEventListener (window , WebAPI . EventAPI . Mousemove , onMouseMove )
1624
+ WebAPI .Window .addEventListener (window , WebAPI . EventAPI . Touchmove , onTouchMove )
1625
+ WebAPI .Window .addEventListener (window , WebAPI . EventAPI . Mouseup , onMouseUp )
1600
1626
1601
1627
Some (
1602
1628
() => {
1603
- Webapi .Window .removeEventListener ("mousemove" , onMouseMove )
1604
- Webapi .Window .removeEventListener ("touchmove" , onTouchMove )
1605
- Webapi .Window .removeEventListener ("mouseup" , onMouseUp )
1629
+ WebAPI .Window .removeEventListener (window , WebAPI . EventAPI . Mousemove , onMouseMove )
1630
+ WebAPI .Window .removeEventListener (window , WebAPI . EventAPI . Touchmove , onTouchMove )
1631
+ WebAPI .Window .removeEventListener (window , WebAPI . EventAPI . Mouseup , onMouseUp )
1606
1632
},
1607
1633
)
1608
1634
}, [layout ])
@@ -1765,10 +1791,10 @@ let make = (~versions: array<string>) => {
1765
1791
/>
1766
1792
<div
1767
1793
className = {` flex ${layout == Column ? "flex-col" : "flex-row" }` }
1768
- ref = {ReactDOM .Ref .domRef (panelRef )}>
1794
+ ref = {ReactDOM .Ref .domRef (panelRef -> Obj . magic )}>
1769
1795
// Left Panel
1770
1796
<div
1771
- ref = {ReactDOM .Ref .domRef (leftPanelRef )}
1797
+ ref = {ReactDOM .Ref .domRef (( Obj . magic ( leftPanelRef ): React . ref < Nullable . t < Dom . element >>) )}
1772
1798
className = {` ${layout == Column ? "h-2/4" : "!h-full" } ${layout == Column
1773
1799
? "w-full"
1774
1800
: "w-[50%]" }` }>
@@ -1785,10 +1811,10 @@ let make = (~versions: array<string>) => {
1785
1811
| None => ()
1786
1812
| Some (timer ) => clearTimeout (timer )
1787
1813
}
1788
- let timer = setTimeout (() => {
1814
+ let timer = setTimeout (~ handler = () => {
1789
1815
timeoutCompile .current ()
1790
1816
typingTimer .current = None
1791
- }, 100 )
1817
+ }, ~ timeout = 100 )
1792
1818
typingTimer .current = Some (timer )
1793
1819
}}
1794
1820
onMarkerFocus = {rowCol => setFocusedRowCol (_prev => Some (rowCol ))}
@@ -1797,7 +1823,7 @@ let make = (~versions: array<string>) => {
1797
1823
</div >
1798
1824
// Separator
1799
1825
<div
1800
- ref = {ReactDOM .Ref .domRef (separatorRef )}
1826
+ ref = {ReactDOM .Ref .domRef (( Obj . magic ( separatorRef ): React . ref < Nullable . t < Dom . element >>) )}
1801
1827
// TODO: touch-none not applied
1802
1828
className = {` flex items-center justify-center touch-none select-none bg-gray-70 opacity-30 hover:opacity-50 rounded-lg ${layout ==
1803
1829
Column
@@ -1812,14 +1838,16 @@ let make = (~versions: array<string>) => {
1812
1838
</div >
1813
1839
// Right Panel
1814
1840
<div
1815
- ref = {ReactDOM .Ref .domRef (rightPanelRef )}
1841
+ ref = {ReactDOM .Ref .domRef (rightPanelRef -> Obj . magic )}
1816
1842
className = {` ${layout == Column ? "h-6/15" : "!h-inherit" } ${layout == Column
1817
1843
? "w-full"
1818
1844
: "w-[50%]" }` }>
1819
1845
<div className = {"flex flex-wrap justify-between w-full " ++ (disabled ? "opacity-50" : "" )}>
1820
1846
{React .array (headers )}
1821
1847
</div >
1822
- <div ref = {ReactDOM .Ref .domRef (subPanelRef )} className = "overflow-auto" >
1848
+ <div
1849
+ ref = {ReactDOM .Ref .domRef ((Obj .magic (subPanelRef ): React .ref <Nullable .t <Dom .element >>))}
1850
+ className = "overflow-auto" >
1823
1851
<OutputPanel currentTab compilerDispatch compilerState editorCode />
1824
1852
</div >
1825
1853
</div >
0 commit comments