(function () {
|
var FREE_EDITOR_MODE = 'free-v1';
|
var MAP_TRANSFER_FORMAT = 'bas-map-editor-transfer-v2';
|
var HISTORY_LIMIT = 60;
|
var DEFAULT_CANVAS_WIDTH = 6400;
|
var DEFAULT_CANVAS_HEIGHT = 3600;
|
var MIN_ELEMENT_SIZE = 24;
|
var HANDLE_SCREEN_SIZE = 10;
|
var DRAG_START_THRESHOLD = 5;
|
var EDGE_SNAP_SCREEN_TOLERANCE = 8;
|
var COORD_EPSILON = 0.01;
|
var DEFERRED_STATIC_REBUILD_DELAY = 120;
|
var PAN_LABEL_REFRESH_DELAY = 160;
|
var ZOOM_REFRESH_DELAY = 220;
|
var POINTER_STATUS_UPDATE_INTERVAL = 48;
|
var SPATIAL_BUCKET_SIZE = 240;
|
var STATIC_VIEW_PADDING = 120;
|
var MIN_LABEL_SCALE = 0.17;
|
var ABS_MIN_LABEL_SCREEN_WIDTH = 26;
|
var ABS_MIN_LABEL_SCREEN_HEIGHT = 14;
|
var STATIC_SPRITE_SCALE_THRESHOLD = 0.85;
|
var STATIC_SIMPLIFY_SCALE_THRESHOLD = 0.22;
|
var DENSE_SIMPLIFY_SCALE_THRESHOLD = 0.8;
|
var DENSE_SIMPLIFY_ELEMENT_THRESHOLD = 1200;
|
var DENSE_LABEL_HIDE_SCALE_THRESHOLD = 1.05;
|
var DENSE_LABEL_HIDE_ELEMENT_THRESHOLD = 1200;
|
var STATIC_SPRITE_POOL_SLACK = 96;
|
var MIN_LABEL_COUNT = 180;
|
var MAX_LABEL_COUNT = 360;
|
var SHOW_CANVAS_ELEMENT_LABELS = false;
|
var DRAW_TYPES = ['shelf', 'devp', 'crn', 'dualCrn', 'rgv'];
|
var ARRAY_TEMPLATE_TYPES = ['shelf', 'crn', 'dualCrn', 'rgv'];
|
var DEVICE_CONFIG_TYPES = ['crn', 'dualCrn', 'rgv'];
|
var DEVP_DIRECTION_OPTIONS = [
|
{ key: 'top', label: '上', arrow: '↑' },
|
{ key: 'right', label: '右', arrow: '→' },
|
{ key: 'bottom', label: '下', arrow: '↓' },
|
{ key: 'left', label: '左', arrow: '←' }
|
];
|
var idSeed = Date.now();
|
|
var TYPE_META = {
|
shelf: { label: '货架', shortLabel: 'SHELF', fill: 0x7d96bf, border: 0x4f6486 },
|
devp: { label: '输送线', shortLabel: 'DEVP', fill: 0xf0b06f, border: 0xa45f21 },
|
crn: { label: '堆垛机轨道', shortLabel: 'CRN', fill: 0x68bfd0, border: 0x1d6e81 },
|
dualCrn: { label: '双工位轨道', shortLabel: 'DCRN', fill: 0x54c1a4, border: 0x0f7b62 },
|
rgv: { label: 'RGV轨道', shortLabel: 'RGV', fill: 0xc691e9, border: 0x744b98 }
|
};
|
|
function nextId() {
|
idSeed += 1;
|
return 'el_' + idSeed;
|
}
|
|
function deepClone(obj) {
|
return JSON.parse(JSON.stringify(obj == null ? null : obj));
|
}
|
|
function padNumber(value) {
|
return value < 10 ? ('0' + value) : String(value);
|
}
|
|
function authHeaders() {
|
return {
|
token: localStorage.getItem('token')
|
};
|
}
|
|
function getQueryParam(name) {
|
var search = window.location.search || '';
|
if (!search) {
|
return '';
|
}
|
var target = name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
var match = search.match(new RegExp('(?:[?&])' + target + '=([^&]*)'));
|
return match ? decodeURIComponent(match[1]) : '';
|
}
|
|
function toNumber(value, defaultValue) {
|
if (value === null || value === undefined || value === '') {
|
return defaultValue;
|
}
|
var parsed = Number(value);
|
return isFinite(parsed) ? parsed : defaultValue;
|
}
|
|
function toInt(value, defaultValue) {
|
return Math.round(toNumber(value, defaultValue));
|
}
|
|
function clamp(value, min, max) {
|
return Math.max(min, Math.min(max, value));
|
}
|
|
function roundCoord(value) {
|
return Math.round(value * 1000) / 1000;
|
}
|
|
function normalizeValue(value) {
|
if (value === null || value === undefined) {
|
return '';
|
}
|
return typeof value === 'string' ? value : JSON.stringify(value);
|
}
|
|
function parseShelfLocationValue(value) {
|
var text = normalizeValue(value).trim();
|
var matched = text.match(/^(-?\d+)\s*-\s*(-?\d+)$/);
|
if (!matched) {
|
return null;
|
}
|
return {
|
row: toInt(matched[1], 0),
|
col: toInt(matched[2], 0)
|
};
|
}
|
|
function formatShelfLocationValue(row, col) {
|
return String(toInt(row, 0)) + '-' + String(toInt(col, 0));
|
}
|
|
function safeParseJson(text) {
|
if (!text || typeof text !== 'string') {
|
return null;
|
}
|
try {
|
return JSON.parse(text);
|
} catch (e) {
|
return null;
|
}
|
}
|
|
function boolFlag(value) {
|
return value === true || value === 1 || value === '1';
|
}
|
|
function normalizeDirectionList(direction) {
|
var list = Array.isArray(direction) ? direction : String(direction || '').split(/[,\s|/]+/);
|
var result = [];
|
var seen = {};
|
for (var i = 0; i < list.length; i++) {
|
var item = String(list[i] || '').trim().toLowerCase();
|
if (!item || seen[item]) {
|
continue;
|
}
|
seen[item] = true;
|
result.push(item);
|
}
|
return result;
|
}
|
|
function directionTokenToArrow(token) {
|
if (token === 'top' || token === 'up' || token === 'north' || token === 'n') {
|
return '↑';
|
}
|
if (token === 'right' || token === 'east' || token === 'e') {
|
return '→';
|
}
|
if (token === 'bottom' || token === 'down' || token === 'south' || token === 's') {
|
return '↓';
|
}
|
if (token === 'left' || token === 'west' || token === 'w') {
|
return '←';
|
}
|
return '';
|
}
|
|
function formatDirectionArrows(direction) {
|
var list = normalizeDirectionList(direction);
|
var arrows = [];
|
for (var i = 0; i < list.length; i++) {
|
var arrow = directionTokenToArrow(list[i]);
|
if (arrow) {
|
arrows.push(arrow);
|
}
|
}
|
return arrows.join('');
|
}
|
|
function isDeviceConfigType(type) {
|
return DEVICE_CONFIG_TYPES.indexOf(type) >= 0;
|
}
|
|
function pickDeviceValueKey(type, json) {
|
if (json && json.deviceNo != null) {
|
return 'deviceNo';
|
}
|
if ((type === 'crn' || type === 'dualCrn') && json && json.crnNo != null) {
|
return 'crnNo';
|
}
|
if (type === 'rgv' && json && json.rgvNo != null) {
|
return 'rgvNo';
|
}
|
return 'deviceNo';
|
}
|
|
function isInputLike(target) {
|
if (!target || !target.tagName) {
|
return false;
|
}
|
var tag = String(target.tagName || '').toLowerCase();
|
return tag === 'input' || tag === 'textarea' || tag === 'select' || !!target.isContentEditable;
|
}
|
|
function rectsOverlap(a, b) {
|
return a.x < b.x + b.width - COORD_EPSILON && a.x + a.width > b.x + COORD_EPSILON
|
&& a.y < b.y + b.height - COORD_EPSILON && a.y + a.height > b.y + COORD_EPSILON;
|
}
|
|
function rectIntersects(a, b) {
|
return a.x <= b.x + b.width && a.x + a.width >= b.x
|
&& a.y <= b.y + b.height && a.y + a.height >= b.y;
|
}
|
|
function isRectWithinCanvas(rect, canvasWidth, canvasHeight) {
|
return rect.x >= -COORD_EPSILON && rect.y >= -COORD_EPSILON
|
&& rect.x + rect.width <= canvasWidth + COORD_EPSILON
|
&& rect.y + rect.height <= canvasHeight + COORD_EPSILON;
|
}
|
|
function findDocOverlapId(doc) {
|
if (!doc || !doc.elements || !doc.elements.length) {
|
return '';
|
}
|
var buckets = {};
|
var elements = doc.elements;
|
for (var i = 0; i < elements.length; i++) {
|
var element = elements[i];
|
var minX = Math.floor(element.x / SPATIAL_BUCKET_SIZE);
|
var maxX = Math.floor((element.x + element.width) / SPATIAL_BUCKET_SIZE);
|
var minY = Math.floor(element.y / SPATIAL_BUCKET_SIZE);
|
var maxY = Math.floor((element.y + element.height) / SPATIAL_BUCKET_SIZE);
|
for (var bx = minX; bx <= maxX; bx++) {
|
for (var by = minY; by <= maxY; by++) {
|
var key = bucketKey(bx, by);
|
var bucket = buckets[key];
|
if (!bucket || !bucket.length) {
|
continue;
|
}
|
for (var j = 0; j < bucket.length; j++) {
|
if (rectsOverlap(element, bucket[j])) {
|
return element.id || ('el_' + i);
|
}
|
}
|
}
|
}
|
for (bx = minX; bx <= maxX; bx++) {
|
for (by = minY; by <= maxY; by++) {
|
key = bucketKey(bx, by);
|
if (!buckets[key]) {
|
buckets[key] = [];
|
}
|
buckets[key].push(element);
|
}
|
}
|
}
|
return '';
|
}
|
|
function buildRectFromPoints(a, b) {
|
var left = Math.min(a.x, b.x);
|
var top = Math.min(a.y, b.y);
|
var right = Math.max(a.x, b.x);
|
var bottom = Math.max(a.y, b.y);
|
return {
|
x: roundCoord(left),
|
y: roundCoord(top),
|
width: roundCoord(right - left),
|
height: roundCoord(bottom - top)
|
};
|
}
|
|
function getTypeMeta(type) {
|
return TYPE_META[type] || TYPE_META.shelf;
|
}
|
|
function rangesNearOrOverlap(a1, a2, b1, b2, tolerance) {
|
return a1 <= b2 + tolerance && a2 >= b1 - tolerance;
|
}
|
|
function bucketKey(x, y) {
|
return x + ':' + y;
|
}
|
|
function getPreferredResolution() {
|
return Math.min(window.devicePixelRatio || 1, 1.25);
|
}
|
|
new Vue({
|
el: '#app',
|
data: function () {
|
return {
|
remoteLevOptions: [],
|
levOptions: [],
|
currentLev: null,
|
floorPickerLev: null,
|
draftDocs: {},
|
doc: null,
|
activeTool: 'select',
|
toolPanelCollapsed: false,
|
inspectorPanelCollapsed: false,
|
interactionTools: [
|
{ key: 'select', label: '选择 / 移动', desc: '点击元素选择，拖拽移动，空白处拖动画布' },
|
{ key: 'marquee', label: '框选', desc: '在画布中框选一组元素' },
|
{ key: 'array', label: '阵列', desc: '选中一个货架 / 轨道后拖一条线自动生成一排' },
|
{ key: 'pan', label: '平移', desc: '专门用于拖动画布和观察全图' }
|
],
|
drawTools: [
|
{ key: 'shelf', label: '货架', desc: '自由拉出货架矩形' },
|
{ key: 'devp', label: '输送线', desc: '拉出站点 / 输送线矩形' },
|
{ key: 'crn', label: 'CRN', desc: '拉出堆垛机轨道矩形' },
|
{ key: 'dualCrn', label: '双工位', desc: '拉出双工位轨道矩形' },
|
{ key: 'rgv', label: 'RGV', desc: '拉出 RGV 轨道矩形' }
|
],
|
pixiApp: null,
|
mapRoot: null,
|
gridLayer: null,
|
trackLayer: null,
|
nodeLayer: null,
|
patchObjectLayer: null,
|
activeLayer: null,
|
labelLayer: null,
|
selectionLayer: null,
|
guideLayer: null,
|
guideText: null,
|
hoverLayer: null,
|
labelPool: [],
|
renderQueued: false,
|
gridSceneDirty: true,
|
staticSceneDirty: true,
|
spatialIndexDirty: true,
|
spatialBuckets: null,
|
gridRenderRect: null,
|
gridRenderKey: '',
|
staticRenderRect: null,
|
staticRenderKey: '',
|
staticExcludedKey: '',
|
camera: {
|
x: 80,
|
y: 80,
|
scale: 1
|
},
|
viewZoom: 1,
|
selectedIds: [],
|
clipboard: [],
|
hoverElementId: '',
|
pointerStatus: '--',
|
lastPointerStatusUpdateTs: 0,
|
pixiResolution: getPreferredResolution(),
|
fpsValue: 0,
|
fpsFrameCount: 0,
|
fpsSampleStartTs: 0,
|
fpsTickerHandler: null,
|
interactionState: null,
|
isZooming: false,
|
isPanning: false,
|
zoomRefreshTimer: null,
|
panRefreshTimer: null,
|
pendingViewportRefresh: false,
|
pendingStaticCommit: null,
|
deferredStaticRebuildTimer: null,
|
currentPointerId: null,
|
boundCanvasHandlers: null,
|
boundWindowHandlers: null,
|
resizeObserver: null,
|
labelCapability: {
|
maxWidth: 0,
|
maxHeight: 0
|
},
|
labelCapabilityDirty: true,
|
undoStack: [],
|
redoStack: [],
|
savedSnapshot: '',
|
isDirty: false,
|
saving: false,
|
savingAll: false,
|
loadingFloor: false,
|
switchingFloorLev: null,
|
floorRequestSeq: 0,
|
activeFloorRequestSeq: 0,
|
blankDialogVisible: false,
|
blankForm: {
|
lev: '',
|
width: String(DEFAULT_CANVAS_WIDTH),
|
height: String(DEFAULT_CANVAS_HEIGHT)
|
},
|
canvasForm: {
|
width: String(DEFAULT_CANVAS_WIDTH),
|
height: String(DEFAULT_CANVAS_HEIGHT)
|
},
|
geometryForm: {
|
x: '',
|
y: '',
|
width: '',
|
height: ''
|
},
|
devpForm: {
|
stationId: '',
|
deviceNo: '',
|
direction: [],
|
isBarcodeStation: false,
|
barcodeIdx: '',
|
backStation: '',
|
backStationDeviceNo: '',
|
isInStation: false,
|
barcodeStation: '',
|
barcodeStationDeviceNo: '',
|
isOutStation: false,
|
runBlockReassign: false,
|
isOutOrder: false,
|
isLiftTransfer: false
|
},
|
deviceForm: {
|
valueKey: '',
|
deviceNo: ''
|
},
|
devpDirectionOptions: DEVP_DIRECTION_OPTIONS,
|
shelfFillForm: {
|
startValue: '',
|
rowStep: 'desc',
|
colStep: 'asc'
|
},
|
valueEditorText: '',
|
spacePressed: false,
|
lastCursor: 'default'
|
};
|
},
|
computed: {
|
singleSelectedElement: function () {
|
if (!this.doc || this.selectedIds.length !== 1) {
|
return null;
|
}
|
return this.findElementById(this.selectedIds[0]);
|
},
|
singleSelectedDeviceElement: function () {
|
if (!this.singleSelectedElement || !isDeviceConfigType(this.singleSelectedElement.type)) {
|
return null;
|
}
|
return this.singleSelectedElement;
|
},
|
selectedShelfElements: function () {
|
if (!this.doc || !this.selectedIds.length) {
|
return [];
|
}
|
return this.getSelectedElements().filter(function (item) {
|
return item && item.type === 'shelf';
|
});
|
},
|
devpRequiresBarcodeLink: function () {
|
return !!(this.devpForm && this.devpForm.isInStation);
|
},
|
devpRequiresBarcodeIndex: function () {
|
return !!(this.devpForm && this.devpForm.isBarcodeStation);
|
},
|
devpRequiresBackStation: function () {
|
return !!(this.devpForm && this.devpForm.isBarcodeStation);
|
},
|
arrayPreviewCount: function () {
|
if (!this.interactionState || this.interactionState.type !== 'array') {
|
return 0;
|
}
|
return this.interactionState.previewItems ? this.interactionState.previewItems.length : 0;
|
},
|
viewPercent: function () {
|
return Math.round(this.viewZoom * 100);
|
},
|
fpsText: function () {
|
return this.fpsValue > 0 ? String(this.fpsValue) : '--';
|
},
|
dirtyDraftLevs: function () {
|
var result = [];
|
var seen = {};
|
if (this.doc && this.doc.lev && this.isDirty) {
|
var currentLev = toInt(this.doc.lev, 0);
|
if (currentLev > 0) {
|
seen[currentLev] = true;
|
result.push(currentLev);
|
}
|
}
|
var self = this;
|
Object.keys(this.draftDocs || {}).forEach(function (key) {
|
var lev = toInt(key, 0);
|
if (lev <= 0 || seen[lev]) {
|
return;
|
}
|
if (self.hasDirtyDraft(lev)) {
|
seen[lev] = true;
|
result.push(lev);
|
}
|
});
|
result.sort(function (a, b) { return a - b; });
|
return result;
|
},
|
dirtyDraftCount: function () {
|
return this.dirtyDraftLevs.length;
|
}
|
},
|
mounted: function () {
|
this.initPixi();
|
this.attachEvents();
|
this.loadLevOptions();
|
var lev = toInt(getQueryParam('lev'), 0);
|
if (lev > 0) {
|
this.floorPickerLev = lev;
|
this.fetchFloor(lev);
|
} else {
|
this.createLocalBlankDoc(1, DEFAULT_CANVAS_WIDTH, DEFAULT_CANVAS_HEIGHT, '');
|
}
|
},
|
beforeDestroy: function () {
|
this.detachEvents();
|
if (this.zoomRefreshTimer) {
|
window.clearTimeout(this.zoomRefreshTimer);
|
this.zoomRefreshTimer = null;
|
}
|
if (this.panRefreshTimer) {
|
window.clearTimeout(this.panRefreshTimer);
|
this.panRefreshTimer = null;
|
}
|
this.clearDeferredStaticCommit();
|
this.stopFpsTicker();
|
if (this.pixiApp) {
|
this.pixiApp.destroy(true, { children: true });
|
this.pixiApp = null;
|
}
|
},
|
methods: {
|
showMessage: function (type, message) {
|
if (this.$message) {
|
this.$message({ type: type, message: message });
|
}
|
},
|
formatNumber: function (value) {
|
var num = toNumber(value, 0);
|
if (Math.abs(num) >= 1000 || num === Math.round(num)) {
|
return String(Math.round(num));
|
}
|
return String(Math.round(num * 100) / 100);
|
},
|
syncFloorQueryParam: function (lev) {
|
lev = toInt(lev, 0);
|
if (lev <= 0 || !window.history || !window.history.replaceState || !window.URL) {
|
return;
|
}
|
try {
|
var url = new URL(window.location.href);
|
url.searchParams.set('lev', String(lev));
|
window.history.replaceState(null, '', url.toString());
|
} catch (e) {
|
// Ignore URL sync failures and keep editor usable.
|
}
|
},
|
toolLabel: function (tool) {
|
var list = this.interactionTools.concat(this.drawTools);
|
for (var i = 0; i < list.length; i++) {
|
if (list[i].key === tool) {
|
return list[i].label;
|
}
|
}
|
return tool || '--';
|
},
|
toggleToolPanel: function () {
|
this.toolPanelCollapsed = !this.toolPanelCollapsed;
|
},
|
toggleInspectorPanel: function () {
|
this.inspectorPanelCollapsed = !this.inspectorPanelCollapsed;
|
},
|
startFpsTicker: function () {
|
if (!this.pixiApp || !this.pixiApp.ticker || this.fpsTickerHandler) {
|
return;
|
}
|
var self = this;
|
this.fpsValue = 0;
|
this.fpsFrameCount = 0;
|
this.fpsSampleStartTs = (window.performance && performance.now) ? performance.now() : Date.now();
|
this.fpsTickerHandler = function () {
|
var now = (window.performance && performance.now) ? performance.now() : Date.now();
|
self.fpsFrameCount += 1;
|
var elapsed = now - self.fpsSampleStartTs;
|
if (elapsed < 400) {
|
return;
|
}
|
self.fpsValue = Math.max(0, Math.round(self.fpsFrameCount * 1000 / elapsed));
|
self.fpsFrameCount = 0;
|
self.fpsSampleStartTs = now;
|
};
|
this.pixiApp.ticker.add(this.fpsTickerHandler);
|
},
|
stopFpsTicker: function () {
|
if (this.pixiApp && this.pixiApp.ticker && this.fpsTickerHandler) {
|
this.pixiApp.ticker.remove(this.fpsTickerHandler);
|
}
|
this.fpsTickerHandler = null;
|
this.fpsFrameCount = 0;
|
this.fpsSampleStartTs = 0;
|
},
|
initPixi: function () {
|
var host = this.$refs.canvasHost;
|
if (!host) {
|
return;
|
}
|
var resolution = getPreferredResolution();
|
this.pixiResolution = resolution;
|
var app = new PIXI.Application({
|
width: Math.max(host.clientWidth, 320),
|
height: Math.max(host.clientHeight, 320),
|
antialias: false,
|
autoDensity: true,
|
backgroundAlpha: 1,
|
backgroundColor: 0xf6f9fc,
|
resolution: resolution,
|
powerPreference: 'high-performance'
|
});
|
host.innerHTML = '';
|
host.appendChild(app.view);
|
app.view.style.width = '100%';
|
app.view.style.height = '100%';
|
app.view.style.touchAction = 'none';
|
app.view.style.background = '#f6f9fc';
|
app.renderer.roundPixels = true;
|
|
this.pixiApp = app;
|
this.mapRoot = new PIXI.Container();
|
app.stage.addChild(this.mapRoot);
|
|
this.gridLayer = new PIXI.Graphics();
|
this.staticLayer = new PIXI.Container();
|
this.staticTrackSpriteLayer = null;
|
this.staticNodeSpriteLayer = null;
|
this.trackLayer = new PIXI.Graphics();
|
this.nodeLayer = new PIXI.Graphics();
|
this.eraseLayer = new PIXI.Graphics();
|
this.patchObjectLayer = new PIXI.Graphics();
|
this.activeLayer = new PIXI.Graphics();
|
this.labelLayer = new PIXI.Container();
|
this.selectionLayer = new PIXI.Graphics();
|
this.guideLayer = new PIXI.Graphics();
|
this.guideText = new PIXI.Text('', {
|
fontFamily: 'PingFang SC, Microsoft YaHei, sans-serif',
|
fontSize: 14,
|
fontWeight: '700',
|
fill: 0x1f4f86,
|
stroke: 0xffffff,
|
strokeThickness: 4,
|
lineJoin: 'round'
|
});
|
this.guideText.anchor.set(0.5, 1);
|
this.guideText.visible = false;
|
this.hoverLayer = new PIXI.Graphics();
|
this.staticTrackSpritePool = [];
|
this.staticNodeSpritePool = [];
|
|
this.mapRoot.addChild(this.gridLayer);
|
this.staticTrackSpriteLayer = new PIXI.ParticleContainer(12000, {
|
position: true,
|
scale: true,
|
alpha: true,
|
tint: true
|
}, 16384, true);
|
this.staticNodeSpriteLayer = new PIXI.ParticleContainer(12000, {
|
position: true,
|
scale: true,
|
alpha: true,
|
tint: true
|
}, 16384, true);
|
this.staticLayer.addChild(this.staticTrackSpriteLayer);
|
this.staticLayer.addChild(this.trackLayer);
|
this.staticLayer.addChild(this.staticNodeSpriteLayer);
|
this.staticLayer.addChild(this.nodeLayer);
|
this.mapRoot.addChild(this.staticLayer);
|
this.mapRoot.addChild(this.eraseLayer);
|
this.mapRoot.addChild(this.patchObjectLayer);
|
this.mapRoot.addChild(this.activeLayer);
|
this.mapRoot.addChild(this.labelLayer);
|
this.mapRoot.addChild(this.hoverLayer);
|
this.mapRoot.addChild(this.selectionLayer);
|
this.mapRoot.addChild(this.guideLayer);
|
this.mapRoot.addChild(this.guideText);
|
|
this.boundCanvasHandlers = {
|
pointerdown: this.onCanvasPointerDown.bind(this),
|
wheel: this.onCanvasWheel.bind(this)
|
};
|
app.view.addEventListener('pointerdown', this.boundCanvasHandlers.pointerdown);
|
app.view.addEventListener('wheel', this.boundCanvasHandlers.wheel, { passive: false });
|
|
if (window.ResizeObserver) {
|
this.resizeObserver = new ResizeObserver(this.handleResize.bind(this));
|
this.resizeObserver.observe(host);
|
}
|
this.startFpsTicker();
|
this.handleResize();
|
},
|
attachEvents: function () {
|
this.boundWindowHandlers = {
|
pointermove: this.onWindowPointerMove.bind(this),
|
pointerup: this.onWindowPointerUp.bind(this),
|
pointercancel: this.onWindowPointerUp.bind(this),
|
keydown: this.onWindowKeyDown.bind(this),
|
keyup: this.onWindowKeyUp.bind(this),
|
beforeunload: this.onBeforeUnload.bind(this),
|
resize: this.handleResize.bind(this)
|
};
|
window.addEventListener('pointermove', this.boundWindowHandlers.pointermove);
|
window.addEventListener('pointerup', this.boundWindowHandlers.pointerup);
|
window.addEventListener('pointercancel', this.boundWindowHandlers.pointercancel);
|
window.addEventListener('keydown', this.boundWindowHandlers.keydown);
|
window.addEventListener('keyup', this.boundWindowHandlers.keyup);
|
window.addEventListener('beforeunload', this.boundWindowHandlers.beforeunload);
|
window.addEventListener('resize', this.boundWindowHandlers.resize);
|
},
|
detachEvents: function () {
|
if (this.pixiApp && this.boundCanvasHandlers) {
|
this.pixiApp.view.removeEventListener('pointerdown', this.boundCanvasHandlers.pointerdown);
|
this.pixiApp.view.removeEventListener('wheel', this.boundCanvasHandlers.wheel);
|
}
|
if (this.resizeObserver) {
|
this.resizeObserver.disconnect();
|
this.resizeObserver = null;
|
}
|
if (!this.boundWindowHandlers) {
|
return;
|
}
|
window.removeEventListener('pointermove', this.boundWindowHandlers.pointermove);
|
window.removeEventListener('pointerup', this.boundWindowHandlers.pointerup);
|
window.removeEventListener('pointercancel', this.boundWindowHandlers.pointercancel);
|
window.removeEventListener('keydown', this.boundWindowHandlers.keydown);
|
window.removeEventListener('keyup', this.boundWindowHandlers.keyup);
|
window.removeEventListener('beforeunload', this.boundWindowHandlers.beforeunload);
|
window.removeEventListener('resize', this.boundWindowHandlers.resize);
|
},
|
handleResize: function () {
|
if (!this.pixiApp || !this.$refs.canvasHost) {
|
return;
|
}
|
var host = this.$refs.canvasHost;
|
var width = Math.max(host.clientWidth, 320);
|
var height = Math.max(host.clientHeight, 320);
|
this.pixiApp.renderer.resize(width, height);
|
this.markGridSceneDirty();
|
this.markStaticSceneDirty();
|
this.scheduleRender();
|
},
|
loadLevOptions: function () {
|
var self = this;
|
$.ajax({
|
url: baseUrl + '/basMap/getLevList',
|
method: 'GET',
|
headers: authHeaders(),
|
success: function (res) {
|
if (res && res.code === 200 && Array.isArray(res.data)) {
|
self.remoteLevOptions = res.data.map(function (item) {
|
return toInt(item, 0);
|
}).filter(function (item) {
|
return item > 0;
|
});
|
self.refreshLevOptions();
|
}
|
}
|
});
|
},
|
refreshLevOptions: function () {
|
var set = {};
|
var result = [];
|
var pushLev = function (lev) {
|
lev = toInt(lev, 0);
|
if (lev <= 0 || set[lev]) {
|
return;
|
}
|
set[lev] = true;
|
result.push(lev);
|
};
|
this.remoteLevOptions.forEach(pushLev);
|
Object.keys(this.draftDocs || {}).forEach(pushLev);
|
pushLev(this.currentLev);
|
pushLev(this.floorPickerLev);
|
result.sort(function (a, b) { return a - b; });
|
this.levOptions = result;
|
},
|
exportDoc: function (doc) {
|
var source = doc || this.doc || {};
|
return {
|
lev: toInt(source.lev, 0),
|
editorMode: FREE_EDITOR_MODE,
|
canvasWidth: roundCoord(toNumber(source.canvasWidth, DEFAULT_CANVAS_WIDTH)),
|
canvasHeight: roundCoord(toNumber(source.canvasHeight, DEFAULT_CANVAS_HEIGHT)),
|
elements: (source.elements || []).map(function (item, index) {
|
return {
|
id: item && item.id ? String(item.id) : ('el_' + (index + 1)),
|
type: DRAW_TYPES.indexOf(item && item.type) >= 0 ? item.type : 'shelf',
|
x: roundCoord(Math.max(0, toNumber(item && item.x, 0))),
|
y: roundCoord(Math.max(0, toNumber(item && item.y, 0))),
|
width: roundCoord(Math.max(MIN_ELEMENT_SIZE, toNumber(item && item.width, MIN_ELEMENT_SIZE))),
|
height: roundCoord(Math.max(MIN_ELEMENT_SIZE, toNumber(item && item.height, MIN_ELEMENT_SIZE))),
|
value: normalizeValue(item && item.value)
|
};
|
})
|
};
|
},
|
normalizeDoc: function (doc) {
|
var normalized = this.exportDoc(doc || {});
|
if (normalized.lev <= 0) {
|
normalized.lev = toInt(this.currentLev, 1) || 1;
|
}
|
return normalized;
|
},
|
snapshotDoc: function (doc) {
|
return JSON.stringify(this.exportDoc(doc));
|
},
|
syncDirty: function () {
|
var currentSnapshot = this.snapshotDoc(this.doc);
|
this.isDirty = currentSnapshot !== this.savedSnapshot;
|
},
|
setDraftDocEntry: function (lev, doc, savedSnapshot) {
|
lev = toInt(lev, 0);
|
if (lev <= 0 || !doc) {
|
return;
|
}
|
var entry = {
|
doc: this.exportDoc(doc),
|
savedSnapshot: savedSnapshot != null ? savedSnapshot : ''
|
};
|
if (this.$set) {
|
this.$set(this.draftDocs, lev, entry);
|
} else {
|
this.draftDocs[lev] = entry;
|
}
|
},
|
removeDraftDocEntry: function (lev) {
|
lev = toInt(lev, 0);
|
if (lev <= 0) {
|
return;
|
}
|
if (this.$delete) {
|
this.$delete(this.draftDocs, lev);
|
} else {
|
delete this.draftDocs[lev];
|
}
|
},
|
cacheCurrentDraft: function () {
|
if (!this.doc || !this.doc.lev) {
|
return;
|
}
|
this.setDraftDocEntry(this.doc.lev, this.doc, this.savedSnapshot);
|
this.refreshLevOptions();
|
},
|
clearCurrentDraftIfSaved: function () {
|
if (!this.doc || !this.doc.lev) {
|
return;
|
}
|
this.setDraftDocEntry(this.doc.lev, this.doc, this.savedSnapshot);
|
},
|
clearFloorTransientState: function () {
|
this.clearDeferredStaticCommit();
|
this.interactionState = null;
|
this.currentPointerId = null;
|
this.hoverElementId = '';
|
this.pointerStatus = '--';
|
this.lastPointerStatusUpdateTs = 0;
|
this.selectedIds = [];
|
this.isPanning = false;
|
this.isZooming = false;
|
this.pendingViewportRefresh = false;
|
if (this.zoomRefreshTimer) {
|
window.clearTimeout(this.zoomRefreshTimer);
|
this.zoomRefreshTimer = null;
|
}
|
if (this.panRefreshTimer) {
|
window.clearTimeout(this.panRefreshTimer);
|
this.panRefreshTimer = null;
|
}
|
},
|
resetRenderLayers: function () {
|
if (this.gridLayer) {
|
this.gridLayer.clear();
|
}
|
if (this.trackLayer) {
|
this.trackLayer.clear();
|
}
|
if (this.nodeLayer) {
|
this.nodeLayer.clear();
|
}
|
if (this.eraseLayer) {
|
this.eraseLayer.clear();
|
}
|
if (this.patchObjectLayer) {
|
this.patchObjectLayer.clear();
|
}
|
if (this.activeLayer) {
|
this.activeLayer.clear();
|
}
|
if (this.selectionLayer) {
|
this.selectionLayer.clear();
|
}
|
if (this.guideLayer) {
|
this.guideLayer.clear();
|
}
|
if (this.hoverLayer) {
|
this.hoverLayer.clear();
|
}
|
if (this.guideText) {
|
this.guideText.visible = false;
|
this.guideText.text = '';
|
}
|
if (this.labelLayer) {
|
this.labelLayer.visible = false;
|
}
|
for (var i = 0; i < this.labelPool.length; i++) {
|
this.labelPool[i].visible = false;
|
this.labelPool[i].text = '';
|
}
|
this.hideUnusedStaticSprites(this.staticTrackSpritePool || [], 0);
|
this.hideUnusedStaticSprites(this.staticNodeSpritePool || [], 0);
|
if (this.staticTrackSpriteLayer) {
|
this.staticTrackSpriteLayer.removeChildren();
|
this.staticTrackSpritePool = [];
|
}
|
if (this.staticNodeSpriteLayer) {
|
this.staticNodeSpriteLayer.removeChildren();
|
this.staticNodeSpritePool = [];
|
}
|
if (this.staticTrackSpriteLayer) {
|
this.staticTrackSpriteLayer.visible = false;
|
}
|
if (this.staticNodeSpriteLayer) {
|
this.staticNodeSpriteLayer.visible = false;
|
}
|
},
|
hasDirtyDraft: function (lev) {
|
lev = toInt(lev, 0);
|
if (lev <= 0) {
|
return false;
|
}
|
var entry = this.draftDocs[lev];
|
if (!entry || !entry.doc) {
|
return false;
|
}
|
var snapshot = this.snapshotDoc(entry.doc);
|
return snapshot !== (entry.savedSnapshot || '');
|
},
|
markStaticSceneDirty: function () {
|
this.staticSceneDirty = true;
|
},
|
markGridSceneDirty: function () {
|
this.gridSceneDirty = true;
|
},
|
clearRenderCaches: function () {
|
this.gridRenderRect = null;
|
this.gridRenderKey = '';
|
this.staticRenderRect = null;
|
this.staticRenderKey = '';
|
this.staticExcludedKey = '';
|
},
|
scheduleZoomRefresh: function () {
|
if (this.zoomRefreshTimer) {
|
window.clearTimeout(this.zoomRefreshTimer);
|
}
|
this.isZooming = true;
|
this.zoomRefreshTimer = window.setTimeout(function () {
|
this.zoomRefreshTimer = null;
|
this.isZooming = false;
|
if (this.isPanning || (this.interactionState && this.interactionState.type === 'pan')) {
|
this.pendingViewportRefresh = true;
|
return;
|
}
|
this.markGridSceneDirty();
|
this.markStaticSceneDirty();
|
this.scheduleRender();
|
}.bind(this), ZOOM_REFRESH_DELAY);
|
},
|
cancelPanRefresh: function () {
|
if (this.panRefreshTimer) {
|
window.clearTimeout(this.panRefreshTimer);
|
this.panRefreshTimer = null;
|
}
|
},
|
schedulePanRefresh: function () {
|
this.cancelPanRefresh();
|
this.isPanning = true;
|
this.panRefreshTimer = window.setTimeout(function () {
|
this.panRefreshTimer = null;
|
this.isPanning = false;
|
if (this.pendingViewportRefresh) {
|
this.pendingViewportRefresh = false;
|
this.markGridSceneDirty();
|
this.markStaticSceneDirty();
|
}
|
this.scheduleRender();
|
}.bind(this), PAN_LABEL_REFRESH_DELAY);
|
},
|
rebuildLabelCapability: function () {
|
var maxWidth = 0;
|
var maxHeight = 0;
|
var elements = this.doc && this.doc.elements ? this.doc.elements : [];
|
for (var i = 0; i < elements.length; i++) {
|
var element = elements[i];
|
if (element.width > maxWidth) {
|
maxWidth = element.width;
|
}
|
if (element.height > maxHeight) {
|
maxHeight = element.height;
|
}
|
}
|
this.labelCapability = {
|
maxWidth: maxWidth,
|
maxHeight: maxHeight
|
};
|
this.labelCapabilityDirty = false;
|
},
|
ensureLabelCapability: function () {
|
if (this.labelCapabilityDirty) {
|
this.rebuildLabelCapability();
|
}
|
return this.labelCapability;
|
},
|
markSpatialIndexDirty: function () {
|
this.spatialIndexDirty = true;
|
},
|
rebuildSpatialIndex: function () {
|
var buckets = {};
|
var elements = this.doc && this.doc.elements ? this.doc.elements : [];
|
for (var i = 0; i < elements.length; i++) {
|
var element = elements[i];
|
var minX = Math.floor(element.x / SPATIAL_BUCKET_SIZE);
|
var maxX = Math.floor((element.x + element.width) / SPATIAL_BUCKET_SIZE);
|
var minY = Math.floor(element.y / SPATIAL_BUCKET_SIZE);
|
var maxY = Math.floor((element.y + element.height) / SPATIAL_BUCKET_SIZE);
|
for (var bx = minX; bx <= maxX; bx++) {
|
for (var by = minY; by <= maxY; by++) {
|
var key = bucketKey(bx, by);
|
if (!buckets[key]) {
|
buckets[key] = [];
|
}
|
buckets[key].push(element);
|
}
|
}
|
}
|
this.spatialBuckets = buckets;
|
this.spatialIndexDirty = false;
|
},
|
ensureSpatialIndex: function () {
|
if (this.spatialIndexDirty || !this.spatialBuckets) {
|
this.rebuildSpatialIndex();
|
}
|
},
|
querySpatialCandidates: function (rect, padding, excludeIds) {
|
if (!this.doc || !rect) {
|
return [];
|
}
|
this.ensureSpatialIndex();
|
var excludeMap = {};
|
excludeIds = excludeIds || [];
|
for (var i = 0; i < excludeIds.length; i++) {
|
excludeMap[excludeIds[i]] = true;
|
}
|
var seen = {};
|
var result = [];
|
var pad = Math.max(0, padding || 0);
|
var minX = Math.floor((rect.x - pad) / SPATIAL_BUCKET_SIZE);
|
var maxX = Math.floor((rect.x + rect.width + pad) / SPATIAL_BUCKET_SIZE);
|
var minY = Math.floor((rect.y - pad) / SPATIAL_BUCKET_SIZE);
|
var maxY = Math.floor((rect.y + rect.height + pad) / SPATIAL_BUCKET_SIZE);
|
for (var bx = minX; bx <= maxX; bx++) {
|
for (var by = minY; by <= maxY; by++) {
|
var key = bucketKey(bx, by);
|
var bucket = this.spatialBuckets[key];
|
if (!bucket || !bucket.length) {
|
continue;
|
}
|
for (var j = 0; j < bucket.length; j++) {
|
var element = bucket[j];
|
if (!element || seen[element.id] || excludeMap[element.id]) {
|
continue;
|
}
|
seen[element.id] = true;
|
result.push(element);
|
}
|
}
|
}
|
return result;
|
},
|
cancelDeferredStaticRebuild: function () {
|
if (this.deferredStaticRebuildTimer) {
|
window.clearTimeout(this.deferredStaticRebuildTimer);
|
this.deferredStaticRebuildTimer = null;
|
}
|
},
|
stageDeferredStaticCommit: function (ids, eraseRects) {
|
this.pendingStaticCommit = {
|
ids: (ids || []).slice(),
|
eraseRects: (eraseRects || []).map(function (item) {
|
return {
|
x: item.x,
|
y: item.y,
|
width: item.width,
|
height: item.height
|
};
|
})
|
};
|
},
|
clearDeferredStaticCommit: function () {
|
this.cancelDeferredStaticRebuild();
|
this.pendingStaticCommit = null;
|
},
|
scheduleDeferredStaticRebuild: function () {
|
this.cancelDeferredStaticRebuild();
|
this.deferredStaticRebuildTimer = window.setTimeout(function () {
|
this.deferredStaticRebuildTimer = null;
|
this.pendingStaticCommit = null;
|
this.markStaticSceneDirty();
|
this.scheduleRender();
|
}.bind(this), DEFERRED_STATIC_REBUILD_DELAY);
|
},
|
selectionKey: function (ids) {
|
return (ids || []).slice().sort().join('|');
|
},
|
setSelectedIds: function (ids, options) {
|
options = options || {};
|
var nextIds = (ids || []).filter(Boolean);
|
this.selectedIds = nextIds.slice();
|
if (options.refreshInspector !== false) {
|
this.refreshInspector();
|
}
|
},
|
setCurrentDoc: function (doc, options) {
|
options = options || {};
|
var normalized = this.normalizeDoc(doc);
|
this.clearFloorTransientState();
|
this.resetRenderLayers();
|
this.clearRenderCaches();
|
this.doc = normalized;
|
this.markSpatialIndexDirty();
|
this.labelCapabilityDirty = true;
|
this.pendingViewportRefresh = false;
|
this.currentLev = normalized.lev;
|
this.floorPickerLev = normalized.lev;
|
this.switchingFloorLev = null;
|
this.loadingFloor = false;
|
this.syncFloorQueryParam(normalized.lev);
|
this.markGridSceneDirty();
|
this.markStaticSceneDirty();
|
this.undoStack = [];
|
this.redoStack = [];
|
this.savedSnapshot = options.savedSnapshot != null ? options.savedSnapshot : this.snapshotDoc(normalized);
|
this.syncDirty();
|
this.refreshInspector();
|
this.refreshLevOptions();
|
this.$nextTick(function () {
|
this.fitContent();
|
this.scheduleRender();
|
}.bind(this));
|
},
|
replaceDocFromSnapshot: function (snapshot) {
|
if (!snapshot) {
|
return;
|
}
|
try {
|
this.clearFloorTransientState();
|
this.resetRenderLayers();
|
this.clearRenderCaches();
|
this.doc = this.normalizeDoc(JSON.parse(snapshot));
|
this.markSpatialIndexDirty();
|
this.labelCapabilityDirty = true;
|
this.pendingViewportRefresh = false;
|
} catch (e) {
|
this.showMessage('error', '历史记录恢复失败');
|
return;
|
}
|
this.markGridSceneDirty();
|
this.markStaticSceneDirty();
|
this.floorPickerLev = this.doc.lev;
|
this.currentLev = this.doc.lev;
|
this.refreshInspector();
|
this.syncDirty();
|
this.cacheCurrentDraft();
|
this.scheduleRender();
|
},
|
pushUndoSnapshot: function (snapshot) {
|
if (!snapshot) {
|
return;
|
}
|
if (this.undoStack.length > 0 && this.undoStack[this.undoStack.length - 1] === snapshot) {
|
return;
|
}
|
this.undoStack.push(snapshot);
|
if (this.undoStack.length > HISTORY_LIMIT) {
|
this.undoStack.shift();
|
}
|
},
|
commitMutation: function (beforeSnapshot, options) {
|
options = options || {};
|
var afterSnapshot = this.snapshotDoc(this.doc);
|
if (beforeSnapshot === afterSnapshot) {
|
this.scheduleRender();
|
this.refreshInspector();
|
return false;
|
}
|
this.pushUndoSnapshot(beforeSnapshot);
|
this.redoStack = [];
|
this.markSpatialIndexDirty();
|
this.labelCapabilityDirty = true;
|
if (options.staticSceneDirty !== false) {
|
this.clearDeferredStaticCommit();
|
this.markStaticSceneDirty();
|
}
|
this.syncDirty();
|
this.cacheCurrentDraft();
|
this.refreshInspector();
|
this.scheduleRender();
|
return true;
|
},
|
runMutation: function (mutator) {
|
if (!this.doc) {
|
return false;
|
}
|
var beforeSnapshot = this.snapshotDoc(this.doc);
|
mutator();
|
return this.commitMutation(beforeSnapshot);
|
},
|
undo: function () {
|
if (this.undoStack.length === 0 || !this.doc) {
|
return;
|
}
|
var currentSnapshot = this.snapshotDoc(this.doc);
|
var snapshot = this.undoStack.pop();
|
this.redoStack.push(currentSnapshot);
|
this.replaceDocFromSnapshot(snapshot);
|
},
|
redo: function () {
|
if (this.redoStack.length === 0 || !this.doc) {
|
return;
|
}
|
var currentSnapshot = this.snapshotDoc(this.doc);
|
var snapshot = this.redoStack.pop();
|
this.pushUndoSnapshot(currentSnapshot);
|
this.replaceDocFromSnapshot(snapshot);
|
},
|
createLocalBlankDoc: function (lev, width, height, savedSnapshot) {
|
var doc = {
|
lev: toInt(lev, 1),
|
editorMode: FREE_EDITOR_MODE,
|
canvasWidth: Math.max(MIN_ELEMENT_SIZE * 4, toNumber(width, DEFAULT_CANVAS_WIDTH)),
|
canvasHeight: Math.max(MIN_ELEMENT_SIZE * 4, toNumber(height, DEFAULT_CANVAS_HEIGHT)),
|
elements: []
|
};
|
this.setCurrentDoc(doc, {
|
savedSnapshot: savedSnapshot != null ? savedSnapshot : ''
|
});
|
this.cacheCurrentDraft();
|
this.syncDirty();
|
},
|
openBlankDialog: function () {
|
var lev = this.currentLev || 1;
|
this.blankForm = {
|
lev: String(lev),
|
width: String(Math.round(this.doc ? this.doc.canvasWidth : DEFAULT_CANVAS_WIDTH)),
|
height: String(Math.round(this.doc ? this.doc.canvasHeight : DEFAULT_CANVAS_HEIGHT))
|
};
|
this.blankDialogVisible = true;
|
},
|
createBlankMap: function () {
|
var lev = toInt(this.blankForm.lev, 0);
|
var width = toNumber(this.blankForm.width, DEFAULT_CANVAS_WIDTH);
|
var height = toNumber(this.blankForm.height, DEFAULT_CANVAS_HEIGHT);
|
if (lev <= 0) {
|
this.showMessage('warning', '楼层不能为空');
|
return;
|
}
|
if (width <= 0 || height <= 0) {
|
this.showMessage('warning', '画布尺寸必须大于 0');
|
return;
|
}
|
this.blankDialogVisible = false;
|
this.createLocalBlankDoc(lev, width, height, '');
|
},
|
buildTransferPayload: function () {
|
var doc = this.exportDoc(this.doc);
|
return {
|
format: MAP_TRANSFER_FORMAT,
|
exportedAt: new Date().toISOString(),
|
source: {
|
lev: doc.lev,
|
editorMode: doc.editorMode
|
},
|
docs: [doc]
|
};
|
},
|
buildTransferFilename: function (docs) {
|
var levs = (docs || []).map(function (item) {
|
return toInt(item && item.lev, 0);
|
}).filter(function (lev) {
|
return lev > 0;
|
}).sort(function (a, b) {
|
return a - b;
|
});
|
var scope = levs.length <= 1
|
? (String(levs[0] || (this.currentLev || 1)) + 'F')
|
: ('all-' + levs.length + '-floors');
|
var now = new Date();
|
return [
|
'bas-map',
|
scope,
|
now.getFullYear(),
|
padNumber(now.getMonth() + 1),
|
padNumber(now.getDate()),
|
padNumber(now.getHours()),
|
padNumber(now.getMinutes()),
|
padNumber(now.getSeconds())
|
].join('-') + '.json';
|
},
|
requestEditorDoc: function (lev) {
|
return new Promise(function (resolve, reject) {
|
$.ajax({
|
url: baseUrl + '/basMap/editor/' + lev + '/auth',
|
method: 'GET',
|
headers: authHeaders(),
|
success: function (res) {
|
if (!res || res.code !== 200 || !res.data) {
|
reject(new Error((res && res.msg) ? res.msg : ('加载 ' + lev + 'F 地图失败')));
|
return;
|
}
|
resolve(res.data);
|
},
|
error: function () {
|
reject(new Error('加载 ' + lev + 'F 地图失败'));
|
}
|
});
|
});
|
},
|
collectAllTransferDocs: function () {
|
var self = this;
|
var levMap = {};
|
(this.remoteLevOptions || []).forEach(function (lev) {
|
lev = toInt(lev, 0);
|
if (lev > 0) {
|
levMap[lev] = true;
|
}
|
});
|
Object.keys(this.draftDocs || {}).forEach(function (key) {
|
var lev = toInt(key, 0);
|
if (lev > 0) {
|
levMap[lev] = true;
|
}
|
});
|
if (this.doc && this.doc.lev) {
|
levMap[toInt(this.doc.lev, 0)] = true;
|
}
|
var levs = Object.keys(levMap).map(function (key) {
|
return toInt(key, 0);
|
}).filter(function (lev) {
|
return lev > 0;
|
}).sort(function (a, b) {
|
return a - b;
|
});
|
if (!levs.length) {
|
return Promise.resolve([]);
|
}
|
return Promise.all(levs.map(function (lev) {
|
if (self.doc && self.doc.lev === lev) {
|
return Promise.resolve(self.exportDoc(self.doc));
|
}
|
if (self.draftDocs[lev] && self.draftDocs[lev].doc) {
|
return Promise.resolve(self.exportDoc(self.draftDocs[lev].doc));
|
}
|
return self.requestEditorDoc(lev).then(function (doc) {
|
return self.normalizeDoc(doc);
|
});
|
}));
|
},
|
exportMapPackage: function () {
|
var self = this;
|
if (!this.doc && (!this.remoteLevOptions || !this.remoteLevOptions.length)) {
|
this.showMessage('warning', '当前没有可导出的地图');
|
return;
|
}
|
this.collectAllTransferDocs().then(function (docs) {
|
if (!docs || !docs.length) {
|
self.showMessage('warning', '当前没有可导出的地图');
|
return;
|
}
|
var payload = {
|
format: MAP_TRANSFER_FORMAT,
|
exportedAt: new Date().toISOString(),
|
source: {
|
lev: self.currentLev || (docs[0] && docs[0].lev) || 1,
|
editorMode: FREE_EDITOR_MODE
|
},
|
docs: docs.map(function (doc) {
|
return self.exportDoc(doc);
|
})
|
};
|
var blob = new Blob([JSON.stringify(payload, null, 2)], {
|
type: 'application/json;charset=utf-8'
|
});
|
var href = window.URL.createObjectURL(blob);
|
var link = document.createElement('a');
|
link.href = href;
|
link.download = self.buildTransferFilename(payload.docs);
|
document.body.appendChild(link);
|
link.click();
|
document.body.removeChild(link);
|
window.setTimeout(function () {
|
window.URL.revokeObjectURL(href);
|
}, 0);
|
self.showMessage('success', '已导出 ' + payload.docs.length + ' 个楼层的地图包');
|
}).catch(function (error) {
|
self.showMessage('error', error && error.message ? error.message : '导出地图失败');
|
});
|
},
|
triggerImportMap: function () {
|
if (this.$refs.mapImportInput) {
|
this.$refs.mapImportInput.value = '';
|
this.$refs.mapImportInput.click();
|
}
|
},
|
parseTransferPackage: function (raw) {
|
if (!raw) {
|
return null;
|
}
|
if (raw.format === MAP_TRANSFER_FORMAT && Array.isArray(raw.docs) && raw.docs.length) {
|
return {
|
docs: raw.docs,
|
activeLev: toInt(raw.source && raw.source.lev, 0)
|
};
|
}
|
if ((raw.format === 'bas-map-editor-transfer-v1' || raw.format === MAP_TRANSFER_FORMAT) && raw.doc) {
|
return {
|
docs: [raw.doc],
|
activeLev: toInt(raw.source && raw.source.lev, 0)
|
};
|
}
|
if (raw.editorMode === FREE_EDITOR_MODE && Array.isArray(raw.elements)) {
|
return {
|
docs: [raw],
|
activeLev: toInt(raw.lev, 0)
|
};
|
}
|
return null;
|
},
|
importMapPackage: function (payload, options) {
|
options = options || {};
|
if (!payload || !Array.isArray(payload.docs) || !payload.docs.length) {
|
this.showMessage('error', '导入文件格式不正确');
|
return;
|
}
|
if (this.isDirty && options.skipConfirm !== true) {
|
if (!window.confirm('导入地图会替换当前编辑态未保存内容，是否继续？')) {
|
return;
|
}
|
}
|
if (this.doc) {
|
this.cacheCurrentDraft();
|
}
|
var self = this;
|
var normalizedDocs = payload.docs.map(function (item) {
|
return self.normalizeDoc(item);
|
}).sort(function (a, b) {
|
return toInt(a.lev, 0) - toInt(b.lev, 0);
|
});
|
normalizedDocs.forEach(function (doc) {
|
self.setDraftDocEntry(doc.lev, doc, '');
|
});
|
var activeLev = toInt(payload.activeLev, 0);
|
var targetDoc = normalizedDocs[0];
|
for (var i = 0; i < normalizedDocs.length; i++) {
|
if (normalizedDocs[i].lev === activeLev) {
|
targetDoc = normalizedDocs[i];
|
break;
|
}
|
}
|
this.refreshLevOptions();
|
this.floorPickerLev = targetDoc.lev;
|
this.setCurrentDoc(targetDoc, { savedSnapshot: '' });
|
if (normalizedDocs.length > 1) {
|
this.showMessage('success', '地图包已导入 ' + normalizedDocs.length + ' 个楼层，可点击“保存全部楼层”落库');
|
return;
|
}
|
this.showMessage('success', '地图包已导入，保存后才会覆盖运行地图');
|
},
|
handleImportMap: function (event) {
|
var file = event && event.target && event.target.files ? event.target.files[0] : null;
|
if (!file) {
|
return;
|
}
|
var self = this;
|
var reader = new FileReader();
|
reader.onload = function (loadEvent) {
|
try {
|
var text = loadEvent && loadEvent.target ? loadEvent.target.result : '';
|
var raw = JSON.parse(text || '{}');
|
var payload = self.parseTransferPackage(raw);
|
self.importMapPackage(payload);
|
} catch (e) {
|
self.showMessage('error', '地图文件解析失败');
|
}
|
};
|
reader.onerror = function () {
|
self.showMessage('error', '地图文件读取失败');
|
};
|
reader.readAsText(file, 'utf-8');
|
},
|
triggerImportExcel: function () {
|
if (this.$refs.importInput) {
|
this.$refs.importInput.value = '';
|
this.$refs.importInput.click();
|
}
|
},
|
handleImportExcel: function (event) {
|
var self = this;
|
var file = event && event.target && event.target.files ? event.target.files[0] : null;
|
if (!file) {
|
return;
|
}
|
var formData = new FormData();
|
formData.append('file', file);
|
$.ajax({
|
url: baseUrl + '/basMap/editor/importExcel/auth',
|
method: 'POST',
|
headers: authHeaders(),
|
data: formData,
|
processData: false,
|
contentType: false,
|
success: function (res) {
|
if (!res || res.code !== 200 || !Array.isArray(res.data) || res.data.length === 0) {
|
self.showMessage('error', (res && res.msg) ? res.msg : 'Excel 导入失败');
|
return;
|
}
|
res.data.forEach(function (item) {
|
var doc = self.normalizeDoc(item);
|
self.setDraftDocEntry(doc.lev, doc, '');
|
});
|
self.refreshLevOptions();
|
self.floorPickerLev = toInt(res.data[0].lev, 0);
|
self.setCurrentDoc(res.data[0], { savedSnapshot: '' });
|
self.showMessage('success', 'Excel 已导入到编辑器，保存后才会覆盖运行地图');
|
},
|
error: function () {
|
self.showMessage('error', 'Excel 导入失败');
|
}
|
});
|
},
|
handleFloorChange: function (lev) {
|
lev = toInt(lev, 0);
|
if (lev <= 0) {
|
return;
|
}
|
this.floorPickerLev = lev;
|
if (this.doc && this.doc.lev === lev && !this.loadingFloor) {
|
this.switchingFloorLev = null;
|
return;
|
}
|
if (this.doc) {
|
this.cacheCurrentDraft();
|
}
|
this.clearFloorTransientState();
|
this.resetRenderLayers();
|
this.switchingFloorLev = lev;
|
this.markGridSceneDirty();
|
this.markStaticSceneDirty();
|
this.scheduleRender();
|
this.fetchFloor(lev);
|
},
|
loadCurrentFloor: function () {
|
if (!this.currentLev) {
|
this.showMessage('warning', '请先选择楼层');
|
return;
|
}
|
if (this.isDirty && !window.confirm('重新读取会丢弃当前楼层未保存的自由画布编辑，是否继续？')) {
|
return;
|
}
|
this.removeDraftDocEntry(this.currentLev);
|
this.refreshLevOptions();
|
this.fetchFloor(this.currentLev);
|
},
|
fetchFloor: function (lev) {
|
var self = this;
|
lev = toInt(lev, 0);
|
if (lev <= 0) {
|
return;
|
}
|
var requestSeq = ++this.floorRequestSeq;
|
this.activeFloorRequestSeq = requestSeq;
|
this.loadingFloor = true;
|
this.switchingFloorLev = lev;
|
$.ajax({
|
url: baseUrl + '/basMap/editor/' + lev + '/auth',
|
method: 'GET',
|
headers: authHeaders(),
|
success: function (res) {
|
if (requestSeq !== self.activeFloorRequestSeq) {
|
return;
|
}
|
self.loadingFloor = false;
|
if (!res || res.code !== 200 || !res.data) {
|
self.switchingFloorLev = null;
|
self.floorPickerLev = self.currentLev;
|
self.markGridSceneDirty();
|
self.markStaticSceneDirty();
|
self.scheduleRender();
|
self.showMessage('error', (res && res.msg) ? res.msg : '加载地图失败');
|
return;
|
}
|
var normalized = self.normalizeDoc(res.data);
|
self.setDraftDocEntry(normalized.lev, normalized, self.snapshotDoc(normalized));
|
self.setCurrentDoc(normalized, {
|
savedSnapshot: self.snapshotDoc(normalized)
|
});
|
},
|
error: function () {
|
if (requestSeq !== self.activeFloorRequestSeq) {
|
return;
|
}
|
self.loadingFloor = false;
|
self.switchingFloorLev = null;
|
self.floorPickerLev = self.currentLev;
|
self.markGridSceneDirty();
|
self.markStaticSceneDirty();
|
self.scheduleRender();
|
self.showMessage('error', '加载地图失败');
|
}
|
});
|
},
|
validateDocBeforeSave: function (doc) {
|
var source = this.normalizeDoc(doc);
|
if (!source || !source.lev) {
|
return '楼层不能为空';
|
}
|
if (toNumber(source.canvasWidth, 0) <= 0 || toNumber(source.canvasHeight, 0) <= 0) {
|
return '画布尺寸必须大于 0';
|
}
|
var elements = source.elements || [];
|
for (var i = 0; i < elements.length; i++) {
|
var element = elements[i];
|
if (element.width <= 0 || element.height <= 0) {
|
return '存在尺寸无效的元素';
|
}
|
if (element.x < 0 || element.y < 0) {
|
return '元素坐标不能小于 0';
|
}
|
if (!isRectWithinCanvas(element, source.canvasWidth, source.canvasHeight)) {
|
return '存在超出画布边界的元素: ' + element.id;
|
}
|
if (element.type === 'devp') {
|
var value = safeParseJson(element.value);
|
if (!value || toInt(value.stationId, 0) <= 0 || toInt(value.deviceNo, 0) <= 0) {
|
return '输送线元素必须配置有效的 stationId 和 deviceNo';
|
}
|
}
|
}
|
var overlapId = findDocOverlapId(source);
|
if (overlapId) {
|
return '存在重叠元素: ' + overlapId;
|
}
|
return '';
|
},
|
validateBeforeSave: function () {
|
return this.validateDocBeforeSave(this.doc);
|
},
|
requestSaveDoc: function (doc) {
|
return new Promise(function (resolve, reject) {
|
$.ajax({
|
url: baseUrl + '/basMap/editor/save/auth',
|
method: 'POST',
|
headers: $.extend({
|
'Content-Type': 'application/json;charset=UTF-8'
|
}, authHeaders()),
|
data: JSON.stringify(doc),
|
success: function (res) {
|
if (!res || res.code !== 200) {
|
reject(new Error((res && res.msg) ? res.msg : '保存失败'));
|
return;
|
}
|
resolve(res);
|
},
|
error: function () {
|
reject(new Error('保存失败'));
|
}
|
});
|
});
|
},
|
collectDirtyDocsForSave: function () {
|
var result = [];
|
var seen = {};
|
if (this.doc && this.doc.lev && this.isDirty) {
|
var currentDoc = this.exportDoc(this.doc);
|
result.push(currentDoc);
|
seen[currentDoc.lev] = true;
|
}
|
var self = this;
|
Object.keys(this.draftDocs || {}).forEach(function (key) {
|
var lev = toInt(key, 0);
|
if (lev <= 0 || seen[lev]) {
|
return;
|
}
|
var entry = self.draftDocs[lev];
|
if (!entry || !entry.doc) {
|
return;
|
}
|
var snapshot = self.snapshotDoc(entry.doc);
|
if (snapshot === (entry.savedSnapshot || '')) {
|
return;
|
}
|
var doc = self.exportDoc(entry.doc);
|
result.push(doc);
|
seen[doc.lev] = true;
|
});
|
result.sort(function (a, b) {
|
return toInt(a.lev, 0) - toInt(b.lev, 0);
|
});
|
return result;
|
},
|
markDocSavedState: function (doc) {
|
var normalized = this.normalizeDoc(doc);
|
var savedSnapshot = this.snapshotDoc(normalized);
|
this.setDraftDocEntry(normalized.lev, normalized, savedSnapshot);
|
if (this.doc && this.doc.lev === normalized.lev) {
|
this.savedSnapshot = savedSnapshot;
|
this.syncDirty();
|
}
|
},
|
saveDoc: function () {
|
var self = this;
|
if (!this.doc) {
|
return;
|
}
|
var error = this.validateBeforeSave();
|
if (error) {
|
this.showMessage('warning', error);
|
return;
|
}
|
this.saving = true;
|
var payload = this.exportDoc(this.doc);
|
this.requestSaveDoc(payload).then(function () {
|
self.saving = false;
|
self.savedSnapshot = self.snapshotDoc(self.doc);
|
self.syncDirty();
|
self.clearCurrentDraftIfSaved();
|
self.refreshLevOptions();
|
self.showMessage('success', '当前楼层已保存并编译到运行地图');
|
}).catch(function (error) {
|
self.saving = false;
|
self.showMessage('error', error && error.message ? error.message : '保存失败');
|
});
|
},
|
saveAllDocs: function () {
|
var self = this;
|
if (this.saving || this.savingAll) {
|
return;
|
}
|
var docs = this.collectDirtyDocsForSave();
|
if (!docs.length) {
|
this.showMessage('warning', '当前没有需要保存的楼层');
|
return;
|
}
|
if (docs.length > 1 && !window.confirm('将保存 ' + docs.length + ' 个楼层到运行地图，是否继续？')) {
|
return;
|
}
|
for (var i = 0; i < docs.length; i++) {
|
var error = this.validateDocBeforeSave(docs[i]);
|
if (error) {
|
this.showMessage('warning', docs[i].lev + 'F 保存前校验失败: ' + error);
|
return;
|
}
|
}
|
this.savingAll = true;
|
var index = 0;
|
var total = docs.length;
|
var next = function () {
|
if (index >= total) {
|
self.savingAll = false;
|
self.refreshLevOptions();
|
self.showMessage('success', '已保存 ' + total + ' 个楼层到运行地图');
|
return;
|
}
|
var doc = docs[index++];
|
self.requestSaveDoc(doc).then(function () {
|
self.markDocSavedState(doc);
|
next();
|
}).catch(function (error) {
|
self.savingAll = false;
|
self.showMessage('error', doc.lev + 'F 保存失败: ' + (error && error.message ? error.message : '保存失败'));
|
});
|
};
|
next();
|
},
|
setTool: function (tool) {
|
this.activeTool = tool;
|
this.updateCursor();
|
},
|
findElementById: function (id) {
|
if (!this.doc || !id) {
|
return null;
|
}
|
var elements = this.doc.elements || [];
|
for (var i = 0; i < elements.length; i++) {
|
if (elements[i].id === id) {
|
return elements[i];
|
}
|
}
|
return null;
|
},
|
getSelectedElements: function () {
|
var self = this;
|
return this.selectedIds.map(function (id) {
|
return self.findElementById(id);
|
}).filter(Boolean);
|
},
|
refreshInspector: function () {
|
var element = this.singleSelectedElement;
|
if (!this.doc) {
|
this.canvasForm = {
|
width: String(DEFAULT_CANVAS_WIDTH),
|
height: String(DEFAULT_CANVAS_HEIGHT)
|
};
|
this.valueEditorText = '';
|
this.resetDevpForm();
|
this.resetDeviceForm();
|
return;
|
}
|
this.canvasForm = {
|
width: String(Math.round(this.doc.canvasWidth)),
|
height: String(Math.round(this.doc.canvasHeight))
|
};
|
if (!element) {
|
this.geometryForm = { x: '', y: '', width: '', height: '' };
|
this.valueEditorText = '';
|
this.resetDevpForm();
|
this.resetDeviceForm();
|
return;
|
}
|
this.geometryForm = {
|
x: String(this.formatNumber(element.x)),
|
y: String(this.formatNumber(element.y)),
|
width: String(this.formatNumber(element.width)),
|
height: String(this.formatNumber(element.height))
|
};
|
this.valueEditorText = element.value || '';
|
if (element.type === 'devp') {
|
this.loadDevpForm(element.value);
|
} else {
|
this.resetDevpForm();
|
}
|
if (isDeviceConfigType(element.type)) {
|
this.loadDeviceForm(element.type, element.value);
|
} else {
|
this.resetDeviceForm();
|
}
|
this.ensureShelfFillStartValue();
|
},
|
resetDevpForm: function () {
|
this.devpForm = {
|
stationId: '',
|
deviceNo: '',
|
direction: [],
|
isBarcodeStation: false,
|
barcodeIdx: '',
|
backStation: '',
|
backStationDeviceNo: '',
|
isInStation: false,
|
barcodeStation: '',
|
barcodeStationDeviceNo: '',
|
isOutStation: false,
|
runBlockReassign: false,
|
isOutOrder: false,
|
isLiftTransfer: false
|
};
|
},
|
resetDeviceForm: function () {
|
this.deviceForm = {
|
valueKey: '',
|
deviceNo: ''
|
};
|
},
|
ensureShelfFillStartValue: function () {
|
var element = this.singleSelectedElement;
|
if (!element || element.type !== 'shelf') {
|
return;
|
}
|
if (!this.shelfFillForm.startValue || !parseShelfLocationValue(this.shelfFillForm.startValue)) {
|
this.shelfFillForm.startValue = normalizeValue(element.value || '');
|
}
|
},
|
loadDevpForm: function (value) {
|
this.resetDevpForm();
|
var json = safeParseJson(value);
|
if (!json) {
|
return;
|
}
|
this.devpForm.stationId = json.stationId != null ? String(json.stationId) : '';
|
this.devpForm.deviceNo = json.deviceNo != null ? String(json.deviceNo) : '';
|
this.devpForm.direction = normalizeDirectionList(json.direction);
|
this.devpForm.isBarcodeStation = boolFlag(json.isBarcodeStation);
|
this.devpForm.barcodeIdx = json.barcodeIdx != null ? String(json.barcodeIdx) : '';
|
this.devpForm.backStation = json.backStation != null ? String(json.backStation) : '';
|
this.devpForm.backStationDeviceNo = json.backStationDeviceNo != null ? String(json.backStationDeviceNo) : '';
|
this.devpForm.isInStation = boolFlag(json.isInStation);
|
this.devpForm.barcodeStation = json.barcodeStation != null ? String(json.barcodeStation) : '';
|
this.devpForm.barcodeStationDeviceNo = json.barcodeStationDeviceNo != null ? String(json.barcodeStationDeviceNo) : '';
|
this.devpForm.isOutStation = boolFlag(json.isOutStation);
|
this.devpForm.runBlockReassign = boolFlag(json.runBlockReassign);
|
this.devpForm.isOutOrder = boolFlag(json.isOutOrder);
|
this.devpForm.isLiftTransfer = boolFlag(json.isLiftTransfer);
|
},
|
getDeviceConfigLabel: function (type) {
|
var meta = getTypeMeta(type);
|
return meta.label + '参数';
|
},
|
getDeviceConfigKeyLabel: function (type, valueKey) {
|
if (valueKey === 'crnNo') {
|
return 'crnNo';
|
}
|
if (valueKey === 'rgvNo') {
|
return 'rgvNo';
|
}
|
return type === 'rgv' ? 'deviceNo / rgvNo' : 'deviceNo / crnNo';
|
},
|
loadDeviceForm: function (type, value) {
|
this.resetDeviceForm();
|
if (!isDeviceConfigType(type)) {
|
return;
|
}
|
var json = safeParseJson(value);
|
var valueKey = pickDeviceValueKey(type, json);
|
var deviceNo = '';
|
if (json && json[valueKey] != null) {
|
deviceNo = String(json[valueKey]);
|
}
|
this.deviceForm = {
|
valueKey: valueKey,
|
deviceNo: deviceNo
|
};
|
},
|
isDevpDirectionActive: function (directionKey) {
|
return this.devpForm.direction.indexOf(directionKey) >= 0;
|
},
|
toggleDevpDirection: function (directionKey) {
|
if (!directionKey) {
|
return;
|
}
|
var next = this.devpForm.direction.slice();
|
var index = next.indexOf(directionKey);
|
if (index >= 0) {
|
next.splice(index, 1);
|
} else {
|
next.push(directionKey);
|
}
|
this.devpForm.direction = DEVP_DIRECTION_OPTIONS.map(function (item) {
|
return item.key;
|
}).filter(function (item) {
|
return next.indexOf(item) >= 0;
|
});
|
},
|
applyCanvasSize: function () {
|
var self = this;
|
if (!this.doc) {
|
return;
|
}
|
var width = toNumber(this.canvasForm.width, 0);
|
var height = toNumber(this.canvasForm.height, 0);
|
if (width <= 0 || height <= 0) {
|
this.showMessage('warning', '画布尺寸必须大于 0');
|
return;
|
}
|
var bounds = this.getElementBounds((this.doc.elements || []).map(function (item) {
|
return item.id;
|
}));
|
if (bounds && (width < bounds.x + bounds.width || height < bounds.y + bounds.height)) {
|
this.showMessage('warning', '画布不能小于当前元素占用范围');
|
return;
|
}
|
this.runMutation(function () {
|
self.doc.canvasWidth = roundCoord(width);
|
self.doc.canvasHeight = roundCoord(height);
|
});
|
},
|
applyGeometry: function () {
|
var self = this;
|
var element = this.singleSelectedElement;
|
if (!element) {
|
return;
|
}
|
var next = {
|
x: roundCoord(Math.max(0, toNumber(this.geometryForm.x, element.x))),
|
y: roundCoord(Math.max(0, toNumber(this.geometryForm.y, element.y))),
|
width: roundCoord(Math.max(MIN_ELEMENT_SIZE, toNumber(this.geometryForm.width, element.width))),
|
height: roundCoord(Math.max(MIN_ELEMENT_SIZE, toNumber(this.geometryForm.height, element.height)))
|
};
|
if (!this.isWithinCanvas(next)) {
|
this.showMessage('warning', '几何属性超出当前画布范围');
|
return;
|
}
|
var preview = deepClone(element);
|
preview.x = next.x;
|
preview.y = next.y;
|
preview.width = next.width;
|
preview.height = next.height;
|
if (this.hasOverlap(preview, [preview.id])) {
|
this.showMessage('warning', '调整后会与其他元素重叠');
|
return;
|
}
|
this.runMutation(function () {
|
element.x = next.x;
|
element.y = next.y;
|
element.width = next.width;
|
element.height = next.height;
|
});
|
},
|
applyRawValue: function () {
|
var self = this;
|
var element = this.singleSelectedElement;
|
if (!element || element.type === 'devp') {
|
return;
|
}
|
this.runMutation(function () {
|
element.value = normalizeValue(self.valueEditorText);
|
});
|
},
|
applyDeviceForm: function () {
|
var self = this;
|
var element = this.singleSelectedDeviceElement;
|
if (!element) {
|
return;
|
}
|
var deviceNo = toInt(this.deviceForm.deviceNo, 0);
|
if (deviceNo <= 0) {
|
this.showMessage('warning', '设备编号必须大于 0');
|
return;
|
}
|
var valueKey = this.deviceForm.valueKey || pickDeviceValueKey(element.type, safeParseJson(element.value));
|
this.runMutation(function () {
|
var payload = safeParseJson(element.value) || {};
|
delete payload.deviceNo;
|
delete payload.crnNo;
|
delete payload.rgvNo;
|
payload[valueKey] = deviceNo;
|
element.value = JSON.stringify(payload);
|
self.valueEditorText = element.value;
|
});
|
},
|
applyDevpForm: function () {
|
var self = this;
|
var element = this.singleSelectedElement;
|
if (!element || element.type !== 'devp') {
|
return;
|
}
|
var stationId = toInt(this.devpForm.stationId, 0);
|
var deviceNo = toInt(this.devpForm.deviceNo, 0);
|
if (stationId <= 0 || deviceNo <= 0) {
|
this.showMessage('warning', '站号和 PLC 编号必须大于 0');
|
return;
|
}
|
var payload = {
|
stationId: stationId,
|
deviceNo: deviceNo
|
};
|
var directionList = normalizeDirectionList(this.devpForm.direction);
|
if (directionList.length > 0) {
|
payload.direction = directionList;
|
}
|
var barcodeIdx = this.devpForm.barcodeIdx === '' ? 0 : toInt(this.devpForm.barcodeIdx, 0);
|
var backStation = this.devpForm.backStation === '' ? 0 : toInt(this.devpForm.backStation, 0);
|
var backStationDeviceNo = this.devpForm.backStationDeviceNo === '' ? 0 : toInt(this.devpForm.backStationDeviceNo, 0);
|
var barcodeStation = this.devpForm.barcodeStation === '' ? 0 : toInt(this.devpForm.barcodeStation, 0);
|
var barcodeStationDeviceNo = this.devpForm.barcodeStationDeviceNo === '' ? 0 : toInt(this.devpForm.barcodeStationDeviceNo, 0);
|
if (this.devpForm.isInStation && (barcodeStation <= 0 || barcodeStationDeviceNo <= 0)) {
|
this.showMessage('warning', '入站点必须填写条码站和条码站 PLC 编号');
|
return;
|
}
|
if (this.devpForm.isBarcodeStation && (backStation <= 0 || backStationDeviceNo <= 0 || barcodeIdx <= 0)) {
|
this.showMessage('warning', '条码站必须填写条码索引、退回站和退回站 PLC 编号');
|
return;
|
}
|
if (this.devpForm.isBarcodeStation) {
|
payload.isBarcodeStation = 1;
|
}
|
if (barcodeIdx > 0) {
|
payload.barcodeIdx = barcodeIdx;
|
}
|
if (backStation > 0) {
|
payload.backStation = backStation;
|
}
|
if (backStationDeviceNo > 0) {
|
payload.backStationDeviceNo = backStationDeviceNo;
|
}
|
if (this.devpForm.isInStation) {
|
payload.isInStation = 1;
|
}
|
if (barcodeStation > 0) {
|
payload.barcodeStation = barcodeStation;
|
}
|
if (barcodeStationDeviceNo > 0) {
|
payload.barcodeStationDeviceNo = barcodeStationDeviceNo;
|
}
|
if (this.devpForm.isOutStation) {
|
payload.isOutStation = 1;
|
}
|
if (this.devpForm.runBlockReassign) {
|
payload.runBlockReassign = 1;
|
}
|
if (this.devpForm.isOutOrder) {
|
payload.isOutOrder = 1;
|
}
|
if (this.devpForm.isLiftTransfer) {
|
payload.isLiftTransfer = 1;
|
}
|
this.runMutation(function () {
|
element.value = JSON.stringify(payload);
|
self.valueEditorText = element.value;
|
});
|
},
|
deleteSelection: function () {
|
var self = this;
|
if (!this.doc || this.selectedIds.length === 0) {
|
return;
|
}
|
var ids = this.selectedIds.slice();
|
this.runMutation(function () {
|
self.doc.elements = self.doc.elements.filter(function (item) {
|
return ids.indexOf(item.id) === -1;
|
});
|
self.selectedIds = [];
|
});
|
},
|
copySelection: function () {
|
var elements = this.getSelectedElements();
|
if (!elements.length) {
|
return;
|
}
|
this.clipboard = deepClone(elements);
|
this.showMessage('success', '已复制 ' + elements.length + ' 个元素');
|
},
|
getElementListBounds: function (elements) {
|
if (!elements || !elements.length) {
|
return null;
|
}
|
var minX = elements[0].x;
|
var minY = elements[0].y;
|
var maxX = elements[0].x + elements[0].width;
|
var maxY = elements[0].y + elements[0].height;
|
for (var i = 1; i < elements.length; i++) {
|
var element = elements[i];
|
minX = Math.min(minX, element.x);
|
minY = Math.min(minY, element.y);
|
maxX = Math.max(maxX, element.x + element.width);
|
maxY = Math.max(maxY, element.y + element.height);
|
}
|
return {
|
x: minX,
|
y: minY,
|
width: maxX - minX,
|
height: maxY - minY
|
};
|
},
|
getPasteTargetWorld: function () {
|
if (!this.doc) {
|
return { x: 0, y: 0 };
|
}
|
var visible = this.getVisibleCanvasRect ? this.getVisibleCanvasRect() : this.getVisibleWorldRect();
|
var fallback = {
|
x: visible.x + visible.width / 2,
|
y: visible.y + visible.height / 2
|
};
|
if (!this.lastPointerWorld) {
|
return fallback;
|
}
|
return {
|
x: clamp(this.lastPointerWorld.x, 0, this.doc.canvasWidth),
|
y: clamp(this.lastPointerWorld.y, 0, this.doc.canvasHeight),
|
screenX: this.lastPointerWorld.screenX,
|
screenY: this.lastPointerWorld.screenY
|
};
|
},
|
pasteClipboard: function () {
|
var self = this;
|
if (!this.doc || !this.clipboard.length) {
|
return;
|
}
|
var sourceBounds = this.getElementListBounds(this.clipboard);
|
if (!sourceBounds) {
|
return;
|
}
|
var target = this.getPasteTargetWorld();
|
var offsetX = target.x - (sourceBounds.x + sourceBounds.width / 2);
|
var offsetY = target.y - (sourceBounds.y + sourceBounds.height / 2);
|
var minOffsetX = -sourceBounds.x;
|
var maxOffsetX = this.doc.canvasWidth - (sourceBounds.x + sourceBounds.width);
|
var minOffsetY = -sourceBounds.y;
|
var maxOffsetY = this.doc.canvasHeight - (sourceBounds.y + sourceBounds.height);
|
offsetX = clamp(offsetX, minOffsetX, maxOffsetX);
|
offsetY = clamp(offsetY, minOffsetY, maxOffsetY);
|
var copies = deepClone(this.clipboard).map(function (item) {
|
item.id = nextId();
|
item.x = roundCoord(item.x + offsetX);
|
item.y = roundCoord(item.y + offsetY);
|
return item;
|
});
|
if (!this.canPlaceElements(copies, [])) {
|
this.showMessage('warning', '粘贴后的元素与现有元素重叠或超出画布');
|
return;
|
}
|
this.runMutation(function () {
|
self.doc.elements = self.doc.elements.concat(copies);
|
self.selectedIds = copies.map(function (item) { return item.id; });
|
});
|
},
|
canArrayFromElement: function (element) {
|
return !!(element && ARRAY_TEMPLATE_TYPES.indexOf(element.type) >= 0);
|
},
|
getShelfFillSteps: function () {
|
return {
|
row: this.shelfFillForm.rowStep === 'asc' ? 1 : -1,
|
col: this.shelfFillForm.colStep === 'desc' ? -1 : 1
|
};
|
},
|
applyShelfSequenceToArrayCopies: function (template, copies) {
|
if (!template || template.type !== 'shelf' || !copies || !copies.length) {
|
return copies;
|
}
|
var base = parseShelfLocationValue(template.value) || parseShelfLocationValue(this.shelfFillForm.startValue);
|
if (!base) {
|
return copies;
|
}
|
var steps = this.getShelfFillSteps();
|
var horizontal = Math.abs(copies[0].x - template.x) >= Math.abs(copies[0].y - template.y);
|
var direction = 1;
|
if (horizontal) {
|
direction = copies[0].x >= template.x ? 1 : -1;
|
} else {
|
direction = copies[0].y >= template.y ? 1 : -1;
|
}
|
for (var i = 0; i < copies.length; i++) {
|
var offset = i + 1;
|
var row = base.row;
|
var col = base.col;
|
if (horizontal) {
|
col = base.col + steps.col * direction * offset;
|
} else {
|
row = base.row + steps.row * direction * offset;
|
}
|
copies[i].value = formatShelfLocationValue(row, col);
|
}
|
return copies;
|
},
|
buildShelfGridAssignments: function (elements) {
|
if (!elements || !elements.length) {
|
return null;
|
}
|
var clusterAxis = function (list, axis, sizeKey) {
|
var sorted = list.map(function (item) {
|
return {
|
id: item.id,
|
center: item[axis] + item[sizeKey] / 2,
|
size: item[sizeKey]
|
};
|
}).sort(function (a, b) {
|
return a.center - b.center;
|
});
|
var avgSize = sorted.reduce(function (sum, item) {
|
return sum + item.size;
|
}, 0) / sorted.length;
|
var tolerance = Math.max(6, avgSize * 0.45);
|
var groups = [];
|
for (var i = 0; i < sorted.length; i++) {
|
var current = sorted[i];
|
var last = groups.length ? groups[groups.length - 1] : null;
|
if (!last || Math.abs(current.center - last.center) > tolerance) {
|
groups.push({
|
center: current.center,
|
items: [current]
|
});
|
} else {
|
last.items.push(current);
|
last.center = last.items.reduce(function (sum, item) {
|
return sum + item.center;
|
}, 0) / last.items.length;
|
}
|
}
|
var indexById = {};
|
for (var groupIndex = 0; groupIndex < groups.length; groupIndex++) {
|
for (var itemIndex = 0; itemIndex < groups[groupIndex].items.length; itemIndex++) {
|
indexById[groups[groupIndex].items[itemIndex].id] = groupIndex;
|
}
|
}
|
return indexById;
|
};
|
return {
|
rowById: clusterAxis(elements, 'y', 'height'),
|
colById: clusterAxis(elements, 'x', 'width')
|
};
|
},
|
applyShelfAutoFill: function () {
|
var self = this;
|
var shelves = this.selectedShelfElements.slice();
|
if (!shelves.length) {
|
this.showMessage('warning', '请先选中至少一个货架');
|
return;
|
}
|
var start = parseShelfLocationValue(this.shelfFillForm.startValue);
|
if (!start) {
|
this.showMessage('warning', '起始值格式必须是 排-列，例如 12-1');
|
return;
|
}
|
var grid = this.buildShelfGridAssignments(shelves);
|
if (!grid) {
|
return;
|
}
|
var steps = this.getShelfFillSteps();
|
this.runMutation(function () {
|
shelves.forEach(function (item) {
|
var rowIndex = grid.rowById[item.id] || 0;
|
var colIndex = grid.colById[item.id] || 0;
|
item.value = formatShelfLocationValue(
|
start.row + rowIndex * steps.row,
|
start.col + colIndex * steps.col
|
);
|
});
|
if (self.singleSelectedElement && self.singleSelectedElement.type === 'shelf') {
|
self.valueEditorText = self.singleSelectedElement.value || '';
|
}
|
});
|
},
|
buildArrayCopies: function (template, startWorld, currentWorld) {
|
if (!this.doc || !template || !startWorld || !currentWorld || !this.canArrayFromElement(template)) {
|
return [];
|
}
|
var deltaX = currentWorld.x - startWorld.x;
|
var deltaY = currentWorld.y - startWorld.y;
|
if (Math.abs(deltaX) < COORD_EPSILON && Math.abs(deltaY) < COORD_EPSILON) {
|
return [];
|
}
|
var horizontal = Math.abs(deltaX) >= Math.abs(deltaY);
|
var step = horizontal ? template.width : template.height;
|
if (step <= COORD_EPSILON) {
|
return [];
|
}
|
var direction = (horizontal ? deltaX : deltaY) >= 0 ? 1 : -1;
|
var distance;
|
if (horizontal) {
|
distance = direction > 0
|
? currentWorld.x - (template.x + template.width)
|
: template.x - currentWorld.x;
|
} else {
|
distance = direction > 0
|
? currentWorld.y - (template.y + template.height)
|
: template.y - currentWorld.y;
|
}
|
var count = Math.max(0, Math.floor((distance + step * 0.5) / step));
|
if (count <= 0) {
|
return [];
|
}
|
var copies = [];
|
for (var i = 1; i <= count; i++) {
|
copies.push({
|
type: template.type,
|
x: roundCoord(template.x + (horizontal ? direction * template.width * i : 0)),
|
y: roundCoord(template.y + (horizontal ? 0 : direction * template.height * i)),
|
width: template.width,
|
height: template.height,
|
value: template.value
|
});
|
}
|
return this.applyShelfSequenceToArrayCopies(template, copies);
|
},
|
duplicateSelection: function () {
|
this.copySelection();
|
this.pasteClipboard();
|
},
|
getElementBounds: function (ids) {
|
if (!this.doc) {
|
return null;
|
}
|
var elements = ids && ids.length ? this.getSelectedElements() : (this.doc.elements || []);
|
if (ids && ids.length) {
|
elements = ids.map(function (id) {
|
return this.findElementById(id);
|
}, this).filter(Boolean);
|
}
|
if (!elements.length) {
|
return null;
|
}
|
var minX = elements[0].x;
|
var minY = elements[0].y;
|
var maxX = elements[0].x + elements[0].width;
|
var maxY = elements[0].y + elements[0].height;
|
for (var i = 1; i < elements.length; i++) {
|
var element = elements[i];
|
minX = Math.min(minX, element.x);
|
minY = Math.min(minY, element.y);
|
maxX = Math.max(maxX, element.x + element.width);
|
maxY = Math.max(maxY, element.y + element.height);
|
}
|
return {
|
x: minX,
|
y: minY,
|
width: maxX - minX,
|
height: maxY - minY
|
};
|
},
|
fitContent: function () {
|
if (!this.doc || !this.pixiApp) {
|
return;
|
}
|
var contentBounds = this.getElementBounds();
|
if (contentBounds && contentBounds.width > 0 && contentBounds.height > 0) {
|
this.fitRect(contentBounds, this.pixiApp.renderer.width, this.pixiApp.renderer.height);
|
return;
|
}
|
this.fitCanvas();
|
},
|
fitCanvas: function () {
|
if (!this.doc || !this.pixiApp) {
|
return;
|
}
|
var renderer = this.pixiApp.renderer;
|
var target = {
|
x: 0,
|
y: 0,
|
width: Math.max(1, this.doc.canvasWidth),
|
height: Math.max(1, this.doc.canvasHeight)
|
};
|
this.fitRect(target, renderer.width, renderer.height);
|
},
|
fitSelection: function () {
|
if (!this.selectedIds.length || !this.pixiApp) {
|
return;
|
}
|
var bounds = this.getElementBounds(this.selectedIds);
|
if (!bounds) {
|
return;
|
}
|
this.fitRect(bounds, this.pixiApp.renderer.width, this.pixiApp.renderer.height);
|
},
|
fitRect: function (rect, viewportWidth, viewportHeight) {
|
var padding = 80;
|
var scale = Math.min(
|
(viewportWidth - padding * 2) / Math.max(rect.width, 1),
|
(viewportHeight - padding * 2) / Math.max(rect.height, 1)
|
);
|
scale = clamp(scale, 0.06, 4);
|
this.camera.scale = scale;
|
this.camera.x = Math.round((viewportWidth - rect.width * scale) / 2 - rect.x * scale);
|
this.camera.y = Math.round((viewportHeight - rect.height * scale) / 2 - rect.y * scale);
|
this.viewZoom = scale;
|
this.markGridSceneDirty();
|
this.markStaticSceneDirty();
|
this.scheduleRender();
|
},
|
resetView: function () {
|
this.fitCanvas();
|
},
|
getVisibleWorldRect: function () {
|
if (!this.pixiApp) {
|
return {
|
x: 0,
|
y: 0,
|
width: 0,
|
height: 0
|
};
|
}
|
return {
|
x: (-this.camera.x) / this.camera.scale,
|
y: (-this.camera.y) / this.camera.scale,
|
width: this.pixiApp.renderer.width / this.camera.scale,
|
height: this.pixiApp.renderer.height / this.camera.scale
|
};
|
},
|
getVisibleCanvasRect: function () {
|
if (!this.doc) {
|
return {
|
x: 0,
|
y: 0,
|
width: 0,
|
height: 0
|
};
|
}
|
var visible = this.getVisibleWorldRect();
|
var left = clamp(visible.x, 0, this.doc.canvasWidth);
|
var top = clamp(visible.y, 0, this.doc.canvasHeight);
|
var right = clamp(visible.x + visible.width, 0, this.doc.canvasWidth);
|
var bottom = clamp(visible.y + visible.height, 0, this.doc.canvasHeight);
|
return {
|
x: left,
|
y: top,
|
width: Math.max(0, right - left),
|
height: Math.max(0, bottom - top)
|
};
|
},
|
getWorldRectWithPadding: function (screenPadding) {
|
if (!this.doc) {
|
return {
|
x: 0,
|
y: 0,
|
width: 0,
|
height: 0
|
};
|
}
|
var visible = this.getVisibleWorldRect();
|
var padding = Math.max(screenPadding / this.camera.scale, 24);
|
var left = Math.max(0, visible.x - padding);
|
var top = Math.max(0, visible.y - padding);
|
var right = Math.min(this.doc.canvasWidth, visible.x + visible.width + padding);
|
var bottom = Math.min(this.doc.canvasHeight, visible.y + visible.height + padding);
|
return {
|
x: left,
|
y: top,
|
width: Math.max(0, right - left),
|
height: Math.max(0, bottom - top)
|
};
|
},
|
worldRectContains: function (outer, inner) {
|
if (!outer || !inner) {
|
return false;
|
}
|
return inner.x >= outer.x - COORD_EPSILON
|
&& inner.y >= outer.y - COORD_EPSILON
|
&& inner.x + inner.width <= outer.x + outer.width + COORD_EPSILON
|
&& inner.y + inner.height <= outer.y + outer.height + COORD_EPSILON;
|
},
|
getGridRenderKey: function () {
|
var minorStep = this.camera.scale > 1.5 ? 50 : (this.camera.scale > 0.45 ? 100 : 200);
|
return minorStep + '|' + (Math.round(this.camera.scale * 8) / 8);
|
},
|
getStaticRenderKey: function () {
|
return (this.camera.scale >= 0.85 ? 'round' : 'flat') + '|' + (Math.round(this.camera.scale * 8) / 8);
|
},
|
scheduleRender: function () {
|
if (this.renderQueued) {
|
return;
|
}
|
this.renderQueued = true;
|
window.requestAnimationFrame(function () {
|
this.renderQueued = false;
|
this.renderScene();
|
}.bind(this));
|
},
|
renderScene: function () {
|
if (!this.pixiApp || !this.doc) {
|
return;
|
}
|
this.mapRoot.position.set(this.camera.x, this.camera.y);
|
this.mapRoot.scale.set(this.camera.scale, this.camera.scale);
|
this.viewZoom = this.camera.scale;
|
var visible = this.getVisibleCanvasRect();
|
var viewportSettled = !this.isZooming && !this.isPanning && !(this.interactionState && this.interactionState.type === 'pan');
|
var gridKeyChanged = this.gridRenderKey !== this.getGridRenderKey();
|
if (this.gridSceneDirty || !this.gridRenderRect || (viewportSettled && gridKeyChanged) || (viewportSettled && !this.worldRectContains(this.gridRenderRect, visible))) {
|
this.renderGrid(this.getWorldRectWithPadding(STATIC_VIEW_PADDING));
|
this.gridSceneDirty = false;
|
}
|
var excludedKey = this.selectionKey(this.getStaticExcludedIds());
|
var staticKeyChanged = this.staticRenderKey !== this.getStaticRenderKey();
|
if (this.staticSceneDirty || !this.staticRenderRect || (viewportSettled && staticKeyChanged)
|
|| this.staticExcludedKey !== excludedKey || (viewportSettled && !this.worldRectContains(this.staticRenderRect, visible))) {
|
this.renderStaticElements(this.getWorldRectWithPadding(STATIC_VIEW_PADDING), excludedKey);
|
this.staticSceneDirty = false;
|
}
|
this.renderActiveElements();
|
this.renderLabels();
|
this.renderHover();
|
this.renderSelection();
|
this.renderGuide();
|
this.updateCursor();
|
},
|
getStaticExcludedIds: function () {
|
if (!this.interactionState) {
|
return [];
|
}
|
if (this.interactionState.type === 'move' && this.selectedIds.length) {
|
return this.selectedIds.slice();
|
}
|
if (this.interactionState.type === 'resize' && this.interactionState.elementId) {
|
return [this.interactionState.elementId];
|
}
|
return [];
|
},
|
getRenderableElements: function (excludeIds, renderRect) {
|
if (!this.doc) {
|
return [];
|
}
|
var rect = renderRect || this.getWorldRectWithPadding(STATIC_VIEW_PADDING);
|
var candidates = this.querySpatialCandidates(rect, 0, excludeIds);
|
var result = [];
|
for (var i = 0; i < candidates.length; i++) {
|
if (rectIntersects(rect, candidates[i])) {
|
result.push(candidates[i]);
|
}
|
}
|
return result;
|
},
|
renderGrid: function (renderRect) {
|
if (!this.gridLayer || !this.doc) {
|
return;
|
}
|
var visible = renderRect || this.getVisibleWorldRect();
|
var width = this.doc.canvasWidth;
|
var height = this.doc.canvasHeight;
|
var minorStep = this.camera.scale > 1.5 ? 50 : (this.camera.scale > 0.45 ? 100 : 200);
|
var majorStep = minorStep * 5;
|
var lineWidth = 1 / this.camera.scale;
|
var xStart = Math.max(0, Math.floor(visible.x / minorStep) * minorStep);
|
var yStart = Math.max(0, Math.floor(visible.y / minorStep) * minorStep);
|
var xEnd = Math.min(width, visible.x + visible.width);
|
var yEnd = Math.min(height, visible.y + visible.height);
|
|
this.gridLayer.clear();
|
this.gridLayer.beginFill(0xfafcff, 1);
|
this.gridLayer.drawRect(0, 0, width, height);
|
this.gridLayer.endFill();
|
|
this.gridLayer.lineStyle(lineWidth, 0xdbe4ee, 1);
|
this.gridLayer.drawRect(0, 0, width, height);
|
|
for (var x = xStart; x <= xEnd; x += minorStep) {
|
var colorX = (x % majorStep === 0) ? 0xc9d7e6 : 0xe4ebf3;
|
this.gridLayer.lineStyle(lineWidth, colorX, x % majorStep === 0 ? 0.95 : 0.75);
|
this.gridLayer.moveTo(x, 0);
|
this.gridLayer.lineTo(x, height);
|
}
|
for (var y = yStart; y <= yEnd; y += minorStep) {
|
var colorY = (y % majorStep === 0) ? 0xc9d7e6 : 0xe4ebf3;
|
this.gridLayer.lineStyle(lineWidth, colorY, y % majorStep === 0 ? 0.95 : 0.75);
|
this.gridLayer.moveTo(0, y);
|
this.gridLayer.lineTo(width, y);
|
}
|
this.gridRenderRect = {
|
x: visible.x,
|
y: visible.y,
|
width: visible.width,
|
height: visible.height
|
};
|
this.gridRenderKey = this.getGridRenderKey();
|
},
|
drawGridPatch: function (rects, layer) {
|
if (!this.doc || !layer || !rects || !rects.length) {
|
return;
|
}
|
var width = this.doc.canvasWidth;
|
var height = this.doc.canvasHeight;
|
var minorStep = this.camera.scale > 1.5 ? 50 : (this.camera.scale > 0.45 ? 100 : 200);
|
var majorStep = minorStep * 5;
|
var lineWidth = 1 / this.camera.scale;
|
for (var i = 0; i < rects.length; i++) {
|
var rect = rects[i];
|
var left = clamp(rect.x - lineWidth, 0, width);
|
var top = clamp(rect.y - lineWidth, 0, height);
|
var right = clamp(rect.x + rect.width + lineWidth, 0, width);
|
var bottom = clamp(rect.y + rect.height + lineWidth, 0, height);
|
if (right <= left || bottom <= top) {
|
continue;
|
}
|
layer.lineStyle(0, 0, 0, 0);
|
layer.beginFill(0xfafcff, 1);
|
layer.drawRect(left, top, right - left, bottom - top);
|
layer.endFill();
|
if (right - left < minorStep || bottom - top < minorStep) {
|
continue;
|
}
|
var xStart = Math.floor(left / minorStep) * minorStep;
|
var yStart = Math.floor(top / minorStep) * minorStep;
|
for (var x = xStart; x <= right; x += minorStep) {
|
if (x < left || x > right) {
|
continue;
|
}
|
var colorX = (x % majorStep === 0) ? 0xc9d7e6 : 0xe4ebf3;
|
layer.lineStyle(lineWidth, colorX, x % majorStep === 0 ? 0.95 : 0.75);
|
layer.moveTo(x, top);
|
layer.lineTo(x, bottom);
|
}
|
for (var y = yStart; y <= bottom; y += minorStep) {
|
if (y < top || y > bottom) {
|
continue;
|
}
|
var colorY = (y % majorStep === 0) ? 0xc9d7e6 : 0xe4ebf3;
|
layer.lineStyle(lineWidth, colorY, y % majorStep === 0 ? 0.95 : 0.75);
|
layer.moveTo(left, y);
|
layer.lineTo(right, y);
|
}
|
}
|
},
|
drawPatchObjects: function (rects, excludeIds) {
|
if (!rects || !rects.length || !this.patchObjectLayer) {
|
return;
|
}
|
var seen = {};
|
var elements = [];
|
for (var i = 0; i < rects.length; i++) {
|
var candidates = this.querySpatialCandidates(rects[i], 0, excludeIds);
|
for (var j = 0; j < candidates.length; j++) {
|
var item = candidates[j];
|
if (!seen[item.id] && rectIntersects(rects[i], item)) {
|
seen[item.id] = true;
|
elements.push(item);
|
}
|
}
|
}
|
if (!elements.length) {
|
return;
|
}
|
this.drawElementsToLayers(elements, this.patchObjectLayer, this.patchObjectLayer);
|
},
|
drawElementsToLayers: function (elements, trackLayer, nodeLayer) {
|
var lineWidth = 1 / this.camera.scale;
|
var useRounded = this.camera.scale >= 0.85;
|
var radius = Math.max(6 / this.camera.scale, 2);
|
var buckets = {};
|
for (var i = 0; i < elements.length; i++) {
|
var element = elements[i];
|
var bucketKey = (element.type === 'shelf' ? 'node' : 'track') + ':' + element.type;
|
if (!buckets[bucketKey]) {
|
buckets[bucketKey] = [];
|
}
|
buckets[bucketKey].push(element);
|
}
|
for (var bucketKey in buckets) {
|
if (!buckets.hasOwnProperty(bucketKey)) {
|
continue;
|
}
|
var parts = bucketKey.split(':');
|
var type = parts[1];
|
var meta = getTypeMeta(type);
|
var layer = parts[0] === 'node' ? nodeLayer : trackLayer;
|
layer.lineStyle(lineWidth, meta.border, 1);
|
layer.beginFill(meta.fill, 0.92);
|
var bucket = buckets[bucketKey];
|
for (var j = 0; j < bucket.length; j++) {
|
var item = bucket[j];
|
if (useRounded) {
|
layer.drawRoundedRect(item.x, item.y, item.width, item.height, radius);
|
} else {
|
layer.drawRect(item.x, item.y, item.width, item.height);
|
}
|
}
|
layer.endFill();
|
}
|
},
|
ensureStaticSprite: function (poolName, index) {
|
var pool = poolName === 'node' ? this.staticNodeSpritePool : this.staticTrackSpritePool;
|
var layer = poolName === 'node' ? this.staticNodeSpriteLayer : this.staticTrackSpriteLayer;
|
if (pool[index]) {
|
return pool[index];
|
}
|
var sprite = new PIXI.Sprite(PIXI.Texture.WHITE);
|
sprite.position.set(0, 0);
|
sprite.anchor.set(0, 0);
|
sprite.visible = false;
|
sprite.alpha = 0;
|
layer.addChild(sprite);
|
pool[index] = sprite;
|
return sprite;
|
},
|
hideUnusedStaticSprites: function (pool, fromIndex) {
|
for (var i = fromIndex; i < pool.length; i++) {
|
pool[i].visible = false;
|
pool[i].alpha = 0;
|
pool[i].width = 0;
|
pool[i].height = 0;
|
pool[i].position.set(-99999, -99999);
|
}
|
},
|
pruneStaticSpritePool: function (poolName, keepCount, slack) {
|
var pool = poolName === 'node' ? this.staticNodeSpritePool : this.staticTrackSpritePool;
|
var layer = poolName === 'node' ? this.staticNodeSpriteLayer : this.staticTrackSpriteLayer;
|
var target = Math.max(0, keepCount + Math.max(0, slack || 0));
|
if (!pool || !layer || pool.length <= target) {
|
return;
|
}
|
for (var i = pool.length - 1; i >= target; i--) {
|
var sprite = pool[i];
|
layer.removeChild(sprite);
|
if (sprite && sprite.destroy) {
|
sprite.destroy();
|
}
|
pool.pop();
|
}
|
},
|
drawElementsToSpriteLayers: function (elements) {
|
var trackCount = 0;
|
var nodeCount = 0;
|
for (var i = 0; i < elements.length; i++) {
|
var item = elements[i];
|
var meta = getTypeMeta(item.type);
|
var poolName = item.type === 'shelf' ? 'node' : 'track';
|
var sprite = this.ensureStaticSprite(poolName, poolName === 'node' ? nodeCount : trackCount);
|
sprite.visible = true;
|
sprite.position.set(item.x, item.y);
|
sprite.width = item.width;
|
sprite.height = item.height;
|
sprite.tint = meta.fill;
|
sprite.alpha = 0.92;
|
if (poolName === 'node') {
|
nodeCount += 1;
|
} else {
|
trackCount += 1;
|
}
|
}
|
this.hideUnusedStaticSprites(this.staticTrackSpritePool, trackCount);
|
this.hideUnusedStaticSprites(this.staticNodeSpritePool, nodeCount);
|
if (this.camera.scale < DENSE_SIMPLIFY_SCALE_THRESHOLD) {
|
this.pruneStaticSpritePool('track', trackCount, STATIC_SPRITE_POOL_SLACK);
|
this.pruneStaticSpritePool('node', nodeCount, STATIC_SPRITE_POOL_SLACK);
|
}
|
},
|
simplifyRenderableElements: function (elements) {
|
if (!elements || elements.length < 2) {
|
return elements || [];
|
}
|
var sorted = elements.slice().sort(function (a, b) {
|
if (a.type !== b.type) {
|
return a.type < b.type ? -1 : 1;
|
}
|
if (Math.abs(a.y - b.y) > COORD_EPSILON) {
|
return a.y - b.y;
|
}
|
if (Math.abs(a.height - b.height) > COORD_EPSILON) {
|
return a.height - b.height;
|
}
|
return a.x - b.x;
|
});
|
var result = [];
|
var current = null;
|
for (var i = 0; i < sorted.length; i++) {
|
var item = sorted[i];
|
if (!current) {
|
current = {
|
type: item.type,
|
x: item.x,
|
y: item.y,
|
width: item.width,
|
height: item.height
|
};
|
continue;
|
}
|
var currentRight = current.x + current.width;
|
var itemRight = item.x + item.width;
|
var sameBand = current.type === item.type
|
&& Math.abs(current.y - item.y) <= 0.5
|
&& Math.abs(current.height - item.height) <= 0.5;
|
var joinable = item.x <= currentRight + 0.5;
|
if (sameBand && joinable) {
|
current.width = roundCoord(Math.max(currentRight, itemRight) - current.x);
|
} else {
|
result.push(current);
|
current = {
|
type: item.type,
|
x: item.x,
|
y: item.y,
|
width: item.width,
|
height: item.height
|
};
|
}
|
}
|
if (current) {
|
result.push(current);
|
}
|
return result;
|
},
|
renderStaticElements: function (renderRect, excludedKey) {
|
if (!this.doc) {
|
return;
|
}
|
this.trackLayer.clear();
|
this.nodeLayer.clear();
|
this.eraseLayer.clear();
|
this.patchObjectLayer.clear();
|
var renderableElements = this.getRenderableElements(this.getStaticExcludedIds(), renderRect);
|
var useSpriteMode = this.camera.scale < STATIC_SPRITE_SCALE_THRESHOLD;
|
var shouldSimplify = this.camera.scale < STATIC_SIMPLIFY_SCALE_THRESHOLD
|
|| (this.camera.scale < DENSE_SIMPLIFY_SCALE_THRESHOLD && renderableElements.length > DENSE_SIMPLIFY_ELEMENT_THRESHOLD);
|
this.staticTrackSpriteLayer.visible = useSpriteMode;
|
this.staticNodeSpriteLayer.visible = useSpriteMode;
|
this.trackLayer.visible = !useSpriteMode;
|
this.nodeLayer.visible = !useSpriteMode;
|
if (useSpriteMode) {
|
if (shouldSimplify) {
|
renderableElements = this.simplifyRenderableElements(renderableElements);
|
}
|
this.drawElementsToSpriteLayers(renderableElements);
|
} else {
|
this.hideUnusedStaticSprites(this.staticTrackSpritePool, 0);
|
this.hideUnusedStaticSprites(this.staticNodeSpritePool, 0);
|
this.drawElementsToLayers(renderableElements, this.trackLayer, this.nodeLayer);
|
}
|
var rect = renderRect || this.getWorldRectWithPadding(STATIC_VIEW_PADDING);
|
this.staticRenderRect = {
|
x: rect.x,
|
y: rect.y,
|
width: rect.width,
|
height: rect.height
|
};
|
this.staticRenderKey = this.getStaticRenderKey();
|
this.staticExcludedKey = excludedKey != null ? excludedKey : this.selectionKey(this.getStaticExcludedIds());
|
this.pendingStaticCommit = null;
|
},
|
renderActiveElements: function () {
|
this.activeLayer.clear();
|
this.eraseLayer.clear();
|
this.patchObjectLayer.clear();
|
var activeIds = this.getStaticExcludedIds();
|
if (!activeIds.length) {
|
return;
|
}
|
var activeElements = [];
|
for (var idx = 0; idx < activeIds.length; idx++) {
|
var element = this.findElementById(activeIds[idx]);
|
if (element) {
|
activeElements.push(element);
|
}
|
}
|
if (!activeElements.length) {
|
return;
|
}
|
this.drawElementsToLayers(activeElements, this.activeLayer, this.activeLayer);
|
},
|
getLabelText: function (element) {
|
var meta = getTypeMeta(element.type);
|
var value = safeParseJson(element.value);
|
if (element.type === 'devp' && value) {
|
var station = value.stationId != null ? String(value.stationId) : '';
|
var arrows = formatDirectionArrows(value.direction);
|
if (station && arrows) {
|
return element.height > element.width * 1.15 ? (station + '\n' + arrows) : (station + ' ' + arrows);
|
}
|
if (station) {
|
return station;
|
}
|
if (arrows) {
|
return arrows;
|
}
|
return meta.shortLabel;
|
}
|
if ((element.type === 'crn' || element.type === 'dualCrn' || element.type === 'rgv') && value) {
|
if (value.deviceNo != null) {
|
return meta.shortLabel + ' ' + value.deviceNo;
|
}
|
if (value.crnNo != null) {
|
return meta.shortLabel + ' ' + value.crnNo;
|
}
|
if (value.rgvNo != null) {
|
return meta.shortLabel + ' ' + value.rgvNo;
|
}
|
}
|
if (element.value && element.value.length <= 18 && element.value.indexOf('{') !== 0) {
|
return element.value;
|
}
|
return meta.shortLabel;
|
},
|
ensureLabelSprite: function (index) {
|
if (this.labelPool[index]) {
|
return this.labelPool[index];
|
}
|
var label = new PIXI.Text('', {
|
fontFamily: 'Avenir Next, PingFang SC, Microsoft YaHei, sans-serif',
|
fontSize: 12,
|
fontWeight: '600',
|
fill: 0x223448,
|
align: 'center'
|
});
|
label.anchor.set(0.5);
|
this.labelLayer.addChild(label);
|
this.labelPool[index] = label;
|
return label;
|
},
|
getLabelRenderBudget: function () {
|
if (!this.pixiApp || !this.pixiApp.renderer) {
|
return MIN_LABEL_COUNT;
|
}
|
var renderer = this.pixiApp.renderer;
|
var viewportArea = renderer.width * renderer.height;
|
return clamp(Math.round(viewportArea / 12000), MIN_LABEL_COUNT, MAX_LABEL_COUNT);
|
},
|
getLabelMinScreenWidth: function (text) {
|
var lines = String(text || '').split('\n');
|
var length = 0;
|
for (var i = 0; i < lines.length; i++) {
|
length = Math.max(length, String(lines[i] || '').trim().length);
|
}
|
if (length <= 4) {
|
return 26;
|
}
|
if (length <= 8) {
|
return 40;
|
}
|
if (length <= 12) {
|
return 52;
|
}
|
return 64;
|
},
|
getLabelMinScreenHeight: function (text) {
|
var lines = String(text || '').split('\n');
|
var length = 0;
|
for (var i = 0; i < lines.length; i++) {
|
length = Math.max(length, String(lines[i] || '').trim().length);
|
}
|
var lineHeight = length <= 4 ? 14 : 18;
|
return lineHeight * Math.max(lines.length, 1);
|
},
|
renderLabels: function () {
|
if (!this.doc) {
|
return;
|
}
|
if (!SHOW_CANVAS_ELEMENT_LABELS) {
|
this.labelLayer.visible = false;
|
for (var hiddenIdx = 0; hiddenIdx < this.labelPool.length; hiddenIdx++) {
|
this.labelPool[hiddenIdx].visible = false;
|
}
|
return;
|
}
|
var capability = this.ensureLabelCapability();
|
if (capability.maxWidth * this.camera.scale < ABS_MIN_LABEL_SCREEN_WIDTH
|
|| capability.maxHeight * this.camera.scale < ABS_MIN_LABEL_SCREEN_HEIGHT) {
|
this.labelLayer.visible = false;
|
return;
|
}
|
if (this.isZooming || this.isPanning || this.camera.scale < MIN_LABEL_SCALE
|
|| (this.interactionState && (this.interactionState.type === 'move' || this.interactionState.type === 'resize' || this.interactionState.type === 'pan'))) {
|
this.labelLayer.visible = false;
|
return;
|
}
|
this.labelLayer.visible = true;
|
var visible = this.getVisibleWorldRect();
|
var elements = this.querySpatialCandidates(visible, 0, []);
|
if (elements.length > DENSE_LABEL_HIDE_ELEMENT_THRESHOLD && this.camera.scale < DENSE_LABEL_HIDE_SCALE_THRESHOLD) {
|
this.labelLayer.visible = false;
|
return;
|
}
|
var hasRoomForAnyLabel = false;
|
for (var roomIdx = 0; roomIdx < elements.length; roomIdx++) {
|
var candidate = elements[roomIdx];
|
if (candidate.width * this.camera.scale >= ABS_MIN_LABEL_SCREEN_WIDTH
|
&& candidate.height * this.camera.scale >= ABS_MIN_LABEL_SCREEN_HEIGHT) {
|
hasRoomForAnyLabel = true;
|
break;
|
}
|
}
|
if (!hasRoomForAnyLabel) {
|
this.labelLayer.visible = false;
|
return;
|
}
|
var visibleElements = [];
|
for (var i = 0; i < elements.length; i++) {
|
var element = elements[i];
|
var text = this.getLabelText(element);
|
if (!text) {
|
continue;
|
}
|
if (!rectIntersects(visible, element)) {
|
continue;
|
}
|
if (element.width * this.camera.scale < this.getLabelMinScreenWidth(text) || element.height * this.camera.scale < this.getLabelMinScreenHeight(text)) {
|
continue;
|
}
|
visibleElements.push({
|
element: element,
|
text: text
|
});
|
}
|
visibleElements.sort(function (a, b) {
|
return (b.element.width * b.element.height) - (a.element.width * a.element.height);
|
});
|
var labelBudget = this.getLabelRenderBudget();
|
if (visibleElements.length > labelBudget) {
|
visibleElements = visibleElements.slice(0, labelBudget);
|
}
|
for (var j = 0; j < visibleElements.length; j++) {
|
var item = visibleElements[j].element;
|
var label = this.ensureLabelSprite(j);
|
label.visible = true;
|
label.text = visibleElements[j].text;
|
label.position.set(item.x + item.width / 2, item.y + item.height / 2);
|
label.scale.set(1 / this.camera.scale, 1 / this.camera.scale);
|
label.alpha = this.selectedIds.indexOf(item.id) >= 0 ? 1 : 0.88;
|
}
|
for (var k = visibleElements.length; k < this.labelPool.length; k++) {
|
this.labelPool[k].visible = false;
|
}
|
},
|
renderHover: function () {
|
this.hoverLayer.clear();
|
if (this.interactionState || !this.hoverElementId || this.selectedIds.indexOf(this.hoverElementId) >= 0) {
|
return;
|
}
|
var element = this.findElementById(this.hoverElementId);
|
if (!element) {
|
return;
|
}
|
var lineWidth = 2 / this.camera.scale;
|
this.hoverLayer.lineStyle(lineWidth, 0x2f79d6, 0.95);
|
this.hoverLayer.drawRoundedRect(element.x, element.y, element.width, element.height, Math.max(6 / this.camera.scale, 2));
|
},
|
renderSelection: function () {
|
this.selectionLayer.clear();
|
if (!this.selectedIds.length || (this.interactionState && (this.interactionState.type === 'move' || this.interactionState.type === 'resize'))) {
|
return;
|
}
|
var elements = this.getSelectedElements();
|
var lineWidth = 2 / this.camera.scale;
|
for (var i = 0; i < elements.length; i++) {
|
var element = elements[i];
|
this.selectionLayer.lineStyle(lineWidth, 0x2568b8, 1);
|
this.selectionLayer.beginFill(0x2f79d6, 0.07);
|
this.selectionLayer.drawRoundedRect(element.x, element.y, element.width, element.height, Math.max(6 / this.camera.scale, 2));
|
this.selectionLayer.endFill();
|
}
|
if (elements.length !== 1) {
|
return;
|
}
|
var handleSize = HANDLE_SCREEN_SIZE / this.camera.scale;
|
var handlePositions = this.getHandlePositions(elements[0]);
|
this.selectionLayer.lineStyle(1 / this.camera.scale, 0x1d5ea9, 1);
|
this.selectionLayer.beginFill(0xffffff, 1);
|
for (var key in handlePositions) {
|
if (!handlePositions.hasOwnProperty(key)) {
|
continue;
|
}
|
var pos = handlePositions[key];
|
this.selectionLayer.drawRect(pos.x - handleSize / 2, pos.y - handleSize / 2, handleSize, handleSize);
|
}
|
this.selectionLayer.endFill();
|
},
|
renderGuide: function () {
|
this.guideLayer.clear();
|
if (this.guideText) {
|
this.guideText.visible = false;
|
}
|
if (!this.interactionState) {
|
return;
|
}
|
var state = this.interactionState;
|
if (state.type === 'draw' && state.rect && state.rect.width > 0 && state.rect.height > 0) {
|
var drawMeta = getTypeMeta(state.elementType);
|
this.guideLayer.lineStyle(2 / this.camera.scale, drawMeta.border, 0.95);
|
this.guideLayer.beginFill(drawMeta.fill, 0.18);
|
this.guideLayer.drawRoundedRect(state.rect.x, state.rect.y, state.rect.width, state.rect.height, Math.max(6 / this.camera.scale, 2));
|
this.guideLayer.endFill();
|
return;
|
}
|
if (state.type === 'array' && state.template) {
|
var previewItems = state.previewItems || [];
|
var arrayMeta = getTypeMeta(state.template.type);
|
var lineWidth = 2 / this.camera.scale;
|
var templateCenterX = state.template.x + state.template.width / 2;
|
var templateCenterY = state.template.y + state.template.height / 2;
|
this.guideLayer.lineStyle(lineWidth, arrayMeta.border, 0.9);
|
this.guideLayer.moveTo(templateCenterX, templateCenterY);
|
this.guideLayer.lineTo(state.currentWorld.x, state.currentWorld.y);
|
if (!previewItems.length) {
|
return;
|
}
|
this.guideLayer.lineStyle(1 / this.camera.scale, arrayMeta.border, 0.8);
|
this.guideLayer.beginFill(arrayMeta.fill, 0.2);
|
for (var previewIndex = 0; previewIndex < previewItems.length; previewIndex++) {
|
var preview = previewItems[previewIndex];
|
this.guideLayer.drawRoundedRect(preview.x, preview.y, preview.width, preview.height, Math.max(6 / this.camera.scale, 2));
|
}
|
this.guideLayer.endFill();
|
if (this.guideText) {
|
this.guideText.text = '将生成 ' + previewItems.length + ' 个';
|
this.guideText.position.set(state.currentWorld.x, state.currentWorld.y - 10 / this.camera.scale);
|
this.guideText.scale.set(1 / this.camera.scale);
|
this.guideText.visible = true;
|
}
|
return;
|
}
|
if (state.type === 'marquee') {
|
var rect = buildRectFromPoints(state.startWorld, state.currentWorld);
|
if (rect.width <= 0 || rect.height <= 0) {
|
return;
|
}
|
this.guideLayer.lineStyle(2 / this.camera.scale, 0x2f79d6, 0.92);
|
this.guideLayer.beginFill(0x2f79d6, 0.06);
|
this.guideLayer.drawRect(rect.x, rect.y, rect.width, rect.height);
|
this.guideLayer.endFill();
|
}
|
},
|
pointerToWorld: function (event) {
|
var rect = this.pixiApp.view.getBoundingClientRect();
|
var screenX = event.clientX - rect.left;
|
var screenY = event.clientY - rect.top;
|
return {
|
screenX: screenX,
|
screenY: screenY,
|
x: roundCoord((screenX - this.camera.x) / this.camera.scale),
|
y: roundCoord((screenY - this.camera.y) / this.camera.scale)
|
};
|
},
|
isWithinCanvas: function (rect) {
|
if (!this.doc) {
|
return false;
|
}
|
return rect.x >= -COORD_EPSILON && rect.y >= -COORD_EPSILON
|
&& rect.x + rect.width <= this.doc.canvasWidth + COORD_EPSILON
|
&& rect.y + rect.height <= this.doc.canvasHeight + COORD_EPSILON;
|
},
|
canPlaceElements: function (elements, excludeIds) {
|
excludeIds = excludeIds || [];
|
for (var i = 0; i < elements.length; i++) {
|
if (!this.isWithinCanvas(elements[i])) {
|
return false;
|
}
|
if (this.hasOverlap(elements[i], excludeIds.concat([elements[i].id]))) {
|
return false;
|
}
|
}
|
return true;
|
},
|
hasOverlap: function (candidate, excludeIds) {
|
if (!this.doc) {
|
return false;
|
}
|
var elements = this.querySpatialCandidates(candidate, COORD_EPSILON, excludeIds);
|
for (var i = 0; i < elements.length; i++) {
|
var item = elements[i];
|
if (rectsOverlap(candidate, item)) {
|
return true;
|
}
|
}
|
return false;
|
},
|
snapToleranceWorld: function () {
|
return Math.max(1, EDGE_SNAP_SCREEN_TOLERANCE / this.camera.scale);
|
},
|
collectMoveSnap: function (baseItems, dx, dy, excludeIds) {
|
if (!this.doc || !baseItems || !baseItems.length) {
|
return { dx: 0, dy: 0 };
|
}
|
var tolerance = this.snapToleranceWorld();
|
var bestDx = null;
|
var bestDy = null;
|
for (var i = 0; i < baseItems.length; i++) {
|
var moving = baseItems[i];
|
var movedLeft = moving.x + dx;
|
var movedRight = movedLeft + moving.width;
|
var movedTop = moving.y + dy;
|
var movedBottom = movedTop + moving.height;
|
var candidates = this.querySpatialCandidates({
|
x: movedLeft,
|
y: movedTop,
|
width: moving.width,
|
height: moving.height
|
}, tolerance, excludeIds);
|
for (var j = 0; j < candidates.length; j++) {
|
var other = candidates[j];
|
var otherLeft = other.x;
|
var otherRight = other.x + other.width;
|
var otherTop = other.y;
|
var otherBottom = other.y + other.height;
|
if (rangesNearOrOverlap(movedTop, movedBottom, otherTop, otherBottom, tolerance)) {
|
var horizontalCandidates = [
|
otherLeft - movedRight,
|
otherRight - movedLeft,
|
otherLeft - movedLeft,
|
otherRight - movedRight
|
];
|
for (var hx = 0; hx < horizontalCandidates.length; hx++) {
|
var deltaX = horizontalCandidates[hx];
|
if (Math.abs(deltaX) <= tolerance && (bestDx === null || Math.abs(deltaX) < Math.abs(bestDx))) {
|
bestDx = deltaX;
|
}
|
}
|
}
|
if (rangesNearOrOverlap(movedLeft, movedRight, otherLeft, otherRight, tolerance)) {
|
var verticalCandidates = [
|
otherTop - movedBottom,
|
otherBottom - movedTop,
|
otherTop - movedTop,
|
otherBottom - movedBottom
|
];
|
for (var vy = 0; vy < verticalCandidates.length; vy++) {
|
var deltaY = verticalCandidates[vy];
|
if (Math.abs(deltaY) <= tolerance && (bestDy === null || Math.abs(deltaY) < Math.abs(bestDy))) {
|
bestDy = deltaY;
|
}
|
}
|
}
|
}
|
}
|
return {
|
dx: bestDx == null ? 0 : bestDx,
|
dy: bestDy == null ? 0 : bestDy
|
};
|
},
|
collectResizeSnap: function (rect, handle, excludeIds) {
|
if (!this.doc || !rect) {
|
return null;
|
}
|
var tolerance = this.snapToleranceWorld();
|
var left = rect.x;
|
var right = rect.x + rect.width;
|
var top = rect.y;
|
var bottom = rect.y + rect.height;
|
var bestLeft = null;
|
var bestRight = null;
|
var bestTop = null;
|
var bestBottom = null;
|
function pickBest(current, candidate) {
|
if (candidate == null) {
|
return current;
|
}
|
if (current == null || Math.abs(candidate) < Math.abs(current)) {
|
return candidate;
|
}
|
return current;
|
}
|
if (handle.indexOf('w') >= 0) {
|
bestLeft = pickBest(bestLeft, -left);
|
}
|
if (handle.indexOf('e') >= 0) {
|
bestRight = pickBest(bestRight, this.doc.canvasWidth - right);
|
}
|
if (handle.indexOf('n') >= 0) {
|
bestTop = pickBest(bestTop, -top);
|
}
|
if (handle.indexOf('s') >= 0) {
|
bestBottom = pickBest(bestBottom, this.doc.canvasHeight - bottom);
|
}
|
var elements = this.querySpatialCandidates(rect, tolerance, excludeIds);
|
for (var i = 0; i < elements.length; i++) {
|
var other = elements[i];
|
var otherLeft = other.x;
|
var otherRight = other.x + other.width;
|
var otherTop = other.y;
|
var otherBottom = other.y + other.height;
|
if (rangesNearOrOverlap(top, bottom, otherTop, otherBottom, tolerance)) {
|
if (handle.indexOf('w') >= 0) {
|
bestLeft = pickBest(bestLeft, otherLeft - left);
|
bestLeft = pickBest(bestLeft, otherRight - left);
|
}
|
if (handle.indexOf('e') >= 0) {
|
bestRight = pickBest(bestRight, otherLeft - right);
|
bestRight = pickBest(bestRight, otherRight - right);
|
}
|
}
|
if (rangesNearOrOverlap(left, right, otherLeft, otherRight, tolerance)) {
|
if (handle.indexOf('n') >= 0) {
|
bestTop = pickBest(bestTop, otherTop - top);
|
bestTop = pickBest(bestTop, otherBottom - top);
|
}
|
if (handle.indexOf('s') >= 0) {
|
bestBottom = pickBest(bestBottom, otherTop - bottom);
|
bestBottom = pickBest(bestBottom, otherBottom - bottom);
|
}
|
}
|
}
|
if (bestLeft != null && Math.abs(bestLeft) > tolerance) {
|
bestLeft = null;
|
}
|
if (bestRight != null && Math.abs(bestRight) > tolerance) {
|
bestRight = null;
|
}
|
if (bestTop != null && Math.abs(bestTop) > tolerance) {
|
bestTop = null;
|
}
|
if (bestBottom != null && Math.abs(bestBottom) > tolerance) {
|
bestBottom = null;
|
}
|
return {
|
left: bestLeft,
|
right: bestRight,
|
top: bestTop,
|
bottom: bestBottom
|
};
|
},
|
hitTestElement: function (point) {
|
if (!this.doc) {
|
return null;
|
}
|
var candidates = this.querySpatialCandidates({
|
x: point.x,
|
y: point.y,
|
width: 0,
|
height: 0
|
}, 0, []);
|
if (!candidates.length) {
|
return null;
|
}
|
var candidateMap = {};
|
for (var c = 0; c < candidates.length; c++) {
|
candidateMap[candidates[c].id] = true;
|
}
|
var elements = this.doc.elements || [];
|
for (var i = elements.length - 1; i >= 0; i--) {
|
var element = elements[i];
|
if (!candidateMap[element.id]) {
|
continue;
|
}
|
if (point.x >= element.x && point.x <= element.x + element.width
|
&& point.y >= element.y && point.y <= element.y + element.height) {
|
return element;
|
}
|
}
|
return null;
|
},
|
getHandlePositions: function (element) {
|
var x = element.x;
|
var y = element.y;
|
var w = element.width;
|
var h = element.height;
|
var cx = x + w / 2;
|
var cy = y + h / 2;
|
return {
|
nw: { x: x, y: y },
|
n: { x: cx, y: y },
|
ne: { x: x + w, y: y },
|
e: { x: x + w, y: cy },
|
se: { x: x + w, y: y + h },
|
s: { x: cx, y: y + h },
|
sw: { x: x, y: y + h },
|
w: { x: x, y: cy }
|
};
|
},
|
getResizeHandleAt: function (point, element) {
|
var handlePositions = this.getHandlePositions(element);
|
var baseTolerance = HANDLE_SCREEN_SIZE / this.camera.scale;
|
var sizeLimitedTolerance = Math.max(Math.min(element.width, element.height) / 4, 3 / this.camera.scale);
|
var tolerance = Math.min(baseTolerance, sizeLimitedTolerance);
|
var bestHandle = '';
|
var bestDistance = Infinity;
|
for (var key in handlePositions) {
|
if (!handlePositions.hasOwnProperty(key)) {
|
continue;
|
}
|
var pos = handlePositions[key];
|
var dx = Math.abs(point.x - pos.x);
|
var dy = Math.abs(point.y - pos.y);
|
if (dx <= tolerance && dy <= tolerance) {
|
var distance = dx + dy;
|
if (distance < bestDistance) {
|
bestDistance = distance;
|
bestHandle = key;
|
}
|
}
|
}
|
return bestHandle;
|
},
|
cursorForHandle: function (handle) {
|
if (handle === 'nw' || handle === 'se') {
|
return 'nwse-resize';
|
}
|
if (handle === 'ne' || handle === 'sw') {
|
return 'nesw-resize';
|
}
|
if (handle === 'n' || handle === 's') {
|
return 'ns-resize';
|
}
|
if (handle === 'e' || handle === 'w') {
|
return 'ew-resize';
|
}
|
return 'default';
|
},
|
updateCursor: function () {
|
if (!this.pixiApp) {
|
return;
|
}
|
var cursor = 'default';
|
if (this.interactionState) {
|
if (this.interactionState.type === 'pan') {
|
cursor = 'grabbing';
|
} else if (this.interactionState.type === 'draw' || this.interactionState.type === 'marquee') {
|
cursor = 'crosshair';
|
} else if (this.interactionState.type === 'array') {
|
cursor = 'crosshair';
|
} else if (this.interactionState.type === 'move') {
|
cursor = 'move';
|
} else if (this.interactionState.type === 'movePending') {
|
cursor = 'grab';
|
} else if (this.interactionState.type === 'resize') {
|
cursor = this.cursorForHandle(this.interactionState.handle);
|
}
|
} else if (this.spacePressed || this.activeTool === 'pan') {
|
cursor = 'grab';
|
} else if (DRAW_TYPES.indexOf(this.activeTool) >= 0 || this.activeTool === 'marquee' || this.activeTool === 'array') {
|
cursor = 'crosshair';
|
} else if (this.singleSelectedElement) {
|
var point = this.lastPointerWorld || null;
|
if (point) {
|
var handle = this.getResizeHandleAt(point, this.singleSelectedElement);
|
cursor = handle ? this.cursorForHandle(handle) : 'default';
|
}
|
if (cursor === 'default' && this.hoverElementId) {
|
cursor = 'move';
|
} else if (cursor === 'default') {
|
cursor = 'grab';
|
}
|
} else {
|
cursor = this.hoverElementId ? 'move' : 'grab';
|
}
|
if (cursor !== this.lastCursor) {
|
this.lastCursor = cursor;
|
this.pixiApp.view.style.cursor = cursor;
|
}
|
},
|
startPan: function (point) {
|
this.cancelDeferredStaticRebuild();
|
this.cancelPanRefresh();
|
if (this.zoomRefreshTimer) {
|
window.clearTimeout(this.zoomRefreshTimer);
|
this.zoomRefreshTimer = null;
|
this.isZooming = false;
|
this.pendingViewportRefresh = true;
|
}
|
this.isPanning = true;
|
this.interactionState = {
|
type: 'pan',
|
startScreen: {
|
x: point.screenX,
|
y: point.screenY
|
},
|
startCamera: {
|
x: this.camera.x,
|
y: this.camera.y
|
}
|
};
|
this.updateCursor();
|
},
|
startMarquee: function (point, additive) {
|
this.cancelDeferredStaticRebuild();
|
this.interactionState = {
|
type: 'marquee',
|
additive: !!additive,
|
startWorld: { x: point.x, y: point.y },
|
currentWorld: { x: point.x, y: point.y }
|
};
|
this.updateCursor();
|
},
|
startDraw: function (point) {
|
this.cancelDeferredStaticRebuild();
|
this.interactionState = {
|
type: 'draw',
|
beforeSnapshot: this.snapshotDoc(this.doc),
|
elementType: this.activeTool,
|
startWorld: { x: point.x, y: point.y },
|
rect: { x: point.x, y: point.y, width: 0, height: 0 }
|
};
|
this.updateCursor();
|
},
|
startArray: function (point, element) {
|
if (!this.canArrayFromElement(element)) {
|
this.showMessage('warning', '阵列工具当前只支持货架、CRN、双工位和 RGV');
|
return;
|
}
|
this.cancelDeferredStaticRebuild();
|
this.interactionState = {
|
type: 'array',
|
beforeSnapshot: this.snapshotDoc(this.doc),
|
template: {
|
id: element.id,
|
type: element.type,
|
x: element.x,
|
y: element.y,
|
width: element.width,
|
height: element.height,
|
value: element.value
|
},
|
startWorld: { x: point.x, y: point.y },
|
currentWorld: { x: point.x, y: point.y },
|
previewItems: []
|
};
|
this.updateCursor();
|
},
|
startMove: function (point) {
|
var selected = this.getSelectedElements();
|
if (!selected.length) {
|
return;
|
}
|
this.cancelDeferredStaticRebuild();
|
var baseItems = selected.map(function (item) {
|
return {
|
id: item.id,
|
x: item.x,
|
y: item.y,
|
width: item.width,
|
height: item.height,
|
value: item.value,
|
type: item.type
|
};
|
});
|
this.interactionState = {
|
type: 'movePending',
|
beforeSnapshot: this.snapshotDoc(this.doc),
|
startScreen: { x: point.screenX, y: point.screenY },
|
startWorld: { x: point.x, y: point.y },
|
baseItems: baseItems
|
};
|
this.updateCursor();
|
},
|
startResize: function (point, element, handle) {
|
this.cancelDeferredStaticRebuild();
|
this.interactionState = {
|
type: 'resize',
|
handle: handle,
|
elementId: element.id,
|
beforeSnapshot: this.snapshotDoc(this.doc),
|
baseRect: {
|
x: element.x,
|
y: element.y,
|
width: element.width,
|
height: element.height
|
}
|
};
|
this.markStaticSceneDirty();
|
this.scheduleRender();
|
this.updateCursor();
|
},
|
onCanvasPointerDown: function (event) {
|
if (!this.doc || !this.pixiApp) {
|
return;
|
}
|
if (event.button !== 0 && event.button !== 1) {
|
return;
|
}
|
if (this.pixiApp.view.setPointerCapture && event.pointerId != null) {
|
try {
|
this.pixiApp.view.setPointerCapture(event.pointerId);
|
} catch (ignore) {
|
}
|
}
|
this.currentPointerId = event.pointerId;
|
var point = this.pointerToWorld(event);
|
this.lastPointerWorld = point;
|
this.pointerStatus = this.formatNumber(point.x) + ', ' + this.formatNumber(point.y);
|
if (this.spacePressed || this.activeTool === 'pan' || event.button === 1) {
|
this.startPan(point);
|
return;
|
}
|
if (DRAW_TYPES.indexOf(this.activeTool) >= 0) {
|
this.startDraw(point);
|
return;
|
}
|
if (this.activeTool === 'marquee') {
|
this.startMarquee(point, event.shiftKey);
|
return;
|
}
|
if (this.activeTool === 'array') {
|
var arrayHit = this.hitTestElement(point);
|
var arrayTemplate = arrayHit || this.singleSelectedElement;
|
if (arrayHit && this.selectedIds.indexOf(arrayHit.id) < 0) {
|
this.setSelectedIds([arrayHit.id]);
|
arrayTemplate = arrayHit;
|
}
|
if (!arrayTemplate) {
|
this.showMessage('warning', '请先选中一个货架或轨道作为阵列模板');
|
return;
|
}
|
this.startArray(point, arrayTemplate);
|
return;
|
}
|
|
var selected = this.singleSelectedElement;
|
var handle = selected ? this.getResizeHandleAt(point, selected) : '';
|
if (handle) {
|
this.startResize(point, selected, handle);
|
return;
|
}
|
|
var hit = this.hitTestElement(point);
|
if (hit) {
|
if (event.shiftKey) {
|
var index = this.selectedIds.indexOf(hit.id);
|
if (index >= 0) {
|
var nextIds = this.selectedIds.slice();
|
nextIds.splice(index, 1);
|
this.setSelectedIds(nextIds);
|
} else {
|
this.setSelectedIds(this.selectedIds.concat([hit.id]));
|
}
|
this.scheduleRender();
|
return;
|
}
|
if (this.selectedIds.indexOf(hit.id) < 0) {
|
this.setSelectedIds([hit.id]);
|
this.scheduleRender();
|
}
|
this.startMove(point);
|
return;
|
}
|
|
if (this.selectedIds.length) {
|
this.setSelectedIds([]);
|
this.scheduleRender();
|
}
|
this.startPan(point);
|
},
|
onCanvasWheel: function (event) {
|
if (!this.pixiApp || !this.doc) {
|
return;
|
}
|
event.preventDefault();
|
var point = this.pointerToWorld(event);
|
var delta = event.deltaY < 0 ? 1.12 : 0.89;
|
var nextScale = clamp(this.camera.scale * delta, 0.06, 4);
|
this.camera.scale = nextScale;
|
this.camera.x = Math.round(point.screenX - point.x * nextScale);
|
this.camera.y = Math.round(point.screenY - point.y * nextScale);
|
this.viewZoom = nextScale;
|
this.scheduleZoomRefresh();
|
this.scheduleRender();
|
},
|
onWindowPointerMove: function (event) {
|
if (!this.pixiApp || !this.doc) {
|
return;
|
}
|
var point = this.pointerToWorld(event);
|
this.lastPointerWorld = point;
|
var pointerText = this.formatNumber(point.x) + ', ' + this.formatNumber(point.y);
|
var now = (window.performance && performance.now) ? performance.now() : Date.now();
|
if (pointerText !== this.pointerStatus && (now - this.lastPointerStatusUpdateTs >= POINTER_STATUS_UPDATE_INTERVAL || this.pointerStatus === '--')) {
|
this.pointerStatus = pointerText;
|
this.lastPointerStatusUpdateTs = now;
|
}
|
if (!this.interactionState) {
|
var hover = this.hitTestElement(point);
|
var hoverId = hover ? hover.id : '';
|
if (hoverId !== this.hoverElementId) {
|
this.hoverElementId = hoverId;
|
this.scheduleRender();
|
}
|
this.updateCursor();
|
return;
|
}
|
|
var state = this.interactionState;
|
if (state.type === 'pan') {
|
this.camera.x = Math.round(state.startCamera.x + (point.screenX - state.startScreen.x));
|
this.camera.y = Math.round(state.startCamera.y + (point.screenY - state.startScreen.y));
|
this.scheduleRender();
|
return;
|
}
|
|
if (state.type === 'marquee') {
|
state.currentWorld = { x: point.x, y: point.y };
|
this.scheduleRender();
|
return;
|
}
|
|
if (state.type === 'draw') {
|
var rawRect = buildRectFromPoints(state.startWorld, point);
|
var clipped = {
|
x: clamp(rawRect.x, 0, this.doc.canvasWidth),
|
y: clamp(rawRect.y, 0, this.doc.canvasHeight),
|
width: clamp(rawRect.width, 0, this.doc.canvasWidth),
|
height: clamp(rawRect.height, 0, this.doc.canvasHeight)
|
};
|
if (clipped.x + clipped.width > this.doc.canvasWidth) {
|
clipped.width = roundCoord(this.doc.canvasWidth - clipped.x);
|
}
|
if (clipped.y + clipped.height > this.doc.canvasHeight) {
|
clipped.height = roundCoord(this.doc.canvasHeight - clipped.y);
|
}
|
state.rect = clipped;
|
this.scheduleRender();
|
return;
|
}
|
if (state.type === 'array') {
|
state.currentWorld = { x: point.x, y: point.y };
|
state.previewItems = this.buildArrayCopies(state.template, state.startWorld, state.currentWorld);
|
this.scheduleRender();
|
return;
|
}
|
|
if (state.type === 'movePending') {
|
var dragDistance = Math.max(Math.abs(point.screenX - state.startScreen.x), Math.abs(point.screenY - state.startScreen.y));
|
if (dragDistance < DRAG_START_THRESHOLD) {
|
return;
|
}
|
state.type = 'move';
|
this.markStaticSceneDirty();
|
this.scheduleRender();
|
this.updateCursor();
|
}
|
|
if (state.type === 'move') {
|
var dx = point.x - state.startWorld.x;
|
var dy = point.y - state.startWorld.y;
|
var minDx = -Infinity;
|
var maxDx = Infinity;
|
var minDy = -Infinity;
|
var maxDy = Infinity;
|
for (var i = 0; i < state.baseItems.length; i++) {
|
var base = state.baseItems[i];
|
minDx = Math.max(minDx, -base.x);
|
minDy = Math.max(minDy, -base.y);
|
maxDx = Math.min(maxDx, this.doc.canvasWidth - (base.x + base.width));
|
maxDy = Math.min(maxDy, this.doc.canvasHeight - (base.y + base.height));
|
}
|
dx = clamp(dx, minDx, maxDx);
|
dy = clamp(dy, minDy, maxDy);
|
var snapDelta = this.collectMoveSnap(state.baseItems, dx, dy, this.selectedIds.slice());
|
dx = clamp(dx + snapDelta.dx, minDx, maxDx);
|
dy = clamp(dy + snapDelta.dy, minDy, maxDy);
|
for (var j = 0; j < state.baseItems.length; j++) {
|
var baseItem = state.baseItems[j];
|
var element = this.findElementById(baseItem.id);
|
if (!element) {
|
continue;
|
}
|
element.x = roundCoord(baseItem.x + dx);
|
element.y = roundCoord(baseItem.y + dy);
|
}
|
this.scheduleRender();
|
return;
|
}
|
|
if (state.type === 'resize') {
|
var target = this.findElementById(state.elementId);
|
if (!target) {
|
return;
|
}
|
var baseRect = state.baseRect;
|
var left = baseRect.x;
|
var right = baseRect.x + baseRect.width;
|
var top = baseRect.y;
|
var bottom = baseRect.y + baseRect.height;
|
if (state.handle.indexOf('w') >= 0) {
|
left = clamp(point.x, 0, right - MIN_ELEMENT_SIZE);
|
}
|
if (state.handle.indexOf('e') >= 0) {
|
right = clamp(point.x, left + MIN_ELEMENT_SIZE, this.doc.canvasWidth);
|
}
|
if (state.handle.indexOf('n') >= 0) {
|
top = clamp(point.y, 0, bottom - MIN_ELEMENT_SIZE);
|
}
|
if (state.handle.indexOf('s') >= 0) {
|
bottom = clamp(point.y, top + MIN_ELEMENT_SIZE, this.doc.canvasHeight);
|
}
|
var snapped = this.collectResizeSnap({
|
x: left,
|
y: top,
|
width: right - left,
|
height: bottom - top
|
}, state.handle, [target.id]);
|
if (snapped) {
|
if (state.handle.indexOf('w') >= 0 && snapped.left != null) {
|
left = clamp(left + snapped.left, 0, right - MIN_ELEMENT_SIZE);
|
}
|
if (state.handle.indexOf('e') >= 0 && snapped.right != null) {
|
right = clamp(right + snapped.right, left + MIN_ELEMENT_SIZE, this.doc.canvasWidth);
|
}
|
if (state.handle.indexOf('n') >= 0 && snapped.top != null) {
|
top = clamp(top + snapped.top, 0, bottom - MIN_ELEMENT_SIZE);
|
}
|
if (state.handle.indexOf('s') >= 0 && snapped.bottom != null) {
|
bottom = clamp(bottom + snapped.bottom, top + MIN_ELEMENT_SIZE, this.doc.canvasHeight);
|
}
|
}
|
target.x = roundCoord(left);
|
target.y = roundCoord(top);
|
target.width = roundCoord(right - left);
|
target.height = roundCoord(bottom - top);
|
this.scheduleRender();
|
}
|
},
|
onWindowPointerUp: function (event) {
|
if (!this.interactionState) {
|
return;
|
}
|
if (this.currentPointerId != null && event.pointerId != null && this.currentPointerId !== event.pointerId) {
|
return;
|
}
|
if (this.pixiApp && this.pixiApp.view.releasePointerCapture && event.pointerId != null) {
|
try {
|
this.pixiApp.view.releasePointerCapture(event.pointerId);
|
} catch (ignore) {
|
}
|
}
|
this.currentPointerId = null;
|
|
var state = this.interactionState;
|
this.interactionState = null;
|
|
if (state.type === 'pan') {
|
this.updateCursor();
|
this.schedulePanRefresh();
|
this.scheduleRender();
|
return;
|
}
|
|
if (state.type === 'marquee') {
|
var rect = buildRectFromPoints(state.startWorld, state.currentWorld);
|
if (rect.width > 2 && rect.height > 2) {
|
var matched = (this.doc.elements || []).filter(function (item) {
|
return rectIntersects(rect, item);
|
}).map(function (item) {
|
return item.id;
|
});
|
this.setSelectedIds(state.additive ? Array.from(new Set(this.selectedIds.concat(matched))) : matched);
|
}
|
this.scheduleRender();
|
return;
|
}
|
|
if (state.type === 'movePending') {
|
this.updateCursor();
|
return;
|
}
|
|
if (state.type === 'draw') {
|
var drawRect = state.rect;
|
if (drawRect && drawRect.width >= MIN_ELEMENT_SIZE && drawRect.height >= MIN_ELEMENT_SIZE) {
|
var newElement = {
|
id: nextId(),
|
type: state.elementType,
|
x: roundCoord(drawRect.x),
|
y: roundCoord(drawRect.y),
|
width: roundCoord(drawRect.width),
|
height: roundCoord(drawRect.height),
|
value: ''
|
};
|
if (this.hasOverlap(newElement, [])) {
|
this.showMessage('warning', '新元素不能与已有元素重叠');
|
} else if (!this.isWithinCanvas(newElement)) {
|
this.showMessage('warning', '新元素超出画布范围');
|
} else {
|
this.doc.elements.push(newElement);
|
this.selectedIds = [newElement.id];
|
this.commitMutation(state.beforeSnapshot);
|
this.refreshInspector();
|
return;
|
}
|
}
|
this.refreshInspector();
|
this.scheduleRender();
|
return;
|
}
|
if (state.type === 'array') {
|
var copies = state.previewItems && state.previewItems.length
|
? state.previewItems
|
: this.buildArrayCopies(state.template, state.startWorld, state.currentWorld || state.startWorld);
|
if (!copies.length) {
|
this.scheduleRender();
|
return;
|
}
|
if (!this.canPlaceElements(copies, [])) {
|
this.showMessage('warning', '阵列生成后会重叠或超出画布，已取消');
|
this.scheduleRender();
|
return;
|
}
|
var finalizedCopies = copies.map(function (item) {
|
return $.extend({}, item, { id: nextId() });
|
});
|
var self = this;
|
this.runMutation(function () {
|
self.doc.elements = self.doc.elements.concat(finalizedCopies);
|
self.selectedIds = [finalizedCopies[finalizedCopies.length - 1].id];
|
});
|
return;
|
}
|
|
if (state.type === 'move') {
|
var movedElements = this.getSelectedElements();
|
if (!this.canPlaceElements(movedElements, this.selectedIds.slice())) {
|
for (var i = 0; i < state.baseItems.length; i++) {
|
var base = state.baseItems[i];
|
var element = this.findElementById(base.id);
|
if (!element) {
|
continue;
|
}
|
element.x = base.x;
|
element.y = base.y;
|
}
|
this.showMessage('warning', '移动后会重叠或超出画布，已恢复');
|
this.refreshInspector();
|
this.scheduleRender();
|
return;
|
}
|
if (!this.commitMutation(state.beforeSnapshot)) {
|
this.markStaticSceneDirty();
|
this.scheduleRender();
|
}
|
return;
|
}
|
|
if (state.type === 'resize') {
|
var resized = this.findElementById(state.elementId);
|
if (resized) {
|
if (!this.isWithinCanvas(resized) || this.hasOverlap(resized, [resized.id])) {
|
resized.x = state.baseRect.x;
|
resized.y = state.baseRect.y;
|
resized.width = state.baseRect.width;
|
resized.height = state.baseRect.height;
|
this.showMessage('warning', '缩放后会重叠或超出画布，已恢复');
|
this.refreshInspector();
|
this.scheduleRender();
|
return;
|
}
|
}
|
if (!this.commitMutation(state.beforeSnapshot)) {
|
this.markStaticSceneDirty();
|
this.scheduleRender();
|
}
|
return;
|
}
|
|
this.scheduleRender();
|
},
|
onWindowKeyDown: function (event) {
|
if (event.key === ' ' && !isInputLike(event.target)) {
|
this.spacePressed = true;
|
this.updateCursor();
|
event.preventDefault();
|
}
|
if (!this.doc) {
|
return;
|
}
|
if (isInputLike(event.target)) {
|
return;
|
}
|
var ctrl = event.ctrlKey || event.metaKey;
|
if (event.key === 'Delete' || event.key === 'Backspace') {
|
event.preventDefault();
|
this.deleteSelection();
|
return;
|
}
|
if (ctrl && (event.key === 'z' || event.key === 'Z')) {
|
event.preventDefault();
|
if (event.shiftKey) {
|
this.redo();
|
} else {
|
this.undo();
|
}
|
return;
|
}
|
if (ctrl && (event.key === 'y' || event.key === 'Y')) {
|
event.preventDefault();
|
this.redo();
|
return;
|
}
|
if (ctrl && (event.key === 'c' || event.key === 'C')) {
|
event.preventDefault();
|
this.copySelection();
|
return;
|
}
|
if (ctrl && (event.key === 'v' || event.key === 'V')) {
|
event.preventDefault();
|
this.pasteClipboard();
|
return;
|
}
|
if (event.key === 'Escape') {
|
this.interactionState = null;
|
this.setSelectedIds([]);
|
this.hoverElementId = '';
|
this.scheduleRender();
|
}
|
},
|
onWindowKeyUp: function (event) {
|
if (event.key === ' ') {
|
this.spacePressed = false;
|
this.updateCursor();
|
}
|
},
|
onBeforeUnload: function (event) {
|
if (!this.isDirty) {
|
return;
|
}
|
event.preventDefault();
|
event.returnValue = '';
|
}
|
}
|
});
|
})();
|
