sample.js

// 일반
/**
 * @module
 * @name Common
**/

// 변수
/**
 * @method
 * @memberOf module:Common#
 * @name var
 * @description
 * 변수를 선언하는 키워드<br />
 * const, let 등은 ES5 문법만 허용하기 때문에 사용 불가
 * @example
 * var variable = 10
**/

// 조건
/**
 * @method
 * @memberOf module:Common#
 * @name if
 * @description 상태에 따른 분기 처리 기능
 * @example
 * if (condition === true) {
 *   // do something...
 * }
**/

/**
 * @method
 * @memberOf module:Common#
 * @name elseif
 * @example
 * else if (condition === false) {
 *   // do something...
 * }
**/

/**
 * @method
 * @memberOf module:Common#
 * @name else
 * @example
 * else {
 *   // do something...
 * }
**/

// 반복
/**
 * @method
 * @memberOf module:Common#
 * @name while
 * @description 상황에 따른 반복 처리 기능
 * @example
 * while (condition === true) {
 *   // do something...
 * }
**/

/**
 * @method
 * @name for
 * @memberOf module:Common#
 * @example
 * for (var i = 0; i < 10; i++) {
 *   // do something...
 * }
**/


// 데이터
/**
 * @module
 * @name Data
 */

/**
 * @name setGlobalData
 * @method
 * @memberOf module:Data#
 * @description
 * 데이터를 전역 스코프에 저장함<br />
 * <br />
 * 모든 프로젝트, 모든 페이지 스코프에서 데이터를 저장할 수 있음<br />
 * 이미 저장된 이름으로 데이터를 저장 시 덮어쓰기 됨
 * @param {object} dataPair key, value로 이루어진 데이터 객체
 * @returns {void}
 * @example
 * setGlobalData({
 *   'name': 'xelf',
 *   'phone': '1234'
 * })

**/

/**
 * @name setGlobalData
 * @method
 * @memberOf module:Data#
 * @description
 * 데이터를 전역 스코프에 저장함<br />
 * <br />
 * 모든 프로젝트, 모든 페이지 스코프에서 데이터를 저장할 수 있음<br />
 * 이미 저장된 이름으로 데이터를 저장 시 덮어쓰기 됨
 * @param {string} key 데이터 이름
 * @param {*} value 데이터
 * @returns {void}
 * @example
 * setGlobalData('score', 560)
**/

/**
 * @name getGlobalData
 * @method
 * @memberOf module:Data#
 * @description
 * 전역 스코프에 저장된 데이터에 접근함<br />
 * <br />
 * 모든 프로젝트, 모든 페이지 스코프에서 전역 스코프에 저장된 데이터에 접근할 수 있음<br />
 * 저장되지 않은 이름의 데이터에 접근 시 null을 반환함
 * @param {string} key 데이터 이름
 * @returns {*} 저장된 데이터
 * @example
 * getGlobalData('score')
**/

// 프로젝트
/**
 * @module
 * @name Utils
 */

/**
 * @name random
 * @method
 * @memberOf module:Utils#
 * @description
 * 범위를 지정하지 않을 경우에는 0이상, 1미만의 float 형 숫자가 생성됨<br />
 * 시작, 종료, 소수점 여부를 파라미터로 전달할 수 있음<br />
 * @param {number} [start = 0] 렌덤 값의 최소값
 * @param {number} [end = 1] 렌덤 값의 최대값
 * @param {boolean} [isFloat = true] 소수점 여부
 * @returns {number}
 * @example
 * random(5, 50, false)
 * // [5 ~ 50 사이의 무작위 정수]
**/

/**
 * @name round
 * @method
 * @memberOf module:Utils#
 * @description
 * 반올림 할 수와 자리수를 파라미터로 받아서 반올림 함
 * @param {number} number 반올림이 필요한 수
 * @param {number} [precision = 0] 반올림할 자리 수
 * @returns {number}
 * @example
 * round(49.5)
 * // 50
**/

/**
 * @name ceil
 * @method
 * @memberOf module:Utils#
 * @description
 * 올림 할 수와 자리수를 파라미터로 받아서 올림 함
 * @param {number} number 올림이 필요한 수
 * @param {number} [precision = 0] 올림할 자리 수
 * @returns {number}
 * @example
 * ceil(50.1)
 * // 51
**/

/**
 * @name floor
 * @method
 * @memberOf module:Utils#
 * @description
 * 내림 할 수와 자리수를 파라미터로 받아서 내림 함
 * @param {number} number 내림이 필요한 수
 * @param {number} [precision = 0] 내림할 자리 수
 * @returns {number}
 * @example
 * floor(50.1)
 * // 50
**/

/**
 * @name pow
 * @method
 * @memberOf module:Utils#
 * @description
 * 수를 제곱함 <br />
 * 제곱 결과를 계산할 수 없을 경우 NaN을 반환함
 * @param {number} number 제곱의 밑
 * @param {number} [exponent = 2] 제곱의 지수
 * @returns {number}
 * @example
 * pow(5)
 * // 25
**/

/**
 * @name sqrt
 * @method
 * @memberOf module:Utils#
 * @description
 * 숫자의 제곱근을 반환함<br />
 * 계산할 수 없을 경우 NaN을 반환함
 * @param {number} number 제곱근을 할 수
 * @returns {number}
 * @example
 * sqrt(625)
 * // 25
**/

/**
 * @name parseToNumber
 * @method
 * @memberOf module:Utils#
 * @description
 * Data를 숫자로 변경함<br />
 * 숫자로 변경할 수 없을 경우 NaN을 반환함
 * @param {*} value 데이터
 * @returns {number}
 * @example
 * parseToNumber('50')
 * // 50
**/

/**
 * @name parseToString
 * @method
 * @memberOf module:Utils#
 * @description
 * Data를 String으로 변경함<br />
 * string, number, boolean, Array 형의 데이터를 지원함<br />
 * 그 외의 데이터 형을 변환할 경우 의도하지 않은 문자열로 변경될 가능성이 있음
 * @param {*} value 데이터
 * @returns {string}
 * @example
 * parseToString(50)
 * // '50'
**/

/**
 * @name split
 * @method
 * @memberOf module:Utils#
 * @description
 * 구분자를 지정하여 문자열을 분리해서 배열로 변환함<br />
 * 구분자를 지정하지 않을 경우 모든 문자열을 분리함
 * @param {string} value 나눠질 문자열
 * @param {string} [separator = ''] 구분자
 * @returns {Array}
 * @example
 * split('12345')
 * // [1,2,3,4,5]
**/

/**
 * @name pad
 * @method
 * @memberOf module:Utils#
 * @description
 * 기준 길이만큼 문자열의 빈 공간을 앞 뒤로 채움<br />
 * 기준 길이가 문자열보다 짧을 경우 채우지 않음
 * @param {string} value 기존 문자열
 * @param {number} maxLength 문자열의 최대 크기
 * @param {string} fillString 더해질 문자열
 * @returns {string}
 * @example
 * pad('text', 10, '0')
 * // "000text000"
**/

/**
 * @name padRight
 * @method
 * @memberOf module:Utils#
 * @description
 * 기준 길이만큼 문자열의 빈 공간을 뒤로 채움<br />
 * 기준 길이가 문자열보다 짧을 경우 채우지 않음
 * @param {string} value 기존 문자열
 * @param {number} maxLength 문자열의 최대 크기
 * @param {string} fillString 더해질 문자열
 * @returns {string}
 * @example
 * padRight('text', 10, '0')
 * // "text000000"
**/

