realgrid-touch

/** * RealTouch 라이브러리 클래스 모델의 최상위 base 클래스. * * * @see concepts.dev_guide 개발 가이드 * @see concepts.about RealTouch 개요 */ declare class RtObject { static destroy(obj: RtObject): null; private $_hash; private $_destroyed; private $_destroying; constructor(noHash?: boolean); /** * 객체가 소유한 참조 등을 해제하고 null을 리턴한다. * * ``` * list = lis.destroy(); * ``` * * @returns null */ destroy(): null; protected _doDestory(): void; get destroying(): boolean; get hash(): string; isMe(hash: string): boolean; /** * @internal * * true를 리턴하면 assignProps()이 진행되지 않는다. */ protected _doAssignProps(source: any): boolean; /** * @internal * * 객체의 여러 속성들을 한꺼번에 설정한다. * * @param source 속성 원본 object * //@param valueCallback * @returns 객체 자신 */ assignProps(source: any): RtObject; assignObject(source: any, excludes: string[]): RtObject; toString(): string; /** * @internal * * template param으로부터 생성되는 값은 문자열일 수 있다. */ toBool(v: any): boolean; toNum(v: any, def?: number): number; } declare abstract class RtWrappableObject extends RtObject { protected _wrapper: any; wrapper(): any; wrapperOrThis(): any; createWrapper<T>(clazz: { new (): T; }): T; setWrapper<T>(wrapper: T): T; isWrapper(w: any): boolean; } declare abstract class RtWrapper<T extends RtWrappableObject> extends RtObject { protected $_c: T; protected _doDestory(): void; } declare abstract class RtEventProvider<T> extends RtObject { private _listeners; addListener(listener: T): void; removeListener(listener: T): void; /** * event로 지정한 함수가 정의된 모든 리스너에 대해 실행한다. * 리스너 scope으로 실행하고, 첫번째 매개변수로 이 객체가 전달된다. * 다만, 리스너들 중 하나라도 undefined가 아닌 값을 리턴하면, * 그 값을 리턴하면서 멈춘다. */ protected _fireEvent(event: string, ...args: any[]): any; } interface IEventArgs { } /** * @internal * * {@link RtListControl} 및 {@link RtDataSource} 이벤트 콜백 형식. * * 여러 값이 포함된 단일 매개변수로 호출된다. */ type RtEventHandler<T extends IEventArgs> = (args?: T) => void; /** * 123, '10%' 형식으로 크기를 지정한다. */ type RtPercentSize = string | number; interface IPercentSize { size: number; fixed: boolean; } type SizeValue = string | number; interface CSSStyles { background?: string; backgroundAttachment?: string; backgroundBlendMode?: string; backgroundClip?: string; backgroundColor?: string; backgroundImage?: string; backgroundOrigin?: string; backgroundPosition?: string; backgroundPositionX?: string; backgroundPositionY?: string; backgroundRepeat?: string; backgroundSize?: string; border?: string; borderBlock?: string; borderBlockColor?: string; borderBlockEnd?: string; borderBlockEndColor?: string; borderBlockEndStyle?: string; borderBlockEndWidth?: string; borderBlockStart?: string; borderBlockStartColor?: string; borderBlockStartStyle?: string; borderBlockStartWidth?: string; borderBlockStyle?: string; borderBlockWidth?: string; borderBottom?: string; borderBottomColor?: string; borderBottomLeftRadius?: string; borderBottomRightRadius?: string; borderBottomStyle?: string; borderBottomWidth?: string; borderCollapse?: string; borderColor?: string; borderEndEndRadius?: string; borderEndStartRadius?: string; borderImage?: string; borderImageOutset?: string; borderImageRepeat?: string; borderImageSlice?: string; borderImageSource?: string; borderImageWidth?: string; borderInline?: string; borderInlineColor?: string; borderInlineEnd?: string; borderInlineEndColor?: string; borderInlineEndStyle?: string; borderInlineEndWidth?: string; borderInlineStart?: string; borderInlineStartColor?: string; borderInlineStartStyle?: string; borderInlineStartWidth?: string; borderInlineStyle?: string; borderInlineWidth?: string; borderLeft?: string; borderLeftColor?: string; borderLeftStyle?: string; borderLeftWidth?: string; borderRadius?: string; borderRight?: string; borderRightColor?: string; borderRightStyle?: string; borderRightWidth?: string; borderSpacing?: string; borderStartEndRadius?: string; borderStartStartRadius?: string; borderStyle?: string; borderTop?: string; borderTopColor?: string; borderTopLeftRadius?: string; borderTopRightRadius?: string; borderTopStyle?: string; borderTopWidth?: string; borderWidth?: string; boxSizing?: 'content-box' | 'border-box' | ''; color?: string; font?: string; fontFamily?: string; fontFeatureSettings?: string; fontKerning?: string; fontOpticalSizing?: string; fontSize?: string; fontSizeAdjust?: string; fontStretch?: string; fontStyle?: string; fontSynthesis?: string; fontVariant?: string; fontVariantCaps?: string; fontVariantEastAsian?: string; fontVariantLigatures?: string; fontVariantNumeric?: string; fontVariantPosition?: string; fontVariationSettings?: string; fontWeight?: string; padding?: string; paddingBlock?: string; paddingBlockEnd?: string; paddingBlockStart?: string; paddingBottom?: string; paddingInline?: string; paddingInlineEnd?: string; paddingInlineStart?: string; paddingLeft?: string; paddingRight?: string; paddingTop?: string; textOverflow?: string; fill?: string; stroke?: string; strokeWidth?: string; } /** @internal */ interface CSSStyles2 extends CSSStyles { display?: string; position?: string; alignItems?: string; justifyContent?: string; flexDirection?: string; flexWrap?: string; gap?: string; flex?: string; width?: string; height?: string; minHeight?: string; minWidth?: string; maxWidth?: string; left?: string; top?: string; overflow?: string; marginRight?: string; whiteSpace?: string; margin?: string; marginLeft?: string; pointerEvents?: string; } type StyleOrClass = CSSStyles | string; interface ISize { width: number; height: number; } interface IRect { x: number; y: number; width: number; height: number; } interface ISides { left: number; right: number; top: number; bottom: number; horz?: number; vert?: number; } interface IPadding { left: number; right: number; top: number; bottom: number; borderLeft: number; borderRight: number; borderTop: number; borderBottom: number; horz?: number; vert?: number; } /** * 스와이프 제스처 등의 진행 방향. * * * @see {@link RtListControl.onRowSwipe} */ declare enum RtDirection { /** * 위쪽으로 진행. */ UP = "up", /** * 아래쪽으로 진행. */ DOWN = "down", /** * 왼쪽으로 진행. */ LEFT = "left", /** * 오른쪽으로 진행. */ RIGHT = "right" } declare class TemplateVars { private _vars; constructor(vars: any); out(value: string): any; assign(source: any): any; } declare class DummyVars extends TemplateVars { constructor(); out(value: string): any; assign(source: any): any; } /** * @internal * * 템플릿 구성 항목은 값을 표시하는 field 아이템과, field및 자식 layout을 포함하는 layout 아이템으로 구성된다. * 1. 'layout' 속성을 지정하면 layout 아이템이 된다. * 2. 'field' 속성을 지정하면 지정한 field의 값을 표시하는 field 아이템이 된다. * 3. 'value' 속성을 지정하면 지정한 값을 표시하는 field 아이템이 된다. field 값보다 우선한다. * * 항목의 속성이나 상위 layout에서 지정하는 자식 속성들은 'props'에 지정한다. */ declare abstract class TemplateChild { protected _parent: TemplateLayout; tid: number; id: any; tag: string; props: any; style: RtParamObject; styleCallback: ((ctx: any) => CSSStyles) | RtParamString; constructor(parent: TemplateLayout | null, source: any, vars: TemplateVars); updateProp(path: string[] | string, value: any, vars: any): boolean; protected abstract _doLoad(source: any, vars: TemplateVars): void; protected _loadProps(source: any, vars: TemplateVars): any; protected _loadStyle(source: any, vars: TemplateVars): RtParamObject; /** * renderer type은 변경할 수 없다. * type 속성을 param으로 지정할 수 있지만 비추천. * renderer가 사용하는 dom의 style을 layout field 수준에서 설정하므로... * 상태에 따라 renderer를 바꾸려면 row template을 동적으로 설정해야 한다. */ protected _loadRenderer(source: any, styles: any, vars: TemplateVars): RtParamObject | string; } /** * @internal * * { type: 'field', field: 'fieldName', props: {}, renderer: 'label' } */ declare class TemplateField extends TemplateChild { field: string | RtParamString; value: any | RtParamString; fields: string[] | RtParamString; renderer: string | RtParamObject; rendererStyles: any; editor: string | RtParamObject; editorStyles: any; protected _doLoad(source: any, vars: TemplateVars): void; private $_updateProp; updateProp(path: string[] | string, value: any, vars: any): boolean; } /** * @internal * * { type: 'layout', layout: 'vlinear', children: [], props: {}, style: {}} */ declare class TemplateLayout extends TemplateChild { defaultRenderer: string; layout: string; children: TemplateChild[]; map: { [id: string]: TemplateChild; }; count(): number; getDefaultRenderer(): string; get(index: number): TemplateChild; tagBy(tag: string): TemplateChild; fieldBy(tag: string): TemplateField; private $_loadChild; protected _doLoad(source: any, vars: TemplateVars): void; updateProp(path: string[] | string, value: any, vars: any): boolean; find(id: string): TemplateChild; _getFields(fields: string[]): void; } interface HtmlToken { node: number[]; attr?: string; param: RtParamString; value?: any; } /** * @internal * * { type: 'html', domid: ''} or { html: '<div>...</div>' } */ declare class TemplateHtmlLayout extends TemplateChild { dom: HTMLElement; tokens: HtmlToken[]; constructor(dom: HTMLElement, vars: TemplateVars); protected _doLoad(source: any, vars: TemplateVars): void; find(id: string): any; private $_parseParams; } type TemplateLayoutType = TemplateLayout | TemplateHtmlLayout; /** * @internal * * {@link RtListOptions 컨트롤 option}에 설정된 값들보다 우선 적용된다. */ interface ITemplateProps { height?: number; minHeight?: number; maxHeight?: number; width?: number; minWidth?: number; maxWidth?: number; } interface IListTemplate { /** * 템플릿 id는 layout id 가 되고, row view등에서 layout id가 달라지면 layout view를 교체한다. */ id: number; detailId?: number; collapsedId?: number; description?: string; target?: any; rowProps?: ITemplateProps; rowStyle?: RtRowStyles; layout?: TemplateLayoutType; detailed?: TemplateLayoutType; extra?: TemplateLayoutType; collapsed?: TemplateLayoutType; skeleton?: TemplateLayoutType; params?: object; } /** * @internal * * 설정을 통해 {@link RtLayout 레이아웃} 계층을 구성하고, * 각 layout에 {@link RtField 리스트 필드}들을 배치하는 layout 설정 모델. * Template으로 부터 rendering 시간에 item view 표시를 위한 layout이 생성된다. */ declare class ListTemplate extends RtObject implements IListTemplate { static readonly Vars: DummyVars; static createLayout(htmlProvider: ITemplateHtmlProvider, source: any, vars: TemplateVars): TemplateLayoutType; private _vars; id: number; detailId: any; collapsedId: any; description: string; target: any; rowProps: ITemplateProps; rowStyle: RtRowStyles; layout: TemplateLayoutType; detailed: TemplateLayoutType; extra: TemplateLayoutType; collapsed: TemplateLayoutType; brief: TemplateLayoutType; params: object; /** * @internal * * @param vars2 source를 재사용할 때 vars를 다르게 적용할 수 있도록 한다. */ constructor(htmlProvider: ITemplateHtmlProvider, source: any, vars2: any); protected _doDestory(): void; getFields(): string[]; find(id: string): TemplateChild; updateProp(id: string, prop: string, value: any): boolean; updateProps(id: string, props: { [prop: string]: any; }): boolean; } declare class TableTemplateCell extends TemplateField { row: number; col: number; rowspan: number; colspan: number; cellStyle: RtParamObject; protected _doLoad(src: any, vars: TemplateVars): void; } interface ITableTemplate extends IListTemplate { tag?: string; cells: TableTemplateCell[]; } declare abstract class TableTemplate extends RtObject implements ITableTemplate { embed: boolean; id: number; detailId: number; tag: string; cells: TableTemplateCell[]; rowProps: ITemplateProps; rowStyle: RtRowStyles; detailed: TemplateLayoutType; extra: TemplateLayoutType; constructor(htmlProvider: ITemplateHtmlProvider, source: any, embed: boolean); find(id: string): any; protected abstract _createCell(source: any, vars: any): TableTemplateCell; private $_loadCells; } declare class TableRowTemplate extends TableTemplate { headerTemplate: TableHeaderTemplate; footerTemplate: TableFooterTemplate; constructor(htmlProvider: ITemplateHtmlProvider, source: any); protected _createCell(source: any, vars: any): TableTemplateCell; } declare class TableHeaderTemplate extends TableTemplate { constructor(htmlProvider: ITemplateHtmlProvider, source: any, embed: boolean); protected _createCell(source: any, vars: any): TableTemplateCell; } declare class TableFooterTemplate extends TableTemplate { constructor(htmlProvider: ITemplateHtmlProvider, source: any, embed: boolean); protected _createCell(source: any, vars: any): TableTemplateCell; } type TemplateType = ListTemplate | TableTemplate; /** @internal */ declare class RtEditTool { private _control; private _touchElement; private _moveElement; private _draggable; private _dragTracker; private _touchX; private _touchY; private _prevX; private _prevY; protected _touches: { x: number; y: number; t: number; }[]; protected _tapped: number; private _firstTime; private _secondTime; private _longTimer; protected _primaryId: number; constructor(control: RtControl); get control(): RtControl; /** * drag tracker */ get dragTracker(): DragTracker; setDragTracker(value: DragTracker): void; get dragging(): boolean; touchX(): number; touchY(): number; pointerDown(ev: PointerEvent): boolean; protected _stopEvent(ev: Event): void; private $_doDrag; private $_startMove; pointerMove(ev: PointerEvent): void; pointerUp(ev: PointerEvent): void; pointerCancel(ev: PointerEvent): void; pointerLeave(ev: PointerEvent): void; touchStart(ev: TouchEvent): boolean; touchMove(ev: TouchEvent): boolean; touchEnd(ev: TouchEvent): void; click(ev: PointerEvent): void; dblClick(ev: MouseEvent): void; keyPress(ev: KeyboardEvent): void; wheel(ev: WheelEvent): void; requestDrag(request: DragRequest): void; getTrackerFromRequest(request: DragRequest): DragTracker; protected _setDraggable(value: boolean): void; protected _doClick(ev: PointerEvent, dom: Element): void; protected _doDblClick(dom: Element): void; protected _doPointerDown(dom: Element): boolean; protected _doPointerMove(dom: Element): void; protected _doPointerUp(dom: Element): boolean; protected _doPointerCancel(ev: PointerEvent): void; protected _doPointerLeave(ev: PointerEvent): void; protected _doTouchStart(ev: TouchEvent): boolean; protected _doTouchMove(ev: TouchEvent, dom: Element): boolean; protected _doTouchEnd(ev: TouchEvent): void; protected _doLongPressed(dom: Element, x: number, y: number): void; protected _doKeyPress(ev: KeyboardEvent): void; protected _doWheel(ev: WheelEvent): boolean; protected _doSwipe(dom: Element, prevTracker: DragTracker, dir: RtDirection, duration: number, distance: number): boolean; protected _getDragTracker(dom: Element, dx: number, dy: number): DragTracker; private $_startDrag; private $_drag; private $_stopDragTracker; private $_pointerToPoint; private $_checkSwipe; /** * 터치 시작 시점에 실행한 설정 등을 이 후 touch 이벤트가 발생하면 초기화한다. * ex) touch feedback, ... * iphone 메시지 편집 창에서 touch 하면 행을 선택하고 이 후 다른 이벤트가 발생하면 선택을 해제한다. */ protected _clearTouchEffects(): void; } declare abstract class DragRequest extends RtObject { } declare abstract class DragTracker extends RtObject { private _control; private _dragging; constructor(control: RtControl); get control(): RtControl; /** dragging */ get dragging(): boolean; /** startWhenCreated */ get startWhenCreated(): boolean; get cursor(): string; canSwipe(): boolean; start(eventTarget: Element, xStart: number, yStart: number, x: number, y: number): boolean; drag(eventTarget: Element, xPrev: number, yPrev: number, x: number, y: number): boolean; cancel(): void; drop(eventTarget: HTMLElement, x: number, y: number): void; swipe(dir: RtDirection, duration: number, distance: number): boolean; end(x?: number, y?: number): void; protected _doSwipe(dir: RtDirection, duration: number, distance: number): boolean; protected _showFeedback(x: number, y: number): void; protected _moveFeedback(x: number, y: number): void; protected _hideFeedback(): void; protected _doStart(eventTarget: Element, xStart: number, yStart: number, x: number, y: number): boolean; protected abstract _doDrag(eventTarget: Element, xPrev: number, yPrev: number, x: number, y: number): boolean; protected _doCanceled(): void; protected _canAccept(eventTarget: Element, x: number, y: number): boolean; protected _doCompleted(eventTarget: Element, x: number, y: number): void; protected _doEnded(x?: number, y?: number): void; } interface ISvgShape { width: number; height?: number; path: string; } declare class RtSvg extends RtObject { static create(doc: Document): SVGSVGElement; svg: SVGSVGElement; constructor(svg: SVGSVGElement | Document, className?: string); protected _doDestory(): void; attach(parent: Element): RtSvg; detach(): void; setClass(className: string): void; addClass(className: string): void; clearStyle(style: any): void; setStyle(style: any): void; setViewSize(w: number, h?: number): void; clearViewSize(): void; setSize(w: number, h: number): void; fillSize(): void; makeBackground(width?: number, height?: number): RtSvg; clear(): void; rect(x: number, y: number, w: number, h: number, style: object): SVGRectElement; circle(cx: number, cy: number, radius: number, style: object): SVGCircleElement; line(x1: number, y1: number, x2: number, y2: number, style?: object): SVGPathElement; polyline(pts: number[], style?: object): SVGPathElement; polylgon(pts: number[], style?: object): SVGPathElement; quadratic(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number, style?: object): SVGPathElement; arc(cx: number, cy: number, rx: number, ry: number, startAngle: number, angle: number, clockwise: boolean, style?: object): SVGPathElement; path(d: string): SVGPathElement; setShape(shape: ISvgShape, clear?: boolean): RtSvg; _createPath(d: string): SVGPathElement; private $_angleToPos; _animateRevert(path: SVGPathElement, from: string, to: string, duration: number): void; } declare class Registy<T extends RtObject> extends RtObject { private _items; protected _doDestory(): void; get(name: string): T; clear(): void; add(name: string, template: T): void; remove(name: string): void; removeAll(names: string[]): void; } /** * @internal * * viewBox 크기가 설정돼야 한다. */ declare abstract class RtShape extends RtObject { static clone<T extends RtShape>(shape: T, clazz: { new (shape: T): T; }): T; protected _svg: RtSvg; protected _width: number; protected _height: number; constructor(doc: Document | RtShape | SVGSVGElement, className?: string, style?: object); protected _doDestory(): void; name(): string; dom(): SVGSVGElement; attached(): boolean; isDom(svg: SVGSVGElement): boolean; containsDom(dom: Element): boolean; setVisible(value: boolean): void; styleTarget(): CSSStyleDeclaration; resize(width: number, height?: number): boolean; setClass(className: string): void; setStyle(style: CSSStyles2): void; appendTo(dom: Element | RtElement): void; remove(): void; makeBackground(width: number, height?: number): RtShape; protected _doClone(shape: RtShape): void; protected _doInit(svg: RtSvg): void; } declare abstract class RtShapeRegistry extends Registy<RtShape> { abstract create<T extends RtShape>(clazz: { new (doc: any): T; }, svg: SVGSVGElement): T; abstract createStock(doc: Document | SVGSVGElement, shapeName: string, className?: string, style?: object): RtShape; abstract createCustom(shapeName: string, svg: SVGSVGElement, className: string): RtCustomShape; abstract registerCustom(shapeName: string, d: string, width?: number, height?: number): void; abstract getCustom(shapeName: string): { w: number; h: number; d: string; }; createShape(doc: Document, shapeName: string): RtShape; } /** * @internal * * viewBox 너비/높이를 명시적으로 지정하고 그 크기를 기준으로 상대 좌표로 path를 지정해야 한다. * 너비/높이를 지정하지 않으면 기본 10 * 10 크기로 지정된다. * 'd' 하나로 구성되는 단색 shape만 지정할 수 있다. */ declare class RtCustomShape extends RtShape { static readonly NAME = "@custom"; private _path; constructor(doc: Document | RtCustomShape | SVGSVGElement, className?: string, style?: object); setShape(shape: { w: number; h: number; d: string; }): RtCustomShape; protected _doClone(shape: RtCustomShape): void; } type RtScreenOrientationCallback = (orientation: RtScreenOrientation) => void; /** * @internal * * Control base. */ declare abstract class RtControl extends RtWrappableObject { private _orientation; private _syncOrientation; private _screenOrientation; private _syncScreenOrientation; private _activeTool; longPressDelay: number; onOrientationChanged: RtScreenOrientationCallback; private _container; private _dom; private _root; private _inited; private _testing; private _dirty; private _requestTimer; private _defaultTool; private _tool; private _invalidElements; private _toAnimation; private _invalidateLock; private _lockDirty; private _cssVars; constructor(doc: Document, container: string | HTMLDivElement, className: string); protected _doDestory(): void; isInited(): boolean; isTesting(): boolean; doc(): Document; dom(): HTMLElement; width(): number; height(): number; activeTool(): RtEditTool; setSctiveTool(value: RtEditTool): void; /** * Control orientation * 이 속성을 통해 명시적으로 변경하거나, window 이벤트 핸들러를 캐치할 수 있는 경우 자동 설정된다. */ orientation(): RtScreenOrientation; setOrientation(value: RtScreenOrientation): void; isPortrait(): boolean; isLandscape(): boolean; /** * 컨트롤 크기가 변경될 때 orientation 속성을 자동 설정. */ syncOrientation(): boolean; setSyncOrientation(value: boolean): void; /** * 장치 스크린 방향. */ screenOrientation(): RtScreenOrientation; /** * syncOrientation이 true일 때, * 컨트롤 크기와 상관 없이 단말기 방향에 맞춰 orientation 속성을 자동 설정. */ syncScreenOrientation(): boolean; setScreenSyncOrientation(value: boolean): void; addElement(elt: RtElement): void; removeElement(elt: RtElement): void; invalidate(force?: boolean): void; invalidateLayout(force?: boolean): void; setLock(): void; releaseLock(validate?: boolean): void; lock(func: (control: RtControl) => void): void; silentLock(func: (control: RtControl) => void): void; elementOfDom(dom: Element): RtElement; getBounds(): DOMRect; toElement(elt: RtElement, x: number, y: number): { x: number; y: number; }; setAnimation(to?: number): void; fling(distance: number, duration: number): void; getCssVar(name: string): string; abstract shapes(): RtShapeRegistry; abstract useImage(src: string): void; protected _setTesting(): void; protected _setSize(w: number, h: number): void; private $_getScreenOrientation; private $_getOrientation; private $_checkOrientation; private $_addListener; protected _resigterEventHandlers(dom: HTMLElement): void; protected _unresigterEventHandlers(dom: HTMLElement): void; private $_orientationChanged; protected _doOrientationChanged(orientation: RtScreenOrientation): void; protected abstract _creatDefaultTool(): RtEditTool; protected _prepareRenderers(dom: HTMLElement): void; private $_initControl; protected _render(): void; private $_invalidateElement; private $_requestRender; updateNow(): void; private $_render; protected abstract _doRender(bounds: IRect): void; protected _doBeforeRender(): void; protected _doAfterRender(): void; protected _doControlObjectChanged(obj: RtControlObject, tag: string): void; protected _doClick(event: PointerEvent): void; protected _doDblClick(event: PointerEvent): void; protected _doTouchMove(event: TouchEvent): boolean; protected _doTouchEnd(event: TouchEvent): void; protected _doPointerDown(event: PointerEvent): boolean; protected _doPointerMove(event: PointerEvent): void; protected _doPointerUp(event: PointerEvent): void; protected _doPointerCancel(event: PointerEvent): void; protected _doPointerLeave(event: PointerEvent): void; protected _doKeyPress(event: KeyboardEvent): void; protected _doWheel(event: WheelEvent): void; private _screenOrientationChangeHandler; static currentInput: HTMLInputElement | HTMLTextAreaElement; protected _windowResizeHandler: (event: Event) => void; protected _windowResized(): void; private _clickHandler; private _dblClickHandler; private _touchMoveHandler; private _touchEndHandler; /** * touchEvent가 발생하는 브라우저용. * pointer 이벤트로 drag처리 중에 pointercancel이 곧바로 발생하는 경우가 있다. * 관련 이슈: intro, detail이 같이 설정 #721 * 재현 샘플: exam/notScrollable.html * 재현 환경: 안드로이드 기기, PC 크롬 (개발자 모바일 모드) * 해결 방법: * touchstart 이벤트를 활성화한 뒤 preventDefault 처리하면 이 문제가 발생하지 않는다. * 대신 click이벤트가 발생하지 않는데, 이를 대응하기 위해 직접 click을 호출한다. * mdn에서 pointercancel 동작을 직접 제어하도록 * Element의 setPointerCapture, releasePointerCapture을 제공하고 있지만, * 뷰가 갱신되어서인지 pointercancel을 막을 수 없었다. */ private _touchStartHandler; private _pointerDownHandler; private _pointerMoveHandler; private _pointerUpHandler; private _pointerCancelHandler; private _pointerLeaveHandler; private _keyPressHandler; private _wheelHandler; } type RtControlOrWrapper = RtControl | RtWrapper<RtControl>; /** * @internal * * DContainer 구성 요소. */ declare class RtElement extends RtObject { static readonly TESTING = false; static BOUNDING: boolean; static readonly BOUNDING_BORDER = "1px solid #ff000080"; static readonly BOUNDING_BORDER_2 = "1px solid #0000ff40"; static ANIMATABLE: boolean; private _visible; private _x; private _y; private _width; private _height; private _dom; private _content; private _parent; private _children; private _dirty; constructor(doc: Document, contentable: boolean, className: string, tag: string); protected _doDestory(): void; get doc(): Document; get win(): Window; get dom(): HTMLElement; get content(): HTMLElement; get parent(): RtElement; get childCount(): number; get control(): RtControl; /** * move())를 통해 설정된 x 좌표. */ get x(): number; right(): number; /** * move())를 통해 설정된 y 좌표. */ get y(): number; bottom(): number; /** * resize()를 통해 설정된 너비. */ get width(): number; /** * resize()를 통해 설정된 높이. */ get height(): number; get visHeight(): number; /** * visible */ get visible(): boolean; set visible(value: boolean); setVisible(value: boolean): boolean; _internalVisible(visible: boolean): boolean; setHidden(value: boolean): void; canAnimate(): boolean; setAnimating(value: boolean): void; animating(): boolean; /** * hidden */ get hidden(): boolean; set hidden(value: boolean); setStyles(style: CSSStyles2): RtElement; getClientSize(): ISize; getOffsetSize(): ISize; getOffsetBounds(): IRect; getClientRect(): DOMRect; getSize(): ISize; getBounds(): IRect; validate(): void; getLabel(): HTMLElement; getChildren(): RtElement[]; getChild(index: number): RtElement; indexOf(child: RtElement): number; contains(elt: RtElement, deep?: boolean): boolean; insertChild(at: number, child: RtElement): void; insertBefore(child: RtElement, before: RtElement): void; /** * 자식 목록의 마지막에 추가한다. * @param {RtElement} child 추가할 자식 {@link RtElement}. */ addChild(child: RtElement): void; remove(): void; /** * 지정한 위치에 존재하는 자식 {@link RtElement element}를 제거한다. * @param {number} at 제거할 자식의 위치. * @returns {RtElement} 삭제된 element. */ removeChildAt(at: number): RtElement; /** * 지정한 자식 {@link RtElement element}를 제거한다. * @param {RtElement} child 제거할 자식 {@link RtElement element} * @returns {RtElement} 삭제된 element. */ removeChild(child: RtElement): RtElement; removeLast(): RtElement; clear(): boolean; moveIndex(child: RtElement, newIndex: number): boolean; isDom(dom: Element): boolean; containsDom(dom: Element): boolean; isView(dom: Element): boolean; containsClass(className: string): boolean; domByClass(className: string, text?: string | string[]): HTMLElement; childOfDom(dom: Element): RtElement; hasData(name: string): boolean; setData(name: string, value: any): void; setBounds(x: number, y: number, width: number, height: number): RtElement; setRect(r: IRect): RtElement; moveX(x: number): RtElement; moveY(y: number): RtElement; move(x: number, y: number): RtElement; center(x: number, y: number, width: number, height: number): RtElement; moveI(x: number, y: number): RtElement; resetPosition(): void; setWidth(width: number): RtElement; setHeight(height: number): RtElement; clearSize(): void; resize(width: number, height: number): RtElement; internalClearSize(): RtElement; internalResize(width: number, height: number): RtElement; internalSetSize(width: number, height: number): RtElement; syncSize(): void; resizeContent(width: number, height: number): void; setContentBounds(x: number, y: number, w: number, h: number): void; /** * 계산된 dom 크기를 참조할 수 있도록 필드에 저장한다. */ saveSize(): RtElement; forEach(callback: (child: RtElement, index?: number, count?: number) => void): void; some(callback: (child: RtElement, index?: number, count?: number) => boolean): void; findChild(selector: (child: RtElement, index?: number, count?: number) => boolean): RtElement; findDescendant(selector: (child: RtElement) => boolean): RtElement; findDescendants(selector: (child: RtElement) => boolean, elements: RtElement[]): void; applyStyle(style: CSSStyles): void; setImportantStyle(css: CSSStyleDeclaration, property: string, value: string): RtElement; setPressed(value: boolean): void; appendSpan(doc?: Document, className?: string): HTMLSpanElement; appendDom<T extends HTMLElement | SVGSVGElement>(dom: T): T; removeDom(dom: HTMLElement): void; detachDom(): void; createElement(tag: string): HTMLElement; setClassName(clazz: string): void; protected _testing(): boolean; protected _doInitStyle(style: CSSStyles2): void; protected _doInitDom(doc: Document, dom: HTMLElement): void; protected _doInitContent(doc: Document, div: HTMLElement): void; protected _getPositionStyle(): string; protected _getDisplayStyle(): string; protected _getContentPosition(): string; protected _getOverflow(): string; private $_attached; protected _doAttached(): void; private $_detached; protected _doDetached(oldParent: RtElement): void; private $_removeChild; protected _changed(): void; protected _getRenderSize(): ISize; } declare abstract class RtControlObject extends RtWrappableObject { private _control; constructor(control: RtControl); control(): RtControl; protected _changed(tag?: string): void; } /** * {@link concepts.data_model 데이터필드} 자료형. * * * @see concepts.data_model 데이터 모델 개요 * @see RtListData */ declare enum RtDataType { /** * 문자열 */ TEXT = "text", /** * 숫자 */ NUMBER = "number", /** * Boolean */ BOOL = "bool", /** * 날짜형. Date 객체가 아닌경우 new Date()의 매개변수로 가능한 숫자나 문자열이어야한다. * 데이터로 읽어들일 때 Date 객체로 변환한다. */ DATE = "date", /** * BigInt */ BIGINT = "bigint", /** * 임의의 자료형. */ ANY = "any" } /** * Data 필드 생성 정보. * * @see RtListData.fields * @see concepts.data_model 데이터 모델 */ interface IRtDataField { /** * 필드 이름. */ name: string; /** * View에서 필드 이름 대신 표시되는 필드 레이블. */ label?: string; /** * 자료형. */ type?: RtDataType; /** * {@link type}이 {@link RtDataType.ANY}일 때 비교 기준이 되는 속성 경로. * * 'prop1.prop2' 형식으로 지정할 수 있다. * {@link compareer}가 지정되면 이 속성은 무시된다. */ key?: string; /** * 비교 함수. */ comparer?: (v1: any, v2: any) => number; /** * 기본값. update/insert 시 반영. load시에는 사용하지 않는다. */ default?: any; /** * 정렬 가능 필드인가? */ sortable?: boolean; /** * 필수값. update/insert 시 체크. load시에는 check하지 않는다. */ required?: boolean; /** * 최소값. update/insert 시 체크. load시에는 check하지 않는다. */ minimum?: any; /** * 최대값. update/insert 시 체크. load시에는 check하지 않는다. */ maximum?: any; /** * 도메인. update/insert 시 체크. load시에는 check하지 않는다. */ domain?: any[]; } /** * @internal * * Data field model. */ declare class RtDataField { static create(name: string | IRtDataField, type?: RtDataType): RtDataField; static createFields(fields: IRtDataField[]): RtDataField[]; static readonly comparers: { text: (v1: any, v2: any) => number; number: (v1: any, v2: any) => number; bool: (v1: any, v2: any) => number; date: (v1: any, v2: any) => number; bigint: (v1: any, v2: any) => number; any: (v1: any, v2: any) => number; }; private _label; /** * [접근성] 정보. */ description: string; default: any; sortable: boolean; sourceProp: string; required: boolean; minimum: any; maximum: any; domain: any[]; keys: string[]; private _owner; private _name; private _type; readValue: (v: any) => any; comparer: (v1: any, v2: any) => number; protected constructor(name: string, type?: RtDataType); get name(): string; get type(): RtDataType; /** * 필드 label. * 컨트롤 헤더 등에 표시될 때 사용되는 text. * 지정하지 않으면 {@link name}이 대신 사용된다. */ get label(): string; set label(value: string); displayText(): string; proxy(): IRtDataField; protected _changed(): void; } type RtValueExtracter = (values: RtRowValues) => any; /** * @internal * * 파생 필드. */ declare class DerivedField extends RtDataField { static createDerived(name: string, extracter: RtValueExtracter, type?: RtDataType): DerivedField; private _extracter; private constructor(); extract(values: object): any; } /** * 파생 필드 생성 정보. * * @see RtListData */ interface IRtDerivedField extends IRtDataField { /** * 파생 값 추출기. */ extractor: RtValueExtracter; } /** * 데이터행 상태. * * @see RtListData.softDeleting */ declare enum RtDataRowState { /** * 추가 상태. */ CREATED = "c", /** * 수정 상태. */ UPDATED = "u", /** * 삭제 상태. 수정할 수 없다. */ DELETED = "d" } /** * 데이터행 필드들의 값 object. */ type RtRowValues = { [field: string]: any; }; type RtFieldMap = { [name: string]: RtDataField; }; type RtDerivedFieldMap = { [name: string]: DerivedField; }; type RtDataValueReader = (prop: string, value: any) => any; /** * @internal * * List data row. */ declare class DataRow { /** * 값이 지정되지 않은 필드 값은 undefined로 저장된다. */ static createRow(id: number, fields: RtFieldMap, dfields: RtDerivedFieldMap, values: RtRowValues, reader: RtDataValueReader): DataRow; /** * @internal * * 값이 지정되지 않은 필드 값은 undefined로 저장된다. */ static createRow2(id: number, fields: RtFieldMap, dfields: RtDerivedFieldMap, values: RtRowValues): DataRow; /** * @internal * * TODO: 정렬된 필드인 경우 binary search. */ static findRow(drows: DataRow[], values: { [field: string]: any; }, from: number, to: number): number; static findRows(drows: DataRow[], values: { [field: string]: any; }, from: number, to: number): number[]; static findDistinctRows(drows: DataRow[], fields: string[], from: number, to: number): number[]; static findNearest(drows: DataRow[], field: string, value: any, from: number, to: number): number; static getProp(values: RtRowValues, field: string, props: string[]): any; static setProp(values: RtRowValues, field: string, props: string[], value: any): void; id: number; row: number; values: any; save: any; state: RtDataRowState; tidx: number; tag: any; getValues(fields: string[]): any; match(obj: { [field: string]: any; }): boolean; } interface ILayoutData { getValue(row: number, field: string, fieldCheck: boolean): any; getProp(row: number, field: string, prop: string[], fieldCheck: boolean): any; updateValue(row: number, field: string, value: any): boolean; updateProp(row: number, field: string, prop: string[], value: any): boolean; } /** @internal marker interface */ interface IDataViewWrapper { } interface IDataView { addListener(listener: any): void; removeListener(listener: any): void; source(): IDataView; wrapper(): IDataViewWrapper; wrapperOrThis(): ListDataWrapper; name(): string; readOnly(): boolean; fields(): RtDataField[]; fieldByName(name: string): RtDataField; rowCount(): number; visRowCount(): number; rowById(rowid: number): number; internalRowId(row: number): number; getRowId(row: number): number; isLast(row: number): boolean; isMaster(row: number): boolean; levelRowOfRow(row: number): number; findRow(values: { [field: string]: any; }, from: number, to: number): number; findRows(values: { [field: string]: any; }, from: number, to: number): number[]; findDistinctRows(fields: string[], from: number, to: number): number[]; findNeareastRow(field: string, value: any): number; addFlags(owner: RtObject): DataFlags; removeFlags(owner: RtObject): void; getFlags(owner: RtObject): DataFlags; flagChanged(flags: DataFlags, row: number, flag: number): void; flagsChanged(flags: DataFlags, rows: number[], flag: number): void; flagAllChanged(flags: DataFlags, flag: number): void; getValue(row: number, field: string, fieldCheck: boolean): any; getProp(row: number, field: string, prop: string[], fieldCheck: boolean): any; getRowValues(row: number): RtRowValues; internalRowValues(row: number): RtRowValues; getValues(row: number, fields: string[], fieldCheck: boolean): RtRowValues; getFieldValues(field: string, from?: number, to?: number): any[]; updateValue(row: number, field: string, value: any): boolean; updateProp(row: number, field: string, prop: string[], value: any): boolean; getSummary(field: string): IRtFieldSummary; getGroupSummary(field: string, start: number, end: number): IRtFieldSummary; getRows(): DataRow[]; deleteRow(row: number, force: boolean): void; deleteRows(rows: number[], force: boolean): void; updateRow(row: number, values: RtRowValues, forceEmpty: boolean, forceUpdate: boolean): number; appendRow(values: RtRowValues): number; getRowState(row: number): RtDataRowState; internalRowState(row: number): RtDataRowState; canMove(): boolean; canSort(): boolean; } interface ISimpleDataView extends IDataView { fields(): RtDataField[]; containsField(field: string): boolean; checkField(field: string): void; fieldByName(field: string): RtDataField; getDataRow(row: number): DataRow; rowOfDataRow(dataRow: DataRow): number; getAllValues(rows: number[], fields: string[], fieldCheck: boolean): RtRowValues[]; } /** * 필드별 합계 값들. * * {@link RtDataSource.getSummary}로 가져올 수 있다. */ interface IRtFieldSummary { /** * 전체 행 수. */ count: number; /** * 모든 행의 필드 값을 더한 값. */ sum: number; /** * 최소 값. */ min: number; /** * 최대 값. */ max: number; /** * 평균 값. */ avg: number; /** * 표본 표준편차. */ std: number; /** * 모집단 표준편차. */ stdp: number; /** * 표본 분산. */ var: number; /** * 모집단 분산. */ varp: number; /** * NaN이 아닌 행 수. */ ncount: number; /** * NaN이 아닌 행들의 평균 값. */ navg: number; /** * NaN이 아닌 행들의 표본 표준편차. */ nstd: number; /** * NaN이 아닌 행들의 모집단 표준편차. */ nstdp: number; /** * NaN이 아닌 행들의 표본 분산. */ nvar: number; /** * NaN이 아닌 행들의 모집단 분산. */ nvarp: number; } /** * @internal */ declare class DataFlags extends RtObject { static readonly MAX_UI_FLAG = 15; static readonly MAX_USER_FLAG = 16; static isCheckedFlag(flag: number): boolean; static isCheckableFlag(flag: number): boolean; static isDetailedFlag(flag: number): boolean; static isUserFlag(flag: number): number; private _data; _rows: number[]; _checkedCount: number; constructor(data: ListDataSource<any>); protected _doDestory(): void; get count(): number; checkedCount(): number; isChecked(row: number): boolean; setChecked(row: number, checked: boolean): boolean; checkRows(rows: number[], checked: boolean): number[]; checkRange(row: number, count: number, checked: boolean): number[]; checkAll(checked: boolean): boolean; getCheckedRows(checked: boolean): number[]; isCheckable(row: number): boolean; setCheckable(row: number, checkable: boolean): boolean; setCheckables(rows: number[], checkable: boolean): number[]; setCheckableRange(row: number, count: number, checkable: boolean): number[]; setCheckableAll(checkable: boolean): boolean; getCheckableRows(checkable: boolean, rows: number[]): number[]; getSearchedRows(): number[]; isSearched(row: number): boolean; setSearched(row: number, searched: boolean): boolean; clearSearched(): boolean; isDetailed(row: number): boolean; setDetailed(row: number, detailed: boolean, exclusive: boolean): boolean; detailRows(rows: number[], detailed: boolean): number[]; detailRange(row: number, count: number, detailed: boolean): number[]; detailAll(detailed: boolean): boolean; getDetailedRows(detailed: boolean): number[]; hasUserFlag(row: number, flag: number): boolean; getUserFlaggedRows(flag: number, set: boolean): number[]; setUserFlag(row: number, flag: number, set: boolean): boolean; setUserFlags(rows: number[], flag: number, set: boolean): number[]; setUserFlagRange(row: number, count: number, flag: number, set: boolean): number[]; setUserFlagAll(flag: number, set: boolean): boolean; hasUiFlag(row: number, flag: number): boolean; getUiFlaggedRows(flag: number, set: boolean): number[]; setUiFlag(row: number, flag: number, set: boolean): boolean; setUiFlags(rows: number[], flag: number, set: boolean): number[]; setUiFlagRange(row: number, count: number, flag: number, set: boolean): number[]; setUiFlagAll(flag: number, set: boolean): boolean; private $_setFlag; private $_changeFlag; private $_changeRows; private $_changeRange; private $_changeAll; private $_getFlagged; } /** * @internal */ declare class DataFlagsCollection extends RtObject { private _data; private _flags; constructor(data: ListDataSource<any>); protected _doDestory(): void; isEmpty(): boolean; _rowAdded(row: number): void; _rowsAdded(rows: number[]): void; _rowRangeAdded(row: number, count: number): void; _cleared(oldCount: number): void; _rowDeleted(row: number): void; _rowsDeleted(rows: number[]): void; _rangeDeleted(row: number, count: number): void; _rowMoved(row: number, to: number): void; _rowsMoved(row: number, count: number, to: number): void; _reset(drows: DataRow[]): void; get(owner: RtObject): DataFlags; /** * {@link RtLstData} 행들에 대해 자신만의 flag를 관리해야 하는 객체(대개 list control)가 플래그 셋 생성을 요청한다. * 이미 존재하면 그 flag set을 리턴한다. * * @param owner 생성되는 flag set을 소유할 객체. */ add(owner: RtObject): DataFlags; /** * owner의 요청으로 생성된 플래그 셋을 제거한다. */ remove(owner: RtObject): void; } interface IListDataObjectListener { onDataFlagChanged?(data: IDataView, flags: DataFlags, row: number, flag: number): void; onDataFlagsChanged?(data: IDataView, flags: DataFlags, rows: number[], flag: number): void; onDataFlagAllChanged?(data: IDataView, flags: DataFlags, flag: number): void; } declare abstract class ListDataSource<T extends IListDataObjectListener> extends RtEventProvider<T> { static checkRow(dv: IDataView, row: number): void; static checkRow2(dv: IDataView, row: number, inclusive: boolean): void; static checkRows(dv: IDataView, rows: number[]): void; static getFieldValue(dv: ILayoutData, row: number, field: string): any; static setFieldValue(dv: ILayoutData, row: number, field: string, value: any): void; private _name; protected _flags: DataFlagsCollection; constructor(name: string); name(): string; abstract rowCount(): number; addFlags(owner: RtObject): DataFlags; removeFlags(owner: RtObject): void; getFlags(owner: RtObject): DataFlags; flagChanged(flags: DataFlags, row: number, flag: number): void; flagsChanged(flags: DataFlags, rows: number[], flag: number): void; flagAllChanged(flags: DataFlags, flag: number): void; abstract deleteRow(row: number, force: boolean): void; abstract deleteRows(rows: number[], force: boolean): void; } type ListDataWrapper = IDataView | IDataViewWrapper; interface ITemplateHtmlProvider { doc(): Document; getTemplateHtml(id: string): HTMLElement; } /** * @internal * * Template 등에서 '${name;default;format}' 형식으로 설정되는 매개변수화된 값. * NOTE: ';'나 '|'로 분리한다. ':'가 아니다. ':'는 시간 형식 문자에 사용될 수 있다. */ declare class RtParam { static create(name: string, defaultValue?: string, format?: string): RtParam; source: string; /** * @로 시작하는 이름은 control이 제공하는 값. * 그 외 이름은 사용자가 지정하는 값. */ name: string; field: string; stock: boolean; /** * 변환된 name 값이 undefined나 null일 경우 대체 값. * 이 값도 빈 값이면 param 자체가 무시. */ default?: string; /** * 변환된 값의 type에 따른 텍스트 변환 형식. */ format?: string; constructor(source: string, name: string, defaultValue: string, format: string); } type RtParamValues = { [param: string]: any; }; interface IRtParamInflater { inflateParam(target: any, field: string, param: RtParam): any; inflateStock(target: any, field: string, param: RtParam): any; templateParams?: object; } type RtParamObject = { [key: string]: string | RtParamString; }; /** * @internal * * 하나 이상의 DParam과 단순 문자열이 섞여 있는 문자열. */ declare class RtParamString { static parse(s: any): RtParamString | any; static load(source: any): RtParamObject; private _params; private constructor(); get count(): number; get(index: number): RtParam | string; private _args; inflate(context: any, target: any, field: string, inflater: RtParamValues | IRtParamInflater): any; } /** * 데이터행 표시 방식. * * {@link RtListOptions.rowType} 속성으로 사용된다. * * ``` * list.setConfig({ * options: { * rowType: RealTouch.RtRowType.TABLE * } * }); * ``` * * ``` * list.landscape.rowType = RealTouch.RtRowType.TABLE; * ``` * * @see concepts.options 컨트롤 Options * @see concepts.render_mode Render 모드 */ declare enum RtRowType { /** * 기본 row. * * */ NORMAL = "normal", /** * 테이블 형태로 표시한다. * */ TABLE = "table" } /** * 데이터행 배치 방향. * * {@link RtListOptions.orientation} 속성으로 사용된다. * * ``` * list.setConfig({ * options: { * orientation: RealTouch.RtOrientation.HORIZONTAL * } * }); * ``` * * @see concepts.options 컨트롤 Options * @see concepts.render_mode Render 모드 */ declare enum RtOrientation { /** * 데이터행들을 왼쪽에 오른쪽 순서로 배치한다. * * <img data-all="1" src="../images/horizontal-01.png" style="width: 450px;"/> * */ HORIZONTAL = "horizontal", /** * 데이터행들을 위에서 아래쪽 순서로 배치한다. */ VERTICAL = "vertical" } declare enum RtScreenOrientation { PORTRAIT = "portrait