UNPKG

5.64 kBTypeScriptView Raw
1import { painter } from "./painter.d";
2import { point, rectSize } from "./type.d";
3import { layer } from "./layer.d";
4
5/**
6 * image2D对象
7 */
8export interface image2D_Object {
9
10 // 基本的DOM操作
11
12 /**
13 * 对维护的结点进行筛选后获取新的结点对象
14 * @param filterback 通过返回true或false来判断是否把当前面对的结点加入新创建的结点对象中
15 */
16 filter(filterback: (index: number, node: Element) => boolean): image2D_Object,
17
18 /**
19 * 把当前维护的结点加到目标结点内部的结尾
20 * @param target 目标节点
21 * @param context 可选，查找上下文
22 */
23 appendTo(target: Function | Element | string | image2D_Object | Array<Element | image2D_Object>, context?: Element): image2D_Object,
24
25 /**
26 * 把当前维护的结点加到目标结点内部的开头
27 * @param target 目标节点
28 * @param context 可选，查找上下文
29 */
30 prependTo(target: Function | Element | string | image2D_Object | Array<Element | image2D_Object>, context?: Element): image2D_Object,
31
32 /**
33 * 把当前维护的结点加到目标结点之后
34 * @param target 目标节点
35 * @param context 可选，查找上下文
36 */
37 afterTo(target: Function | Element | string | image2D_Object | Array<Element | image2D_Object>, context?: Element): image2D_Object,
38
39 /**
40 * 把当前维护的结点加到目标结点之前
41 * @param target 目标节点
42 * @param context 可选，查找上下文
43 */
44 beforeTo(target: Function | Element | string | image2D_Object | Array<Element | image2D_Object>, context?: Element): image2D_Object,
45
46 /**
47 * 从页面中删除当前维护的结点
48 */
49 remove(): image2D_Object,
50
51 // 结点查询等
52
53 /**
54 * 设置或获取结点中的文本
55 * @param content 可选,文本
56 */
57 text(content?: string): string | image2D_Object,
58
59 /**
60 * 设置或获取结点中的xhtml字符串模板（相当于innerHTML）
61 * @param xhtmlString 可选，xhtml字符串模板
62 */
63 html(xhtmlString?: string): string | image2D_Object,
64
65 /**
66 * 计算结点大小
67 * @param type 尺寸类型，有如下可选：
68 *
69 * "content":包含内容部分的尺寸。
70 *
71 * "padding":内容+内边距。
72 *
73 * "border":内容+内边距+边框（默认值）。
74 *
75 * "scroll":包含滚动的尺寸（不包括border）
76 */
77 size(type?: 'content' | 'padding' | 'border' | 'scroll'): rectSize,
78
79 /**
80 * 修改或获取结点样式:
81 *
82 * (key):获取指定样式。
83 *
84 * (key,value):设置指定样式。
85 *
86 * ():获取全部样式。
87 *
88 * (json):设置大量样式。
89 */
90 css(): string | image2D_Object,
91
92 /**
93 * 设置或获取结点属性:
94 *
95 * (attr):获取属性。
96 *
97 * (attr,value):设置指定属性值。
98 *
99 * (json):设置大量属性。
100 */
101 attr(): string | image2D_Object,
102
103 // 事件
104
105 /**
106 * 给维护的结点绑定事件
107 */
108 bind(eventType: string, callback: Function): image2D_Object,
109
110 /**
111 * 给维护的结点解除绑定事件
112 */
113 unbind(eventType: string, handler: Function): image2D_Object,
114
115 /**
116 * 获取鼠标相对当前维护的元素左上角位置
117 * @param event 事件
118 */
119 position(event: Event): point,
120
121 // 数据绑定
122
123 /**
124 * 把数据绑定到一组结点或返回第一个结点数据
125 *
126 * 通过具体的参数来判断是获取还是绑定，有下列参数选项可选：
127 *
128 * ():不带任何参数表示获取数据。
129 *
130 * (data):带一个参数表示设置结点对象维护的全部结点数据为data。
131 *
132 * (data, calcback):和带一个参数类似，只不过绑定的数据是经过calcback函数重新计算后返回的值，该函数有二个形参：data和index。
133 */
134 datum(): image2D_Object,
135
136 /**
137 * 把一组数据绑定到一组结点或返回一组结点数据
138 *
139 * 通过具体的参数来判断是获取还是绑定，有下列参数选项可选：
140 *
141 * ():不带任何参数表示获取数据。
142 *
143 * (data):带一个参数表示设置结点对象维护的全部结点数据为data。
144 *
145 * (data, calcback):和带一个参数类似，只不过绑定的数据是经过calcback函数重新计算后返回的值，该函数有二个形参：data和index。
146 *
147 * @return update
148 */
149 data(): image2D_Object,
150
151 /**
152 * update上的节点追加方法
153 *
154 * @param template 模板字符串
155 * @param type 可选，表示模板字符串类型
156 *
157 * @return enter
158 */
159 enter(template: string, type?: 'svg' | 'html'): image2D_Object,
160
161 /**
162 * update上的节点删除方法
163 *
164 * 如果结点多于数据，调用exit方法获取多余的结点
165 *
166 * @return exit
167 */
168 exit(): image2D_Object,
169
170 /**
171 * 因为当前有用的结点其实是原来的和追加的，因此需要拼接这两者
172 *
173 * $$([imageObject, enter]).loop(function(data,index,target){
174 *
175 * //绘制图像
176 *
177 * // data是当前结点对象target维护的数据，index是当前结点对象序号
178 *
179 * });
180 */
181 loop(doback: Function): image2D_Object,
182
183 // 画笔
184
185 /**
186 * 画笔：根据当前绑定的结点不同，获取的是不同类型的画笔，目前支持svg和canvas2D画笔
187 */
188 painter(): painter,
189
190 // 补充
191
192 /**
193 * 获取位图图层
194 */
195 layer(): layer
196
197}