/**
 * @name padLeft
 * @method
 * @memberOf module:Utils#
 * @description
 * 기준 길이만큼 문자열의 빈 공간을 앞으로 채움<br />
 * 기준 길이가 문자열보다 짧을 경우 채우지 않음
 * @param {string} value 기존 문자열
 * @param {number} maxLength 문자열의 최대 크기
 * @param {string} fillString 더해질 문자열
 * @returns {string}
 * @example
 * padLeft('text', 10, '0')
 * // "000000text"
**/

/**
 * @name trim
 * @method
 * @memberOf module:Utils#
 * @description
 * 문자열 앞뒤의 빈 문자를 지움
 * @param {string} value 기존 문자열
 * @returns {string}
 * @example
 * trim('   text   ')
 * // "text"
**/

/**
 * @name trimRight
 * @method
 * @memberOf module:Utils#
 * @description
 * 문자열 뒤의 빈 문자를 지움
 * @param {string} value 기존 문자열
 * @returns {string}
 * @example
 * trimRight('   text   ')
 * // "   text"
**/

/**
 * @name trimLeft
 * @method
 * @memberOf module:Utils#
 * @description
 * 문자열 앞의 빈 문자를 지움
 * @param {string} value 기존 문자열
 * @returns {string}
 * @example
 * trimLeft('   text   ')
 * // "text   "
**/

/**
 * @name join
 * @method
 * @memberOf module:Utils#
 * @description
 * 구분자를 지정하여 문자열로 조합할 때 문자열 사이에 삽입함<br />
 * 구분자를 지정하지 않을 경우 ','를 기본값으로 사용함
 * @param {Array} Array 합쳐질 배열
 * @param {string} [separator=,] 구분자
 * @returns {string}
 * @example
 * join([1, 2, 3, 4, 5])
 * // "1,2,3,4,5"
**/

/**
 * @name sort
 * @method
 * @memberOf module:Utils#
 * @description
 * 배열을 정렬하여 새로운 배열을 반환함<br />
 * 배열을 구성하는 요소의 비교할 값을 꺼내는 함수를 지정할 수 있음
 * @param {Array} Array 기존 배열
 * @param {function} function 비교값을 꺼내는 함수
 * @returns {Array}
 * @example
 * sort([5, 4, 3, 2, 1], function(a, b) {
 *   return a - b;
 * })
 * // [1, 2, 3, 4, 5]
**/

/**
 * @name shuffle
 * @method
 * @memberOf module:Utils#
 * @description
 * 배열의 구성 요소를 섞어서 새로운 배열을 반환함
 * @param {Array} Array 기존 배열
 * @returns {Array}
 * @example
 * shuffle([5, 4, 3, 2, 1])
 * // [1, 2, 4, 3, 5]
**/

/**
 * @name reverse
 * @method
 * @memberOf module:Utils#
 * @description
 * 배열의 구성 요소의 순서를 반대로 뒤집은 새로운 배열을 반환함
 * @param {Array} Array 기존 배열
 * @returns {Array}
 * @example
 * reverse([5, 4, 3, 2, 1])
 * // [1, 2, 3, 4, 5]
**/

/**
 * @name find
 * @method
 * @memberOf module:Utils#
 * @description
 * 배열의 구성 요소 중 조건에 맞는 값 하나를 반환함<br />
 * 찾을 수 없을 경우 undefined를 반환함
 * @param {Array} Array 기존 배열
 * @param {function} function 배열 내 값으로 조건에 맞는 값을 찾는 함수
 * @returns {Array}
 * @example
 * find([1, 2, 3, 4, 5], function(o) { return o === 2 })
 * // 2
**/

/**
 * @name filter
 * @method
 * @memberOf module:Utils#
 * @description
 * 배열의 구성 요소 중 조건에 맞는 값만 포함한 새로운 배열을 반환함
 * @param {Array} Array 기존 배열
 * @param {function} function 배열 내 값으로 조건에 맞는 값을 찾는 함수
 * @returns {Array}
 * @example
 * filter([1, 2, 3, 4, 5], function(o) { return o % 2 === 0 })
 * // [2, 4]
**/

/**
 * @name map
 * @method
 * @memberOf module:Utils#
 * @description
 * 배열의 구성 요소를 변형하여 새로운 배열을 반환함<br />
 * 변형 대상 배열과 새로운 배열은 길이가 같음
 * @param {Array} Array 기존 배열
 * @param {function} function 값을 변환할 함수
 * @returns {Array}
 * @example
 * map([1, 2, 3, 4, 5], function(o) { return o * 2 })
 * // [2, 4, 6, 8, 10]
**/

/**
 * @name reduce
 * @method
 * @memberOf module:Utils#
 * @description
 * 배열의 모든 구성 요소를 탐색하여 하나의 값을 반환함
 * @param {Array} Array 기존 배열
 * @param {function} function 값을 변환할 함수
 * @returns {Array}
 * @example
 * reduce([1, 2, 3, 4, 5], function(sum, n) { return sum + n })
 * // 15
**/

/**
 * @name sample
 * @method
 * @memberOf module:Utils#
 * @description
 * 배열의 구성 요소 중 하나를 무작위로 추출함<br />
 * 길이가 0인 배열의 경우 undefined를 반환함
 * @param {Array} Array 기존 배열
 * @returns {(string|number|boolean|undefined)}
 * @example
 * sample([1, 2, 3, 4, 5])
 * // 5
**/

/**
 * @name head
 * @method
 * @memberOf module:Utils#
 * @description
 * 배열의 첫 구성 요소를 반환함<br />
 * 길이가 0인 배열의 경우 undefined를 반환함
 * @param {Array} Array 기존 배열
 * @returns {(string|number|boolean|undefined)}
 * @example
 * head([1, 2, 3, 4, 5])
 * // 1
**/

/**
 * @name last
 * @method
 * @memberOf module:Utils#
 * @description
 * 배열의 마지막 구성 요소를 반환함<br />
 * 길이가 0인 배열의 경우 undefined를 반환함
 * @param {Array} Array 기존 배열
 * @returns {(string|number|boolean|undefined)}
 * @example
 * last([1, 2, 3, 4, 5])
 * // 5
**/

/**
 * @name concat
 * @method
 * @memberOf module:Utils#
 * @description
 * 두 배열을 합쳐서 새로운 배열을 반환함
 * @param {Array} Array1 기존 배열
 * @param {Array} Array2 합쳐지는 배열
 * @returns {Array}
 * @example
 * concat([1, 2, 3, 4, 5], [6, 7, 8, 9, 10])
 * // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
**/


// UI
/**
 * @module
 * @name UI
 */

/**
 * @name requestFullscreen
 * @method
 * @memberOf module:UI#
 * @description
 * 전체화면으로 표시함
 * @returns {void}
 * @example
 * var button1 = getObjectElementsByName(pageId, 'button1')[0]
 *
 * button1.addEventListener('click',function() {
 *  requestFullscreen()
 *  setTimeout(function(){
 *   console.log('isFullscreen:', isFullscreen())
 *  },500)
 * });
 *
**/

/**
 * @name cancelFullscreen
 * @method
 * @memberOf module:UI#
 * @description
 * 전체화면을 종료함
 * @returns {void}
 * @example
 * var button2 = getObjectElementsByName(pageId, 'button2')[0]
 *
 * button2.addEventListener('click',function() {
 *  cancelFullscreen()
 *  setTimeout(function(){
 *   console.log('isFullscreen:', isFullscreen())
 *  },500)
 * });
**/

/**
 * @name isFullscreen
 * @method
 * @memberOf module:UI#
 * @description
 * 현재 전체화면 상태를 가져옴
 * true: 전체화면
 * false: 일반화면
 * @returns {boolean}
 * @example
 * var button2 = getObjectElementsByName(pageId, 'button2')[0]
 *
 * button2.addEventListener('click',function() {
 *  cancelFullscreen()
 *  setTimeout(function(){
 *   console.log('isFullscreen:', isFullscreen())
 * },500)
 *
**/

