Skyline基本操作模式封裝

我打農村來發表於2018-12-05
模式封裝

skyline基本操作模式

專案中基於skyline的瀏覽器外掛進行二次開發，基本的業務操作模式如下：

  1. 工具欄:點選工具欄某個功能，開啟操作模式。
  2. onFrame:滑鼠移動預選物件，在能夠拾取或者選定操作的Fature物件上，改變渲染色彩。
  3. OnLButtonUp:左鍵單擊選定物件，在onFrame渲染物件的基礎上，選定某個物件，並用不同於OnFrame的渲染色彩，再次渲染。同時，執行業務操作，查詢資料並彈出視窗或者其他。
  4. OnRButtonUp:右擊結束當前操作模式，取消事件監聽、取消物件渲染、移除業務視窗等。

其中涉及到很多重複性的程式碼：

  • 事件繫結與取消繫結
/**
 * 事件繫結
 * @returns {} 
 */
mouseModel.Attach = function () {
    mouseModel.sgworld.AttachEvent("OnFrame", mouseModel.onPointSelectOnFrame);
    mouseModel.sgworld.AttachEvent("OnLButtonUp", mouseModel.onPointSelectLButtonUp);
    mouseModel.sgworld.AttachEvent("OnRButtonUp", mouseModel.onPointSelectRButtonUp);
    mouseModel.sgworld.Window.SetInputMode(1);
}

/**
 * 解除繫結
 * @returns {} 
 */
mouseModel.Detach = function() {
    mouseModel.sgworld.DetachEvent("OnLButtonUp", mouseModel.onPointSelectLButtonUp);
    mouseModel.sgworld.DetachEvent("OnRButtonUp", mouseModel.onPointSelectRButtonUp);
    mouseModel.sgworld.DetachEvent("OnFrame", mouseModel.onPointSelectOnFrame);
    mouseModel.sgworld.Window.SetInputMode(0);
}
  • OnRButtonUp事件處理邏輯基本一致
mouseModel.onPointSelectRButtonUp = function () {
    mouseModel.Detach();
    if (mouseModel.lButtonFeature != null && mouseModel.lButtonFeature.Tint != null) {
        mouseModel.lButtonFeature.Tint.SetAlpha(0);
        mouseModel.lButtonFeature = null;
    }
    if (mouseModel.frameFeature != null && mouseModel.frameFeature.Tint != null) {
        mouseModel.frameFeature.Tint.SetAlpha(0);
        mouseModel.frameFeature = null;
    }
    //可能的業務處理邏輯
    ...
    return true;
}
  • OnFrame事件處理邏輯基本一致
mouseModel.onPointSelectOnFrame = function () {
    var mouseInfo = mouseModel.sgworld.Window.GetMouseInfo();
    var position = mouseModel.sgworld.Window.PixelToWorld(mouseInfo.X, mouseInfo.Y);
    if (position.Type === 8192 || position.Type === 4 || position.Type === 1) {
        try {
            if (mouseModel.frameFeature != null && (mouseModel.frameFeature.ObjectType === 33 || mouseModel.frameFeature.ObjectType === 38)) {
                mouseModel.frameFeature.Tint.SetAlpha(0);
            }
            //標記元素不再渲染
            if (mouseModel.lButtonFeature == null || position.ObjectID !== mouseModel.lButtonFeature.ID) {
                mouseModel.frameFeature = sgworld.Creator.GetObject(position.ObjectID);
                mouseModel.frameFeature.Tint.abgrColor = 0x8f0000f0;
            }
        } catch (e) {
        }
    }
}
  • OnLButtonUp事件Feature判斷處理邏輯一致
mouseModel.onPointSelectLButtonUp = function () {
    var mouseInfo = mouseModel.sgworld.Window.GetMouseInfo();
    var position = mouseModel.sgworld.Window.PixelToWorld(mouseInfo.X, mouseInfo.Y);
    if (position.Type === 8192 || position.Type === 4 || position.Type === 1 || position.Type === 1228
        || position.Type === 12288) {
        try {
            if (!mouseModel.frameFeature) return true;
            if (mouseModel.lButtonFeature != null && (mouseModel.lButtonFeature.ObjectType === 33 || mouseModel.lButtonFeature.ObjectType === 38)) {
                mouseModel.lButtonFeature.Tint.SetAlpha(0);
            }
            mouseModel.lButtonFeature = mouseModel.frameFeature;
            mouseModel.frameFeature = null;
            //設定16進位制顏色值
            mouseModel.lButtonFeature.Tint.abgrColor = 0x8f00f0f0;
            //業務處理
            ...
        } catch (e) {
            return false;
        }
    }
    return true;
}

操作模式封裝

因此基於專案中已經存在的大量重複程式碼的共性，對這種操作模式進行封裝，方便部分操作邏輯的統一，以後後續擴充套件的便捷。

