easylogic / colorpicker Goto Github PK
View Code? Open in Web Editor NEWpure js colorpicker
Home Page: https://colorpicker.easylogic.studio
License: MIT License
pure js colorpicker
Home Page: https://colorpicker.easylogic.studio
License: MIT License
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
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
linear-gradient(90deg, white 0%, #NaNNaNNaN 46.330275229357795%,#898989 46.330275229357795% 46.330275229357795%,black 100%)
Expected behavior
Gradient has plus three selected steps
Desktop (please complete the following information):
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
Describe the bug
Event.checkNumberKey
is used in
colorpicker/src/colorpicker/ui/ColorInformation.js
Lines 100 to 106 in 36c9b98
checkNumberKey
function in Event.js
To Reproduce
Steps to reproduce the behavior:
hex
color area.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):
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?
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!
ui상 닫기가 없음.
컬러 관련된 함수를 @easylogic/color 로 코드를 분리해놓은 상태라
내부 컬러 코드를 이 라이브러리로 대체합니다.
컬러피커 개선에 대해 쭉 적어봐요.
단순히 색상을 선택하는 도구를 100kb 이상 사용하는것은 이용하는 입장에서 부담이 큽니다. 컴포넌트를 더욱 단순화시켜 역할에 더 집중하고 경량화 시키는데 목표를 둬야 한다고 봅니다.
우선 제가 할 수 있는 일들에 대하여 작성했습니다.
스타일시트에 관한 코드개선 방안입니다.
.easylogic-colorpicker
이름이 꽤 긴편이고, 번들링이 되었을때 큰 용량이 만들어지는 요인중 하나가 됩니다.
아마도 .el-colorpicker
같은 모습으로 조금이라도 줄일 필요가 있습니다. 이름 프리픽스 정도는 압축을 해도 문제없을 것입니다.
.colorsets > .menu button
같은 모습은 그나마 괜찮은 편이지만 많아지면 번들링에 코드가 많아지긴 합니다.
아마도 .colorsets-menu button
, .colorsets__menu button
모습으로 BEM 형식으로 css를 작성할 요량입니다.
.color
, .menu
같은 모습으로 클래스 이름을 지정하면 외부 요소에서 간섭하는 활률이 대단히 높습니다. 흔하게 사용하는 단어는 피해야 하므로 프리픽스를 붙이거나 컴포넌트별로 풀네임으로 사용하는것이 좋을거 같습니다.
.el-colorpicker-color
같은 모습이 되면 중첩시킬 필요없이 사용할 수 있어서 scss 파일을 다른 공간으로 뺄 수 있습니다.
일부분 컴포넌트화 되어있는 모습이 보이는데 이 부분은 좀 테스트와 검증이 필요해 보입니다.
scss/
공간에 스타일시트 파일들을 몰아넣었지만 관리가 참 힘들긴 합니다. ^^;
이건 좀 고민을 좀 해보겠습니다.
어떠한 컬러를 사용할지 정해서 변수화 시킬 예정입니다.
우선은 기본테마에 집중하고 싶습니다. 기본값 이름이 chromedevtool
으로 되어있지만 default
로 변경하고 크게 UI가 변하는 테마로 골라내서 사용하는것이 좋을거라 생각합니다.
기본값의 디자인은 다음과 같을 예정입니다.
import Color from '../../util/Color';
모습으로 import로 되어있는데 다음과 같이 작성하여 불러올 수 있습니다.
import Color from '~/util/Color';
개발화면에서 그라디언트 컴포넌트가 추가 되었는데 그에대한 예제화면을 조정할 필요가 있습니다.
스타일시트와 컨트롤러 섹션의 기능을 조정할 예정입니다.
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.
MacOS에서 gyp ERR
련 오류로 npm install
이 안되는 현상을 겪게 되었습니다.
다음과 같은 방식으로 인스톨과 개발화면까지 여는데 성공했습니다.
package.json
의 디펜더시 항목에서 "rollup-plugin-scss": "^0.4.0",
삭제합니다. (인스톨시 오류가 나서 막히기 때문에 코드로 삭제합니다.)npm install
로 인스톨은 성공합니다.npm install -d node-sass
를 실행하여 최신버전으로 패키지 추가합니다.npm run dev
실행하여 개발화면을 확인합니다.이쯤으로 빌드까지 되는걸 확인했습니다.
비슷한 상황을 겪는분이 있을까봐 작성해둡니다.
소스코드에서 옵션과 콜백, 공개 메서드들이 정리아 안되어 정리하고 있습니다.
작업 순서
일단 숨기는 기능을 가진 기능을 다 빼두고 다시 구현할 생각인데 좀더 고민이 필요해 보입니다.
왠만하면 외부에서 기능 구현을 맡기는게 좋다고 생각합니다. (구현해야할 드롭다운 패턴이 굉장히 많습니다. 예) 컬러박스, 텍스트입력, 버튼..)
현재는 보이기/숨김 기능이 다 섞여있어 BaseColorPicker
클래스 정리를 우선으로 진행하고 추가 기능을 고민해봐야할거 같습니다.
컬러피커에서 직접적으로 사용하지 않는 함수는 모두 제거 하고 별도의 라이브러리로 만들 예정입니다.
@easylogic/image-filter
@easylogic/gl-filter
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.
Desktop (please complete the following information):
Additional context
XRef: https://www.chromestatus.com/feature/5745543795965952
XRef: https://developers.google.com/web/tools/lighthouse/audits/passive-event-listeners?hl=ko
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
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):
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.
현재 컬러피커가 두가지 방식으로 컴포넌트를 만들어서 사용하는것으로 보입니다.
방법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에 들어있는 컬러 함수들은 별도의 프로젝트로 분리 시켜서 그 용도로만 사용하는게 개인적으로 좋아 보입니다.
의견 부탁드립니다. :)
gradientpicker UI 관련된 코드도 제거 합니다.
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!
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?
크롬에서 색깔을 추출하는 기능이 나왔는데 기능을 컬러피커에 집어넣자는 얘기가 나와서 이슈로 올립니다.
UI에서 살펴보니 컬러 슬라이더 왼쪽 영역에 버튼으로 넣으면 될거 같습니다.
넣으면서 간격과 크기를 줄이는게 불가피해 보입니다.
먼저 @redgoose-dev 가 UI 부분을 선행작업을 하고 @easylogic 님이 컨트롤러 부분을 하면 될거 같습니다.
이 작업을 하면서 추가로 useOpacity
라는 이름으로 이 값이 true
라면 투명도 조절하는 슬라이드가 노출되도록 수정할 예정입니다.
다크ui에 어울리게 생성시 다크버전을 설정할 수 있는 옵션 추가 요망
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%)',
});
colorpicker 내부에 같이 존재하는 GradientPicker 를 분리합니다.
gradientpicker 에서 colorpicker 를 사용하는 개념을 다시 구성합니다.
@easylogic/gradientpicker
프로젝트로 관련코드는 옮겨질 예정입니다.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.