修改代码
This commit is contained in:
ival
parent
d13bf6876b
commit
76fef48d87
121
src/jmap/map.js
121
src/jmap/map.js
@ -55,9 +55,11 @@ class Jmap {
|
||||
this.$mouseController = new MouseController(this);
|
||||
this.$mouseController.enable();
|
||||
|
||||
this.$optionsHandler = this.setOptions.bind(this);
|
||||
this.$mouseController.on(this.Events.Pan, this.$optionsHandler);
|
||||
this.$mouseController.on(this.Events.Zoom, this.$optionsHandler);
|
||||
this.optionsHandler = this.setOptions.bind(this);
|
||||
|
||||
this.$mouseController.on(this.Events.Pan, this.optionsHandler);
|
||||
this.$mouseController.on(this.Events.Zoom, this.optionsHandler);
|
||||
|
||||
}
|
||||
|
||||
loadData(data) {
|
||||
@ -76,14 +78,14 @@ class Jmap {
|
||||
// 生成代理对象
|
||||
this.proxyData = new Proxy(this.mapDevice, new ProxyHandle(this.$painter));
|
||||
|
||||
// 数据加载完成回调
|
||||
(this.methods.dataLoaded instanceof Function) && this.methods.dataLoaded();
|
||||
// 数据加载完成
|
||||
if (this.methods.dataLoaded instanceof Function) { this.methods.dataLoaded(); }
|
||||
|
||||
// 初次渲染视图
|
||||
this.$painter.repaint(this.mapDevice, this.styleDict);
|
||||
|
||||
// 视图渲染完成回调
|
||||
(this.methods.viewLoaded instanceof Function) && this.methods.viewLoaded();
|
||||
// 视图加载完成
|
||||
if (this.methods.viewLoaded instanceof Function) { this.methods.viewLoaded(); }
|
||||
}
|
||||
|
||||
loadStyle(skinStyle) {
|
||||
@ -113,14 +115,49 @@ class Jmap {
|
||||
})
|
||||
|
||||
this.update(list);
|
||||
|
||||
if (this.methods.stateLoaded instanceof Function) { this.methods.stateLoaded(); }
|
||||
}
|
||||
|
||||
setOptions(zoom) {
|
||||
this.$options.update(zoom);
|
||||
this.$painter.updateZoomTransform(this.$options);
|
||||
if (this.methods.optionsUpdate instanceof Function) { this.methods.optionsUpdate(); }
|
||||
}
|
||||
|
||||
syncData(model) {
|
||||
render(list) {
|
||||
(list || []).forEach(elem => {
|
||||
let type = elem.type;
|
||||
let code = elem.code;
|
||||
let device = this.proxyData[code] || deviceFactory(type, this.styleDict[type], elem);
|
||||
let model = Object.assign(device.model || {}, elem);
|
||||
delete this.proxyData[code];
|
||||
if (!elem._dispose) {
|
||||
this.proxyData[code] = Object.assign(device, { model });
|
||||
}
|
||||
|
||||
this.dataSync(model);
|
||||
})
|
||||
|
||||
if (this.methods.viewUpdate instanceof Function) { this.methods.viewUpdate(); }
|
||||
}
|
||||
|
||||
update(list) {
|
||||
(list || []).forEach(elem => {
|
||||
let code = elem.code;
|
||||
if (elem._dispose) {
|
||||
delete this.proxyData[code];
|
||||
} else {
|
||||
let device = this.proxyData[code] || {};
|
||||
let state = Object.assign(device.state || {}, elem);
|
||||
this.proxyData[code] = Object.assign(device, { state });
|
||||
}
|
||||
})
|
||||
|
||||
if (this.methods.stateUpdate instanceof Function) { this.methods.stateUpdate(); }
|
||||
}
|
||||
|
||||
dataSync(model) {
|
||||
let code = model.code;
|
||||
let type = model.type;
|
||||
let dispose = model._dispose;
|
||||
@ -141,34 +178,6 @@ class Jmap {
|
||||
}
|
||||
}
|
||||
|
||||
render(list) {
|
||||
(list || []).forEach(elem => {
|
||||
let type = elem.type;
|
||||
let code = elem.code;
|
||||
let device = this.proxyData[code] || deviceFactory(type, this.styleDict[type], elem);
|
||||
let model = Object.assign(device.model || {}, elem);
|
||||
delete this.proxyData[code];
|
||||
if (!elem._dispose) {
|
||||
device = this.proxyData[code] = Object.assign(device, { model });
|
||||
}
|
||||
|
||||
this.syncData(model);
|
||||
})
|
||||
}
|
||||
|
||||
update(list) {
|
||||
(list || []).forEach(elem => {
|
||||
let code = elem.code;
|
||||
if (elem._dispose) {
|
||||
delete this.proxyData[code];
|
||||
} else {
|
||||
let device = this.proxyData[code] || {};
|
||||
let state = Object.assign(device.state || {}, elem);
|
||||
this.proxyData[code] = Object.assign(device, { state });
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
getZr() {
|
||||
return this.$zr;
|
||||
}
|
||||
@ -197,6 +206,28 @@ class Jmap {
|
||||
return this.mapDevice;
|
||||
}
|
||||
|
||||
refresh() {
|
||||
this.$painter.refresh();
|
||||
}
|
||||
|
||||
clear() {
|
||||
this.$painter.clear();
|
||||
}
|
||||
|
||||
dispose() {
|
||||
this.off(this.Events.Pan, this.optionsHandler);
|
||||
this.off(this.Events.Zoom, this.optionsHandler);
|
||||
|
||||
this.skinStyle = '';
|
||||
this.styleDict = {};
|
||||
this.mapDevice = {};
|
||||
this.proxyData = {};
|
||||
|
||||
this.$mouseController.dispose && this.$mouseController.dispose();
|
||||
this.$zr && zrender.dispose(this.$zr);
|
||||
this.$painter.dispose();
|
||||
}
|
||||
|
||||
on(eventname, cb, context) {
|
||||
let idx = Object.values(this.Events).indexOf(eventname);
|
||||
if (idx >= 0) {
|
||||
@ -229,24 +260,6 @@ class Jmap {
|
||||
}
|
||||
}
|
||||
|
||||
refresh() {
|
||||
this.$painter.refresh();
|
||||
}
|
||||
|
||||
clear() {
|
||||
this.$painter.clear();
|
||||
}
|
||||
|
||||
dispose() {
|
||||
this.off(this.Events.Pan, this.$optionsHandler);
|
||||
this.off(this.Events.Zoom, this.$optionsHandler);
|
||||
this.skinStyle = '';
|
||||
this.styleDict = {};
|
||||
this.mapDevice = {};
|
||||
this.proxyData = {};
|
||||
this.$zr && zrender.dispose(this.$zr);
|
||||
this.$painter.dispose();
|
||||
}
|
||||
}
|
||||
|
||||
export default Jmap;
|
||||
|
||||
@ -31,43 +31,54 @@ class MouseController extends Eventful {
|
||||
constructor(jmap) {
|
||||
super();
|
||||
this.Events = jmap.getEvents();
|
||||
this.initController(jmap.getZr());
|
||||
}
|
||||
|
||||
let clickHandler = this.click.bind(this);
|
||||
let contextmenuHandler = this.contextmenu.bind(this);
|
||||
let moveEventHandler = this.moveEvent.bind(this);
|
||||
initController(zr) {
|
||||
if (zr) {
|
||||
let clickHandler = this.click.bind(this);
|
||||
let contextmenuHandler = this.contextmenu.bind(this);
|
||||
let moveEventHandler = this.moveEvent.bind(this);
|
||||
|
||||
let mousedownHandler = this.mousedown.bind(this);
|
||||
let mousemoveHandler = this.mousemove.bind(this);
|
||||
let mouseupHandler = this.mouseup.bind(this);
|
||||
let mousewheelHandler = this.mousewheel.bind(this);
|
||||
let mousedownHandler = this.mousedown.bind(this);
|
||||
let mousemoveHandler = this.mousemove.bind(this);
|
||||
let mouseupHandler = this.mouseup.bind(this);
|
||||
let mousewheelHandler = this.mousewheel.bind(this);
|
||||
|
||||
this.$zr = jmap.getZr();
|
||||
this.$zr.on('click', clickHandler);
|
||||
this.$zr.on('contextmenu', contextmenuHandler);
|
||||
this.$zr.on('mousemove', moveEventHandler);
|
||||
zr.on('click', clickHandler);
|
||||
zr.on('contextmenu', contextmenuHandler);
|
||||
zr.on('mousemove', moveEventHandler);
|
||||
|
||||
this.enable = function (opts) {
|
||||
opts = opts || {};
|
||||
this._moveOnMouseMove = opts.moveOnMouseMove || true;
|
||||
this._zoomOnMouseWheel = opts.zoomOnMouseWheel || true;
|
||||
this._preventDefaultMouseMove = opts.preventDefaultMouseMove || true;
|
||||
this.enable = function (opts) {
|
||||
opts = opts || {};
|
||||
this._moveOnMouseMove = opts.moveOnMouseMove || true;
|
||||
this._zoomOnMouseWheel = opts.zoomOnMouseWheel || true;
|
||||
this._preventDefaultMouseMove = opts.preventDefaultMouseMove || true;
|
||||
|
||||
this.disable();
|
||||
this.disable();
|
||||
|
||||
this.$zr.on('mousedown', mousedownHandler);
|
||||
this.$zr.on('mousemove', mousemoveHandler);
|
||||
this.$zr.on('mouseup', mouseupHandler);
|
||||
this.$zr.on('mousewheel', mousewheelHandler);
|
||||
zr.on('mousedown', mousedownHandler);
|
||||
zr.on('mousemove', mousemoveHandler);
|
||||
zr.on('mouseup', mouseupHandler);
|
||||
zr.on('mousewheel', mousewheelHandler);
|
||||
}
|
||||
|
||||
this.disable = function () {
|
||||
zr.off('mousedown', mousedownHandler);
|
||||
zr.off('mousemove', mouseupHandler);
|
||||
zr.off('mouseup', mousemoveHandler);
|
||||
zr.off('mousewheel', mousewheelHandler);
|
||||
}
|
||||
|
||||
this.dispose = function () {
|
||||
zr.off('click', clickHandler);
|
||||
zr.off('contextmenu', contextmenuHandler);
|
||||
zr.off('mousemove', moveEventHandler);
|
||||
this.disable();
|
||||
}
|
||||
|
||||
this.isDragging = function () { return this._dragging; }
|
||||
}
|
||||
|
||||
this.disable = function () {
|
||||
this.$zr.off('mousedown', mousedownHandler);
|
||||
this.$zr.off('mousemove', mouseupHandler);
|
||||
this.$zr.off('mouseup', mousemoveHandler);
|
||||
this.$zr.off('mousewheel', mousewheelHandler);
|
||||
}
|
||||
|
||||
this.isDragging = function () { return this._dragging; }
|
||||
}
|
||||
|
||||
mousedown(e) {
|
||||
|
||||
174
src/jmap/utils/throttle.js
Normal file
174
src/jmap/utils/throttle.js
Normal file
@ -0,0 +1,174 @@
|
||||
/*
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
|
||||
var ORIGIN_METHOD = '\0__throttleOriginMethod';
|
||||
var RATE = '\0__throttleRate';
|
||||
var THROTTLE_TYPE = '\0__throttleType';
|
||||
|
||||
/**
|
||||
* @public
|
||||
* @param {(Function)} fn
|
||||
* @param {number} [delay=0] Unit: ms.
|
||||
* @param {boolean} [debounce=false]
|
||||
* true: If call interval less than `delay`, only the last call works.
|
||||
* false: If call interval less than `delay, call works on fixed rate.
|
||||
* @return {(Function)} throttled fn.
|
||||
*/
|
||||
export function throttle(fn, delay, debounce) {
|
||||
|
||||
var currCall;
|
||||
var lastCall = 0;
|
||||
var lastExec = 0;
|
||||
var timer = null;
|
||||
var diff;
|
||||
var scope;
|
||||
var args;
|
||||
var debounceNextCall;
|
||||
|
||||
delay = delay || 0;
|
||||
|
||||
function exec() {
|
||||
lastExec = (new Date()).getTime();
|
||||
timer = null;
|
||||
fn.apply(scope, args || []);
|
||||
}
|
||||
|
||||
var cb = function () {
|
||||
currCall = (new Date()).getTime();
|
||||
scope = this;
|
||||
args = arguments;
|
||||
var thisDelay = debounceNextCall || delay;
|
||||
var thisDebounce = debounceNextCall || debounce;
|
||||
debounceNextCall = null;
|
||||
diff = currCall - (thisDebounce ? lastCall : lastExec) - thisDelay;
|
||||
|
||||
clearTimeout(timer);
|
||||
|
||||
// Here we should make sure that: the `exec` SHOULD NOT be called later
|
||||
// than a new call of `cb`, that is, preserving the command order. Consider
|
||||
// calculating "scale rate" when roaming as an example. When a call of `cb`
|
||||
// happens, either the `exec` is called dierectly, or the call is delayed.
|
||||
// But the delayed call should never be later than next call of `cb`. Under
|
||||
// this assurance, we can simply update view state each time `dispatchAction`
|
||||
// triggered by user roaming, but not need to add extra code to avoid the
|
||||
// state being "rolled-back".
|
||||
if (thisDebounce) {
|
||||
timer = setTimeout(exec, thisDelay);
|
||||
}
|
||||
else {
|
||||
if (diff >= 0) {
|
||||
exec();
|
||||
}
|
||||
else {
|
||||
timer = setTimeout(exec, -diff);
|
||||
}
|
||||
}
|
||||
|
||||
lastCall = currCall;
|
||||
};
|
||||
|
||||
/**
|
||||
* Clear throttle.
|
||||
* @public
|
||||
*/
|
||||
cb.clear = function () {
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Enable debounce once.
|
||||
*/
|
||||
cb.debounceNextCall = function (debounceDelay) {
|
||||
debounceNextCall = debounceDelay;
|
||||
};
|
||||
|
||||
return cb;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create throttle method or update throttle rate.
|
||||
*
|
||||
* @example
|
||||
* ComponentView.prototype.render = function () {
|
||||
* ...
|
||||
* throttle.createOrUpdate(
|
||||
* this,
|
||||
* '_dispatchAction',
|
||||
* this.model.get('throttle'),
|
||||
* 'fixRate'
|
||||
* );
|
||||
* };
|
||||
* ComponentView.prototype.remove = function () {
|
||||
* throttle.clear(this, '_dispatchAction');
|
||||
* };
|
||||
* ComponentView.prototype.dispose = function () {
|
||||
* throttle.clear(this, '_dispatchAction');
|
||||
* };
|
||||
*
|
||||
* @public
|
||||
* @param {Object} obj
|
||||
* @param {string} fnAttr
|
||||
* @param {number} [rate]
|
||||
* @param {string} [throttleType='fixRate'] 'fixRate' or 'debounce'
|
||||
* @return {Function} throttled function.
|
||||
*/
|
||||
export function createOrUpdate(obj, fnAttr, rate, throttleType) {
|
||||
var fn = obj[fnAttr];
|
||||
|
||||
if (!fn) {
|
||||
return;
|
||||
}
|
||||
|
||||
var originFn = fn[ORIGIN_METHOD] || fn;
|
||||
var lastThrottleType = fn[THROTTLE_TYPE];
|
||||
var lastRate = fn[RATE];
|
||||
|
||||
if (lastRate !== rate || lastThrottleType !== throttleType) {
|
||||
if (rate == null || !throttleType) {
|
||||
return (obj[fnAttr] = originFn);
|
||||
}
|
||||
|
||||
fn = obj[fnAttr] = throttle(
|
||||
originFn, rate, throttleType === 'debounce'
|
||||
);
|
||||
fn[ORIGIN_METHOD] = originFn;
|
||||
fn[THROTTLE_TYPE] = throttleType;
|
||||
fn[RATE] = rate;
|
||||
}
|
||||
|
||||
return fn;
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear throttle. Example see throttle.createOrUpdate.
|
||||
*
|
||||
* @public
|
||||
* @param {Object} obj
|
||||
* @param {string} fnAttr
|
||||
*/
|
||||
export function clear(obj, fnAttr) {
|
||||
var fn = obj[fnAttr];
|
||||
if (fn && fn[ORIGIN_METHOD]) {
|
||||
obj[fnAttr] = fn[ORIGIN_METHOD];
|
||||
}
|
||||
}
|
||||
@ -32,34 +32,34 @@
|
||||
dataLoaded() { console.log('dataLoaded'); },
|
||||
viewLoaded() { console.log('viewLoaded'); },
|
||||
stateLoaded() { console.log('stateLoaded'); },
|
||||
stateUpdated() { console.log('stateUpdated'); }
|
||||
viewUpdate() { console.log('viewUpdate'); },
|
||||
stateUpdate() { console.log('stateUpdate'); },
|
||||
optionsUpdate() { console.log('optionsUpdate'); },
|
||||
}
|
||||
});
|
||||
|
||||
let list = [
|
||||
{ code: '1', beg: { x: 20, y: 50 }, end: { x: 120, y: 50 } }
|
||||
];
|
||||
let list = [];
|
||||
|
||||
for (var i = 1; i < 10; i++) {
|
||||
for (var j = 1; j < 1000; j++) {
|
||||
for (var i = 1; i < 50; i++) {
|
||||
for (var j = 1; j < 100; j++) {
|
||||
list.push({ code: `${i}${j}`, beg: { x: i * 120 + 50, y: j * 20 + 50 }, end: { x: i * 120 + 150, y: j * 20 + 50 } });
|
||||
}
|
||||
}
|
||||
|
||||
this.jmap.loadData({ skinStyle: '01', linkList: list });
|
||||
|
||||
this.jmap.setDefaultState();
|
||||
// this.jmap.setDefaultState();
|
||||
|
||||
// this.jmap.render([
|
||||
// {code: '11', type: 'Link', beg: { x: 20 , y: 100}, end: { x: 120, y: 100 }}
|
||||
// ]);
|
||||
|
||||
this.jmap.update([
|
||||
{ code: '11', type: 'Link', status: '02' }
|
||||
]);
|
||||
// this.jmap.update([
|
||||
// { code: '11', type: 'Link', status: '02' }
|
||||
// ]);
|
||||
|
||||
// this.jmap.render([
|
||||
// {code: '11', type: 'Link', beg: { x: 0 , y: 0}, end: { x: 200, y: 200 }}
|
||||
// { code: '11', type: 'Link', beg: { x: 0, y: 0 }, end: { x: 200, y: 200 } }
|
||||
// ]);
|
||||
|
||||
// this.jmap.update([]);
|
||||
@ -74,11 +74,11 @@
|
||||
this.jmap = null;
|
||||
},
|
||||
methods: {
|
||||
selected() {
|
||||
console.log(this, 'selected');
|
||||
selected(e) {
|
||||
console.log('selected', e);
|
||||
},
|
||||
contextmenu() {
|
||||
console.log(this, 'contextmenu');
|
||||
contextmenu(e) {
|
||||
console.log('contextmenu', e);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user