function MouseMode(args) {
    var mouseModel = {};
    mouseModel.sgworld = args.sgworld;
    //左鍵處理邏輯回撥
    mouseModel.lButtonUpCallback = args.lButtonUpCallback;
    //右鍵處理邏輯回撥
    mouseModel.rButtonUpCallback = args.rButtonUpCallback;
    //左鍵選定Feature
    mouseModel.lButtonFeature = null;
    //frame預選Feature
    mouseModel.frameFeature = null;

    /**
     * 事件繫結
     * @returns {} 
     */
    mouseModel.Attach = function () {
        mouseModel.sgworld.AttachEvent("OnFrame", mouseModel.onPointSelectOnFrame);
        mouseModel.sgworld.AttachEvent("OnLButtonUp", mouseModel.onPointSelectLButtonUp);
        mouseModel.sgworld.AttachEvent("OnRButtonUp", mouseModel.onPointSelectRButtonUp);
        mouseModel.sgworld.Window.SetInputMode(1);
    }

    /**
     * 解除繫結
     * @returns {} 
     */
    mouseModel.Detach = function() {
        mouseModel.sgworld.DetachEvent("OnLButtonUp", mouseModel.onPointSelectLButtonUp);
        mouseModel.sgworld.DetachEvent("OnRButtonUp", mouseModel.onPointSelectRButtonUp);
        mouseModel.sgworld.DetachEvent("OnFrame", mouseModel.onPointSelectOnFrame);
        mouseModel.sgworld.Window.SetInputMode(0);
    }

    /**
     * 右鍵處理
     * @returns {} 
     */
    mouseModel.onPointSelectRButtonUp = function () {
        mouseModel.Detach();
        if (mouseModel.lButtonFeature != null && mouseModel.lButtonFeature.Tint != null) {
            mouseModel.lButtonFeature.Tint.SetAlpha(0);
            mouseModel.lButtonFeature = null;
        }
        if (mouseModel.frameFeature != null && mouseModel.frameFeature.Tint != null) {
            mouseModel.frameFeature.Tint.SetAlpha(0);
            mouseModel.frameFeature = null;
        }
        //可能的業務回撥
        if (mouseModel.rButtonUpCallback) {
            mouseModel.rButtonUpCallback();
        }
        return true;
    }

    /**
     * 左鍵處理
     * @returns {} 
     */
    mouseModel.onPointSelectLButtonUp = function () {
        var mouseInfo = mouseModel.sgworld.Window.GetMouseInfo();
        var position = mouseModel.sgworld.Window.PixelToWorld(mouseInfo.X, mouseInfo.Y);
        if (position.Type === 8192 || position.Type === 4 || position.Type === 1 || position.Type === 1228
            || position.Type === 12288) {
            try {
                if (!mouseModel.frameFeature) return true;
                if (mouseModel.lButtonFeature != null && (mouseModel.lButtonFeature.ObjectType === 33 || mouseModel.lButtonFeature.ObjectType === 38)) {
                    mouseModel.lButtonFeature.Tint.SetAlpha(0);
                }
                mouseModel.lButtonFeature = mouseModel.frameFeature;
                mouseModel.frameFeature = null;
                //設定16進位制顏色值
                mouseModel.lButtonFeature.Tint.abgrColor = 0x8f00f0f0;
                //業務回撥
                if (mouseModel.lButtonUpCallback) {
                    mouseModel.lButtonUpCallback(mouseModel.sgworld, mouseModel.lButtonFeature, mouseModel.frameFeature);
                }
            } catch (e) {
                return false;
            }
        }
        return true;
    }


    mouseModel.onPointSelectOnFrame = function () {
        var mouseInfo = mouseModel.sgworld.Window.GetMouseInfo();
        var position = mouseModel.sgworld.Window.PixelToWorld(mouseInfo.X, mouseInfo.Y);
        if (position.Type === 8192 || position.Type === 4 || position.Type === 1) {
            try {
                if (mouseModel.frameFeature != null && (mouseModel.frameFeature.ObjectType === 33 || mouseModel.frameFeature.ObjectType === 38)) {
                    mouseModel.frameFeature.Tint.SetAlpha(0);
                }
                //左鍵選定元素不再渲染
                if (mouseModel.lButtonFeature == null || position.ObjectID !== mouseModel.lButtonFeature.ID) {
                    mouseModel.frameFeature = sgworld.Creator.GetObject(position.ObjectID);
                    mouseModel.frameFeature.Tint.abgrColor = 0x8f0000f0;
                }
            } catch (e) {
            }
        }
    }

    mouseModel.Attach();
    return mouseModel;
}

使用方式

var mouseMode = new MouseMode({
    sgworld: sgworld,
    lButtonUpCallback: function (sgworld, feature, lastFeature) {
        //業務處理程式碼
    },
    rButtonUpCallback: function () {
        //業務處理程式碼
    }
});

這樣是不是簡單了許多，這裡統一了onFrame和LButtonUp時Feature渲染色彩，開放了LButtonUp和RButtonUp時業務處理邏輯。

其實，這個封裝之前就寫好了，但是奈何skyline除錯的複雜性，有幾個問題一直沒有解決，今天再次翻出來，一一搞定，真的是時間是解決一切問題的利器呀，還是涼拌好。終於刪除一大堆我討厭的程式碼了!!!

相關文章