easylogic / colorpicker

pure js colorpicker

Hi there 👋

안녕하세요, 이지로직입니다.

소개를 하고 싶은데 할 줄 아는게 별로 없네요.

스킬 : JS

이만 줄이겠습니다.

아참, 웹에서 여러가지 용도로 쓸 수 있는 디자인 툴을 하나 만들고 있습니다.

같이 만들어 보실 분 ?

---

I am easylogic.

I have only one skill : javascript.

Thank you.

colorpicker's Issues

다크테마버전 출시요망

다크ui에 어울리게 생성시 다크버전을 설정할 수 있는 옵션 추가 요망

gradientpicker 제거

gradientpicker UI 관련된 코드도 제거 합니다.

not able to add a new gradient stop

Describe the bug
unable to add a new gradient stop

To Reproduce
Steps to reproduce the behavior:
you can also see the issue in your website https://colorpicker.easylogic.studio
it doesn't work if you click in between any of gradient stops. getting this error

but if you move the last stop a little bit to the middle, then you can add a new stop after that

Support saturation, value scale tool

with gradient

개발화면에서 그라디언트 컴포넌트가 추가 되었는데 그에대한 예제화면을 조정할 필요가 있습니다.

스타일시트와 컨트롤러 섹션의 기능을 조정할 예정입니다.

support hue scale

컬러피커 개선요소들 목록

컬러피커 개선에 대해 쭉 적어봐요.
단순히 색상을 선택하는 도구를 100kb 이상 사용하는것은 이용하는 입장에서 부담이 큽니다. 컴포넌트를 더욱 단순화시켜 역할에 더 집중하고 경량화 시키는데 목표를 둬야 한다고 봅니다.

우선 제가 할 수 있는 일들에 대하여 작성했습니다.

SCSS

스타일시트에 관한 코드개선 방안입니다.

클래스 이름 변경

.easylogic-colorpicker이름이 꽤 긴편이고, 번들링이 되었을때 큰 용량이 만들어지는 요인중 하나가 됩니다.
아마도 .el-colorpicker 같은 모습으로 조금이라도 줄일 필요가 있습니다. 이름 프리픽스 정도는 압축을 해도 문제없을 것입니다.

셀렉터 중첩 줄이기

.colorsets > .menu button 같은 모습은 그나마 괜찮은 편이지만 많아지면 번들링에 코드가 많아지긴 합니다.
아마도 .colorsets-menu button, .colorsets__menu button 모습으로 BEM 형식으로 css를 작성할 요량입니다.

단어 형식의 클래스 이름은 피하기

.color, .menu같은 모습으로 클래스 이름을 지정하면 외부 요소에서 간섭하는 활률이 대단히 높습니다. 흔하게 사용하는 단어는 피해야 하므로 프리픽스를 붙이거나 컴포넌트별로 풀네임으로 사용하는것이 좋을거 같습니다.
.el-colorpicker-color 같은 모습이 되면 중첩시킬 필요없이 사용할 수 있어서 scss 파일을 다른 공간으로 뺄 수 있습니다.

컴포넌트별로 scss 파일을 위치시키기

일부분 컴포넌트화 되어있는 모습이 보이는데 이 부분은 좀 테스트와 검증이 필요해 보입니다.
scss/ 공간에 스타일시트 파일들을 몰아넣었지만 관리가 참 힘들긴 합니다. ^^;
이건 좀 고민을 좀 해보겠습니다.

컬러 규격 정하기

어떠한 컬러를 사용할지 정해서 변수화 시킬 예정입니다.

Theme

우선은 기본테마에 집중하고 싶습니다. 기본값 이름이 chromedevtool으로 되어있지만 default로 변경하고 크게 UI가 변하는 테마로 골라내서 사용하는것이 좋을거라 생각합니다.

• default
• xd
• macos
• ring
• mini-vertical (mini로 합쳐서 한개로..)

기본값의 디자인은 다음과 같을 예정입니다.

Javascript

import

import Color from '../../util/Color';

모습으로 import로 되어있는데 다음과 같이 작성하여 불러올 수 있습니다.

import Color from '~/util/Color';

Can I use this as a drop-in-replacement of https://github.com/easylogic/codemirror-colorpicker?

I've used https://github.com/easylogic/codemirror-colorpicker but I'd like to use it without CodeMirror dependency. It looks like this package had been forked from the original one.

