Skyline基本操作模式封装

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调试的复杂性，有几个问题一直没有解决，今天再次翻出来，一一搞定，真的是时间是解决一切问题的利器呀，还是凉拌好。终于删除一大堆我讨厌的代码了!!!