UNPKG

cione-comp-lib

Version:

`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`

626 lines (625 loc) 21.2 kB
import { __extends } from "../../../../tslib/tslib.es6.mjs"; import { each, bind, merge, clone, map, curry, defaults } from "../../../../zrender/lib/core/util.mjs"; import Eventful from "../../../../zrender/lib/core/Eventful.mjs"; import { transformDirection, getTransform as getTransform$1 } from "../../util/graphic.mjs"; import { take, release } from "./interactionMutex.mjs"; import DataDiffer from "../../data/DataDiffer.mjs"; import Group from "../../../../zrender/lib/graphic/Group.mjs"; import Polyline from "../../../../zrender/lib/graphic/shape/Polyline.mjs"; import Polygon from "../../../../zrender/lib/graphic/shape/Polygon.mjs"; import Rect from "../../../../zrender/lib/graphic/shape/Rect.mjs"; var BRUSH_PANEL_GLOBAL = true; var mathMin = Math.min; var mathMax = Math.max; var mathPow = Math.pow; var COVER_Z = 1e4; var UNSELECT_THRESHOLD = 6; var MIN_RESIZE_LINE_WIDTH = 6; var MUTEX_RESOURCE_KEY = "globalPan"; var DIRECTION_MAP = { w: [0, 0], e: [0, 1], n: [1, 0], s: [1, 1] }; var CURSOR_MAP = { w: "ew", e: "ew", n: "ns", s: "ns", ne: "nesw", sw: "nesw", nw: "nwse", se: "nwse" }; var DEFAULT_BRUSH_OPT = { brushStyle: { lineWidth: 2, stroke: "rgba(210,219,238,0.3)", fill: "#D2DBEE" }, transformable: true, brushMode: "single", removeOnClick: false }; var baseUID = 0; var BrushController = function(_super) { __extends(BrushController2, _super); function BrushController2(zr) { var _this = _super.call(this) || this; _this._track = []; _this._covers = []; _this._handlers = {}; _this._zr = zr; _this.group = new Group(); _this._uid = "brushController_" + baseUID++; each(pointerHandlers, function(handler, eventName) { this._handlers[eventName] = bind(handler, this); }, _this); return _this; } BrushController2.prototype.enableBrush = function(brushOption) { this._brushType && this._doDisableBrush(); brushOption.brushType && this._doEnableBrush(brushOption); return this; }; BrushController2.prototype._doEnableBrush = function(brushOption) { var zr = this._zr; if (!this._enableGlobalPan) { take(zr, MUTEX_RESOURCE_KEY, this._uid); } each(this._handlers, function(handler, eventName) { zr.on(eventName, handler); }); this._brushType = brushOption.brushType; this._brushOption = merge(clone(DEFAULT_BRUSH_OPT), brushOption, true); }; BrushController2.prototype._doDisableBrush = function() { var zr = this._zr; release(zr, MUTEX_RESOURCE_KEY, this._uid); each(this._handlers, function(handler, eventName) { zr.off(eventName, handler); }); this._brushType = this._brushOption = null; }; BrushController2.prototype.setPanels = function(panelOpts) { if (panelOpts && panelOpts.length) { var panels_1 = this._panels = {}; each(panelOpts, function(panelOpts2) { panels_1[panelOpts2.panelId] = clone(panelOpts2); }); } else { this._panels = null; } return this; }; BrushController2.prototype.mount = function(opt) { opt = opt || {}; this._enableGlobalPan = opt.enableGlobalPan; var thisGroup = this.group; this._zr.add(thisGroup); thisGroup.attr({ x: opt.x || 0, y: opt.y || 0, rotation: opt.rotation || 0, scaleX: opt.scaleX || 1, scaleY: opt.scaleY || 1 }); this._transform = thisGroup.getLocalTransform(); return this; }; BrushController2.prototype.updateCovers = function(coverConfigList) { coverConfigList = map(coverConfigList, function(coverConfig) { return merge(clone(DEFAULT_BRUSH_OPT), coverConfig, true); }); var tmpIdPrefix = "\0-brush-index-"; var oldCovers = this._covers; var newCovers = this._covers = []; var controller = this; var creatingCover = this._creatingCover; new DataDiffer(oldCovers, coverConfigList, oldGetKey, getKey).add(addOrUpdate).update(addOrUpdate).remove(remove).execute(); return this; function getKey(brushOption, index) { return (brushOption.id != null ? brushOption.id : tmpIdPrefix + index) + "-" + brushOption.brushType; } function oldGetKey(cover, index) { return getKey(cover.__brushOption, index); } function addOrUpdate(newIndex, oldIndex) { var newBrushInternal = coverConfigList[newIndex]; if (oldIndex != null && oldCovers[oldIndex] === creatingCover) { newCovers[newIndex] = oldCovers[oldIndex]; } else { var cover = newCovers[newIndex] = oldIndex != null ? (oldCovers[oldIndex].__brushOption = newBrushInternal, oldCovers[oldIndex]) : endCreating(controller, createCover(controller, newBrushInternal)); updateCoverAfterCreation(controller, cover); } } function remove(oldIndex) { if (oldCovers[oldIndex] !== creatingCover) { controller.group.remove(oldCovers[oldIndex]); } } }; BrushController2.prototype.unmount = function() { this.enableBrush(false); clearCovers(this); this._zr.remove(this.group); return this; }; BrushController2.prototype.dispose = function() { this.unmount(); this.off(); }; return BrushController2; }(Eventful); function createCover(controller, brushOption) { var cover = coverRenderers[brushOption.brushType].createCover(controller, brushOption); cover.__brushOption = brushOption; updateZ(cover, brushOption); controller.group.add(cover); return cover; } function endCreating(controller, creatingCover) { var coverRenderer = getCoverRenderer(creatingCover); if (coverRenderer.endCreating) { coverRenderer.endCreating(controller, creatingCover); updateZ(creatingCover, creatingCover.__brushOption); } return creatingCover; } function updateCoverShape(controller, cover) { var brushOption = cover.__brushOption; getCoverRenderer(cover).updateCoverShape(controller, cover, brushOption.range, brushOption); } function updateZ(cover, brushOption) { var z = brushOption.z; z == null && (z = COVER_Z); cover.traverse(function(el) { el.z = z; el.z2 = z; }); } function updateCoverAfterCreation(controller, cover) { getCoverRenderer(cover).updateCommon(controller, cover); updateCoverShape(controller, cover); } function getCoverRenderer(cover) { return coverRenderers[cover.__brushOption.brushType]; } function getPanelByPoint(controller, e, localCursorPoint) { var panels = controller._panels; if (!panels) { return BRUSH_PANEL_GLOBAL; } var panel; var transform = controller._transform; each(panels, function(pn) { pn.isTargetByCursor(e, localCursorPoint, transform) && (panel = pn); }); return panel; } function getPanelByCover(controller, cover) { var panels = controller._panels; if (!panels) { return BRUSH_PANEL_GLOBAL; } var panelId = cover.__brushOption.panelId; return panelId != null ? panels[panelId] : BRUSH_PANEL_GLOBAL; } function clearCovers(controller) { var covers = controller._covers; var originalLength = covers.length; each(covers, function(cover) { controller.group.remove(cover); }, controller); covers.length = 0; return !!originalLength; } function trigger(controller, opt) { var areas = map(controller._covers, function(cover) { var brushOption = cover.__brushOption; var range = clone(brushOption.range); return { brushType: brushOption.brushType, panelId: brushOption.panelId, range }; }); controller.trigger("brush", { areas, isEnd: !!opt.isEnd, removeOnClick: !!opt.removeOnClick }); } function shouldShowCover(controller) { var track = controller._track; if (!track.length) { return false; } var p2 = track[track.length - 1]; var p1 = track[0]; var dx = p2[0] - p1[0]; var dy = p2[1] - p1[1]; var dist = mathPow(dx * dx + dy * dy, 0.5); return dist > UNSELECT_THRESHOLD; } function getTrackEnds(track) { var tail = track.length - 1; tail < 0 && (tail = 0); return [track[0], track[tail]]; } function createBaseRectCover(rectRangeConverter, controller, brushOption, edgeNameSequences) { var cover = new Group(); cover.add(new Rect({ name: "main", style: makeStyle(brushOption), silent: true, draggable: true, cursor: "move", drift: curry(driftRect, rectRangeConverter, controller, cover, ["n", "s", "w", "e"]), ondragend: curry(trigger, controller, { isEnd: true }) })); each(edgeNameSequences, function(nameSequence) { cover.add(new Rect({ name: nameSequence.join(""), style: { opacity: 0 }, draggable: true, silent: true, invisible: true, drift: curry(driftRect, rectRangeConverter, controller, cover, nameSequence), ondragend: curry(trigger, controller, { isEnd: true }) })); }); return cover; } function updateBaseRect(controller, cover, localRange, brushOption) { var lineWidth = brushOption.brushStyle.lineWidth || 0; var handleSize = mathMax(lineWidth, MIN_RESIZE_LINE_WIDTH); var x = localRange[0][0]; var y = localRange[1][0]; var xa = x - lineWidth / 2; var ya = y - lineWidth / 2; var x2 = localRange[0][1]; var y2 = localRange[1][1]; var x2a = x2 - handleSize + lineWidth / 2; var y2a = y2 - handleSize + lineWidth / 2; var width = x2 - x; var height = y2 - y; var widtha = width + lineWidth; var heighta = height + lineWidth; updateRectShape(controller, cover, "main", x, y, width, height); if (brushOption.transformable) { updateRectShape(controller, cover, "w", xa, ya, handleSize, heighta); updateRectShape(controller, cover, "e", x2a, ya, handleSize, heighta); updateRectShape(controller, cover, "n", xa, ya, widtha, handleSize); updateRectShape(controller, cover, "s", xa, y2a, widtha, handleSize); updateRectShape(controller, cover, "nw", xa, ya, handleSize, handleSize); updateRectShape(controller, cover, "ne", x2a, ya, handleSize, handleSize); updateRectShape(controller, cover, "sw", xa, y2a, handleSize, handleSize); updateRectShape(controller, cover, "se", x2a, y2a, handleSize, handleSize); } } function updateCommon(controller, cover) { var brushOption = cover.__brushOption; var transformable = brushOption.transformable; var mainEl = cover.childAt(0); mainEl.useStyle(makeStyle(brushOption)); mainEl.attr({ silent: !transformable, cursor: transformable ? "move" : "default" }); each([["w"], ["e"], ["n"], ["s"], ["s", "e"], ["s", "w"], ["n", "e"], ["n", "w"]], function(nameSequence) { var el = cover.childOfName(nameSequence.join("")); var globalDir = nameSequence.length === 1 ? getGlobalDirection1(controller, nameSequence[0]) : getGlobalDirection2(controller, nameSequence); el && el.attr({ silent: !transformable, invisible: !transformable, cursor: transformable ? CURSOR_MAP[globalDir] + "-resize" : null }); }); } function updateRectShape(controller, cover, name, x, y, w, h) { var el = cover.childOfName(name); el && el.setShape(pointsToRect(clipByPanel(controller, cover, [[x, y], [x + w, y + h]]))); } function makeStyle(brushOption) { return defaults({ strokeNoScale: true }, brushOption.brushStyle); } function formatRectRange(x, y, x2, y2) { var min = [mathMin(x, x2), mathMin(y, y2)]; var max = [mathMax(x, x2), mathMax(y, y2)]; return [ [min[0], max[0]], [min[1], max[1]] ]; } function getTransform(controller) { return getTransform$1(controller.group); } function getGlobalDirection1(controller, localDirName) { var map2 = { w: "left", e: "right", n: "top", s: "bottom" }; var inverseMap = { left: "w", right: "e", top: "n", bottom: "s" }; var dir = transformDirection(map2[localDirName], getTransform(controller)); return inverseMap[dir]; } function getGlobalDirection2(controller, localDirNameSeq) { var globalDir = [getGlobalDirection1(controller, localDirNameSeq[0]), getGlobalDirection1(controller, localDirNameSeq[1])]; (globalDir[0] === "e" || globalDir[0] === "w") && globalDir.reverse(); return globalDir.join(""); } function driftRect(rectRangeConverter, controller, cover, dirNameSequence, dx, dy) { var brushOption = cover.__brushOption; var rectRange = rectRangeConverter.toRectRange(brushOption.range); var localDelta = toLocalDelta(controller, dx, dy); each(dirNameSequence, function(dirName) { var ind = DIRECTION_MAP[dirName]; rectRange[ind[0]][ind[1]] += localDelta[ind[0]]; }); brushOption.range = rectRangeConverter.fromRectRange(formatRectRange(rectRange[0][0], rectRange[1][0], rectRange[0][1], rectRange[1][1])); updateCoverAfterCreation(controller, cover); trigger(controller, { isEnd: false }); } function driftPolygon(controller, cover, dx, dy) { var range = cover.__brushOption.range; var localDelta = toLocalDelta(controller, dx, dy); each(range, function(point) { point[0] += localDelta[0]; point[1] += localDelta[1]; }); updateCoverAfterCreation(controller, cover); trigger(controller, { isEnd: false }); } function toLocalDelta(controller, dx, dy) { var thisGroup = controller.group; var localD = thisGroup.transformCoordToLocal(dx, dy); var localZero = thisGroup.transformCoordToLocal(0, 0); return [localD[0] - localZero[0], localD[1] - localZero[1]]; } function clipByPanel(controller, cover, data) { var panel = getPanelByCover(controller, cover); return panel && panel !== BRUSH_PANEL_GLOBAL ? panel.clipPath(data, controller._transform) : clone(data); } function pointsToRect(points) { var xmin = mathMin(points[0][0], points[1][0]); var ymin = mathMin(points[0][1], points[1][1]); var xmax = mathMax(points[0][0], points[1][0]); var ymax = mathMax(points[0][1], points[1][1]); return { x: xmin, y: ymin, width: xmax - xmin, height: ymax - ymin }; } function resetCursor(controller, e, localCursorPoint) { if (!controller._brushType || isOutsideZrArea(controller, e.offsetX, e.offsetY)) { return; } var zr = controller._zr; var covers = controller._covers; var currPanel = getPanelByPoint(controller, e, localCursorPoint); if (!controller._dragging) { for (var i = 0; i < covers.length; i++) { var brushOption = covers[i].__brushOption; if (currPanel && (currPanel === BRUSH_PANEL_GLOBAL || brushOption.panelId === currPanel.panelId) && coverRenderers[brushOption.brushType].contain(covers[i], localCursorPoint[0], localCursorPoint[1])) { return; } } } currPanel && zr.setCursorStyle("crosshair"); } function preventDefault(e) { var rawE = e.event; rawE.preventDefault && rawE.preventDefault(); } function mainShapeContain(cover, x, y) { return cover.childOfName("main").contain(x, y); } function updateCoverByMouse(controller, e, localCursorPoint, isEnd) { var creatingCover = controller._creatingCover; var panel = controller._creatingPanel; var thisBrushOption = controller._brushOption; var eventParams; controller._track.push(localCursorPoint.slice()); if (shouldShowCover(controller) || creatingCover) { if (panel && !creatingCover) { thisBrushOption.brushMode === "single" && clearCovers(controller); var brushOption = clone(thisBrushOption); brushOption.brushType = determineBrushType(brushOption.brushType, panel); brushOption.panelId = panel === BRUSH_PANEL_GLOBAL ? null : panel.panelId; creatingCover = controller._creatingCover = createCover(controller, brushOption); controller._covers.push(creatingCover); } if (creatingCover) { var coverRenderer = coverRenderers[determineBrushType(controller._brushType, panel)]; var coverBrushOption = creatingCover.__brushOption; coverBrushOption.range = coverRenderer.getCreatingRange(clipByPanel(controller, creatingCover, controller._track)); if (isEnd) { endCreating(controller, creatingCover); coverRenderer.updateCommon(controller, creatingCover); } updateCoverShape(controller, creatingCover); eventParams = { isEnd }; } } else if (isEnd && thisBrushOption.brushMode === "single" && thisBrushOption.removeOnClick) { if (getPanelByPoint(controller, e, localCursorPoint) && clearCovers(controller)) { eventParams = { isEnd, removeOnClick: true }; } } return eventParams; } function determineBrushType(brushType, panel) { if (brushType === "auto") { return panel.defaultBrushType; } return brushType; } var pointerHandlers = { mousedown: function(e) { if (this._dragging) { handleDragEnd(this, e); } else if (!e.target || !e.target.draggable) { preventDefault(e); var localCursorPoint = this.group.transformCoordToLocal(e.offsetX, e.offsetY); this._creatingCover = null; var panel = this._creatingPanel = getPanelByPoint(this, e, localCursorPoint); if (panel) { this._dragging = true; this._track = [localCursorPoint.slice()]; } } }, mousemove: function(e) { var x = e.offsetX; var y = e.offsetY; var localCursorPoint = this.group.transformCoordToLocal(x, y); resetCursor(this, e, localCursorPoint); if (this._dragging) { preventDefault(e); var eventParams = updateCoverByMouse(this, e, localCursorPoint, false); eventParams && trigger(this, eventParams); } }, mouseup: function(e) { handleDragEnd(this, e); } }; function handleDragEnd(controller, e) { if (controller._dragging) { preventDefault(e); var x = e.offsetX; var y = e.offsetY; var localCursorPoint = controller.group.transformCoordToLocal(x, y); var eventParams = updateCoverByMouse(controller, e, localCursorPoint, true); controller._dragging = false; controller._track = []; controller._creatingCover = null; eventParams && trigger(controller, eventParams); } } function isOutsideZrArea(controller, x, y) { var zr = controller._zr; return x < 0 || x > zr.getWidth() || y < 0 || y > zr.getHeight(); } var coverRenderers = { lineX: getLineRenderer(0), lineY: getLineRenderer(1), rect: { createCover: function(controller, brushOption) { function returnInput(range) { return range; } return createBaseRectCover({ toRectRange: returnInput, fromRectRange: returnInput }, controller, brushOption, [["w"], ["e"], ["n"], ["s"], ["s", "e"], ["s", "w"], ["n", "e"], ["n", "w"]]); }, getCreatingRange: function(localTrack) { var ends = getTrackEnds(localTrack); return formatRectRange(ends[1][0], ends[1][1], ends[0][0], ends[0][1]); }, updateCoverShape: function(controller, cover, localRange, brushOption) { updateBaseRect(controller, cover, localRange, brushOption); }, updateCommon, contain: mainShapeContain }, polygon: { createCover: function(controller, brushOption) { var cover = new Group(); cover.add(new Polyline({ name: "main", style: makeStyle(brushOption), silent: true })); return cover; }, getCreatingRange: function(localTrack) { return localTrack; }, endCreating: function(controller, cover) { cover.remove(cover.childAt(0)); cover.add(new Polygon({ name: "main", draggable: true, drift: curry(driftPolygon, controller, cover), ondragend: curry(trigger, controller, { isEnd: true }) })); }, updateCoverShape: function(controller, cover, localRange, brushOption) { cover.childAt(0).setShape({ points: clipByPanel(controller, cover, localRange) }); }, updateCommon, contain: mainShapeContain } }; function getLineRenderer(xyIndex) { return { createCover: function(controller, brushOption) { return createBaseRectCover({ toRectRange: function(range) { var rectRange = [range, [0, 100]]; xyIndex && rectRange.reverse(); return rectRange; }, fromRectRange: function(rectRange) { return rectRange[xyIndex]; } }, controller, brushOption, [[["w"], ["e"]], [["n"], ["s"]]][xyIndex]); }, getCreatingRange: function(localTrack) { var ends = getTrackEnds(localTrack); var min = mathMin(ends[0][xyIndex], ends[1][xyIndex]); var max = mathMax(ends[0][xyIndex], ends[1][xyIndex]); return [min, max]; }, updateCoverShape: function(controller, cover, localRange, brushOption) { var otherExtent; var panel = getPanelByCover(controller, cover); if (panel !== BRUSH_PANEL_GLOBAL && panel.getLinearBrushOtherExtent) { otherExtent = panel.getLinearBrushOtherExtent(xyIndex); } else { var zr = controller._zr; otherExtent = [0, [zr.getWidth(), zr.getHeight()][1 - xyIndex]]; } var rectRange = [localRange, otherExtent]; xyIndex && rectRange.reverse(); updateBaseRect(controller, cover, rectRange, brushOption); }, updateCommon, contain: mainShapeContain }; } var BrushController$1 = BrushController; export { BrushController$1 as default };