So, can I use this as a drop-in-replacement of https://github.com/easylogic/codemirror-colorpicker?

implement a clear button

hey there

I was looking for a way to implement a button that clears all values and indicators
what's the easiest way to do this?

옵션과 콜백 교통정리

소스코드에서 옵션과 콜백, 공개 메서드들이 정리아 안되어 정리하고 있습니다.

작업 순서

• 안쓰는 메서드와 옵션들 삭제
• 사용하는 옵션들 목록화
• 사용하는 콜백함수 사용방법 재정의 (현재 인스턴스와 옵션으로 이벤트 호출방식이 투트랙으로 되어있습니다.)
• 공개된 메서드와 값 정리 (현재는 전부 공개되어있어 보입니다.)

드롭다운에 관한 기능

일단 숨기는 기능을 가진 기능을 다 빼두고 다시 구현할 생각인데 좀더 고민이 필요해 보입니다.
왠만하면 외부에서 기능 구현을 맡기는게 좋다고 생각합니다. (구현해야할 드롭다운 패턴이 굉장히 많습니다. 예) 컬러박스, 텍스트입력, 버튼..)

현재는 보이기/숨김 기능이 다 섞여있어 BaseColorPicker 클래스 정리를 우선으로 진행하고 추가 기능을 고민해봐야할거 같습니다.

RGBA에 슬라이더추가

현재 컬러피커에 개별 수치 조정에는 슬라이더가 없어 마우스와 키보드를 오가야함

이 위치에

이런 슬라이더 표시 버튼이 추가되어 클릭시 볼륨조정기와 비슷한

슬라이더를 통해 조절할 수 있는 기능 추가 요망

Support preset add event

Add/Remove colorstops

I'm using this package in Angular and it does work for the most part. However adding/removing colorstops does not work (Version 1.10.5)

Adding a colorstop on the very left does work, however it seems to be quite buggy.

Adding one in between to existing stops will throw an error:

Nonetheless, thanks for your great work!

컬러피커에서 필요없는 함수들 제거 (image, gl filter)

컬러피커에서 직접적으로 사용하지 않는 함수는 모두 제거 하고 별도의 라이브러리로 만들 예정입니다.

@easylogic/image-filter
@easylogic/gl-filter

Code does not match documentation

Hi,
thanks for creating this repo. I'm trying to make it work in an Angular application, but it seems the documentation is not correct (anymore). Specifically, I'm trying to use the gradient picker. Could you give me a hint on how it should work as standalone (not CodeMirror)?

To Reproduce

import { Component, ElementRef } from "@angular/core"
import "@easylogic/colorpicker/dist/EasyLogicColorPicker.css"
import EasyLogicColorPicker from "@easylogic/colorpicker"

@Component({
  selector: "tt-gradient-picker",
  templateUrl: "./gradient-picker.component.html"
})
export class GradientPickerComponent {
  private readonly containerElem: any
  private gradientPicker: any

  public constructor(private readonly elem: ElementRef) {
    this.containerElem = this.elem.nativeElement.querySelector("#gradient-picker-container")
    console.log("containerElem", this.containerElem)
    this.initPicker()
  }

  private initPicker(): void {
    this.gradientPicker = new EasyLogicColorPicker.createGradientPicker({
      position: "inline",
      container: this.containerElem,
      type: "chromedevtool",
      colorpickerOptions: {
        type: "chromedevtool"
      },
      gradient: "linear-gradient(to right, red 0%, white 100%)",
      onChange: (gradientString: string, gradientObject: any): void => {
        console.log("change", gradientString, gradientObject)
      }
    })
  }
}

Expected behavior
All imports should be found, no errors displayed