/**
 * @name isEnabledFullscreen
 * @method
 * @memberOf module:UI#
 * @description
 * 전체화면을 지원하는 브라우저 또는 환경인지 확인함
 * true: 전체화면 가능
 * false: 전체화면 불가능
 * @returns {boolean}
 * @example
 * console.log(isEnabledFullscreen())
 * // true
**/

/**
 * @name getViewerElement
 * @method
 * @memberOf module:UI#
 * @description
 * 뷰어 Element를 반환함
 * @returns {Element}
 * @example
 * getViewerElement()
 * // Element
**/

/**
 * @name getFixedCustomUiAreaElement
 * @method
 * @memberOf module:UI#
 * @description
 * 화면전환에 상관이 없이 고정되어 있는 Element를 반환함
 * @returns {Element}
 * @example
 * getFixedCustomUiAreaElement()
 * // Element
**/

/**
 * @name getAllPageCustomUiAreaElement
 * @method
 * @memberOf module:UI#
 * @description
 * 사용자가 엘리먼트를 등록할 수 있도록 각 페이지 위를 덮고 있는 Element들을 모두 반환함
 * @returns {Element[]}
 * @example
 * getAllPageCustomUiAreaElement
 * // [Element, Element]
**/

/**
 * @name getPageCustomUiAreaElement
 * @method
 * @memberOf module:UI#
 * @description
 * 사용자가 엘리먼트를 등록할 수 있도록 페이지 위를 덮고 있는 Element를 반환함
 * @param {string} pageId 페이지 아이디
 * @returns {Element}
 * @example
 * getPageCustomUiAreaElement('pageId')
 * // Element
**/

// 프로젝트
/**
 * @module
 * @name Project
 */

/**
 * @typedef {Object} ProjectProperties
 * @memberOf module:Project#
 * @description
 * 프로젝트 속성 객체 타입<br />
 * <br />
 * 페이지의 속성 접근 시 사용되는 객체 타입
 * @property {string} title 프로젝트의 제목(title)
 * @property {string} author 프로젝트의 저작자(author)
 * @property {string} date 생성일(date)<br />ex: 2016-05-03T20:15:01Z
 * @property {number} width 기본 width(width)
 * @property {number} height 기본 height(height)
 * @property {string} background 기본 백그라운드 컬러(background)
**/

/**
 * @method
 * @name getProjectProperties
 * @memberOf module:Project#
 * @description
 * 프로젝트에 지정된 속성값을 얻음<br />
 * <br />
 * 프로젝트에 지정된 속성값을 object 형태로 얻음<br />
 * 얻을 수 있는 속성:<br />
 *   * title: 프로젝트 제목<br />
 *   * author: 프로젝트 저작권자<br />
 *   * date: 프로젝트 생성일<br />
 *   * width: 프로젝트 기본 width<br />
 *   * height: 프로젝트 기본 height<br />
 *   * background: 프로젝트 기본 백그라운드 컬러
 * @returns {ProjectProperties}
 * @example
 * getProjectProperties()
 * // ->
 * // {
 * //   title: 'ironman mark 2',
 * //   author: 'i am ironman',
 * //   date: '2016-05-03T20:15:01Z',
 * //   width: 1280,
 * //   height: 720,
 * //   background: 'blue'
 * // }
**/


// 페이지
/**
 * @module
 * @name Page
 */

/**
 * @typedef {Object} PageInfo
 * @memberOf module:Page#
 * @description
 * 페이지 정보 객체 타입<br />
 * <br />
 * 페이지 리스트에 접근 시 사용되는 객체 타입
 * @property {string} pageId 페이지 아이디(pageId)
 * @property {string} pageName 페이지 이름(pageName)
**/

/**
 * @method
 * @name getPageList
 * @memberOf module:Page#
 * @description
 * 프로젝트를 구성하는 전체 페이지 리스트를 가져옴<br />
 * <br />
 * 프로젝트를 구성하는 전체 페이지를 배열 형태로 가져옴<br />
 * 배열의 순서가 페이지의 순서이며 각 배열의 요소에는 페이지의 아이디, 이름이 표시됨
 * @returns {PageInfo[]} 프로젝트 리스트(PageInfo[])
 * @example
 * getPageList()
 * // [
 * //   {pageId: 'page12345', pageName: 'ironman mark 2'},
 * //   {pageId: 'page33242', pageName: 'ironman mark 5'},
 * //   {pageId: 'page83722', pageName: 'ironman mark 9'}
 * // ]
**/

/**
 * @method
 * @name getPageIdsByName
 * @memberOf module:Page#
 * @description
 * 페이지의 이름으로 해당 페이지의 아이디를 가져옴
 * @param {string} pageName 페이지 이름
 * @returns {Array} 페이지 아이디를 담은 배열
 * @example
 * getPageIdsByName()
 * // ['page12345', 'page33242', 'page83722']
**/

/**
 * @method
 * @name getCurrentPageId
 * @memberOf module:Page#
 * @description
 * 현재 페이지의 아이디를 가져옴
 * @returns {string} 페이지 아이디
 * @example
 * getCurrentPageId()
 * // 'page12345'
**/

/**
 * @method
 * @name getCurrentPageIndex
 * @memberOf module:Page#
 * @description
 * 0부터 시작하는 현재 페이지의 순서를 가져옴<br>
 * @returns {number} 페이지 인덱스
 * @example
 * getCurrentPageIndex()
 * // 0
**/

/**
 * @typedef {Object} PageProperties
 * @memberOf module:Page#
 * @description
 * 페이지 속성 객체 타입<br />
 * <br />
 * 페이지의 속성 변경/접근 시 사용되는 객체 타입
 * @property {number} index 페이지 순서(index). 0부터 시작
 * @property {string} id 페이지 아이디(id)
 * @property {string} name 페이지 이름(name)
 * @property {number} width 페이지 width(width)
 * @property {number} height 페이지 height(height)
 * @property {string} background 페이지 백그라운드 컬러(background)
**/

/**
 * @method
 * @name getPageProperites
 * @memberOf module:Page#
 * @description
 * 해당 페이지의 상세 정보를 얻음<br />
 * <br />
 * 해당 페이지의 상세 정보를 가져옴<br />
 * 페이지 아이디를 파라미터로 전달하여 해당 페이지의 상세 정보를 가져옴<br />
 * 페이지가 존재하지 않을 경우 null을 반환함<br />
 * 페이지 속성:<br />
 *   * index: 페이지 순서<br />
 *   * id: 페이지 아이디<br />
 *   * name: 페이지 이름<br />
 *   * width: 페이지 width<br />
 *   * height: 페이지 height<br />
 *   * background: 페이지 백그라운드 컬러
 * @param {string} pageId 페이지 아이디
 * @returns {PageProperties} 페이지 속성 (PageProperties)
 * @example
 * getPageProperties('page112423')
 * // {
 * //   index: 0,
 * //   id: 'page112423',
 * //   name: 'ironman mark 19',
 * //   width: 1280,
 * //   height: 720,
 * //   background: 'rgba(221, 25, 12, 1)'
 * // }
**/

/**
 * @method
 * @name setPageBackground
 * @memberOf module:Page#
 * @description
 * 해당 페이지의 백그라운드 색을 변경<br />
 * <br />
 * 해당 페이지의 백그라운드 컬러를 변경함<br />
 * 페이지의 아이디와 변경하려는 색을 파라미터로 전달함<br />
 * 변경할 수 있는 색의 범위는 css의 색의 범위를 따름
 * @param {string} pageId 페이지 아이디
 * @param {string} color 페이지 백그라운드 컬러
 * @returns {void}
 * @example
 * setPageBackground('page115345', '#222244')
 *
 * setPageBackground('page248281', 'rgba(121, 22, 1, .1)')
 *
 * setPageBackground(null, 'rgba(111, 111, 222, 1)')
 * // (변경되지 않고 무시됨)
**/

