Merge pull request #87 from entrylabs/feature/entryjs

entry-ml, entry-tool 추가내용 작성
entrylabs · Jun 5, 2024 · 7c12567 · 7c12567
2 parents c4393e7 + 60696c0
commit 7c12567
Show file tree

Hide file tree

Showing 2 changed files with 198 additions and 21 deletions.
diff --git a/source/entryjs/api/2024-02-29-popup.md b/source/entryjs/api/2024-02-29-popup.md
@@ -52,6 +52,7 @@ updated: 2024-04-08
   - [projects](#projects)
   - [table](#table)
   - [이벤트](#이벤트)
+  - [openManager 이벤트](#openManager-이벤트)
 
 <br>
 
@@ -75,6 +76,17 @@ updated: 2024-04-08
 
 <br>
 
+- [Entry제공 함수](#Entry제공-함수)
+  - [Entry.generateHash](#Entry-generateHash)
+  - [Entry.container.addObject](#Entry-container-addObject)
+  - [Entry.playground.addPicture](#Entry-playground-addPicture)
+  - [Entry.playground.addSound](#Entry-playground-addSound)
+  - [Entry.playground.addExpansionBlocks](#Entry-playground-addExpansionBlocks)
+  - [Entry.playground.removeExpansionBlocks](#Entry-playground-removeExpansionBlocks)
+  - [Entry.playground.dataTable.addSources](#Entry-playground-dataTable-addSources)
+
+<br>
+
 - [기타](#기타)
   - [ListTool](#ListTool)
   - [DataAnalytics](#DataAnalytics)
@@ -808,7 +820,7 @@ popup.on('submit', (expansionItems) => {
     "isInitialized": false,
     "api": "/api/expansionBlock/ko/festival",
     "active": false
-  	// 이하 프로퍼티들은 확장블록별 공유의 프로퍼티입니다. 아래는 예시로써 '행사' 확장블록의 공유 프로퍼티입니다.
+    // 이하 프로퍼티들은 확장블록별 공유의 프로퍼티입니다. 아래는 예시로써 '행사' 확장블록의 공유 프로퍼티입니다.
     "locationMap": {
         "Seoul": {
             "code": 1,
@@ -1383,6 +1395,66 @@ item 선택 해제시 발생하는 이벤트입니다.
 
 <br>
 
+<br>
+
+
+
+### openManager 이벤트
+
+엔트리 WS에서 '오브젝 추가하기', '모양 추가하기', '소리 추가하기'와 같은 버튼을 클릭하면 각 타입에 맞는 openManager 이벤트가 entryjs에서 발생합니다.
+
+각 타입에 맞는 Popup 창이 show되도록 이벤트 핸들링을 해주어야 합니다.
+
+````js
+// entryjs 초기화 이후
+import { Popup } from '@entrylabs/tool';
+const popup = new Popup({...});
+
+const addEventListener = Entry.addEventListener.bind(Entry);
+const removeAllEventListener = Entry.removeAllEventListener.bind(Entry);
+
+// '오브젝트 추가하기' 클릭시 dispatch
+removeAllEventListener('openSpriteManager');
+addEventListener('openSpriteManager', () => {
+    this.popup.show('sprite');
+});
+// '모양 추가하기' 클릭시 dispatch
+removeAllEventListener('openPictureManager');
+addEventListener('openPictureManager', () => {
+    this.popup.show('picture');
+});
+// '소리 추가하기' 클릭시 dispatch
+removeAllEventListener('openSoundManager');
+addEventListener('openSoundManager', () => {
+    this.popup.show('sound');
+});
+// '인공지능 블록 불러오기' 클릭시 dispatch
+removeAllEventListener('openAIUtilizeBlockManager');
+addEventListener('openAIUtilizeBlockManager', () => {
+    const blocks = this.popup.aiUtilizeBlocks;
+    this.popup.show('aiUtilize', blocks);
+});
+// '확장 블록 불러오기' 클릭시 dispatch
+removeAllEventListener('openExpansionBlockManager');
+addEventListener('openExpansionBlockManager', () => {
+    const blocks = this.popup.expansionBlocks;
+    this.popup.show('expansion', blocks);
+});
+// '모양 가져오기' 클릭시 dispatch
+removeAllEventListener('openPictureImport');
+addEventListener('openPictureImport', () => {
+    this.popup.show('paint');
+});
+````
+
+
+
+<br>
+
+<br>
+
+
+
 ## Widget
 
 **이 문서는 작성중인 문서입니다.**
@@ -1421,7 +1493,121 @@ item 선택 해제시 발생하는 이벤트입니다.
 
 <br>
 
-### 기타
+## Entry제공 함수
+이 문서의 예시코드에서 사용중인 Entry객체 하위 함수에 대해 기술합니다.
+이 단원에 작성된 내용은 추후 별도의 페이지로 통합 될 수 있습니다.
+
+<br>
+
+### Entry.generateHash
+
+[소스원본](https://github.com/entrylabs/entryjs/blob/cd630e9b9fa41a5c7bfd76752d507d5b02be78cf/src/util/utils.js#L927)
+
+숫자와 알파벳으로 구성된 n자리 랜덤 해시값을 리턴합니다.
+
+| 파라미터 | 타입   | 선택적 | 기본값 | 설명                          |
+| -------- | ------ | ------ | ------ | ----------------------------- |
+| length   | number | ✔️      | 4      | 리턴할 해시값의 자릿수입니다. |
+
+Return : String
+
+<br>
+
+### Entry.container.addObject
+
+[소스원본](https://github.com/entrylabs/entryjs/blob/cd630e9b9fa41a5c7bfd76752d507d5b02be78cf/src/class/container.js#L368)
+
+엔트리 WS에 오브젝트를 추가합니다.
+
+| 파라미터    | 타입   | 선택적 | 기본값 | 설명                                                         |
+| ----------- | ------ | ------ | ------ | ------------------------------------------------------------ |
+| objectModel | Object |        |        | WS에 추가할 오브젝트 모델정보입니다.                         |
+| index       | number |        |        | 삽입될 오브젝트의 인덱스입니다. 일반적으로 0값을 입력합니다. |
+
+Return : void
+
+<br>
+
+### Entry.playground.addPicture
+
+[소스원본](https://github.com/entrylabs/entryjs/blob/015d78d3ec88c0b048088d4093fcffa00bb556cb/src/class/playground.js#L1245)
+
+엔트리WS에 모양(picture)을 추가합니다.
+
+| 파라미터 | 타입    | 선택적 | 기본값 | 설명                                                         |
+| -------- | ------- | ------ | ------ | ------------------------------------------------------------ |
+| picture  | Object  |        |        | WS에 추가할 모양 정보입니다.                                 |
+| isNew    | boolean | ✔️      | false  | 추가할 모양이 신규인지 여부를 나타냅니다.<br />이 값에따라 picture파라미터의 id값을 재사용할지 판단합니다. |
+| isSelect | boolean | ✔️      | true   | 이 모양을 포함하는 오브젝트에서 이 모양을 선택하고 있는지 여부를 나타냅니다.<br />선택된 이미지는 오브젝트의 대표썸네일이 되며, 모양 탭에서 선택된 상태가 됩니다. |
+
+Return : void
+
+<br>
+
+### Entry.playground.addSound
+
+[소스원본](https://github.com/entrylabs/entryjs/blob/015d78d3ec88c0b048088d4093fcffa00bb556cb/src/class/playground.js#L1500)
+
+엔트리 WS에 소리(sound)를 추가합니다.
+
+| 파라미터   | 타입    | 선택적 | 기본값 | 설명                                                         |
+| ---------- | ------- | ------ | ------ | ------------------------------------------------------------ |
+| sound      | Object  |        |        | WS에 추가할 소리 정보입니다.                                 |
+| NotForView | boolean | ✔️      | false  | **현재 사용하지 않는 파라미터입니다.**                       |
+| isNew      | boolean | ✔️      | false  | 추가할 소리가 신규인지 여부를 나타냅니다.<br />이 값에따라 sound파라미터의 id값을 재사용할지 판단합니다. |
+| isSelect   | boolean | ✔️      | true   |                                                              |
+
+Return : void
+
+<br>
+
+<br>
+
+### Entry.playground.addExpansionBlocks
+
+[소스원본1](https://github.com/entrylabs/entryjs/blob/015d78d3ec88c0b048088d4093fcffa00bb556cb/src/class/playground.js#L1475) [소스원본2](https://github.com/entrylabs/entryjs/blob/015d78d3ec88c0b048088d4093fcffa00bb556cb/src/command/commands/object.js#L221)
+
+파라미터로 넘겨준 block들의 name값이 Entry.EXPANSION_BLOCK에 포함된 경우, 해당 블럭들을 초기화하고 WS에 노출시킵니다.
+
+| 파라미터        | 타입           | 선택적 | 기본값 | 설명                      |
+| --------------- | -------------- | ------ | ------ | ------------------------- |
+| expansionBlocks | Array< Object> |        |        | 추가할 블록의 배열입니다. |
+
+Return : void
+
+<br>
+
+### Entry.playground.removeExpansionBlocks
+
+[소스원본1](https://github.com/entrylabs/entryjs/blob/015d78d3ec88c0b048088d4093fcffa00bb556cb/src/class/playground.js#L1478) [소스원본2](https://github.com/entrylabs/entryjs/blob/015d78d3ec88c0b048088d4093fcffa00bb556cb/src/command/commands/object.js#L250)
+
+파라미터로 넘겨준 block들의 name값들을 기반으로 Entry.expansionBlocks에서 제거하고 해당 블럭들을 WS에서 미노출시킵니다.
+
+| 파라미터        | 타입           | 선택적 | 기본값 | 설명                      |
+| --------------- | -------------- | ------ | ------ | ------------------------- |
+| expansionBlocks | Array< Object> |        |        | 제거할 블록을 배열입니다. |
+
+Return : void
+
+<br>
+
+### Entry.playground.dataTable.addSources
+
+[소스원본](https://github.com/entrylabs/entryjs/blob/015d78d3ec88c0b048088d4093fcffa00bb556cb/src/class/DataTable.js#L119)
+
+엔트리 WS에 테이블 정보를 추가합니다.
+
+| 파라미터 | 타입            | 선택적 | 기본값 | 설명                           |
+| -------- | --------------- | ------ | ------ | ------------------------------ |
+| tables   | Array< Object > | ✔️      | [ ]    | WS에 추가할 테이블 정보입니다. |
+
+Return : void
+
+<br>
+
+<br>
+
+## 기타
 
 ### ListTool
 

diff --git a/source/entryjs/api/2024-04-24-ml.md b/source/entryjs/api/2024-04-24-ml.md
@@ -62,37 +62,28 @@ updated: 2024-05-22
 
     
 
-## ~~설치 및 세팅~~
-
-2024.04.30 기준 entrylabs/entry-ml 레포지토리가 추가되어 있지 않습니다. 추후 제공 예정입니다.
-
-### 패키지 매니저로 가져오기
-
-```bash
-# in package.json
-"dependencies": {
-    # 접두사 dist/가 있는 브랜치는 빌드파일만 있는 브랜치입니다.
-    "entry-ml": "git+https://github.com/entrylabs/entry-ml.git#dist/develop",
-}
-```
-
+## 설치 및 세팅
 
+2024.06.04 기준 entry-ml 레포지토지토리는 압축된 번들 파일로 제공됩니다.
+entry-ml 파일을 제공받는 방법에 대해서는 [엔트리 고객센터]([email protected])로 문의 부탁드립니다.
 
+제공받은 압축파일을 해제하면 아래와 같은 구조로 되어 있습니다.
+아래의 파일들을 모두 같은 위치의 디렉토리에 두고 사용해야 합니다.
+- **entry-ml.css**, **entry-ml.js** : html에서 불러올 entry-ml의 메인 스크립트와 css파일입니다.
+- **313.css**, **313.js**, **549.css**, **549.js**, **869.js**, **933.js**, **khaiii.js** : entry-ml.js, entry-ml.css에서 동적으로 불러오는 js와 css파일입니다.
+- **libkhaiii.wasm** : khaiii.js에서 사용하는 wasm파일입니다.
+- **resources** : khaiii.js에서 사용하는 리소스가 포함된 디렉토리입니다.
 
 
 ### External JavaScript로 가져오기
 
 html에서 script태그를 사용하여 번들js와 css파일을 불러와 사용할 수 있습니다.
+불러올 js와 css는 entry-ml.js와 entry-ml.css입니다.
 
 ```html
-# 설치경로에서 가져오기: node_modules
-<link rel='stylesheet' href='/node_modules경로/entry-ml/dist/entry-ml.css'/>
-<script type="text/javascript" src='/node_modules경로/entry-ml/dist/entry-ml.js'></script>
-
 # 설치경로에서 가져오기: 직접 추가한 경우
 <link rel='stylesheet' href='파일경로/entry-ml.css'/>
 <script type="text/javascript" src='파일경로/entry-ml.js'></script>
-
 ```
 
 <br >