{"action":"created","issue":{"url":"https://api.github.com/repos/rdkmaster/jigsaw/issues/802","repository_url":"https://api.github.com/repos/rdkmaster/jigsaw","labels_url":"https://api.github.com/repos/rdkmaster/jigsaw/issues/802/labels{/name}","comments_url":"https://api.github.com/repos/rdkmaster/jigsaw/issues/802/comments","events_url":"https://api.github.com/repos/rdkmaster/jigsaw/issues/802/events","html_url":"https://github.com/rdkmaster/jigsaw/issues/802","id":379005317,"node_id":"MDU6SXNzdWUzNzkwMDUzMTc=","number":802,"title":"提供一个布局编辑器，用于通过可视化的方式生成一个页面布局","user":{"login":"rdkmaster","id":16191626,"node_id":"MDQ6VXNlcjE2MTkxNjI2","avatar_url":"https://avatars2.githubusercontent.com/u/16191626?v=4","gravatar_id":"","url":"https://api.github.com/users/rdkmaster","html_url":"https://github.com/rdkmaster","followers_url":"https://api.github.com/users/rdkmaster/followers","following_url":"https://api.github.com/users/rdkmaster/following{/other_user}","gists_url":"https://api.github.com/users/rdkmaster/gists{/gist_id}","starred_url":"https://api.github.com/users/rdkmaster/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rdkmaster/subscriptions","organizations_url":"https://api.github.com/users/rdkmaster/orgs","repos_url":"https://api.github.com/users/rdkmaster/repos","events_url":"https://api.github.com/users/rdkmaster/events{/privacy}","received_events_url":"https://api.github.com/users/rdkmaster/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-11-09T03:08:35Z","updated_at":"2018-11-09T05:59:17Z","closed_at":null,"author_association":"OWNER","body":"## 界面原型\r\n\r\n![image](https://user-images.githubusercontent.com/16191626/48240530-0f2bbd80-e40e-11e8-9d2e-ba8a0cfa9b63.png)\r\n\r\n## api设计\r\n\r\n### 输入\r\n\r\n提供一个输入属性svds，定义为\r\n\r\n```\r\n// 其中layout里的4个属性的单位均为新增物体的所占/所在的单位数，而不是绝对值\r\nexport class Layout {\r\n    left: number;\r\n    top: number;\r\n    width: number;\r\n    hieight: number;\r\n    scaleDirection: \"none\"|\"ver\"|\"hor\"|\"both\";\r\n};\r\nexport class SimplifiedSVD {\r\n    id: string;\r\n    layout: Layout\r\n};\r\nsvds: SimplifiedSVD[]\r\n```\r\n\r\n### 输出\r\n\r\nchange事件，在编辑器发生了变化后，发出此事件，事件带上由product生成器生成的html代码片段。下游系统监听此事件，并取出生成的html代码片段继续工作。\r\n\r\n### 编辑过程\r\n\r\n画布上需要加上 `jigsaw-droppable` 指令，用于接受拖放\r\n\r\n拖过来的物体，必须包含如下的参数，其中`?`的表示可选，否则为必选\r\n\r\n```\r\n{\r\n    layout: Layout,\r\n    coder: {\r\n        placeholder?: () => string, placeholderContext?: any,\r\n        product: () => string, productContext?: any\r\n    }\r\n}\r\n```\r\n\r\n- coder里是生成代码功能\r\n    - placeholder用于生成拖放后的占位符，如果省略，则读取product。占位符会在设计过程中显示出来，因此要尽量使用简单的html，而不要使用过于复杂的HTML片段，别在设计过程中显示不正确影响使用体验\r\n    - product用于生成最终的代码，这些代码作为下游系统的输入，必须要与下游系统能够对接上。这些代码不用于设计过程中的显示。\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/rdkmaster/jigsaw/issues/comments/437259087","html_url":"https://github.com/rdkmaster/jigsaw/issues/802#issuecomment-437259087","issue_url":"https://api.github.com/repos/rdkmaster/jigsaw/issues/802","id":437259087,"node_id":"MDEyOklzc3VlQ29tbWVudDQzNzI1OTA4Nw==","user":{"login":"rdkmaster","id":16191626,"node_id":"MDQ6VXNlcjE2MTkxNjI2","avatar_url":"https://avatars2.githubusercontent.com/u/16191626?v=4","gravatar_id":"","url":"https://api.github.com/users/rdkmaster","html_url":"https://github.com/rdkmaster","followers_url":"https://api.github.com/users/rdkmaster/followers","following_url":"https://api.github.com/users/rdkmaster/following{/other_user}","gists_url":"https://api.github.com/users/rdkmaster/gists{/gist_id}","starred_url":"https://api.github.com/users/rdkmaster/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rdkmaster/subscriptions","organizations_url":"https://api.github.com/users/rdkmaster/orgs","repos_url":"https://api.github.com/users/rdkmaster/repos","events_url":"https://api.github.com/users/rdkmaster/events{/privacy}","received_events_url":"https://api.github.com/users/rdkmaster/received_events","type":"User","site_admin":false},"created_at":"2018-11-09T05:59:17Z","updated_at":"2018-11-09T05:59:17Z","author_association":"OWNER","body":"\r\n## 输入参数\r\n\r\n### blocks\r\n\r\n提供一个输入属性blocks，定义为\r\n\r\n```\r\n// 其中Block里的4个属性的单位均为新增物体的所占/所在的单位数，而不是绝对值\r\nexport class Block {\r\n    left: number;\r\n    top: number;\r\n    width: number;\r\n    hieight: number;\r\n    scaleDirection: \"none\"|\"ver\"|\"hor\"|\"both\";\r\n};\r\nblocks: Block[]\r\n```\r\n"}}
{"actor":{"display_login":"rdkmaster"}}