symbol.js 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335
  1. /*
  2. * Licensed to the Apache Software Foundation (ASF) under one
  3. * or more contributor license agreements. See the NOTICE file
  4. * distributed with this work for additional information
  5. * regarding copyright ownership. The ASF licenses this file
  6. * to you under the Apache License, Version 2.0 (the
  7. * "License"); you may not use this file except in compliance
  8. * with the License. You may obtain a copy of the License at
  9. *
  10. * http://www.apache.org/licenses/LICENSE-2.0
  11. *
  12. * Unless required by applicable law or agreed to in writing,
  13. * software distributed under the License is distributed on an
  14. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  15. * KIND, either express or implied. See the License for the
  16. * specific language governing permissions and limitations
  17. * under the License.
  18. */
  19. /**
  20. * AUTO-GENERATED FILE. DO NOT MODIFY.
  21. */
  22. /*
  23. * Licensed to the Apache Software Foundation (ASF) under one
  24. * or more contributor license agreements. See the NOTICE file
  25. * distributed with this work for additional information
  26. * regarding copyright ownership. The ASF licenses this file
  27. * to you under the Apache License, Version 2.0 (the
  28. * "License"); you may not use this file except in compliance
  29. * with the License. You may obtain a copy of the License at
  30. *
  31. * http://www.apache.org/licenses/LICENSE-2.0
  32. *
  33. * Unless required by applicable law or agreed to in writing,
  34. * software distributed under the License is distributed on an
  35. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  36. * KIND, either express or implied. See the License for the
  37. * specific language governing permissions and limitations
  38. * under the License.
  39. */
  40. // Symbol factory
  41. import { each, isArray, retrieve2 } from 'zrender/lib/core/util.js';
  42. import * as graphic from './graphic.js';
  43. import BoundingRect from 'zrender/lib/core/BoundingRect.js';
  44. import { calculateTextPosition } from 'zrender/lib/contain/text.js';
  45. import { parsePercent } from './number.js';
  46. import tokens from '../visual/tokens.js';
  47. /**
  48. * Triangle shape
  49. * @inner
  50. */
  51. var Triangle = graphic.Path.extend({
  52. type: 'triangle',
  53. shape: {
  54. cx: 0,
  55. cy: 0,
  56. width: 0,
  57. height: 0
  58. },
  59. buildPath: function (path, shape) {
  60. var cx = shape.cx;
  61. var cy = shape.cy;
  62. var width = shape.width / 2;
  63. var height = shape.height / 2;
  64. path.moveTo(cx, cy - height);
  65. path.lineTo(cx + width, cy + height);
  66. path.lineTo(cx - width, cy + height);
  67. path.closePath();
  68. }
  69. });
  70. /**
  71. * Diamond shape
  72. * @inner
  73. */
  74. var Diamond = graphic.Path.extend({
  75. type: 'diamond',
  76. shape: {
  77. cx: 0,
  78. cy: 0,
  79. width: 0,
  80. height: 0
  81. },
  82. buildPath: function (path, shape) {
  83. var cx = shape.cx;
  84. var cy = shape.cy;
  85. var width = shape.width / 2;
  86. var height = shape.height / 2;
  87. path.moveTo(cx, cy - height);
  88. path.lineTo(cx + width, cy);
  89. path.lineTo(cx, cy + height);
  90. path.lineTo(cx - width, cy);
  91. path.closePath();
  92. }
  93. });
  94. /**
  95. * Pin shape
  96. * @inner
  97. */
  98. var Pin = graphic.Path.extend({
  99. type: 'pin',
  100. shape: {
  101. // x, y on the cusp
  102. x: 0,
  103. y: 0,
  104. width: 0,
  105. height: 0
  106. },
  107. buildPath: function (path, shape) {
  108. var x = shape.x;
  109. var y = shape.y;
  110. var w = shape.width / 5 * 3;
  111. // Height must be larger than width
  112. var h = Math.max(w, shape.height);
  113. var r = w / 2;
  114. // Dist on y with tangent point and circle center
  115. var dy = r * r / (h - r);
  116. var cy = y - h + r + dy;
  117. var angle = Math.asin(dy / r);
  118. // Dist on x with tangent point and circle center
  119. var dx = Math.cos(angle) * r;
  120. var tanX = Math.sin(angle);
  121. var tanY = Math.cos(angle);
  122. var cpLen = r * 0.6;
  123. var cpLen2 = r * 0.7;
  124. path.moveTo(x - dx, cy + dy);
  125. path.arc(x, cy, r, Math.PI - angle, Math.PI * 2 + angle);
  126. path.bezierCurveTo(x + dx - tanX * cpLen, cy + dy + tanY * cpLen, x, y - cpLen2, x, y);
  127. path.bezierCurveTo(x, y - cpLen2, x - dx + tanX * cpLen, cy + dy + tanY * cpLen, x - dx, cy + dy);
  128. path.closePath();
  129. }
  130. });
  131. /**
  132. * Arrow shape
  133. * @inner
  134. */
  135. var Arrow = graphic.Path.extend({
  136. type: 'arrow',
  137. shape: {
  138. x: 0,
  139. y: 0,
  140. width: 0,
  141. height: 0
  142. },
  143. buildPath: function (ctx, shape) {
  144. var height = shape.height;
  145. var width = shape.width;
  146. var x = shape.x;
  147. var y = shape.y;
  148. var dx = width / 3 * 2;
  149. ctx.moveTo(x, y);
  150. ctx.lineTo(x + dx, y + height);
  151. ctx.lineTo(x, y + height / 4 * 3);
  152. ctx.lineTo(x - dx, y + height);
  153. ctx.lineTo(x, y);
  154. ctx.closePath();
  155. }
  156. });
  157. /**
  158. * Map of path constructors
  159. */
  160. // TODO Use function to build symbol path.
  161. var symbolCtors = {
  162. line: graphic.Line,
  163. rect: graphic.Rect,
  164. roundRect: graphic.Rect,
  165. square: graphic.Rect,
  166. circle: graphic.Circle,
  167. diamond: Diamond,
  168. pin: Pin,
  169. arrow: Arrow,
  170. triangle: Triangle
  171. };
  172. var symbolShapeMakers = {
  173. line: function (x, y, w, h, shape) {
  174. shape.x1 = x;
  175. shape.y1 = y + h / 2;
  176. shape.x2 = x + w;
  177. shape.y2 = y + h / 2;
  178. },
  179. rect: function (x, y, w, h, shape) {
  180. shape.x = x;
  181. shape.y = y;
  182. shape.width = w;
  183. shape.height = h;
  184. },
  185. roundRect: function (x, y, w, h, shape) {
  186. shape.x = x;
  187. shape.y = y;
  188. shape.width = w;
  189. shape.height = h;
  190. shape.r = Math.min(w, h) / 4;
  191. },
  192. square: function (x, y, w, h, shape) {
  193. var size = Math.min(w, h);
  194. shape.x = x;
  195. shape.y = y;
  196. shape.width = size;
  197. shape.height = size;
  198. },
  199. circle: function (x, y, w, h, shape) {
  200. // Put circle in the center of square
  201. shape.cx = x + w / 2;
  202. shape.cy = y + h / 2;
  203. shape.r = Math.min(w, h) / 2;
  204. },
  205. diamond: function (x, y, w, h, shape) {
  206. shape.cx = x + w / 2;
  207. shape.cy = y + h / 2;
  208. shape.width = w;
  209. shape.height = h;
  210. },
  211. pin: function (x, y, w, h, shape) {
  212. shape.x = x + w / 2;
  213. shape.y = y + h / 2;
  214. shape.width = w;
  215. shape.height = h;
  216. },
  217. arrow: function (x, y, w, h, shape) {
  218. shape.x = x + w / 2;
  219. shape.y = y + h / 2;
  220. shape.width = w;
  221. shape.height = h;
  222. },
  223. triangle: function (x, y, w, h, shape) {
  224. shape.cx = x + w / 2;
  225. shape.cy = y + h / 2;
  226. shape.width = w;
  227. shape.height = h;
  228. }
  229. };
  230. export var symbolBuildProxies = {};
  231. each(symbolCtors, function (Ctor, name) {
  232. symbolBuildProxies[name] = new Ctor();
  233. });
  234. var SymbolClz = graphic.Path.extend({
  235. type: 'symbol',
  236. shape: {
  237. symbolType: '',
  238. x: 0,
  239. y: 0,
  240. width: 0,
  241. height: 0
  242. },
  243. calculateTextPosition: function (out, config, rect) {
  244. var res = calculateTextPosition(out, config, rect);
  245. var shape = this.shape;
  246. if (shape && shape.symbolType === 'pin' && config.position === 'inside') {
  247. res.y = rect.y + rect.height * 0.4;
  248. }
  249. return res;
  250. },
  251. buildPath: function (ctx, shape, inBundle) {
  252. var symbolType = shape.symbolType;
  253. if (symbolType !== 'none') {
  254. var proxySymbol = symbolBuildProxies[symbolType];
  255. if (!proxySymbol) {
  256. // Default rect
  257. symbolType = 'rect';
  258. proxySymbol = symbolBuildProxies[symbolType];
  259. }
  260. symbolShapeMakers[symbolType](shape.x, shape.y, shape.width, shape.height, proxySymbol.shape);
  261. proxySymbol.buildPath(ctx, proxySymbol.shape, inBundle);
  262. }
  263. }
  264. });
  265. // Provide setColor helper method to avoid determine if set the fill or stroke outside
  266. function symbolPathSetColor(color, innerColor) {
  267. if (this.type !== 'image') {
  268. var symbolStyle = this.style;
  269. if (this.__isEmptyBrush) {
  270. symbolStyle.stroke = color;
  271. symbolStyle.fill = innerColor || tokens.color.neutral00;
  272. // TODO Same width with lineStyle in LineView
  273. symbolStyle.lineWidth = 2;
  274. } else if (this.shape.symbolType === 'line') {
  275. symbolStyle.stroke = color;
  276. } else {
  277. symbolStyle.fill = color;
  278. }
  279. this.markRedraw();
  280. }
  281. }
  282. /**
  283. * Create a symbol element with given symbol configuration: shape, x, y, width, height, color
  284. */
  285. export function createSymbol(symbolType, x, y, w, h, color,
  286. // whether to keep the ratio of w/h,
  287. keepAspect) {
  288. // TODO Support image object, DynamicImage.
  289. var isEmpty = symbolType.indexOf('empty') === 0;
  290. if (isEmpty) {
  291. symbolType = symbolType.substr(5, 1).toLowerCase() + symbolType.substr(6);
  292. }
  293. var symbolPath;
  294. if (symbolType.indexOf('image://') === 0) {
  295. symbolPath = graphic.makeImage(symbolType.slice(8), new BoundingRect(x, y, w, h), keepAspect ? 'center' : 'cover');
  296. } else if (symbolType.indexOf('path://') === 0) {
  297. symbolPath = graphic.makePath(symbolType.slice(7), {}, new BoundingRect(x, y, w, h), keepAspect ? 'center' : 'cover');
  298. } else {
  299. symbolPath = new SymbolClz({
  300. shape: {
  301. symbolType: symbolType,
  302. x: x,
  303. y: y,
  304. width: w,
  305. height: h
  306. }
  307. });
  308. }
  309. symbolPath.__isEmptyBrush = isEmpty;
  310. // TODO Should deprecate setColor
  311. symbolPath.setColor = symbolPathSetColor;
  312. if (color) {
  313. symbolPath.setColor(color);
  314. }
  315. return symbolPath;
  316. }
  317. export function normalizeSymbolSize(symbolSize) {
  318. if (!isArray(symbolSize)) {
  319. symbolSize = [+symbolSize, +symbolSize];
  320. }
  321. return [symbolSize[0] || 0, symbolSize[1] || 0];
  322. }
  323. export function normalizeSymbolOffset(symbolOffset, symbolSize) {
  324. if (symbolOffset == null) {
  325. return;
  326. }
  327. if (!isArray(symbolOffset)) {
  328. symbolOffset = [symbolOffset, symbolOffset];
  329. }
  330. return [parsePercent(symbolOffset[0], symbolSize[0]) || 0, parsePercent(retrieve2(symbolOffset[1], symbolOffset[0]), symbolSize[1]) || 0];
  331. }