/**
 * @method
 * @name setPageSize
 * @memberOf module:Page#
 * @description
 * 해당 페이지의 사이즈 변경<br />
 * <br />
 * 해당 페이지의 width, height를 변경함<br />
 * 페이지의 아이디와 변경하려는 width, height를 파라미터로 전달함<br />
 * 변경할 수 없는 사이즈로 변경 시도시 변경되지 않고 무시됨
 * @param {string} pageId 페이지 아이디
 * @param {object} size 변경하려는 width와 height
 * @param {number} size.width width
 * @param {number} size.height height
 * @returns {void}
 * @example
 * setPageSize('page22111', {
 *   width: 800
 * })
 * // (width만 800으로 변경됨)
 *
 * setPageSize('page13312', {
 *   width: -200,
 *   height: 800
 * })
 * // (height만 800으로 변경됨)
 *
 * setPageSize('page32323', {})
 * // (변경되지 않고 무시됨)
**/

/**
 * @method
 * @name movePage
 * @memberOf module:Page#
 * @description
 * 페이지 이동<br />
 * <br />
 * 이동하려는 페이지의 아이디 또는 인덱스를 파라미터로 전달하여 해당 페이지로 이동함<br />
 * 이동할 수 없는 페이지로 이동 시도시 이동하지 않고 무시됨
 * @param {string} pageId 페이지 아이디
 * @returns {void}
 * @example
 * movePage('page22123')
**/

/**
 * @method
 * @name movePage
 * @memberOf module:Page#
 * @description
 * 페이지 이동<br />
 * <br />
 * 이동하려는 페이지의 아이디 또는 인덱스를 파라미터로 전달하여 해당 페이지로 이동함<br />
 * 이동할 수 없는 페이지로 이동 시도시 이동하지 않고 무시됨
 * @param {number} pageIndex 페이지 순서
 * @returns {void}
 * @example
 * movePage(11)
 *
 * movePage(-29)
 * // (이동되지 않고 무시됨)
**/

/**
 * @method
 * @name onPageEvent
 * @memberOf module:Page#
 * @description
 * 페이지 단계에서 발생되는 이벤트에 핸들러를 지정함<br />
 * <br />
 * 페이지의 상태가 변경될 경우 발생하는 이벤트에 핸들러를 지정하여 처리할 수 있도록 함<br />
 * 핸들러 함수에는 이벤트 객체가 파라미터로 전달되며 전달되는 이벤트 객체에는 이벤트 종류에 맞는 데이터가 추가로 전달됨<br />
 * 이벤트 핸들러를 지정하면 리스너 아이디가 반환되며 추후 이벤트 핸들러를 해제할 때 사용됨<br />
 * 발생되는 이벤트 종류<br />
 *   * load: 페이지 로드 완료<br />
 *   * beforeUnload: 페이지 나가기 전<br />
 * @param {string} type 이벤트 타입
 * @param {string} pageId 페이지 아이디
 * @param {HandlerFunction} handler 이벤트 핸들러
 * @returns {void}
 * @example
 * onPageEvent('load', function (event) {
 *   if (event.type === 'load') {
 *     alert('로드됨')
 *   }
 * })
**/

/**
 * @method
 * @name offPageEvent
 * @memberOf module:Page#
 * @description
 * 페이지에 지정된 이벤트 리스너를 제거함<br />
 * <br />
 * 페이지의 상태가 변경될 경우 발생하는 이벤트에 지정된 핸들러를 제거함<br />
 * 특정한 리스너를 지정하여 제거하거나 특정 이벤트 전체의 리스너를 제거할 수 있음
 * @param {string} type 이벤트 타입
 * @param {string} pageId 페이지 아이디
 * @param {HandlerFunction} handler 이벤트 핸들러
 * @returns {void}
 * @example
 * offPageEvent('unload')
**/

// 오브젝트
/**
 * @module
 * @name Object
 */

/**
 * @typedef {Object} ObjectInfo
 * @memberOf module:Object#
 * @description
 * 오브젝트 정보 객체 타입<br />
 * <br />
 * 오브젝트 리스트에 접근 시 사용되는 객체 타입
 * @property {string} id 오브젝트 아이디
 * @property {string} name 오브젝트 이름
 * @property {string} type 오브젝트 속성
 * @property {string} page 페이지 아이디
 * @property {string} parent 소속된 그룹 아이디
 * @property {object} props 오브젝트의 프로퍼티값
 * @property {object} options 오브젝트의 옵션값
 *
**/

/**
 * @method
 * @name getObjectList
 * @memberOf module:Object#
 * @description
 * 해당 페이지에 포함된 오브젝트 리스트에 접근함<br />
 * <br />
 * 페이지를 지정하여 해당 페이지에 포함된 오브젝트를 배열 형태로 가져옴<br />
 * 각 배열의 요소에는 오브젝트의 아이디, 이름이 표시됨<br />
 * 존재하지 않는 페이지에 접근할 경우 null이 반환됨
 * @param {string} pageId 페이지 아이디
 * @returns {ObjectInfo[]} ObjectInfo[]
 * @example
 * getObjectList('page112432')
 * // [
 * //   {id: 'shape1', name: 'ironman 2', ...},
 * //   {id: 'image2', name: 'ironman 4', ...},
 * //   {id: 'textbox1', name: 'avengers 2', ...},
 * //   ...
 * // ]
**/

/**
 * @method
 * @name getObjectList
 * @memberOf module:Object#
 * @description
 * 해당 페이지에 포함된 오브젝트 리스트에 접근함<br />
 * <br />
 * 페이지를 지정하여 해당 페이지에 포함된 오브젝트를 배열 형태로 가져옴<br />
 * 각 배열의 요소에는 오브젝트의 아이디, 이름이 표시됨<br />
 * 존재하지 않는 페이지에 접근할 경우 null이 반환됨
 * @param {number} pageIndex 페이지 순서
 * @returns {ObjectInfo[]} ObjectInfo[]
 * @example
 * getObjectList(2)
 * // -> ObjectInfo[]
 *
 * getObjectList(-10)
 * // -> undefined
**/

/**
 * @method
 * @name getObjectIdsByName
 * @memberOf module:Object#
 * @description
 * 오브젝트의 이름으로 해당하는 오브젝트의 아이디를 가져옴
 * @param {string} pageId 페이지 아이디
 * @param {string} objectName 오브젝트 이름
 * @returns {Array} 오브젝트 아이디를 배열
 * @example
 * getObjectIdsByName(pageId, 'objectName')
 * // -> ['objectId']
**/

/**
 * @typedef {Object} ObjectProperties
 * @memberOf module:Object#
 * @description
 * 오브젝트 속성 객체 타입<br />
 * <br />
 * 오브젝트의 생성, 속성 변경/접근 시 사용되는 객체 타입
 * @property {string} id 오브젝트 아이디
 * @property {string} name 오브젝트 이름
 * @property {string} type 오브젝트 종류
 * @property {number} width 오브젝트 width
 * @property {number} height 오브젝트 height
 * @property {number} left 오브젝트 left
 * @property {number} top 오브젝트 top
 * @property {number} zIndex 오브젝트 zIndex
**/

