fixed a bun in raw editor refs

Author: kirjavascript

app/components/mappings/raw-editor.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { Spring } from 'react-spring/renderprops';
-import { SortableContainer, SortableElement, SortableHandle, arrayMove } from 'react-sortable-hoc';
+import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
+import arrayMove from 'array-move';
 import { mappingState } from './state';
 import { environment } from '#store/environment';
 import { observer } from 'mobx-react';
@@ -110,20 +111,26 @@ const SortableMappingItem = SortableElement(observer(({mapping, mappingIndex}) =
     </div>
 )));
 
-const SortableMappingList = SortableContainer(observer(({items}) => {
-    return (
-        <div>
-            {items.map((mapping, index) => (
-                <SortableMappingItem
-                    key={`item-${index}`}
-                    index={index}
-                    mapping={mapping}
-                    mappingIndex={index}
-                />
-            ))}
-        </div>
-    );
-}), {withRef: true});
+const SortableMappingList = SortableContainer(
+    observer(class extends Component {
+        render() {
+            const { items } = this.props;
+            return (
+                <div>
+                    {items.map((mapping, index) => (
+                        <SortableMappingItem
+                            key={`item-${index}`}
+                            index={index}
+                            mapping={mapping}
+                            mappingIndex={index}
+                        />
+                    ))}
+                </div>
+            );
+        }
+    }),
+    {withRef: true}
+);
 
 // dplcs
 
@@ -172,20 +179,26 @@ const SortableDPLCItem = SortableElement(observer(({dplc, dplcIndex}) => (
     </div>
 )));
 
-const SortableDPLCList = SortableContainer(observer(({items}) => {
-    return (
-        <div>
-            {items.map((dplc, index) => (
-                <SortableDPLCItem
-                    key={`item-${index}`}
-                    index={index}
-                    dplc={dplc}
-                    dplcIndex={index}
-                />
-            ))}
-        </div>
-    );
-}), {withRef: true});
+const SortableDPLCList = SortableContainer(
+    observer(class extends Component {
+        render() {
+            const { items } = this.props;
+            return (
+                <div>
+                    {items.map((dplc, index) => (
+                        <SortableDPLCItem
+                            key={`item-${index}`}
+                            index={index}
+                            dplc={dplc}
+                            dplcIndex={index}
+                        />
+                    ))}
+                </div>
+            );
+        }
+    }),
+    {withRef: true}
+);
 
 @observer
 export class RawEditor extends Component {

app/components/palettes/index.js

@@ -42,7 +42,6 @@ const Color = ({ color, onChange, rect }) => {
                 points,
                 offset,
                 targetOffset: [0, 0],
-                // overflow: { adjustX: true, adjustY: true },
             }}
             destroyPopupOnHide
         >
@@ -58,8 +57,6 @@ const Color = ({ color, onChange, rect }) => {
     );
 };
 
-// placement
-
 const SortableItem = SortableElement(
     observer(({ line, lineIndex, rect }) => {
         return (

app/formats/scripts/index.js

@@ -1,6 +1,3 @@
-// delete arcsecond, brace. upgrade react, react deps, mobx
-// remove colorpicker
-
 // next: file menu + custom loader -> remove brace
 //
 // script language

app/store/environment.js

@@ -12,7 +12,7 @@ import { bufferToMappings, mappingsToBuffer } from '#formats/mapping';
 import { bufferToDPLCs, DPLCsToBuffer } from '#formats/dplc';
 import { buffersToColors, colorsToBuffers, defaultPalettes } from '#formats/palette';
 import { asmToBin, stuffToAsm } from '#formats/asm';
-import { arrayMove } from 'react-sortable-hoc';
+import arrayMove from 'array-move';
 
 class Environment {
 

package.json

@@ -19,6 +19,7 @@
         "webpack-cli": "^3.3.11"
     },
     "dependencies": {
+        "array-move": "^3.0.1",
         "brace": "^0.10.0",
         "classnames": "^2.2.5",
         "color-diff": "^1.1.0",

yarn.lock

@@ -1133,6 +1133,11 @@ arr-union@^3.1.0:
   resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
   integrity sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=
 
+array-move@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/array-move/-/array-move-3.0.1.tgz#179645cc0987b65953a4fc06b6df9045e4ba9618"
+  integrity sha512-H3Of6NIn2nNU1gsVDqDnYKY/LCdWvCMMOWifNGhKcVQgiZ6nOek39aESOvro6zmueP07exSl93YLvkN4fZOkSg==
+
 array-unique@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"