From d6801f4fae4cb9eccd2593752026d3b688ad380f Mon Sep 17 00:00:00 2001 From: xuying <33517362+tangying1027@users.noreply.github.com> Date: Mon, 18 Nov 2024 16:04:38 +0800 Subject: [PATCH] =?UTF-8?q?chore:=20=E5=A2=9E=E5=8A=A0player=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E4=BE=8B=E5=AD=90=20(#2017)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: xuying.xu --- site/.dumi/global.ts | 2 + site/.dumirc.ts | 2 +- site/examples/creative/case/demo/meta.json | 5 + site/examples/creative/case/demo/player.jsx | 1319 ++++++++++++++++++ site/examples/creative/plugin/demo/rough.jsx | 31 +- site/package.json | 1 + site/site/global.less | 4 + 7 files changed, 1353 insertions(+), 11 deletions(-) create mode 100644 site/examples/creative/case/demo/player.jsx diff --git a/site/.dumi/global.ts b/site/.dumi/global.ts index f67686a52..6733f0d5e 100644 --- a/site/.dumi/global.ts +++ b/site/.dumi/global.ts @@ -6,6 +6,8 @@ if (window) { window.React = require('react'); window.ReactDOM = require('react-dom'); window.gPluginRoughCanvasRenderer = require('@antv/g-plugin-rough-canvas-renderer'); + (window as any).lilGui = require('lil-gui'); + (window as any).stats = require('stats.js'); // window.f2 = require('./src/index-all.js'); // window.DataSet = require('@antv/data-set'); window.lodash = require('lodash'); diff --git a/site/.dumirc.ts b/site/.dumirc.ts index 1d5ac767c..5e25bc7d0 100644 --- a/site/.dumirc.ts +++ b/site/.dumirc.ts @@ -151,7 +151,6 @@ export default defineConfig({ en: 'Getting Started', }, link: `/tutorial/getting-started`, - }, { text: { @@ -352,6 +351,7 @@ export default defineConfig({
+ `, json: { diff --git a/site/examples/creative/case/demo/meta.json b/site/examples/creative/case/demo/meta.json index 64bac7fff..ba45a7cee 100644 --- a/site/examples/creative/case/demo/meta.json +++ b/site/examples/creative/case/demo/meta.json @@ -29,6 +29,11 @@ "title": "折线图动态排序", "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/XjBinPfpXY/line-race.gif" }, + { + "filename": "player.jsx", + "title": "折线图动画", + "screenshot": "https://gw.alipayobjects.com/zos/finxbff/compress-tinypng/qKUDEeJ7aFiPN4RHxhgbP/Kapture_2024_11_18_at_15_59_55.gif" + }, { "filename": "apple-watch.jsx", "title": "Apple Watch 健身记录", diff --git a/site/examples/creative/case/demo/player.jsx b/site/examples/creative/case/demo/player.jsx new file mode 100644 index 000000000..516b129ad --- /dev/null +++ b/site/examples/creative/case/demo/player.jsx @@ -0,0 +1,1319 @@ +/** @jsx jsx */ +import { Axis, Canvas, Chart, jsx, Line, Player, RectGuide, TextGuide } from '@antv/f2'; +import 'lil-gui'; +const context = document.getElementById('container').getContext('2d'); +const $wrapper = document.getElementById('mobile-footer'); +const data = [ + { + x: '2003-01-01', + y: 348.05, + }, + { + x: '2003-01-29', + y: 365.95, + }, + { + x: '2003-02-26', + y: 354.35, + }, + { + x: '2003-03-26', + y: 330.25, + }, + { + x: '2003-04-23', + y: 331.25, + }, + { + x: '2003-05-21', + y: 371.55, + }, + { + x: '2003-06-18', + y: 357.35, + }, + { + x: '2003-07-16', + y: 343.55, + }, + { + x: '2003-08-13', + y: 362.7, + }, + { + x: '2003-09-10', + y: 380.45, + }, + { + x: '2003-10-08', + y: 375.25, + }, + { + x: '2003-11-05', + y: 381.35, + }, + { + x: '2003-12-03', + y: 404.75, + }, + { + x: '2003-12-31', + y: 415.45, + }, + { + x: '2004-01-28', + y: 410.35, + }, + { + x: '2004-02-25', + y: 396.05, + }, + { + x: '2004-03-24', + y: 415.55, + }, + { + x: '2004-04-21', + y: 390.05, + }, + { + x: '2004-05-19', + y: 382.45, + }, + { + x: '2004-06-16', + y: 384.65, + }, + { + x: '2004-07-14', + y: 405.45, + }, + { + x: '2004-08-11', + y: 395.45, + }, + { + x: '2004-09-08', + y: 399.65, + }, + { + x: '2004-10-06', + y: 417.88, + }, + { + x: '2004-11-03', + y: 426.85, + }, + { + x: '2004-12-01', + y: 454.75, + }, + { + x: '2004-12-29', + y: 436.45, + }, + { + x: '2005-01-26', + y: 426.8, + }, + { + x: '2005-02-23', + y: 434.55, + }, + { + x: '2005-03-23', + y: 425.35, + }, + { + x: '2005-04-20', + y: 434.6, + }, + { + x: '2005-05-18', + y: 421.75, + }, + { + x: '2005-06-15', + y: 428.9, + }, + { + x: '2005-07-13', + y: 424.1, + }, + { + x: '2005-08-10', + y: 437.6, + }, + { + x: '2005-09-07', + y: 444.7, + }, + { + x: '2005-10-05', + y: 464.75, + }, + { + x: '2005-11-02', + y: 463.2, + }, + { + x: '2005-11-30', + y: 493.08, + }, + { + x: '2005-12-28', + y: 516.6, + }, + { + x: '2006-01-25', + y: 563.4, + }, + { + x: '2006-02-22', + y: 555.2, + }, + { + x: '2006-03-22', + y: 550.8, + }, + { + x: '2006-04-19', + y: 640.2, + }, + { + x: '2006-05-17', + y: 687.1, + }, + { + x: '2006-06-14', + y: 559.75, + }, + { + x: '2006-07-12', + y: 651.53, + }, + { + x: '2006-08-09', + y: 650.03, + }, + { + x: '2006-09-06', + y: 633.7, + }, + { + x: '2006-10-04', + y: 567, + }, + { + x: '2006-11-01', + y: 617.6, + }, + { + x: '2006-11-29', + y: 636.65, + }, + { + x: '2006-12-27', + y: 627.2, + }, + { + x: '2007-01-24', + y: 648.8, + }, + { + x: '2007-02-21', + y: 678.85, + }, + { + x: '2007-03-21', + y: 664.2, + }, + { + x: '2007-04-18', + y: 690.05, + }, + { + x: '2007-05-16', + y: 662.15, + }, + { + x: '2007-06-13', + y: 651.75, + }, + { + x: '2007-07-11', + y: 660.65, + }, + { + x: '2007-08-08', + y: 674.8, + }, + { + x: '2007-09-05', + y: 681.8, + }, + { + x: '2007-10-03', + y: 727.9, + }, + { + x: '2007-10-31', + y: 796.59, + }, + { + x: '2007-11-28', + y: 804.83, + }, + { + x: '2007-12-26', + y: 824.5, + }, + { + x: '2008-01-23', + y: 890.32, + }, + { + x: '2008-02-20', + y: 944.1, + }, + { + x: '2008-03-19', + y: 944.2, + }, + { + x: '2008-04-16', + y: 944.59, + }, + { + x: '2008-05-14', + y: 864, + }, + { + x: '2008-06-11', + y: 880.35, + }, + { + x: '2008-07-09', + y: 928.57, + }, + { + x: '2008-08-06', + y: 879.8, + }, + { + x: '2008-09-03', + y: 801.3, + }, + { + x: '2008-10-01', + y: 870.8, + }, + { + x: '2008-10-29', + y: 754.95, + }, + { + x: '2008-11-26', + y: 812.9, + }, + { + x: '2008-12-24', + y: 848, + }, + { + x: '2009-01-21', + y: 854.25, + }, + { + x: '2009-02-18', + y: 984.9, + }, + { + x: '2009-03-18', + y: 942, + }, + { + x: '2009-04-15', + y: 891.05, + }, + { + x: '2009-05-13', + y: 926.3, + }, + { + x: '2009-06-10', + y: 954.49, + }, + { + x: '2009-07-08', + y: 909.5, + }, + { + x: '2009-08-05', + y: 963.45, + }, + { + x: '2009-09-02', + y: 978.5, + }, + { + x: '2009-09-30', + y: 1007.7, + }, + { + x: '2009-10-28', + y: 1028.1, + }, + { + x: '2009-11-25', + y: 1191.8, + }, + { + x: '2009-12-23', + y: 1087.55, + }, + { + x: '2010-01-20', + y: 1111.05, + }, + { + x: '2010-02-17', + y: 1106.81, + }, + { + x: '2010-03-17', + y: 1120.35, + }, + { + x: '2010-04-14', + y: 1155.35, + }, + { + x: '2010-05-12', + y: 1238.93, + }, + { + x: '2010-06-09', + y: 1233.5, + }, + { + x: '2010-07-07', + y: 1202.75, + }, + { + x: '2010-08-04', + y: 1194.95, + }, + { + x: '2010-09-01', + y: 1244.3, + }, + { + x: '2010-09-29', + y: 1309.85, + }, + { + x: '2010-10-27', + y: 1325.35, + }, + { + x: '2010-11-24', + y: 1375, + }, + { + x: '2010-12-22', + y: 1385.35, + }, + { + x: '2011-01-19', + y: 1369.93, + }, + { + x: '2011-02-16', + y: 1374.43, + }, + { + x: '2011-03-16', + y: 1398.88, + }, + { + x: '2011-04-13', + y: 1457.3, + }, + { + x: '2011-05-11', + y: 1501.2, + }, + { + x: '2011-06-08', + y: 1537.65, + }, + { + x: '2011-07-06', + y: 1528.9, + }, + { + x: '2011-08-03', + y: 1661.75, + }, + { + x: '2011-08-31', + y: 1825.72, + }, + { + x: '2011-09-28', + y: 1608.8, + }, + { + x: '2011-10-26', + y: 1724.82, + }, + { + x: '2011-11-23', + y: 1692.27, + }, + { + x: '2011-12-21', + y: 1615.23, + }, + { + x: '2012-01-18', + y: 1659.95, + }, + { + x: '2012-02-15', + y: 1728.15, + }, + { + x: '2012-03-14', + y: 1644.88, + }, + { + x: '2012-04-11', + y: 1659.13, + }, + { + x: '2012-05-09', + y: 1589.57, + }, + { + x: '2012-06-06', + y: 1619.3, + }, + { + x: '2012-07-04', + y: 1615.63, + }, + { + x: '2012-08-01', + y: 1599.48, + }, + { + x: '2012-08-29', + y: 1656.5, + }, + { + x: '2012-09-26', + y: 1752.75, + }, + { + x: '2012-10-24', + y: 1701.95, + }, + { + x: '2012-11-21', + y: 1728.7, + }, + { + x: '2012-12-19', + y: 1667.25, + }, + { + x: '2013-01-16', + y: 1679.95, + }, + { + x: '2013-02-13', + y: 1642.55, + }, + { + x: '2013-03-13', + y: 1587.7, + }, + { + x: '2013-04-10', + y: 1558.54, + }, + { + x: '2013-05-08', + y: 1474.07, + }, + { + x: '2013-06-05', + y: 1403.4, + }, + { + x: '2013-07-03', + y: 1252.83, + }, + { + x: '2013-07-31', + y: 1325.25, + }, + { + x: '2013-08-28', + y: 1417.51, + }, + { + x: '2013-09-25', + y: 1334.48, + }, + { + x: '2013-10-23', + y: 1333.42, + }, + { + x: '2013-11-20', + y: 1244.25, + }, + { + x: '2013-12-18', + y: 1218.5, + }, + { + x: '2014-01-15', + y: 1241.86, + }, + { + x: '2014-02-12', + y: 1291.18, + }, + { + x: '2014-03-12', + y: 1366.54, + }, + { + x: '2014-04-09', + y: 1312.09, + }, + { + x: '2014-05-07', + y: 1289.57, + }, + { + x: '2014-06-04', + y: 1245.35, + }, + { + x: '2014-07-02', + y: 1327.2, + }, + { + x: '2014-07-30', + y: 1295.88, + }, + { + x: '2014-08-27', + y: 1282.32, + }, + { + x: '2014-09-24', + y: 1216.85, + }, + { + x: '2014-10-22', + y: 1242.14, + }, + { + x: '2014-11-19', + y: 1182.06, + }, + { + x: '2014-12-17', + y: 1189, + }, + { + x: '2015-01-14', + y: 1229.68, + }, + { + x: '2015-02-11', + y: 1218.85, + }, + { + x: '2015-03-11', + y: 1154.78, + }, + { + x: '2015-04-08', + y: 1202.65, + }, + { + x: '2015-05-06', + y: 1191.29, + }, + { + x: '2015-06-03', + y: 1184.95, + }, + { + x: '2015-07-01', + y: 1168.6, + }, + { + x: '2015-07-29', + y: 1096.55, + }, + { + x: '2015-08-26', + y: 1124.75, + }, + { + x: '2015-09-23', + y: 1129.95, + }, + { + x: '2015-10-21', + y: 1166.65, + }, + { + x: '2015-11-18', + y: 1071.07, + }, + { + x: '2015-12-16', + y: 1072.71, + }, + { + x: '2016-01-14', + y: 1077.81, + }, + { + x: '2016-02-11', + y: 1246.68, + }, + { + x: '2016-03-10', + y: 1271.2, + }, + { + x: '2016-04-07', + y: 1240.35, + }, + { + x: '2016-05-05', + y: 1278, + }, + { + x: '2016-06-02', + y: 1210.55, + }, + { + x: '2016-06-30', + y: 1321.51, + }, + { + x: '2016-07-28', + y: 1335.05, + }, + { + x: '2016-08-25', + y: 1321.8, + }, + { + x: '2016-09-23', + y: 1337.1, + }, + { + x: '2016-10-21', + y: 1265.71, + }, + { + x: '2016-11-18', + y: 1207.97, + }, + { + x: '2016-12-16', + y: 1134.9, + }, + { + x: '2017-01-13', + y: 1197.02, + }, + { + x: '2017-02-13', + y: 1225.2, + }, + { + x: '2017-03-13', + y: 1203.4, + }, + { + x: '2017-04-10', + y: 1254.33, + }, + { + x: '2017-05-08', + y: 1225.4, + }, + { + x: '2017-06-06', + y: 1293.65, + }, + { + x: '2017-07-04', + y: 1223, + }, + { + x: '2017-08-01', + y: 1268.65, + }, + { + x: '2017-08-29', + y: 1309.05, + }, + { + x: '2017-09-26', + y: 1293.35, + }, + { + x: '2017-10-24', + y: 1276.05, + }, + { + x: '2017-11-21', + y: 1280.03, + }, + { + x: '2017-12-19', + y: 1264.28, + }, + { + x: '2018-01-16', + y: 1338.2, + }, + { + x: '2018-02-13', + y: 1329.159, + }, + { + x: '2018-03-13', + y: 1326.2, + }, + { + x: '2018-04-10', + y: 1339.4, + }, + { + x: '2018-05-08', + y: 1314.4, + }, + { + x: '2018-06-05', + y: 1296.3, + }, + { + x: '2018-07-03', + y: 1252.8, + }, + { + x: '2018-07-31', + y: 1223.7, + }, + { + x: '2018-08-28', + y: 1200.8, + }, + { + x: '2018-09-25', + y: 1200.9, + }, + { + x: '2018-10-23', + y: 1229.9, + }, + { + x: '2018-11-20', + y: 1221.3, + }, + { + x: '2018-12-18', + y: 1249.195, + }, + { + x: '2019-01-16', + y: 1293.4, + }, + { + x: '2019-02-13', + y: 1305.975, + }, + { + x: '2019-03-13', + y: 1309, + }, + { + x: '2019-04-10', + y: 1307.9, + }, + { + x: '2019-05-08', + y: 1280.5, + }, + { + x: '2019-06-05', + y: 1329.7, + }, + { + x: '2019-07-03', + y: 1418.5, + }, + { + x: '2019-07-31', + y: 1413.7, + }, + { + x: '2019-08-28', + y: 1539.2, + }, + { + x: '2019-09-25', + y: 1503.7, + }, + { + x: '2019-10-23', + y: 1492, + }, + { + x: '2019-11-20', + y: 1471.5, + }, + { + x: '2019-12-18', + y: 1475.2, + }, + { + x: '2020-01-15', + y: 1556, + }, + { + x: '2020-02-12', + y: 1565.6, + }, + { + x: '2020-03-11', + y: 1634.6, + }, + { + x: '2020-04-08', + y: 1644.8, + }, + { + x: '2020-05-07', + y: 1715.6, + }, + { + x: '2020-06-05', + y: 1681.6, + }, + { + x: '2020-07-03', + y: 1774.31, + }, + { + x: '2020-07-31', + y: 1974.9, + }, + { + x: '2020-08-28', + y: 1964.5, + }, + { + x: '2020-09-25', + y: 1860, + }, + { + x: '2020-10-23', + y: 1901.174, + }, + { + x: '2020-11-20', + y: 1870.598, + }, + { + x: '2020-12-18', + y: 1880.895, + }, + { + x: '2021-01-18', + y: 1836.99, + }, + { + x: '2021-02-15', + y: 1817.46, + }, + { + x: '2021-03-15', + y: 1731.5, + }, + { + x: '2021-04-12', + y: 1732.4, + }, + { + x: '2021-05-10', + y: 1835.63, + }, + { + x: '2021-06-07', + y: 1898.9, + }, + { + x: '2021-07-05', + y: 1791.66, + }, + { + x: '2021-08-02', + y: 1813.31, + }, + { + x: '2021-08-30', + y: 1809.21, + }, + { + x: '2021-09-27', + y: 1749.728, + }, + { + x: '2021-10-25', + y: 1807.4, + }, + { + x: '2021-11-22', + y: 1804.282, + }, + { + x: '2021-12-20', + y: 1790.6, + }, + { + x: '2022-01-17', + y: 1818.53, + }, + { + x: '2022-02-14', + y: 1871.04, + }, + { + x: '2022-03-14', + y: 1950.3, + }, + { + x: '2022-04-11', + y: 1953.54, + }, + { + x: '2022-05-10', + y: 1837.992, + }, + { + x: '2022-06-07', + y: 1852.08, + }, + { + x: '2022-07-05', + y: 1764.2, + }, + { + x: '2022-08-02', + y: 1760, + }, + { + x: '2022-08-30', + y: 1723.6, + }, + { + x: '2022-09-27', + y: 1628.7, + }, + { + x: '2022-10-25', + y: 1652.6, + }, + { + x: '2022-11-22', + y: 1739.7, + }, + { + x: '2022-12-20', + y: 1816.675, + }, + { + x: '2023-01-18', + y: 1903.7, + }, + { + x: '2023-02-15', + y: 1835.6, + }, + { + x: '2023-03-15', + y: 1917.72, + }, + { + x: '2023-04-12', + y: 2014.6, + }, + { + x: '2023-05-10', + y: 2029.49, + }, + { + x: '2023-06-07', + y: 1939.51, + }, + { + x: '2023-07-05', + y: 1914.6, + }, + { + x: '2023-08-02', + y: 1934.13, + }, + { + x: '2023-08-30', + y: 1942.07, + }, + { + x: '2023-09-27', + y: 1874.57, + }, + { + x: '2023-10-25', + y: 1979.3, + }, + { + x: '2023-11-22', + y: 1989.548, + }, + { + x: '2023-12-20', + y: 2031.735, + }, + { + x: '2024-01-17', + y: 2005.945, + }, + { + x: '2024-02-14', + y: 1992.105, + }, + { + x: '2024-03-13', + y: 2174.128, + }, + { + x: '2024-04-11', + y: 2372.016, + }, + { + x: '2024-05-09', + y: 2346.211, + }, + { + x: '2024-06-06', + y: 2375.375, + }, + { + x: '2024-07-04', + y: 2356.52, + }, + { + x: '2024-08-01', + y: 2446.065, + }, + { + x: '2024-08-29', + y: 2520.9, + }, + { + x: '2024-09-27', + y: 2657.97, + }, +]; + +const guideData = [ + { + d0: [ + { + x: '2003-03-26', + y: 'min', + }, + { + x: '2005-03-23', + y: 'max', + }, + ], + text: { + x: '2003-03-26', + y: 'max', + }, + textContent: '伊拉克战争', + }, + { + d0: [ + { + x: '2007-04-18', + y: 'min', + }, + { + x: '2008-03-19', + y: 'max', + }, + ], + text: { + x: '2007-04-18', + y: 'max', + }, + textContent: '次贷危机', + }, + { + d0: [ + { + x: '2019-12-18', + y: 'min', + }, + { + x: '2020-08-28', + y: 'max', + }, + ], + text: { + x: '2019-12-18', + y: 'max', + }, + textContent: '新冠疫情', + }, + { + d0: [ + { + x: '2024-01-17', + y: 'min', + }, + { + x: '2024-09-27', + y: 'max', + }, + ], + text: { + x: '2024-01-17', + y: 'max', + }, + textContent: '地缘冲突\n叠加大选', + }, +]; + +const keyFrames = [ + { + line: { + to: { + data, + }, + duration: 1500, + }, + }, + { + 'rect-0': { to: { visible: true }, duration: 500 }, + 'text-0': { to: { visible: true }, duration: 500 }, + }, + { + 'rect-1': { to: { visible: true }, duration: 500 }, + 'text-1': { to: { visible: true }, duration: 500 }, + }, + { + 'rect-2': { to: { visible: true }, duration: 500 }, + 'text-2': { to: { visible: true }, duration: 500 }, + }, + { + 'rect-3': { to: { visible: true }, duration: 500 }, + 'text-3': { to: { visible: true }, duration: 500 }, + }, +]; +let playRef = { current: null }; +const { props } = ( + + + + + + {guideData.map((d, i) => ( + + ))} + {guideData.map((d, i) => ( + + ))} + + + +); + +const canvas = new Canvas(props); +canvas.render().then(() => { + //UI + const gui = new lil.GUI({ autoPlace: false }); + $wrapper.appendChild(gui.domElement); + const animationFolder = gui.addFolder('animation'); + const animationConfig = { + play: () => { + playRef.current.setPlayState('play'); + }, + pause: () => { + playRef.current.setPlayState('pause'); + }, + goto: 0, + }; + animationFolder.add(animationConfig, 'play').name('Play'); + animationFolder.add(animationConfig, 'pause').name('Pause'); + animationFolder.add(animationConfig, 'goto', 0, 3500).onChange((n) => { + playRef.current.goTo(n); + }); + animationFolder.open(); +}); diff --git a/site/examples/creative/plugin/demo/rough.jsx b/site/examples/creative/plugin/demo/rough.jsx index bd5627892..3d18032db 100644 --- a/site/examples/creative/plugin/demo/rough.jsx +++ b/site/examples/creative/plugin/demo/rough.jsx @@ -1,14 +1,25 @@ /** @jsx jsx */ -import { Canvas, Chart, Interval, jsx, Axis, CanvasRenderer } from '@antv/f2'; +import { Axis, Canvas, CanvasRenderer, Chart, Interval, jsx } from '@antv/f2'; import { Plugin as PluginRoughCanvasRenderer } from '@antv/g-plugin-rough-canvas-renderer'; const context = document.getElementById('container').getContext('2d'); const data = [ - { genre: 'Sports', sold: 275 }, - { genre: 'Strategy', sold: 115 }, - { genre: 'Action', sold: 120 }, - { genre: 'Shooter', sold: 350 }, - { genre: 'Other', sold: 150 }, + { version: '5.0.21', rate: 1, type: 'iphone6' }, + { version: '5.0.21', rate: 13, type: '仿真' }, + { version: '5.0.21', type: 'iphone8', rate: 11 }, + { version: '5.0.21', type: 'iphone x', rate: 0 }, + + { version: '5.0.29', rate: 1, type: 'iphone6' }, + { version: '5.0.29', rate: 14, type: '仿真' }, + { version: '5.0.29', type: 'iphone8', rate: 10 }, + { version: '5.0.29', type: 'iphone x', rate: 0 }, + + { version: '5.0.30', rate: 1, type: 'iphone6' }, + { version: '5.0.30', rate: 15, type: '仿真' }, + { version: '5.0.30', type: 'iphone8', rate: 13 }, + { version: '5.0.30', type: 'iphone x', rate: 12 }, + + { version: 'next', type: 'iphone x', rate: 24 }, ]; // create a renderer @@ -18,11 +29,11 @@ canvasRenderer.registerPlugin(new PluginRoughCanvasRenderer()); const { props } = ( - - - + + + ); const canvas = new Canvas(props); -canvas.render(); \ No newline at end of file +canvas.render(); diff --git a/site/package.json b/site/package.json index 6cc1f3d90..b6e3e83cd 100644 --- a/site/package.json +++ b/site/package.json @@ -28,6 +28,7 @@ "dumi": "^2.0.0", "f2-touchemulator": "~0.0.1", "gh-pages": "^2.1.1", + "lil-gui": "^0.20.0", "stats.js": "^0.17.0" }, "devDependencies": { diff --git a/site/site/global.less b/site/site/global.less index d9ade7b41..e569093fd 100644 --- a/site/site/global.less +++ b/site/site/global.less @@ -23,3 +23,7 @@ height: 260px; } } + +.mobile-footer { + +}