/**
 * @method
 * @name getObjectProperties
 * @memberOf module:Object#
 * @description
 * 해당 오브젝트의 속성을 가져옴<br />
 * <br />
 * 속한 페이지의 아이디와 오브젝트의 아이디를 지정하여 해당 오브젝트의 속성을 가져옴<br />
 * 존재하지 않는 오브젝트에 접근할 경우 null을 반환함
 * @param {string} pageId 페이지 아이디
 * @param {string} objectId 오브젝트 아이디
 * @returns {ObjectProperties} 오브젝트 속성
 * @example
 * getObjectProperties('page22442', 'shape01')
 * // {
 * //   id: 'shape01',
 * //   name: 'avengers 4',
 * //   width: 200,
 * //   ...
 * // }
 *
 * getObjectProperties(-1, null)
 * // -> null
**/

/**
 * @method
 * @name setObjectProperties
 * @memberOf module:Object#
 * @description
 * 해당 오브젝트의 속성을 수정함<br />
 * <br />
 * 오브젝트가 속한 페이지의 아이디와 오브젝트의 아이디를 지정하고 변경하려는 속성을 객체 형태로 전달하여 속성을 수정함<br />
 * 존재하지 않는 오브젝트 또는 속성을 수정할 경우 무시됨
 * @param {string} pageId 페이지 아이디
 * @param {string} objectId 오브젝트 아이디
 * @param {object} ObjectProperties 변경하려는 속성
 * @param {object} ObjectProperties.id 변경하려는 오브젝트의 아이디
 * @param {object} ObjectProperties.width 변경하려는 오브젝트의 너비
 * @param {object} ObjectProperties.height 변경하려는 오브젝트의 높이
 * @param {object} ObjectProperties.top 변경하려는 오브젝트의 y 위치
 * @param {object} ObjectProperties.left 변경하려는 오브젝트의 x 위치
 * @param {object} ObjectProperties.opacity 변경하려는 오브젝트의 투명도
 * @param {object} ObjectProperties.color 변경하려는 오브젝트의 글자 색상
 * @param {object} ObjectProperties.backgroundColor 변경하려는 오브젝트의 배경색상
 * @returns {void}
 * @example
 * setObjectProperties('page22442', 'shage01', {
 *   id: 'shage02',
 *   type: 'image',
 *   width: 400
 * })
 * // (id, width는 변경되지만 type은 수정할 수 없으므로 무시됨)
 *
 * setObjectProperties(-1, null)
 * // -> (변경되지 않고 무시됨)
**/

/**
 * @method
 * @name setObjectProperty
 * @memberOf module:Object#
 * @description
 * 해당 오브젝트의 속성을 수정함<br />
 * <br />
 * 오브젝트가 속한 페이지의 아이디와 오브젝트의 아이디를 지정하고 변경하려는 속성을 객체 형태로 전달하여 속성을 수정함<br />
 * 존재하지 않는 오브젝트 또는 속성을 수정할 경우 무시됨
 * @param {string} pageId 페이지 아이디
 * @param {string} objectId 오브젝트 아이디
 * @param {string} key 오브젝트 속성명
 * @param {*} value 오브젝트 속성값
 * @returns {void}
 * @example
 * setObjectProperty('page22111', 'image01', 'id', 'ironman 2')
 *
 * setObjectProperty('page12344', 'shape11', 'width', 200)
 *
 * setObjectProperty('page22111', 'textbox11', 'type', 'image')
 * // (type은 수정할 수 없으므로 변경되지 않고 무시됨)
**/

/**
 * @method
 * @name getObjectProperty
 * @memberOf module:Object#
 * @description
 * 해당 오브젝트의 속성에 접근<br />
 * <br />
 * 오브젝트가 속한 페이지의 아이디와 오브젝트의 아이디를 지정하고 원하는 속성의 이름을 파라미터로 전달하여 해당 속성 값을 가져옴<br />
 * 존재하지 않는 오브젝트 또는 속성에 접근할 경우 null을 반환함
 * @param {string} pageId 페이지 아이디
 * @param {string} objectId 오브젝트 아이디
 * @param {string} key 속성명
 * @returns {*} 속성값 (value)
 * @example
 * getObjectProperty('page22111', 'image01', 'id')
 * // => image01
 *
 * getObjectProperty('page22322', 'shape1', 'fill')
 * // => rgba(111, 222, 111, 1)
 *
 * getObjectProperty('page221111', 'image001')
 * // => null
**/

/**
 * @method
 * @name getObjectElementsByName
 * @memberOf module:Object#
 * @description
 * 해당 오브젝트의 엘리먼트에 접근<br />
 * <br />
 * 오브젝트가 속한 페이지의 아이디와 오브젝트의 이름을 지정하고 이에 해당하는 오브젝트의 엘리먼트를 가져옴
 * 존재하지 않는 오브젝트에 접근할 경우 null이 반환됨
 * @param {string} pageId 페이지 아이디
 * @param {string} name 오브젝트 이름
 * @returns {Element} 속성값 (value)
 * @returns {void}
 * @example
 * getObjectElementsByName('page22111', 'image01')
 * // => Element
 * getObjectElementsByName(-1, null)
 * // => null
**/

/**
 * @method
 * @name generateUniqueObjectId
 * @memberOf module:Object#
 * @description
 * 특정 페이지 내의 유일한 오브젝트 아이디를 생성<br />
 * <br />
 * 특정 페이지의 유일한 오브젝트 아이디를 생성함<br />
 * 존재하지 않는 페이지일 경우 null을 반환함<br />
 * 생성할 오브젝트 아이디를 지정할 경우 중복 여부를 검사함
 * @param {string} pageId 페이지 아이디
 * @param {string} [objectId] 오브젝트 아이디
 * @returns {string|null} 생성된 오브젝트 아이디
 * @example
 * generateUniqueObjectId('page21112')
 * // => dkdS1d0a
 *
 * generateUniqueObjectId('page12211', 'sample')
 * // => sample (유일한 경우)
 * // => null (중복될 경우)
 *
 * generateUniqueObjectId()
 * // => null (생성 실패)
**/

/**
 * @typedef {Object} XelfObject
 * @memberOf module:Object#
 * @description
 * 오브젝트 객체 타입<br />
 * <br />
 * 오브젝트를 생성/삽입/제거 시 사용하는 객체임<br />
 * 사용자가 직접 수정하거나 사용하는 기능은 없음
 * @property * 사용자가 사용할 수 있는 속성 없음
**/

/**
 * @method
 * @name removeObject
 * @memberOf module:Object#
 * @description
 * 페이지에 포함된 오브젝트 중 특정 오브젝트를 페이지에서 제거함<br />
 * <br />
 * 페이지 아이디와 오브젝트 아이디를 파라미터로 전달하여 해당 오브젝트를 페이지에서 제거함<br />
 * 오브젝트 제거에 성공한 경우 해당 오브젝트를 반환함<br />
 * 오브젝트 제거에 실패한 경우 null을 반환함
 * @param {string} pageId 페이지 아이디
 * @param {string} objectId 오브젝트 아이디
 * @returns {XelfObject|null} 제거 결과에 따라 변환 값이 다름
 * @example
 * removeObject('page11111', 'shape1')
 * // => XelfObject (해당 오브젝트가 제거된 후 반환됨)
 * // => null (오브젝트가 존재하지 않을 경우 null이 반환됨)
 *
 * removeObject('page11111')
 * // => null
**/

/**
 * @method
 * @name setObjectPosition
 * @memberOf module:Object#
 * @description
 * 자신이 속한 그룹 또는 페이지를 기준으로 오브젝트의 위치를 지정함
 * @param {string} pageId 페이지 아이디
 * @param {string} objectId 오브젝트 아이디
 * @param {Object} position
 * @param {number} position.left x 위치값
 * @param {number} position.top y 위치값
 * @returns {void}
 * @example
 * setObjectSize(pageId, objectId01, {left: 150, top: 150})
**/