Actual behavior
ERROR in ./node_modules/@easylogic/colorpicker/src/colorpicker/index.js Module not found: Error: Can't resolve '~/colorpicker/theme/circle' in '/mnt/c/WS-xxx/Code/Editor/packages/editor/node_modules/@easylogic/colorpicker/src/colorpicker' ERROR in ./node_modules/@easylogic/colorpicker/src/colorpicker/index.js Module not found: Error: Can't resolve '~/colorpicker/theme/default' in '/mnt/c/WS-xxx/Code/Editor/packages/editor/node_modules/@easylogic/colorpicker/src/colorpicker' ERROR in ./node_modules/@easylogic/colorpicker/src/colorpicker/index.js Module not found: Error: Can't resolve '~/colorpicker/theme/mini' in '/mnt/c/WS-xxx/Code/Editor/packages/editor/node_modules/@easylogic/colorpicker/src/colorpicker' ERROR in ./node_modules/@easylogic/colorpicker/src/colorpicker/index.js Module not found: Error: Can't resolve '~/colorpicker/theme/none' in '/mnt/c/WS-xxx/Code/Editor/packages/editor/node_modules/@easylogic/colorpicker/src/colorpicker' ERROR in ./node_modules/@easylogic/colorpicker/src/colorpicker/index.js Module not found: Error: Can't resolve '~/colorpicker/theme/ring' in '/mnt/c/WS-xxx/Code/Editor/packages/editor/node_modules/@easylogic/colorpicker/src/colorpicker'

Any help is greatly appreciated!

Support last updated color view

컬러라이브러리 변경

컬러 관련된 함수를 @easylogic/color 로 코드를 분리해놓은 상태라

내부 컬러 코드를 이 라이브러리로 대체합니다.

Uncaught TypeError: Event.checkNumberKey is not a function

Describe the bug
Event.checkNumberKey is used in

colorpicker/src/colorpicker/ui/ColorInformation.js

Lines 100 to 106 in 36c9b98

	checkNumberKey(e) {
	return Event.checkNumberKey(e);
	}
	checkNotNumberKey(e) {
	return !Event.checkNumberKey(e);
	}

but there is no checkNumberKey function in Event.js

To Reproduce
Steps to reproduce the behavior:

1. Open a color picker.
2. Enter some value in the hex color area.
3. Got error.

Expected behavior
I found a similar code https://github.com/easylogic/codemirror-colorpicker/blob/master/addon/colorpicker/colorpicker.js#L814-L825 but not sure it can be used as same as here.

Error log

colorpicker.js:6877 Uncaught TypeError: Event.checkNumberKey is not a function
    at ColorInformation.checkNumberKey (colorpicker.js:6877)
    at ColorInformation.keydown$hexCode (colorpicker.js:6964)
    at HTMLInputElement.<anonymous> (colorpicker.js:5402)

Desktop (please complete the following information):

• OS: macOS 13
• Browser: Chrome
• Version: 76.0.3809.100 (Official Build) (64-bit)

css error

Hi , thank you for your hard work!
I follow the document but get wrong result, maybe something with css is wrong.

닫기기능 추가

ui상 닫기가 없음.

아이드로퍼 기능추가

https://developer.chrome.com/blog/new-in-chrome-95/?fbclid=IwAR0ABgTdRLlIsOSnRqfySK0aoD9a1z2owq0gcEsiBZqBsv3rzAut71UhBfQ#eyedropper

크롬에서 색깔을 추출하는 기능이 나왔는데 기능을 컬러피커에 집어넣자는 얘기가 나와서 이슈로 올립니다.

UI에서 살펴보니 컬러 슬라이더 왼쪽 영역에 버튼으로 넣으면 될거 같습니다.
넣으면서 간격과 크기를 줄이는게 불가피해 보입니다.

먼저 @redgoose-dev 가 UI 부분을 선행작업을 하고 @easylogic 님이 컨트롤러 부분을 하면 될거 같습니다.

---

이 작업을 하면서 추가로 useOpacity라는 이름으로 이 값이 true라면 투명도 조절하는 슬라이드가 노출되도록 수정할 예정입니다.

ERROR ReferenceError: isString is not defined

Describe the bug

When I try to run createGradientPicker with option 'gradient: 'conic-gradient(from 90deg at 50% 50%, white 0deg,black 360deg)' - In console error ERROR ReferenceError: isString is not defined.

To Reproduce

1. Run

ColorPickerUI.createGradientPicker({
        position: "inline",
        container: document.querySelector('.test-elem'),
        gradient: 'conic-gradient(from 90deg at 50% 50%, white  0deg,black  360deg)',
      });

Expected behavior
Inited picker with correct gradient

Screenshots
Error in console

Interface while error

Desktop (please complete the following information):

• OS: MacOS
• Browser chrome
• Version 97.0.4692.71

Additional context
String for gradient was generated by gradient picker. I can generate this gradient value without any error, but can't init picker with generated value. Error reproduce also with repeating-conic-gradient value.

