@jswf/core/dist/BaseView.d.ts

JavaScript Window Framework

import "../scss/Window.scss";
import { FrameWindow } from "./FrameWindow";
/**
 *位置設定用
 *
 * @export
 * @interface Point
 */
export interface Point {
    x: number;
    y: number;
}
/**
 * サイズ設定用
 */
export interface Size {
    width: number;
    height: number;
}
/**
 *カスタムイベント用
 *
 * @export
 * @interface JWFEvent
 * @extends {Event}
 */
export interface JWFEvent extends Event {
    params: unknown;
}
/**
 * ドラッグドロップ機能用
 *
 * @export
 * @interface MovePoint
 * @param {Point} basePoint クリック基準位置
 * @param {Point} nowPoint 移動位置位置
 * @param {Point} nodePoint ノード初期位置
 * @param {Size} nodeSize ノード初期サイズ
 */
export interface MovePoint {
    event: MouseEvent | TouchEvent;
    basePoint: Point;
    nowPoint: Point;
    nodePoint: Point;
    nodeSize: Size;
}
export declare class MoveElement extends HTMLDivElement {
    addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
    addEventListener(type: string, listener: (e: JWFEvent) => unknown): void;
}
/**
 *ウインドウノードにWindowの参照を持たせる
 *
 * @interface JNode
 * @extends {HTMLElement}
 */
export declare interface JNode extends MoveElement {
    Jwf: BaseView;
}
/**
 *ウインドウ管理用基本データ
 *
 * @interface JDATA
 */
export interface JDATA {
    x: number;
    y: number;
    width: number;
    height: number;
    frameSize: number;
    titleSize: number;
    redraw: boolean;
    parent: BaseView | null;
    orderTop: boolean;
    orderLayer: number;
    layoutFlag: boolean;
    clientArea: HTMLElement | null;
    style: string | null;
    visible: boolean;
    minimize: boolean;
    normalX: number;
    normalY: number;
    normalWidth: number;
    normalHeight: number;
    margin: {
        x1: number;
        y1: number;
        x2: number;
        y2: number;
    };
    padding: {
        x1: number;
        y1: number;
        x2: number;
        y2: number;
    };
    moveable: boolean;
    reshow: boolean;
    animation: {
        [key: string]: string;
    };
    animationEnable: boolean;
    noActive: boolean;
    autoSizeNode: HTMLElement | null;
    instructionSize: {
        width: number;
        height: number;
    };
}
export interface WINDOW_EVENT_MAP {
    [key: string]: unknown[];
    active: [{
        active: boolean;
    }];
    measure: [];
    closed: [];
    layout: [];
    layouted: [];
    visibled: [{
        visible: boolean;
    }];
}
/**
 *ウインドウ作成用パラメータ
 * frame Frameを作成するか
 * title タイトルバーを表示するか
 * layer 重ね合わせ順序
 * overlap 領域をはみ出して表示するか
 * @export
 * @interface WINDOW_PARAMS
 */
export interface WINDOW_PARAMS {
    frame?: boolean;
    title?: boolean;
    layer?: number;
    overlap?: boolean;
    visible?: boolean;
}
export interface WindowRemover {
    remove: () => void;
}
/**
 *ウインドウ基本クラス
 *
 * @export
 * @class Window
 */