/**
 * @method
 * @name setObjectSize
 * @memberOf module:Object#
 * @description
 * 오브젝트의 크기를 지정함
 * @param {string} pageId 페이지 아이디
 * @param {string} objectId 오브젝트 아이디
 * @param {Object} size 위치값을 담은 객체
 * @param {number} size.width 오브젝트의 너비값
 * @param {number} size.height 오브젝트의 높이값
 * @returns {void}
 * @example
 * setObjectSize(pageId, objectId01, {width: 150, height: 150})
**/

/**
 * @method
 * @name setObjectScale
 * @memberOf module:Object#
 * @description
 * 오브젝트의 스케일을 지정함
 * @param {string} pageId 페이지 아이디
 * @param {string} objectId 오브젝트 아이디
 * @param {object} scale 위치값을 담은 객체
 * @param {number} scale.scaleX 1을 기준으로 한 오브젝트의 너비 비율
 * @param {number} scale.scaleY 1을 기준으로 한 오브젝트의 높이 비율
 * @returns {void}
 * @example
 * setObjectScale(pageId, objectId02, {scaleX: 1.7, scaleY: 1.7})
**/

/**
 * @method
 * @name setObjectRotate
 * @memberOf module:Object#
 * @description
 * 오브젝트의 스케일을 지정함
 * @param {string} pageId 페이지 아이디
 * @param {string} objectId 오브젝트 아이디
 * @param {number} rotateDeg 회전할 각도
 * @returns {void}
 * @example
 * setObjectRotate(pageId, objectId01, 45)
**/

/**
 * @method
 * @name setObjectToggle
 * @memberOf module:Object#
 * @description
 * 오브젝트를 토글함
 * @param {string} pageId 페이지 아이디
 * @param {string} objectId 오브젝트 아이디
 * @returns {void}
 * @example
 * setObjectToggle(pageId, objectId01)
**/

/**
 * @method
 * @name setObjectToggle
 * @memberOf module:Object#
 * @description
 * 오브젝트를 토글함
 * @param {string} pageId 페이지 아이디
 * @param {string} objectId 오브젝트 아이디
 * @returns {void}
 * @example
 * setObjectToggle(pageId, objectId01)
**/

/**
 * @method
 * @name setObjectVisible
 * @memberOf module:Object#
 * @description
 * 오브젝트의 보임/숨김 상태를 지정함
 * @param {string} pageId 페이지 아이디
 * @param {string} objectId 오브젝트 아이디
 * @param {boolean} show true -> 오브젝트 보임, false -> 오브젝트 안보임
 * @returns {void}
 * @example
 * setObjectVisible(pageId, objectId04, false)
**/

/**
 * @method
 * @name setObjectOpacity
 * @memberOf module:Object#
 * @description
 * 오브젝트의 보임/숨김 상태를 지정함
 * @param {string} pageId 페이지 아이디
 * @param {string} objectId 오브젝트 아이디
 * @param {number} opacity 0부터 1 사이의 수
 * @returns {void}
 * @example
 * setObjectOpacity(pageId, objectId01, 0.5)
**/

/**
 * @method
 * @name setObjectBackgroundColor
 * @memberOf module:Object#
 * @description
 * 오브젝트의 배경색을 지정함
 * @param {string} pageId 페이지 아이디
 * @param {string} objectId 오브젝트 아이디
 * @param {string} backgroundColor 색상코드 또는 색상이름
 * @returns {void}
 * @example
 * setObjectBackgroundColor(pageId, objectId04, '#000000')
**/

/**
 * @method
 * @name setObjectFill
 * @memberOf module:Object#
 * @description
 * 오브젝트의 채우기색을 지정함
 * @param {string} pageId 페이지 아이디
 * @param {string} objectId 오브젝트 아이디
 * @param {string} fill 색상코드 또는 색상이름
 * @returns {void}
 * @example
 * setObjectFill(pageId, objectId03, 'green')
**/

/**
 * @method
 * @name setObjectStroke
 * @memberOf module:Object#
 * @description
 * 오브젝트의 선색을 지정함
 * @param {string} pageId 페이지 아이디
 * @param {string} objectId 오브젝트 아이디
 * @param {string} stroke 색상코드 또는 색상이름
 * @returns {void}
 * @example
 * setObjectStroke(pageId, line06, 'red')
**/

/**
 * @method
 * @name setObjectFontColor
 * @memberOf module:Object#
 * @description
 * 오브젝트의 글자색을 지정함
 * @param {string} pageId 페이지 아이디
 * @param {string} objectId 오브젝트 아이디
 * @param {string} fontColor 색상코드 또는 색상이름
 * @returns {void}
 * @example
 * setObjectFontColor(pageId, objectId04, '#ffffff')
**/

/**
 * @method
 * @name setObjectFontSize
 * @memberOf module:Object#
 * @description
 * 오브젝트의 글자크기를 지정함
 * @param {string} pageId 페이지 아이디
 * @param {string} objectId 오브젝트 아이디
 * @param {number} fontSize 폰트의 크기
 * @returns {void}
 * @example
 * setObjectFontSize(pageId, objectId04, 9)
**/

/**
 * @method
 * @name setObjectFontSize
 * @memberOf module:Object#
 * @description
 * 오브젝트의 글자크기를 지정함
 * @param {string} pageId 페이지 아이디
 * @param {string} objectId 오브젝트 아이디
 * @param {number} fontSize 폰트의 크기
 * @returns {void}
 * @example
 * setObjectFontSize(pageId, objectId04, 9)
**/


// 액션
/**
 * @module
 * @name Action
 */

/**
 * @typedef {object} Interaction
 * @memberOf module:Action#
 * @description
 * 인터랙션 정보 객체 타입<br />
 * <br />
 * 인터랙션을 생성/변경/실행 할 때 사용되는 객체 타입
 * @property {string} source 트리거를 수신받는 페이지, 오브젝트 아이디 (source)
 * @property {object} triggers 트리거의 타입과 상세 옵션 (triggers)
 * @property {string[]} targets 액션이 실행되는 페이지, 오브젝트 아이디 리스트 (targets)
 * @property {object} action 액션의 타입과 상세 옵션 (action)
**/

/**
 * @method
 * @name getPageInteractionList
 * @memberOf module:Action#
 * @description
 * 해당 페이지에 포함된 인터랙션 리스트에 접근함<br />
 * <br />
 * 페이지 단계에 지정되어 있는 인터랙션 리스트를 가져옴<br />
 * 존재하지 않는 페이지 아이디를 지정할 경우 null을 반환함
 * @param {string} pageId 페이지 아이디
 * @returns {Interaction[]|null} 인터랙션 리스트
 * @example
 * getPageInteractionList('page11221')
 * // => Interaction[]
 *
 * getPageInteractionList()
 * // => null (존재하지 않는 페이지)
**/

/**
 * @method
 * @name removePageInteraction
 * @memberOf module:Action#
 * @description
 * 페이지 인터랙션 리스트에 포함되어 있는 인터랙션을 제거함<br />
 * <br />
 * 페이지에 포함된 인터랙션 중 하나를 제거함<br />
 * 제거된 인터랙션은 실행 결과로 반환됨<br />
 * 제거에 실패할 경우 null이 반환됨
 * @param {string} pageId 페이지 아이디
 * @param {Interaction} interaction 제거할 인터랙션
 * @returns {Interaction|null} 제거된 인터랙션
 * @example
 * var interaction = getPageInteractions('page11111')[0]
 *
 * removePageInteraction('page11111', interaction)
 * // => interaction
 *
 * var notExistInteraction = null
 *
 * removePageInteraction('page11111', notExistInteraction)
 * // => null
**/

