run()

in src/editor/sandbox/setup.js [221:406]

• 167 lines of code
• 29 McCabe index (conditional complexity)

    run({ store, recreateInstance }) {
      if (recreateInstance || !chartInstance || chartInstance.isDisposed()) {
        this.dispose();
        chartInstance = echarts.init(
          document.getElementById('chart-container'),
          store.darkMode ? 'dark' : store.theme,
          {
            renderer: store.renderer,
            useDirtyRect: store.useDirtyRect
          }
        );
        if (store.useDirtyRect && store.renderer === 'canvas') {
          try {
            showDebugDirtyRect(chartInstance.getZr(), {
              autoHideDelay: 500
            });
          } catch (e) {
            console.error('failed to show debug dirty rect', e);
          }
        }
        window.addEventListener('resize', () => {
          chartInstance.resize();
          echarts.util.isFunction(appEnv.onresize) && appEnv.onresize();
        });
        wrapChartMethods(chartInstance);
      }

      // TODO Scope the variables in component.
      clearTimers();
      clearChartEvents(chartInstance);
      // Reset
      appEnv = {};
      appStore = store;

      try {
        // run the code
        const compiledCode = store.runCode
          // Replace random method
          .replace(/Math.random\([^)]*\)/g, '__ECHARTS_EXAMPLE_RANDOM__()');
        const echartsExampleRandom = new Math.seedrandom(store.randomSeed);
        // PENDING: create a single panel for CSS code?
        const runCode =
          'var css, option;' +
          handleLoop(compiledCode) +
          '\nreturn [option, css];';

        let func;
        let res;

        if (isShared) {
          func = new Function(
            'myChart',
            'app',
            'setTimeout',
            'setInterval',
            'ROOT_PATH',
            'CDN_PATH',
            '__ECHARTS_EXAMPLE_RANDOM__',
            'top',
            'parent',
            'window',
            'self',
            'globalThis',
            'document',
            'location',
            'history',
            'eval',
            'execScript',
            'Function',
            runCode
          ).bind(win);

          res = func(
            chartInstance,
            appEnv,
            setTimeout,
            setInterval,
            store.cdnRoot,
            store.cdnPath,
            echartsExampleRandom,
            // prevent someone from trying to close the parent window via top/parent.close()
            // or any other unexpected and dangerous behaviors
            void 0,
            void 0,
            win,
            win,
            win,
            win.document,
            win.location,
            void 0,
            void 0,
            void 0,
            void 0
          );
        } else {
          func = new Function(
            'myChart',
            'app',
            'setTimeout',
            'setInterval',
            'ROOT_PATH',
            'CDN_PATH',
            '__ECHARTS_EXAMPLE_RANDOM__',
            runCode
          );

          res = func(
            chartInstance,
            appEnv,
            setTimeout,
            setInterval,
            store.cdnRoot,
            store.cdnPath,
            echartsExampleRandom
          );
        }

        const css = (chartStyleEl.textContent = res[1] || '');
        sendMessage({
          evt: 'cssParsed',
          css
        });

        const option = res[0];
        echarts.util.isObject(option) && chartInstance.setOption(option, true);
      } catch (e) {
        // PENDING: prevent chart can't be updated once error occurs
        chartInstance.__flagInMainProcess = false;
        console.error('failed to run code', e);
        sendMessage({ evt: 'codeError', message: e.message });
      }

      if (gui) {
        $(gui.domElement).remove();
        gui.destroy();
        gui = null;
      }

      if (appEnv.config) {
        gui = new dat.GUI({ autoPlace: false });
        $(gui.domElement).css({
          position: 'absolute',
          right: 0,
          top: 0,
          zIndex: 1000
        });
        document.body.append(gui.domElement);

        const configParams = appEnv.configParameters || {};
        const config = appEnv.config;
        for (const name in config) {
          const value = config[name];
          if (name !== 'onChange' && name !== 'onFinishChange') {
            let isColor;
            let controller;
            const configVal = configParams[name];
            if (configVal) {
              if (configVal.options) {
                controller = gui.add(config, name, configVal.options);
              } else if (configVal.min != null) {
                controller = gui.add(
                  config,
                  name,
                  configVal.min,
                  configVal.max
                );
              }
            }
            if (typeof value === 'string') {
              try {
                const colorArr = echarts.color.parse(value);
                if ((isColor = !!colorArr)) {
                  value = echarts.color.stringify(colorArr, 'rgba');
                }
              } catch (e) {}
            }
            if (!controller) {
              controller = gui[isColor ? 'addColor' : 'add'](config, name);
            }
            config.onChange && controller.onChange(config.onChange);
            config.onFinishChange &&
              controller.onFinishChange(config.onFinishChange);
          }
        }
      }
    }