export declare class BaseView<T extends WINDOW_EVENT_MAP = WINDOW_EVENT_MAP> {
    private removers;
    private listeners;
    private hNode;
    private JData;
    /**
     * Creates an instance of Window.
     * @param {{ frame?: boolean, title?: boolean, layer?: number}} [params] ウインドウ作成用パラメータ
     * {	frame?:boolean,
     * 		title?:boolean,
     * 		layer?:number
     * }
     * @memberof Window
     */
    constructor(params?: WINDOW_PARAMS);
    setOverlap(flag: boolean): void;
    isOverlap(): boolean;
    setJwfStyle(style: string): void;
    getJwfStyle(): string | null;
    setWindowId(id: string): void;
    static findWindow(windowName: string): BaseView | undefined;
    static findWindows(windowName: string): BaseView[];
    private addFrame;
    private onMouseDown;
    private onMouseMove;
    addRemover(...remover: WindowRemover[]): void;
    /**
     *イベントの受け取り
     *
     * @param {string} type イベントタイプ
     * @param {*} listener コールバックリスナー
     * @memberof Window
     */
    addEventListener<K extends keyof T>(name: K, proc: (...params: T[K]) => void): void;
    /**
     *イベントの削除
     *
     * @template K
     * @param {(K | string)} type イベントタイプ
     * @param {(this: BaseView, ev: WINDOW_EVENT_MAP[K]) => unknown} listener コールバックリスナー
     * @memberof Window
     */
    removeEventListener<K extends keyof T>(name: K & string, proc: (...params: T[K]) => void): void;
    /**
     *イベントの要求
     *
     * @param {string} type イベントタイプ
     * @param {*} params パラメータ
     * @memberof Window
     */
    callEvent<K extends keyof T>(name: K, ...params: T[K]): void;
    /**
     *ウインドウのノードを得る
     *
     * @returns {HTMLElement} ウインドウノード
     * @memberof Window
     */
    getNode(): JNode;
    /**
     *ウインドウの移動
     *
     * @param {number} x
     * @param {number} y
     * @memberof Window
     */
    movePos(x: number, y: number): void;
    setNoActive(flag: boolean): void;
    /**
     *ウインドウの位置設定
     *引数を省略した場合は親のサイズを考慮して中央へ
     * @param {number} [x]
     * @param {number} [y]
     * @memberof Window
     */
    setPos(x?: number, y?: number): void;
    getNearFrame(): FrameWindow | null;
    /**
     *X座標の設定
     *
     * @param {number} x
     * @memberof Window
     */
    setPosX(x: number): void;
    /**
     *Y座標の設定
     *
     * @param {number} y
     * @memberof Window
     */
    setPosY(y: number): void;
    /**
     *親ウインドウの取得
     *
     * @returns {BaseView} 親ウインドウ
     * @memberof Window
     */
    getParent(): BaseView | null;
    /**
     *クライアント領域のドラッグによる移動の許可
     *
     * @param {boolean} moveable true:許可 false:不許可
     * @memberof Window
     */
    setMoveable(moveable: boolean): void;
    /**
     *X座標を返す
     *
     * @returns {number}
     * @memberof Window
     */
    getPosX(): number;
    /**
     *Y座標を返す
     *
     * @returns {number}
     * @memberof Window
     */
    getPosY(): number;
    /**
     *ウインドウの幅を返す
     *
     * @returns
     * @memberof Window
     */
    getWidth(): number;
    /**
     *ウインドウの高さを返す
     *
     * @returns
     * @memberof Window
     */
    getHeight(): number;
    /**
     *ウインドウサイズの設定
     *
     * @param {number} width
     * @param {number} height
     * @memberof Window
     */
    setSize(width: number, height: number): void;
    /**
     *ウインドウの幅の設定
     *
     * @param {number} width
     * @memberof Window
     */
    setWidth(width: number): void;
    /**
     *ウインドウの高さの設定
     *
     * @param {number} height
     * @memberof Window
     */
    setHeight(height: number): void;
    /**
     * クライアント領域のpadding設定
     *
     * @param {number} x1
     * @param {number} y1
     * @param {number} x2
     * @param {number} y2
     * @memberof Window
     */
    setPadding(x1: number, y1: number, x2: number, y2: number): void;
    setPadding(all: number): void;
    /**
     *配置時のマージン設定
     *
     * @param {number} x1
     * @param {number} y1
     * @param {number} x2
     * @param {number} y2
     * @memberof Window
     */
    setMargin(x1: number, y1: number, x2: number, y2: number): void;
    setMargin(all: number): void;
    /**
     *ウインドウの可視状態の取得
     *
     * @returns {boolean}
     * @memberof Window
     */
    isVisible(): boolean;
    /**
     *ウインドウの可視状態の設定
     *
     * @param {boolean} flag
     * @memberof Window
     */
    setVisible(flag: boolean): void;
    /**
     *ウインドウの重ね合わせを最上位に設定
     *
     * @param {boolean} flag
     * @memberof Window
     */
    setOrderTop(flag: boolean): void;
    /**
     *ウインドウの重ね合わせ順位の設定
     *値が大きいほど上位
     * @param {number} level デフォルト:0 FrameWindow:10
     * @memberof Window
     */
    setOrderLayer(level: number): void;
    /**
     *レイアウトの再構成要求
     *
     * @memberof Window
     */
    layout(): void;
    /**
     *ウインドウをアクティブにする(重ね合わせ順序は変更しない)
     *
     * @param {boolean} [flag]
     * @memberof Window
     */
    active(flag?: boolean): void;
    /**
     *親のクライアント領域を返す
     *
     * @returns
     * @memberof Window
     */
    getParentWidth(): number;
    getParentWidth2(): number;
    /**
     *親のクライアント領域を返す
     *
     * @returns
     * @memberof Window
     */
    getParentHeight(): number;
    getParentHeight2(): number;
    /**
     *子ウインドウのサイズを再計算
     *
     * @param {boolean} flag true:強制再計算 false:必要があれば再計算
     * @returns {boolean} 再計算の必要を行ったかどうか
     * @memberof Window
     */
    onMeasure(flag: boolean): boolean;
    /**
     *位置やサイズの確定処理
     *非同期で必要なときに呼び出されるので、基本的には直接呼び出さないこと
     * @param {boolean} flag true:強制 false:必要なら
     * @memberof Window
     */
    onLayout(flag: boolean): void;
    private orderSort;
    /**
     *ウインドウの表示/非表示
     *
     * @param {boolean} flag true:表示 false:非表示
     * @memberof Window
     */
    show(flag: boolean): void;
    /**
     *ウインドウの重ね合わせ順位を上位に持って行く
     *
     * @param {boolean} [flag] ウインドウをアクティブにするかどうか
     * @memberof Window
     */
    foreground(flag?: boolean): void;
    /**
     *クライアント領域のスクロールの可否
     *
     * @param {boolean} flag
     * @memberof Window
     */
    setScroll(flag: boolean): void;
    /**
     *クライアント領域のスクロールが有効かどうか
     *
     * @returns {boolean}
     * @memberof Window
     */
    isScroll(): boolean;
    /**
     *ウインドウを閉じる
     *
     * @memberof Window
     */
    close(): void;
    /**
     *アニメーションの設定
     *
     * @param {string} name アニメーション名
     * @param {string} value アニメーションパラメータ
     * @memberof Window
     */
    setAnimation(name: string, value: string): void;
    /**
     *絶対位置の取得
     *
     * @returns
     * @memberof Window
     */
    getAbsX(): number;
    /**
     *絶対位置の取得
     *
     * @returns
     * @memberof Window
     */
    getAbsY(): number;
    /**
     *クライアントノードを返す
     * @returns {HTMLElement}
     * @memberof Window
     */
    getClient(): HTMLElement;
    /**
     *クライアント領域の基準位置を返す
     *
     * @returns
     * @memberof Window
     */
    getClientX(): number;
    /**
     *クライアント領域の基準位置を返す
     *
     * @returns
     * @memberof Window
     */
    getClientY(): number;
    /**
     *クライアントサイズを元にウインドウサイズを設定
     *
     * @param {number} width
     * @param {number} height
     * @memberof Window
     */
    setClientSize(width: number, height: number): void;
    /**
     *クライアントサイズを元にウインドウサイズを設定
     *
     * @param {number} width
     * @memberof Window
     */
    setClientWidth(width: number): void;
    /**
     *クライアントサイズを元にウインドウサイズを設定
     *
     * @param {number} height
     * @memberof Window
     */
    setClientHeight(height: number): void;
    /**
     *クライアントサイズを取得
     *
     * @returns {number}
     * @memberof Window
     */
    getClientWidth(): number;
    /**
     *クライアントサイズを取得
     *
     * @returns {number}
     * @memberof Window
     */
    getClientHeight(): number;
    /**
     *子ノードの追加
     *
     * @param {BaseView} child 子ウインドウ
     * @param {('left' | 'right' | 'top' | 'bottom' | 'client' | null)} [style] ドッキング位置
     * @memberof Window
     */
    addFrameChild(child: BaseView, style?: "left" | "right" | "top" | "bottom" | "client" | null): void;
    addChild(child: BaseView, style?: "left" | "right" | "top" | "bottom" | "client" | null): void;
    /**
     *ドッキングスタイルの設定
     *
     * @param {('left' | 'right' | 'top' | 'bottom' | 'client' | null)} style ドッキング位置
     * @memberof Window
     */
    setChildStyle(style: "left" | "right" | "top" | "bottom" | "client" | null): void;
    /**
     *子ウインドウを全て切り離す
     *
     * @memberof Window
     */
    removeChildAll(): void;
    /**
     *子ウインドウを切り離す
     *
     * @param {BaseView} child
     * @returns
     * @memberof Window
     */
    removeChild(child: BaseView): void;
    /**
     *自動サイズ調整の状態を取得
     *
     * @returns
     * @memberof Window
     */
    isAutoSize(): boolean;
    /**
     *自動サイズ調整を設定
     *
     * @param {boolean} scale
     * @memberof Window
     */
    setAutoSize(scale: boolean): void;
    /**
     *タイトル設定
     *
     * @param {string} title
     * @memberof Window
     */
    setTitle(title: string): void;
    /**
     *タイトル取得
     *
     * @returns {string}
     * @memberof Window
     */
    getTitle(): string;
    /**
     *ウインドウの最大化
     *
     * @param {boolean} flag
     * @memberof Window
     */
    setMaximize(flag: boolean): void;
    /**
     *ウインドウの最小化
     *
     * @param {boolean} flag
     * @memberof Window
     */
    setMinimize(flag: boolean): void;
}