The easylogic.studio from kode-team

Support KeyMap Manager (Windows & Mac & Linux)

vscode-liked event system을 구축

editor.shortcuts.registerShortCut({
    key: 'cmd+c',  // 공통 키 설정 
    win: 'win+c',   // windows 일 때 동작 
    mac: 'cmd+c',  // mac os 일 때 동작 
    linux: 'ctrl+c',  // linux 일 때 동작 
    command: 'clipboard.copy',
    description: 'copy',
    args: { 'text' : 'test' },
    when:  'CanvasView'
});

Support to firebase for projects

Timeline input 길이가 맞지 않음

FF 에서 input 의 길이를 상위 Node 와 동일하도록 width :100% 으로 맞춰야함

Support external component system

Support CSS Layout Engine (flex, grid)

support flex layout
support grid layout

행위가 너무 불편하다.

transform 도구가 중간에 있으니 작은 크기의 element 는 제어하기 힘들다. 그냥 빼자.
rotate 만 남겨두고 그냥 나머지 UI 는 따로 생각하자.
3D Transform 은 화면 다른 곳에 따로 둬도 될 듯 하다.
Selection 을 하고 나서 , 실제로 또 다른 selection 을 할려면 엄청 애매하다.
예를 들어 Artboard 를 선택하고 나서는 이후에 다른 객체를 선택하는 것이 불가능 하다.
Selection 을 모델을 바꿔야 할 듯 하다. 예를 들어 artboard 선택 이후 다른 객체를 선택할 수 있을려면 어떻게 해야할 까?
selection 을 순수하게 dom 모델로 바꿀까?
selection 에서 move 는 언제 이뤄질까?
selection 에서 가운데 영역(move) 에 이벤트를 주지 않으면 되지만 그렇게 되면 다른 동작은 어떻게 하지?
확대/축소를 자연스럽게 해야하는데 브라우저 확대를 어떻게 막을 것인가?
특정크기 이하는 selection 툴 넓이를 고장하자.
확대/축소를 좀 더 편하게
가운데 영역을 최초 클릭 할 때는 이동, 그 다음으로 클릭할 때는 selection 기능으로

Support rotate icon for selection

동시 편집 문서와 회원 개념, 히스토리 undo/redo 설계

손쉽게 로그인이 가능하고
하나의 문서에 여러명이 접속해서 편집이 가능해야하고
채팅도 되어야 하고
커멘트도 되어야 하고
서로 간의 움직임이 보여야 하고
항상 마지막 시점을 공유해야하고

Gradient Assets 을 Gradient Picker 에서 사용할 수 있도록 하기

Support to animate stroke, fill property for svg item

커스텀 컴포넌트 구조 설계

Cube, Cylinder 객체 같은 컴포넌트를 외부에서 추가 할 수 있도록 한다.
컴포넌트의 플러그인 정의

Implement pattern path (as brush)

svg 로 만든 패턴을 path 에 입힌다.

path 의 position: middle, top, bottom
패턴을 path 의 동선에 맞게 좌표를 재 조정 하기

Support smart guide line

support grid snap
support object
support distance for parent and siblings

Support comment pointer

특정 지점에 comment 를 적을 수 있게 하자.
comment 모드를 따로 만들어서 정리하자.
하나의 comment 는 여러명이서 이어서 채팅처럼 이야기 할 수 있다. ex) 제플린, Figma, Framer 등등
유저 로그인을 꼭 만들어야할듯

Support border-radius tool icon

Support Google WebFont

font list : https://developers.google.com/fonts/docs/developer_api
css api : https://developers.google.com/fonts/docs/css2

Support to transform selected segments in SVG Item

Support to select group segments in path and polygon

support free sample image list

무료 샘플 이미지를 가지고 와서 적용해보자.

Failed to compile :(

What a wonderful editor and library to build it!
Congrats Jinho (and your team I guess) :)

I was curious to build the master version on my Ubuntu 19.10 and at build time, I got:

npm WARN npm npm does not support Node.js v10.15.2
npm WARN npm You should probably upgrade to a newer version of node as we
npm WARN npm can't make any promises that npm will work with this version.
npm WARN npm Supported releases of Node.js are the latest release of 4, 6, 7, 8, 9.
npm WARN npm You can find the latest version at https://nodejs.org/

> @easylogic/[email protected] dev /media/Data/editor
> webpack-dev-server --config=webpack.dev.config.js --progress --open

10% building 1/1 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:8081/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /media/Data/editor
12% building 22/28 modules 6 active /media/Data/editor/node_modules/events/events.jsℹ ｢wdm｣: wait until bundle finished: /
✖ ｢wdm｣: Hash: f92d05deb5947faf1fdf
Version: webpack 4.43.0
Time: 32285ms
Built at: 05/29/2020 2:39:22 PM
                               Asset      Size  Chunks             Chunk Names
                        ./index.html  1.85 KiB          [emitted]  
3a8ca398e6a5c3b83f4de7c60843a9a0.png   4.7 KiB          [emitted]  
                          bundle.css   603 KiB    main  [emitted]  main
                             main.js  4.34 MiB    main  [emitted]  main
Entrypoint main = bundle.css main.js
[0] multi (webpack)-dev-server/client?http://localhost:8081 ./src/index.js 40 bytes {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8081] (webpack)-dev-server/client?http://localhost:8081 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./src/colorpicker/index.js] 1.31 KiB {main} [built]
[./src/csseditor/index.js] 1.91 KiB {main} [built]
[./src/index.js] 1.65 KiB {main} [built]
[./src/scss/index.scss] 39 bytes {main} [built]
[./src/util/index.js] 398 bytes {main} [built]
    + 691 hidden modules

ERROR in ./src/util/App.js
Module not found: Error: Can't resolve '../editor/Editor' in '/media/Data/editor/src/util'
 @ ./src/util/App.js 29:0-42 56:27-33
 @ ./src/util/index.js
 @ ./src/index.js

ERROR in ./src/csseditor/ui/control/LayerTab.js
Module not found: Error: Can't resolve './ComponentItems' in '/media/Data/editor/src/csseditor/ui/control'
 @ ./src/csseditor/ui/control/LayerTab.js 29:0-46 61:24-38
 @ ./src/csseditor/ui/control/ObjectList.js
 @ ./src/csseditor/editor/index.js
 @ ./src/csseditor/index.js
 @ ./src/index.js

ERROR in ./src/csseditor/ui/property/index.js
Module not found: Error: Can't resolve './KeyframeProperty' in '/media/Data/editor/src/csseditor/ui/property'
 @ ./src/csseditor/ui/property/index.js 17:0-50 96:20-36
 @ ./src/csseditor/ui/control/Inspector.js
 @ ./src/csseditor/editor/index.js
 @ ./src/csseditor/index.js
 @ ./src/index.js
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = ./index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 1.8 KiB {0} [built]
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!node_modules/sass-loader/dist/cjs.js??ref--6-3!src/scss/index.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./node_modules/sass-loader/dist/cjs.js?!./src/scss/index.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--6-3!./src/scss/index.scss 623 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.35 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/url-escape.js] 460 bytes {mini-css-extract-plugin} [built]
    [./src/scss/images/icon128.png] 82 bytes {mini-css-extract-plugin} [built]
ℹ ｢wdm｣: Failed to compile.

localhost:8080 is used by a running container so 8081 is legit.
BTW, I noted it opens a browser page which calls scripts d-collect.jennifersoft.com and googletagmanager. Is it really needed to run it locally?

Thank you very much again for this wonderful project :)
Have a great day,
from France.