/**
 * @method
 * @name playPageInteraction
 * @memberOf module:Action#
 * @description
 * 인터랙션을 강제로 실행함<br />
 * <br />
 * 페이지에 포함된 인터랙션 중 하나를 강제로 실행함<br />
 * 강제로 실행된 인터랙션은 delay 옵션이 무시되고 바로 실행됨
 * @param {string} pageId 페이지 아이디
 * @param {Interaction} interaction 실행할 인터랙션
 * @returns {void}
 * @example
 * var interaction = getPageInteraction('page11111')[0]
 *
 * playPageInteraction('page11111', interaction)
 * // (바로 실행됨)
 *
 * removePageInteraction('page11111', interaction)
 *
 * playPageInteraction('page11111', interaction)
 * // (해당 인터랙션이 페이지에 포함되어 있지 않으므로 실행되지 않음)
**/

/**
 * @method
 * @name playPageInteractions
 * @memberOf module:Action#
 * @description
 * 복수의 인터랙션을 실행함<br />
 * <br />
 * 강제로 실행된 인터랙션은 delay 옵션이 무시되고 바로 실행됨
 * @param {string} pageId 페이지 아이디
 * @param {Interaction[]} interactions 실행할 인터랙션의 배열
 * @returns {void}
 * @example
 * var interaction = getPageInteraction('page11111')[0]
 *
 * playPageInteraction('page11111', interaction)
 * // (바로 실행됨)
**/

/**
 * @method
 * @name playOpacity
 * @memberOf module:Action#
 * @description
 * 오브젝트의 투명도 변경 액션을 바로 실행함<br />
 * <br />
 * 상세 옵션에 따라 오브젝트의 투명도 변경 액션을 딜레이 없이 바로 실행함
 * @param {Object} param
 * @param {string[]} param.targets 오브젝트 아이디 리스트
 * @param {number} param.duration 이동 시간  (단위: ms)
 * @param {string} [param.ease='linear'] 이징 옵션
 * @param {number} param.opacity 투명도 (0~1)
 * @returns {void}
 * @example
 * playOpacity({
 *   targets: ['textbox001'],
 *   duration: 3999,
 *   opacity: .3
 * })
**/

/**
 * @method
 * @name playSize
 * @memberOf module:Action#
 * @description
 * 오브젝트의 크기 변경 액션을 바로 실행함<br />
 * <br />
 * 상세 옵션에 따라 오브젝트의 크기 변경 액션을 딜레이 없이 바로 실행함<br />
 * width, height가 변경됨
 * @param {Object} param
 * @param {string[]} param.targets 오브젝트 아이디 리스트
 * @param {number} param.duration 이동 시간
 * @param {string} [param.ease='linear'] 이징 옵션
 * @param {number} param.width 변경할 width
 * @param {number} param.height 변경할 height
 * @returns {void}
 * @example
 * playSize({
 *   targets: ['table11'],
 *   duration: 6000,
 *   width: 200,
 *   height: 800
 * })
**/

/**
 * @method
 * @name playScale
 * @memberOf module:Action#
 * @description
 * 오브젝트의 비율 변경 액션을 바로 실행함<br />
 * <br />
 * 상세 옵션에 따라 오브젝트의 비율 변경 액션을 딜레이 없이 바로 실행함<br />
 * scale이 변경됨
 * @param {Object} param
 * @param {string[]} param.targets 오브젝트 아이디 리스트
 * @param {number} param.duration 이동 시간
 * @param {string} [param.ease='linear'] 이징 옵션
 * @param {number} param.scaleX 변경할 배율 (%)
 * @param {number} param.scaleY 변경할 배율 (%)
 * @returns {void}
 * @example
 * playScale({
 *   targets: ['line100'],
 *   duration: 7000,
 *   scaleX: 200,
 *   scaleY: -200
 * })
**/

/**
 * @method
 * @name playToggle
 * @memberOf module:Action#
 * @description
 * 오브젝트의 토글 상태 변경 액션을 바로 실행함<br />
 * <br />
 * 상세 옵션에 따라 오브젝트의 토글 상태 변경 액션을 딜레이 없이 바로 실행함<br />
 * 현재 보이는 상태면 숨기고 보이지 않는 상태면 보이게 함
 * @param {Object} param
 * @param {string[]} param.targets 오브젝트 아이디 리스트
 * @param {number} param.duration 이동 시간
 * @param {string} [param.ease='linear'] 이징 옵션
 * @returns {void}
 * @example
 * playToggle({
 *   targets: ['textbox001'],
 *   duration: 3999,
 * })
**/

/**
 * @method
 * @name playVisible
 * @memberOf module:Action#
 * @description
 * 오브젝트의 보임/숨김 변경 액션을 바로 실행함<br />
 * <br />
 * 상세 옵션에 따라 오브젝트의 보임/숨김 변경 액션을 딜레이 없이 바로 실행함
 * @param {Object} param
 * @param {string[]} param.targets 오브젝트 아이디 리스트
 * @param {number} param.duration 이동 시간
 * @param {string} [param.ease='linear'] 이징 옵션
 * @param {boolean} param.show 보임 숨김 여부
 * @returns {void}
 * @example
 * playVisible({
 *   targets: ['share1', 'image2'],
 *   duration: 2000,
 *   show: true
 * })
**/

/**
 * @method
 * @name playMove
 * @memberOf module:Action#
 * @description
 * 오브젝트의 이동(Move) 액션을 바로 실행함<br />
 * <br />
 * 상세 옵션에 따라 오브젝트의 보임/숨김 변경 액션을 딜레이 없이 바로 실행함
 * @param {Object} param
 * @param {string[]} param.targets 오브젝트 아이디 리스트
 * @param {number} param.duration 이동 시간
 * @param {string} [param.ease='linear'] 이징 옵션
 * @param {number} param.x x 좌표의 값
 * @param {number} param.y y 좌표의 값
 * @param {boolean} param.by 이동 기준점 확인  true => 거리만큼 이동, false => 좌표로 이동
 * @returns {void}
 * @example
 * playMove({
 *   targets: [obj4],
 *   duration: 1000,
 *   x: 750,
 *   by: false
 * })
**/

/**
 * @method
 * @name playRotate
 * @memberOf module:Action#
 * @description
 * 오브젝트의 이동(Move) 액션을 바로 실행함<br />
 * <br />
 * 상세 옵션에 따라 오브젝트의 보임/숨김 변경 액션을 딜레이 없이 바로 실행함
 * @param {Object} param
 * @param {string[]} param.targets 오브젝트 아이디 리스트
 * @param {number} param.duration 이동 시간
 * @param {string} [param.ease='linear'] 이징 옵션
 * @param {number} param.deg 움직일 각도
 * @param {boolean} param.by true:  현재 각도에 추가하여 회전, false: 입력된 각도로 회전
 * @returns {void}
 * @example
 * playRotate({
 *   targets: [obj4],
 *   duration: 1000,
 *   deg: 180,
 *   by: false
 * })
**/

/**
 * @method
 * @name playBackgroundColor
 * @memberOf module:Action#
 * @description
 * 오브젝트의 배경색 변경 액션을 바로 실행함<br />
 * <br />
 * 상세 옵션에 따라 오브젝트의 보임/숨김 변경 액션을 딜레이 없이 바로 실행함
 * @param {Object} param
 * @param {string[]} param.targets 오브젝트 아이디 리스트
 * @param {number} param.duration 이동 시간
 * @param {string} [param.ease='linear'] 이징 옵션
 * @param {string} param.color 색상코드 또는 색상명
 * @returns {void}
 * @example
 * playBackgroundColor({
 *   targets: [text3],
 *   duration: 1000,
 *   color: '#77FF77',
 *  })
**/

