fixed colour picker finally

Author: kirjavascript

app/components/palettes/index.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, useRef, useEffect, useState } from 'react';
 import { environment } from '#store/environment';
 import { observer } from 'mobx-react';
 import {
@@ -14,43 +14,69 @@ const Handle = SortableHandle(({ lineIndex }) => (
     <div className="index">{lineIndex}</div>
 ));
 
-// anim, colour, placement
+const Color = ({ color, onChange, rect }) => {
+    const [points, setPoints] = useState(['br', 'tr']);
+    const [offset, setOffset] = useState([2, 2])
+    const node = useRef();
+    useEffect(() => {
+        if (node.current) {
+            const { x, y, height } = node.current.getBoundingClientRect();
+            const overflowX = x + 250 > window.innerWidth;
+            const overflowY = (y + height) + 250 > window.innerHeight;
+            const xType = 'lr'[+overflowX];
+            setPoints(['tb'[+overflowY]+xType, 'bt'[+overflowY]+xType])
+            setOffset([overflowX ? -2 : 2, overflowY ? -3 : 3])
+        }
+    }, [node.current, rect]);
+    return (
+        <Trigger
+            action={['click']}
+            prefixCls="color-picker"
+            popup={(
+                <Picker
+                    color={color}
+                    onChange={onChange}
+                />
+            )}
+            popupAlign={{
+                points,
+                offset,
+                targetOffset: [0, 0],
+                // overflow: { adjustX: true, adjustY: true },
+            }}
+            destroyPopupOnHide
+        >
+            <div
+                ref={node}
+                className="color"
+                style={{
+                    backgroundColor: color,
+                    textAlign: 'center',
+                }}
+            />
+        </Trigger>
+    );
+};
+
+// placement
 
 const SortableItem = SortableElement(
-    observer(({ line, lineIndex }) => {
+    observer(({ line, lineIndex, rect }) => {
         return (
             <div className="line">
                 <Handle lineIndex={lineIndex} />
                 {line.map((color, colorIndex) => {
                     return (
-                        <Trigger
+                        <Color
                             key={colorIndex}
-                            action={['click']}
-                            prefixCls="color-picker"
-                            popup={(
-                                <Picker
-                                    color={color}
-                                    onChange={({ hex }) => {
-                                        environment.palettes[lineIndex][
-                                            colorIndex
-                                        ] = hexToMDHex(hex);
-                                    }}
-                                />
-                            )}
-                            popupAlign={{
-                                points: ['tl', 'bl'],
-                                offset: [0, 3]
+                            color={color}
+                            rect={rect}
+                            onChange={({ hex }) => {
+                                environment.palettes[lineIndex][
+                                    colorIndex
+                                ] = hexToMDHex(hex);
                             }}
-                            destroyPopupOnHide
-                        >
-                            <div
-                                className="color"
-                                style={{
-                                    backgroundColor: color,
-                                    textAlign: 'center',
-                                }}
-                            />
-                        </Trigger>
+                        />
                     );
                 })}
             </div>
@@ -62,15 +88,16 @@ const SortableList = SortableContainer(
     observer(
         class extends Component {
             render() {
-                const { items, vert } = this.props;
+                const { items, rect } = this.props;
                 return (
-                    <div className={`palettes ${vert ? 'vert' : ''}`}>
+                    <div className={`palettes ${rect.vert ? 'vert' : ''}`}>
                         {items.map((line, index) => (
                             <SortableItem
                                 key={`item-${index}`}
                                 index={index}
                                 line={line}
                                 lineIndex={index}
+                                rect={rect}
                             />
                         ))}
                     </div>
@@ -83,25 +110,25 @@ const SortableList = SortableContainer(
 
 @observer
 export class Palettes extends Component {
-    state = { vert: false };
+    state = { width: 0, height: 0, x: 0, y: 0, };
     mounted = false;
 
     onRef = (node) => {
         if (node) {
             requestAnimationFrame(() => {
-                const { width, height } = node.getBoundingClientRect();
-                this.mounted && this.setState({ vert: width < height });
+                const { width, height, x, y } = node.getBoundingClientRect();
+                const vert = width < height;
+                this.mounted && this.setState({ vert, width, height, x, y });
             });
         }
     };
 
     componentDidMount() {
         this.mounted = true;
         this.props.node.setEventListener('resize', (e) => {
-            const { width, height } = e.rect;
-
+            const vert = e.rect.width < e.rect.height;
             requestAnimationFrame(() => {
-                this.mounted && this.setState({ vert: width < height });
+                this.mounted && this.setState({ vert, ...e.rect });
             });
         });
     }
@@ -126,7 +153,7 @@ export class Palettes extends Component {
                     items={palettes}
                     lockToContainerEdges={true}
                     useDragHandle={true}
-                    vert={vert}
+                    rect={this.state}
                     onSortEnd={this.onSortEnd}
                 />
 

app/components/palettes/picker.js

@@ -204,27 +204,14 @@ export const Sketch = ({
             },
             hue: {
                 position: 'relative',
-                height: '10px',
+                height: '24px',
                 overflow: 'hidden',
             },
             Hue: {
                 radius: '2px',
                 shadow:
                     'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
             },
-
-            alpha: {
-                position: 'relative',
-                height: '10px',
-                marginTop: '4px',
-                overflow: 'hidden',
-                display: 'none',
-            },
-            Alpha: {
-                radius: '2px',
-                shadow:
-                    'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
-            },
         },
     });
 
@@ -241,7 +228,22 @@ export const Sketch = ({
             <div style={styles.controls} className="flexbox-fix">
                 <div style={styles.sliders}>
                     <div style={styles.hue}>
-                        <Hue style={styles.Hue} hsl={hsl} onChange={onChange} />
+                        <Hue
+                            style={styles.Hue}
+                            hsl={hsl}
+                            onChange={onChange}
+                            height="24px"
+                            pointer={() => (
+                                <div style={{
+                                    width: 4,
+                                    height: 22,
+                                    backgroundColor: white,
+                                    borderRadius: '4px',
+                                    pointerEvents: 'none',
+                                    transform: 'translate(-2px, 1px)',
+                                }}/>
+                            )}
+                        />
                     </div>
                 </div>
                 <div style={styles.color}>

app/formats/scripts/index.js

@@ -33,6 +33,7 @@
 //      ability to specify offset & etc
 //      allow editing filename
 //      format:
+//      add to project
 // remove acdeditor
 // purple warning: arbitrary code - warning before yes
 // derive UI from script - make dplcs still optional

development/webpack.config.js

@@ -15,7 +15,7 @@ module.exports = (env = {}, args = {}) => {
             rules: [
                 {
                     test: /\.m?jsx?$/,
-                    // exclude: env.dev ? /node_modules/ : void 0,
+                    exclude: env.dev ? /node_modules/ : void 0,
                     use: [
                         {
                             loader: 'babel-loader',

styles/components/palettes.scss

@@ -82,4 +82,5 @@
 
 .color-picker {
     display: inline-block;
+    z-index: $z-float;
 }