<commit_before>import {
  Morph, Text, Icon, Window,
  VerticalLayout,
  GridLayout,
  HorizontalLayout
} from "../../index.js";
import {pt, Rectangle, Color, LinearGradient, rect} from "lively.graphics";
import {signal, connect, disconnect} from "lively.bindings";
import {Slider} from "../../components/widgets.js";
import { obj } from "lively.lang";
import {ColorPalette} from "./color-palette.js";
import { StyleSheet } from '../../style-rules.js';
import { zip } from "lively.lang/array.js";
import { Popover } from "./style-popover.js";

const WHEEL_URL = 'https://www.sessions.edu/wp-content/themes/divi-child/color-calculator/wheel-5-ryb.png'

export class ColorPickerField extends Morph {

   static get properties() {
     return {
      colorValue: {
        set(v) {
          if (!(v && v.isColor)) {
            v = Color.blue;
          }
          this.setProperty('colorValue', v);
        }
      },
      styleSheets: {
        initialize() {
          this.styleSheets = new StyleSheet({
            '.ColorPickerField': {
              extent: pt(70,30), 
              layout: new HorizontalLayout(),
              borderRadius: 5, fill: Color.gray, clipMode: "hidden",
              borderWidth: 1, borderColor: Color.gray.darker(),
            },
            '[name=pickerButton]': {
              extent: pt(20, 20),
              nativeCursor: "pointer",
              fill: Color.transparent,
              position: pt(3, 3),
            }
          })  
        }
      },
      submorphs: {
        initialize() {
          const topRight = this.innerBounds().topRight(),
                bottomLeft = this.innerBounds().bottomLeft(),
                colorFieldExtent = pt(40, 25);

          this.submorphs = [
            {
              extent: colorFieldExtent,
              clipMode: "hidden",
              name: 'paletteButton',
              onHoverIn() {
                this.get("dropDownIndicator").animate({opacity: 1, duration: 300});
              },
              onHoverOut() {
                this.get("dropDownIndicator").animate({opacity: 0, duration: 300});
              },
              submorphs: [
                {
                  name: "topLeft",
                  extent: colorFieldExtent,
                  fill: this.colorValue
                },
                {
                  name: "bottomRight",
                  type: "polygon",
                  extent: colorFieldExtent,
                  fill: this.colorValue.withA(1),
                  origin: pt(0, 0),
                  vertices: [pt(0, 0), colorFieldExtent.withX(0), colorFieldExtent]
                },
                Icon.makeLabel("chevron-down", {
                  opacity: 0,
                  name: "dropDownIndicator",
                  center: pt(30, 12.5)
                })
              ]
            },
            {
              fill: Color.transparent,
              extent: pt(25, 25),
              onHoverIn() {
                this.fill = Color.black.withA(0.2);
              },
              onHoverOut() {
                this.fill = Color.transparent;
              },
              submorphs: [
                {
                  name: 'pickerButton',
                  type: "image",
                  autoResize: false,
                  imageUrl: WHEEL_URL,
                  onMouseDown: evt => this.openPicker(evt)
                }
              ]
            }
          ];
          connect(this.getSubmorphNamed('pickerButton'), 'onMouseDown', this, 'openPicker');
          connect(this.getSubmorphNamed('paletteButton'), 'onMouseDown', this, 'openPalette');
        }
      }
     }
   }

  onHoverIn() {
    if (!this.palette)
      this.palette = new Popover({
        name: "Color Palette",
        targetMorph: new ColorPalette({color: Color.red})
      });
  }
  
   onKeyDown(evt) {
      if (evt.key == "Escape") {
         this.picker && this.picker.remove();
         this.palette && this.palette.remove();
      }
   }