how to use gradient picker in browser

hey there
I couldn't figure out how to initiate the gradient picker in browser. I'm not using any frameworks

this is my code

this.gradientPicker = new EasyLogicColorPicker({
  position: "inline",
  container: document.querySelector('#color-picker'),
  gradient: 'linear-gradient(to right, white 0%, black 100%)',
});

MacOS 환경에서 node-sass 인스톨 문제

• MacOS: 11.4
• node: 16.3.0
• npm: 7.15.1

MacOS에서 gyp ERR련 오류로 npm install이 안되는 현상을 겪게 되었습니다.

---

다음과 같은 방식으로 인스톨과 개발화면까지 여는데 성공했습니다.

1. package.json의 디펜더시 항목에서 "rollup-plugin-scss": "^0.4.0", 삭제합니다. (인스톨시 오류가 나서 막히기 때문에 코드로 삭제합니다.)
2. npm install로 인스톨은 성공합니다.
3. npm install -d node-sass를 실행하여 최신버전으로 패키지 추가합니다.
4. npm run dev 실행하여 개발화면을 확인합니다.

이쯤으로 빌드까지 되는걸 확인했습니다.
비슷한 상황을 겪는분이 있을까봐 작성해둡니다.

[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event.

Describe the bug
[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. was printed a lot from colorpicker.js.

To Reproduce
Turn on verbose on the browser console and see warnings.

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome
• Version: 76.0.3809.132 (Official Build) (64-bit)

Additional context
XRef: https://www.chromestatus.com/feature/5745543795965952
XRef: https://developers.google.com/web/tools/lighthouse/audits/passive-event-listeners?hl=ko

Wrong color after three clicks

Describe the bug
Gradient color picker - After third click in the same place on color steps - one of color #NaNNaNNaN and all gradient is broken after that.

To Reproduce

1. Click on color step panel three times in the same place
2. Look at gradient string linear-gradient(90deg, white 0%, #NaNNaNNaN 46.330275229357795%,#898989 46.330275229357795% 46.330275229357795%,black 100%)

Expected behavior
Gradient has plus three selected steps

Screenshots

Desktop (please complete the following information):

• OS: MacOS
• Browser chrome
• Version 97.0.4692.71

Additional context
Firstly i found this error in npm package , I installed it in my angular application and this error reproduce even after second click. Then i tried to install development application, and there was error after third click. Also I noticed that npm package and develop version has different UI, is it ok? especially I can't see "Offset connected " checkbox in development app, only text. Also weird that I can't reproduce error on demo site

Support all connected colorstop

modify color palatte drag bug

add VSCode Style Picker

Gradient Picker: how to remove a color stop?

Gradient Picker onLastUpdate callback

Is your feature request related to a problem? Please describe.
The onLastUpdate callback doesn't working on Gradient Picker.

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

GradientPicker 코드 분리

colorpicker 내부에 같이 존재하는 GradientPicker 를 분리합니다.

gradientpicker 에서 colorpicker 를 사용하는 개념을 다시 구성합니다.

@easylogic/gradientpicker

프로젝트로 관련코드는 옮겨질 예정입니다.

컬러피커 인스턴스 객체로 만드는 방식에 대하여..

현재 컬러피커가 두가지 방식으로 컴포넌트를 만들어서 사용하는것으로 보입니다.

방법1)

import ColorPickerUI from '@easylogic/colorpicker';
const colorPicker = ColorPickerUI.create({
  ...
});

방법2)

import { ColorPicker } from '@easylogic/colorpicker';
const colorPicker = new ColorPicker({
  ...
});

이런 방식인데 사용하는 방식을 단순화 시키는게 좋을거 같습니다.
단순화 시키게 되면 src/index.js이랑 src/colorpicker/index.js 파일들을 단순화 시킬 수 있습니다.

방법2 방식으로 컴포넌트 한개로 합치면 사용법도 단순화할 수 있을거 같습니다.

그리고 util 부분의 함수들도 공개로 노출되어있는데 노출시킬 필요가 없어 보이긴 합니다. 용도에 의한 집중을 하는것이 좋지 않을까요.. util에 들어있는 컬러 함수들은 별도의 프로젝트로 분리 시켜서 그 용도로만 사용하는게 개인적으로 좋아 보입니다.

의견 부탁드립니다. :)