| /* |
| * Licensed to the Apache Software Foundation (ASF) under one |
| * or more contributor license agreements. See the NOTICE file |
| * distributed with this work for additional information |
| * regarding copyright ownership. The ASF licenses this file |
| * to you under the Apache License, Version 2.0 (the |
| * "License"); you may not use this file except in compliance |
| * with the License. You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, |
| * software distributed under the License is distributed on an |
| * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| * KIND, either express or implied. See the License for the |
| * specific language governing permissions and limitations |
| * under the License. |
| */ |
| |
| // Symbol factory |
| |
| import { each, isArray, retrieve2 } from 'zrender/src/core/util'; |
| import * as graphic from './graphic'; |
| import BoundingRect from 'zrender/src/core/BoundingRect'; |
| import { calculateTextPosition } from 'zrender/src/contain/text'; |
| import { Dictionary } from 'zrender/src/core/types'; |
| import { SymbolOptionMixin, ZRColor } from './types'; |
| import { parsePercent } from './number'; |
| |
| export type ECSymbol = graphic.Path & { |
| __isEmptyBrush?: boolean |
| setColor: (color: ZRColor, innerColor?: ZRColor) => void |
| getColor: () => ZRColor |
| }; |
| type SymbolCtor = { new(): ECSymbol }; |
| type SymbolShapeMaker = (x: number, y: number, w: number, h: number, shape: Dictionary<any>) => void; |
| |
| /** |
| * Triangle shape |
| * @inner |
| */ |
| const Triangle = graphic.Path.extend({ |
| type: 'triangle', |
| shape: { |
| cx: 0, |
| cy: 0, |
| width: 0, |
| height: 0 |
| }, |
| buildPath: function (path, shape) { |
| const cx = shape.cx; |
| const cy = shape.cy; |
| const width = shape.width / 2; |
| const height = shape.height / 2; |
| path.moveTo(cx, cy - height); |
| path.lineTo(cx + width, cy + height); |
| path.lineTo(cx - width, cy + height); |
| path.closePath(); |
| } |
| }); |
| |
| /** |
| * Diamond shape |
| * @inner |
| */ |
| const Diamond = graphic.Path.extend({ |
| type: 'diamond', |
| shape: { |
| cx: 0, |
| cy: 0, |
| width: 0, |
| height: 0 |
| }, |
| buildPath: function (path, shape) { |
| const cx = shape.cx; |
| const cy = shape.cy; |
| const width = shape.width / 2; |
| const height = shape.height / 2; |
| path.moveTo(cx, cy - height); |
| path.lineTo(cx + width, cy); |
| path.lineTo(cx, cy + height); |
| path.lineTo(cx - width, cy); |
| path.closePath(); |
| } |
| }); |
| |
| /** |
| * Pin shape |
| * @inner |
| */ |
| const Pin = graphic.Path.extend({ |
| type: 'pin', |
| shape: { |
| // x, y on the cusp |
| x: 0, |
| y: 0, |
| width: 0, |
| height: 0 |
| }, |
| |
| buildPath: function (path, shape) { |
| const x = shape.x; |
| const y = shape.y; |
| const w = shape.width / 5 * 3; |
| // Height must be larger than width |
| const h = Math.max(w, shape.height); |
| const r = w / 2; |
| |
| // Dist on y with tangent point and circle center |
| const dy = r * r / (h - r); |
| const cy = y - h + r + dy; |
| const angle = Math.asin(dy / r); |
| // Dist on x with tangent point and circle center |
| const dx = Math.cos(angle) * r; |
| |
| const tanX = Math.sin(angle); |
| const tanY = Math.cos(angle); |
| |
| const cpLen = r * 0.6; |
| const cpLen2 = r * 0.7; |
| |
| path.moveTo(x - dx, cy + dy); |
| |
| path.arc( |
| x, cy, r, |
| Math.PI - angle, |
| Math.PI * 2 + angle |
| ); |
| path.bezierCurveTo( |
| x + dx - tanX * cpLen, cy + dy + tanY * cpLen, |
| x, y - cpLen2, |
| x, y |
| ); |
| path.bezierCurveTo( |
| x, y - cpLen2, |
| x - dx + tanX * cpLen, cy + dy + tanY * cpLen, |
| x - dx, cy + dy |
| ); |
| path.closePath(); |
| } |
| }); |
| |
| /** |
| * Arrow shape |
| * @inner |
| */ |
| const Arrow = graphic.Path.extend({ |
| |
| type: 'arrow', |
| |
| shape: { |
| x: 0, |
| y: 0, |
| width: 0, |
| height: 0 |
| }, |
| |
| buildPath: function (ctx, shape) { |
| const height = shape.height; |
| const width = shape.width; |
| const x = shape.x; |
| const y = shape.y; |
| const dx = width / 3 * 2; |
| ctx.moveTo(x, y); |
| ctx.lineTo(x + dx, y + height); |
| ctx.lineTo(x, y + height / 4 * 3); |
| ctx.lineTo(x - dx, y + height); |
| ctx.lineTo(x, y); |
| ctx.closePath(); |
| } |
| }); |
| |
| /** |
| * Map of path contructors |
| */ |
| // TODO Use function to build symbol path. |
| const symbolCtors: Dictionary<SymbolCtor> = { |
| line: graphic.Line as unknown as SymbolCtor, |
| |
| rect: graphic.Rect as unknown as SymbolCtor, |
| |
| roundRect: graphic.Rect as unknown as SymbolCtor, |
| |
| square: graphic.Rect as unknown as SymbolCtor, |
| |
| circle: graphic.Circle as unknown as SymbolCtor, |
| |
| diamond: Diamond as unknown as SymbolCtor, |
| |
| pin: Pin as unknown as SymbolCtor, |
| |
| arrow: Arrow as unknown as SymbolCtor, |
| |
| triangle: Triangle as unknown as SymbolCtor |
| }; |
| |
| |
| const symbolShapeMakers: Dictionary<SymbolShapeMaker> = { |
| |
| line: function (x, y, w, h, shape: graphic.Line['shape']) { |
| shape.x1 = x; |
| shape.y1 = y + h / 2; |
| shape.x2 = x + w; |
| shape.y2 = y + h / 2; |
| }, |
| |
| rect: function (x, y, w, h, shape: graphic.Rect['shape']) { |
| shape.x = x; |
| shape.y = y; |
| shape.width = w; |
| shape.height = h; |
| }, |
| |
| roundRect: function (x, y, w, h, shape: graphic.Rect['shape']) { |
| shape.x = x; |
| shape.y = y; |
| shape.width = w; |
| shape.height = h; |
| shape.r = Math.min(w, h) / 4; |
| }, |
| |
| square: function (x, y, w, h, shape: graphic.Rect['shape']) { |
| const size = Math.min(w, h); |
| shape.x = x; |
| shape.y = y; |
| shape.width = size; |
| shape.height = size; |
| }, |
| |
| circle: function (x, y, w, h, shape: graphic.Circle['shape']) { |
| // Put circle in the center of square |
| shape.cx = x + w / 2; |
| shape.cy = y + h / 2; |
| shape.r = Math.min(w, h) / 2; |
| }, |
| |
| diamond: function (x, y, w, h, shape: InstanceType<typeof Diamond>['shape']) { |
| shape.cx = x + w / 2; |
| shape.cy = y + h / 2; |
| shape.width = w; |
| shape.height = h; |
| }, |
| |
| pin: function (x, y, w, h, shape: InstanceType<typeof Pin>['shape']) { |
| shape.x = x + w / 2; |
| shape.y = y + h / 2; |
| shape.width = w; |
| shape.height = h; |
| }, |
| |
| arrow: function (x, y, w, h, shape: InstanceType<typeof Arrow>['shape']) { |
| shape.x = x + w / 2; |
| shape.y = y + h / 2; |
| shape.width = w; |
| shape.height = h; |
| }, |
| |
| triangle: function (x, y, w, h, shape: InstanceType<typeof Triangle>['shape']) { |
| shape.cx = x + w / 2; |
| shape.cy = y + h / 2; |
| shape.width = w; |
| shape.height = h; |
| } |
| }; |
| |
| export const symbolBuildProxies: Dictionary<ECSymbol> = {}; |
| each(symbolCtors, function (Ctor, name) { |
| symbolBuildProxies[name] = new Ctor(); |
| }); |
| |
| const SymbolClz = graphic.Path.extend({ |
| |
| type: 'symbol', |
| |
| shape: { |
| symbolType: '', |
| x: 0, |
| y: 0, |
| width: 0, |
| height: 0 |
| }, |
| |
| calculateTextPosition(out, config, rect) { |
| const res = calculateTextPosition(out, config, rect); |
| const shape = this.shape; |
| if (shape && shape.symbolType === 'pin' && config.position === 'inside') { |
| res.y = rect.y + rect.height * 0.4; |
| } |
| return res; |
| }, |
| |
| buildPath(ctx, shape, inBundle) { |
| let symbolType = shape.symbolType; |
| if (symbolType !== 'none') { |
| let proxySymbol = symbolBuildProxies[symbolType]; |
| if (!proxySymbol) { |
| // Default rect |
| symbolType = 'rect'; |
| proxySymbol = symbolBuildProxies[symbolType]; |
| } |
| symbolShapeMakers[symbolType]( |
| shape.x, shape.y, shape.width, shape.height, proxySymbol.shape |
| ); |
| proxySymbol.buildPath(ctx, proxySymbol.shape, inBundle); |
| } |
| } |
| }); |
| |
| // Provide setColor helper method to avoid determine if set the fill or stroke outside |
| function symbolPathSetColor(this: ECSymbol, color: ZRColor, innerColor?: ZRColor) { |
| if (this.type !== 'image') { |
| const symbolStyle = this.style; |
| if (this.__isEmptyBrush) { |
| symbolStyle.stroke = color; |
| symbolStyle.fill = innerColor || '#fff'; |
| // TODO Same width with lineStyle in LineView |
| symbolStyle.lineWidth = 2; |
| } |
| else if (this.shape.symbolType === 'line') { |
| symbolStyle.stroke = color; |
| } |
| else { |
| symbolStyle.fill = color; |
| } |
| this.markRedraw(); |
| } |
| } |
| |
| /** |
| * Create a symbol element with given symbol configuration: shape, x, y, width, height, color |
| */ |
| export function createSymbol( |
| symbolType: string, |
| x: number, |
| y: number, |
| w: number, |
| h: number, |
| color?: ZRColor, |
| // whether to keep the ratio of w/h, |
| keepAspect?: boolean |
| ) { |
| // TODO Support image object, DynamicImage. |
| |
| const isEmpty = symbolType.indexOf('empty') === 0; |
| if (isEmpty) { |
| symbolType = symbolType.substr(5, 1).toLowerCase() + symbolType.substr(6); |
| } |
| let symbolPath: ECSymbol | graphic.Image; |
| |
| if (symbolType.indexOf('image://') === 0) { |
| symbolPath = graphic.makeImage( |
| symbolType.slice(8), |
| new BoundingRect(x, y, w, h), |
| keepAspect ? 'center' : 'cover' |
| ); |
| } |
| else if (symbolType.indexOf('path://') === 0) { |
| symbolPath = graphic.makePath( |
| symbolType.slice(7), |
| {}, |
| new BoundingRect(x, y, w, h), |
| keepAspect ? 'center' : 'cover' |
| ) as unknown as ECSymbol; |
| } |
| else { |
| symbolPath = new SymbolClz({ |
| shape: { |
| symbolType: symbolType, |
| x: x, |
| y: y, |
| width: w, |
| height: h |
| } |
| }) as unknown as ECSymbol; |
| } |
| |
| (symbolPath as ECSymbol).__isEmptyBrush = isEmpty; |
| |
| // TODO Should deprecate setColor |
| (symbolPath as ECSymbol).setColor = symbolPathSetColor; |
| |
| if (color) { |
| (symbolPath as ECSymbol).setColor(color); |
| } |
| |
| return symbolPath as ECSymbol; |
| } |
| |
| export function normalizeSymbolSize(symbolSize: number | number[]): [number, number] { |
| if (!isArray(symbolSize)) { |
| symbolSize = [+symbolSize, +symbolSize]; |
| } |
| return [symbolSize[0] || 0, symbolSize[1] || 0]; |
| } |
| |
| export function normalizeSymbolOffset( |
| symbolOffset: SymbolOptionMixin['symbolOffset'], |
| symbolSize: number[] |
| ): [number, number] { |
| if (symbolOffset == null) { |
| return; |
| } |
| if (!isArray(symbolOffset)) { |
| symbolOffset = [symbolOffset, symbolOffset]; |
| } |
| return [ |
| parsePercent(symbolOffset[0], symbolSize[0]) || 0, |
| parsePercent(retrieve2(symbolOffset[1], symbolOffset[0]), symbolSize[1]) || 0 |
| ]; |
| } |