  update(color) {
    this.colorValue = color;
    this.get("topLeft").fill = color;
    this.get("bottomRight").fill = color.withA(1);<commit_msg>color picker: fix doubled color picker<commit_after>import {
  Morph, Text, Icon, Window,
  VerticalLayout,
  GridLayout,
  HorizontalLayout
} from "../../index.js";
import {pt, Rectangle, Color, LinearGradient, rect} from "lively.graphics";
import {signal, connect, disconnect} from "lively.bindings";
import {Slider} from "../../components/widgets.js";
import { obj } from "lively.lang";
import {ColorPalette} from "./color-palette.js";
import { StyleSheet } from '../../style-rules.js';
import { zip } from "lively.lang/array.js";
import { Popover } from "./style-popover.js";

const WHEEL_URL = 'https://www.sessions.edu/wp-content/themes/divi-child/color-calculator/wheel-5-ryb.png'

export class ColorPickerField extends Morph {

   static get properties() {
     return {
      colorValue: {
        set(v) {
          if (!(v && v.isColor)) {
            v = Color.blue;
          }
          this.setProperty('colorValue', v);
        }
      },
      styleSheets: {
        initialize() {
          this.styleSheets = new StyleSheet({
            '.ColorPickerField': {
              extent: pt(70,30), 
              layout: new HorizontalLayout(),
              borderRadius: 5, fill: Color.gray, clipMode: "hidden",
              borderWidth: 1, borderColor: Color.gray.darker(),
            },
            '[name=pickerButton]': {
              extent: pt(20, 20),
              nativeCursor: "pointer",
              fill: Color.transparent,
              position: pt(3, 3),
            }
          })  
        }
      },
      submorphs: {
        initialize() {
          const topRight = this.innerBounds().topRight(),
                bottomLeft = this.innerBounds().bottomLeft(),
                colorFieldExtent = pt(40, 25);

          this.submorphs = [
            {
              extent: colorFieldExtent,
              clipMode: "hidden",
              name: 'paletteButton',
              onHoverIn() {
                this.get("dropDownIndicator").animate({opacity: 1, duration: 300});
              },
              onHoverOut() {
                this.get("dropDownIndicator").animate({opacity: 0, duration: 300});
              },
              submorphs: [
                {
                  name: "topLeft",
                  extent: colorFieldExtent,
                  fill: this.colorValue
                },
                {
                  name: "bottomRight",
                  type: "polygon",
                  extent: colorFieldExtent,
                  fill: this.colorValue.withA(1),
                  origin: pt(0, 0),
                  vertices: [pt(0, 0), colorFieldExtent.withX(0), colorFieldExtent]
                },
                Icon.makeLabel("chevron-down", {
                  opacity: 0,
                  name: "dropDownIndicator",
                  center: pt(30, 12.5)
                })
              ]
            },
            {
              fill: Color.transparent,
              extent: pt(25, 25),
              onHoverIn() {
                this.fill = Color.black.withA(0.2);
              },
              onHoverOut() {
                this.fill = Color.transparent;
              },
              submorphs: [
                {
                  name: 'pickerButton',
                  type: "image",
                  autoResize: false,
                  imageUrl: WHEEL_URL,
                }
              ]
            }
          ];
          connect(this.getSubmorphNamed('pickerButton'), 'onMouseDown', this, 'openPicker');
          connect(this.getSubmorphNamed('paletteButton'), 'onMouseDown', this, 'openPalette');
        }
      }
     }
   }

  onHoverIn() {
    if (!this.palette)
      this.palette = new Popover({
        name: "Color Palette",
        targetMorph: new ColorPalette({color: Color.red})
      });
  }
  
   onKeyDown(evt) {
      if (evt.key == "Escape") {
         this.picker && this.picker.remove();
         this.palette && this.palette.remove();
      }
   }

  update(color) {
    this.colorValue = color;
    this.get("topLeft").fill = color;
    this.get("bottomRight").fill = color.withA(1);
{'fraction_non_alphanumeric': 0.13048219045311366, 'fraction_numerical': 0.010661497455779016, 'mean_word_length': 1.4401418859000887, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 4, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '895481', 'n_tokens_mistral': 2400, 'n_tokens_neox': 2289, 'n_words': 437}