pastelbook v 1.0 데이터 구조에 대한 설명

tmp_pastelbook.json

- 각 JSON 요소에 대한 설명

* ProjectManager(Object) : 프로젝트 정보, 모든 슬라이드를 가지고 있음
(현재 이 파일에는 ProjectManager는 없는 상황임)
가장 중요한 정보 : SlideContainer(Array)를 가지고 있음

* SlideContainer : 각각의 슬라이드를 가지고 있는 배열

* SlideManager : 슬라이드 고유정보, 개체 그룹의 정보(GroupContainer)를 가지고 있음

* GroupContainer : 개체 그룹들을 가지고 있는 배열

* Group : 개체 그룹 고유 정보, 개별 개체 정보(ObjectContainer)를 가지고 있음.

* ObjectContainer : 개체들을 가지고 있는 배열

* ObjectManager : 고유 개체 정보 

* 참고사항

1. JSON Array는 Java같이 딱히 개체 Type이 정해진 것이 아니라 아무거나 집어넣으면 된다.
ex) JAVA - list<Integer>, But JSON - ArrayList().add(1).add("hello").add(1.05f)

2. 개체명(PropertyName)은 JSON Array의 원소들은 가질 수 없음. 그래서 [{},{}] 이런 형식으로 표시해야됨
그런 이유로 아래의 파일내용에는 Manager에 대한 이름은 찾을 수 없음 (주석으로 표시하겠음)

3. JSON은 주석이 없음.

[   // SlideContainer
  {   // SlideManager
    "groupContainer": [     // 현재 Group 구현시 문제가 있어서 일단 Group은 ObjectManager를 대신하게 되었음
      {                     // Group은 위치, 애니메이션 정보를 가지고 있음
        "x": 673,   // x좌표(absolute)
        "y": 105,   // y좌표
        "aniName": null,
        "aniParam": {
          "toX": "",
          "toY": "",
          "easingX": "",
          "easingY": "",
          "duration": ""
        },
        "selected": false,    // 현재 사용자에 의해 그룹이 선택이 되었는가에 대한 정보
        "objectContainer": [
          {   // ObjectManager
            "imgSrc": "./img/content/grape.png",    // Object의 이미지 정보
            "aniName": null,    // 원래는 그룹 애니메이션과 따로 관리하려고 했으나 개발상 오류로 현재는 쓰이지 않는 정보
            "aniParam": [],     // 위의 이유와 동일
            "selected": false   // 현재 사용자에 의해 개체가 선택이 되었는가
          }
        ],
        "opacity": 1    // 그룹의 투명도
      },
      {
        "x": 396,
        "y": 87,
        "aniName": null,
        "aniParam": {
          "toX": "",
          "toY": "",
          "easingX": "",
          "easingY": "",
          "duration": ""
        },
        "selected": false,
        "objectContainer": [
          {
            "imgSrc": "./img/content/crane5.png",
            "aniName": null,
            "aniParam": [],
            "selected": false
          }
        ],
        "opacity": 1,
        "width": 277,
        "height": 496,
        "background": "grey"
      }
    ],
    "background": "white",
    "opacity": 1
  },
  {
    "groupContainer": [
      {
        "x": 284,
        "y": 139,
        "aniName": "easeInBounce",
        "aniParam": {
          "toX": "400",
          "toY": "400",
          "easingX": "easeInOutBounce",
          "easingY": "easeInOutBounce",
          "duration": "500"
        },
        "selected": false,
        "objectContainer": [
          {
            "imgSrc": "./img/content/fox4.png",
            "aniName": null,
            "aniParam": [],
            "selected": false
          }
        ],
        "opacity": 1
      },
      {
        "x": 548,
        "y": 206,
        "aniName": "easeInBounce",    // 애니메이션 종류 (jQuery Easing 참조)
        "aniParam": {
          "toX": "400",   // 애니메이션 동작시 어디로 움직일것인가.(x좌표, Absolute Path)
          "toY": "400",   // 위와 동일.(y좌표)
          "easingX": "easeInOutBounce",   // X방향으로 움직일시 적용할 easing 
          "easingY": "easeInOutBounce",   // Y방향으로 움직일시 적용할 easing
          "duration": "500"   // 얼마동안 작동할것인가.(ms단위)
        },
        "selected": false,
        "objectContainer": [
          {
            "imgSrc": "./img/content/bottle.png",
            "aniName": null,
            "aniParam": [],
            "selected": false
          }
        ],
        "opacity": 1,
        "width": 217,
        "height": 269
      }
    ],
    "background": "aqua",   // 그룹의 배경 옵션 (CSS문법을 따른다)
    "opacity": 1,
    "bgBorder": "5px solid red"   // 그룹의 테두리 옵션(CSS문법)
  }
]