/**
 * @method
 * @name playFill
 * @memberOf module:Action#
 * @description
 * 오브젝트의 채우기 색 변경 액션을 바로 실행함<br />
 * <br />
 * 상세 옵션에 따라 오브젝트의 보임/숨김 변경 액션을 딜레이 없이 바로 실행함
 * @param {Object} param
 * @param {string[]} param.targets 오브젝트 아이디 리스트
 * @param {number} param.duration 이동 시간
 * @param {string} [param.ease='linear'] 이징 옵션
 * @param {string} param.color 색상코드 또는 색상명
 * @returns {void}
 * @example
 * playFill({
 *   targets: [obj8],
 *   duration: 1000,
 *   color: '#000000',
 *  })
**/

/**
 * @method
 * @name playStroke
 * @memberOf module:Action#
 * @description
 * 오브젝트의 선 색 변경 액션을 바로 실행함<br />
 * <br />
 * 상세 옵션에 따라 오브젝트의 보임/숨김 변경 액션을 딜레이 없이 바로 실행함
 * @param {Object} param
 * @param {string[]} param.targets 오브젝트 아이디 리스트
 * @param {number} param.duration 이동 시간
 * @param {string} [param.ease='linear'] 이징 옵션
 * @param {string} param.color 색상코드 또는 색상명
 * @returns {void}
 * @example
 * playStroke({
 *   targets: [line1],
 *   duration: 1000,
 *   color: '#dd0000',
 *  })
**/

/**
 * @method
 * @name playFontColor
 * @memberOf module:Action#
 * @description
 * 오브젝트의 글자색 변경 액션을 바로 실행함<br />
 * <br />
 * 상세 옵션에 따라 오브젝트의 보임/숨김 변경 액션을 딜레이 없이 바로 실행함
 * @param {Object} param
 * @param {string[]} param.targets 오브젝트 아이디 리스트
 * @param {number} param.duration 이동 시간
 * @param {string} [param.ease='linear'] 이징 옵션
 * @param {string} param.color 색상코드 또는 색상명
 * @returns {void}
 * @example
 * playFontColor({
 *   targets: [text2],
 *   duration: 1000,
 *   color: '#dd0000',
 *  })
**/

/**
 * @method
 * @name playFontSize
 * @memberOf module:Action#
 * @description
 * 오브젝트의 글자색 변경 액션을 바로 실행함<br />
 * <br />
 * 상세 옵션에 따라 오브젝트의 보임/숨김 변경 액션을 딜레이 없이 바로 실행함
 * @param {Object} param
 * @param {string[]} param.targets 오브젝트 아이디 리스트
 * @param {number} param.duration 이동 시간
 * @param {string} [param.ease='linear'] 이징 옵션
 * @param {string} param.color 색상코드 또는 색상명
 * @returns {void}
 * @example
 * playFontSize({
 *   targets: [text2],
 *   duration: 1000,
 *   fontSize: 20,
 *  })
**/

// 일반
/**
 * @module
 * @name Audio
**/

/**
 * @typedef {Object} XelfAudio
 * @memberOf module:Audio#
 * @description
 * XELF 프로젝트 내 오디오를 생성/삽입/제거 시 사용하는 객체임<br />
 * 사용자가 직접 수정하거나 사용하는 기능은 없음
 * @property {string} src 프로젝트의 제목(title)
 * @property {string} name 프로젝트의 저작자(author)
**/

/**
 * @method
 * @name getProjectAudios
 * @memberOf module:Audio#
 * @description
 * 프로젝트 오디오 배열을 반환함
 * @returns {XelfAudio[]} XelfAudio[] 프로젝트 오디오 배열
 * @example
 * getProjectAudios()
 * // [{src: '...', name: '...'}]
**/

/**
 * @method
 * @name volumeProjectAudio
 * @memberOf module:Audio#
 * @description
 * 프로젝트 오디오의 볼륨을 조절함
 * @param {string} src 대상 audio의 src
 * @param {number} volume 0~1 까지의 수
 * @returns {void}
 * @example
 * volumeProjectAudio(audioSrc, .5)
**/

/**
 * @method
 * @name stopProjectAudio
 * @memberOf module:Audio#
 * @description
 * 프로젝트 오디오의 볼륨을 조절함
 * @param {string} src 대상 audio의 src
 * @param {number} fadeOutDuration milisecond
 * @returns {void}
 * @example
 * stopProjectAudio(audioSrc, 500)
**/

/**
 * @method
 * @name playProjectAudio
 * @memberOf module:Audio#
 * @description
 * 가져온 src를 프로젝트 오디오에서 재생시킴
 * @param {string} src 대상 audio의 src
 * @param {object} options
 * @param {boolean} [options.loop = true] 반복재생 여부
 * @param {number} [options.fadeInDuration = 0]  페이드인까지의 시간 milisecond로 기입
 * @param {number} [options.fadeOutDuration = 0]   페이드아웃까지의 시간 milisecond로 기입
 * @returns {void}
 * @example
 * playProjectAudio(audioSrc, {
 *   loop: false,
 *   fadeInDuration: 500,
 *   fadeOutDuration: 500,
 * })
**/

/**
 * @method
 * @name getPageAudios
 * @memberOf module:Audio#
 * @description
 * 해당 페이지에 소속된 오디오 리스트를 가져옴
 * @param {string} pageId audio를 가져올 페이지의 아이디
 * @returns {XelfAudio[]} XelfAudio[]
 * @example
 * getPageAudios('pageId')
 * //
**/

/**
 * @method
 * @name playAudio
 * @memberOf module:Audio#
 * @description
 * 해당 오디오 src를 페이지에서 재생
 * @param {string} src 대상 audio의 src
 * @param {object} options
 * @param {boolean} [options.loop = true] 반복재생 여부
 * @param {number} [options.fadeInDuration = 0]  페이드인까지의 시간 milisecond로 기입
 * @param {number} [options.fadeOutDuration = 0]   페이드아웃까지의 시간 milisecond로 기입
 * @returns {void}
 * @example
 * playAudio('https://audio.mp3', {
 *   loop: false,
 *   fadeInDuration: 500,
 *   fadeOutDuration: 500,
 * })
 * //
**/

/**
 * @method
 * @name volumeAudio
 * @memberOf module:Audio#
 * @description
 * src에 해당하는 페이지 내 오디오의 볼륨을 조절한다
 * @param {string} src 대상 audio의 src
 * @param {number} volume 0부터 1까지의 수
 * @returns {void}
 * @example
 * playAudio('https://audio.mp3', 0.3)
 * //
**/

/**
 * @method
 * @name stopAudio
 * @memberOf module:Audio#
 * @description
 * src에 해당하는 페이지 내 오디오를 멈춘다
 * @param {string} src 대상 audio의 src
 * @param {object} options
 * @param {boolean} [options.loop = true] 반복재생 여부
 * @param {number} [options.fadeInDuration = 0]  페이드인까지의 시간 milisecond로 기입
 * @param {number} [options.fadeOutDuration = 0]   페이드아웃까지의 시간 milisecond로 기입
 * @returns {void}
 * @example
 * stopAudio('https://audio.mp3', {
 *   loop: false,
 *   fadeInDuration: 500,
 *   fadeOutDuration: 500,
 * })
 * //
**/

/**
 * @method
 * @name stopAllAudios
 * @memberOf module:Audio#
 * @description
 * 재생되고 있는 모든 오디오를 멈춘다
 * @param {number} [fadeOutDuration = 0] 페이드아웃까지의 시간 milisecond로 기입
 * @returns {void}
 * @example
 * stopAllAudios(500)
 * //
**/

/**
 * @method
 * @name muteAllAudios
 * @memberOf module:Audio#
 * @description
 * 재생되고 있는 모든 오디오를 음소거한다
 * @param {number} [fadeOutDuration = 0] 페이드아웃까지의 시간 milisecond로 기입
 * @returns {void}
 * @example
 * muteAllAudios(500)
 * //
**/