{"version":3,"sources":["https://lively-kernel.org/lively4/lively4-stephelm/src/client/reactive/components/basic/codemirror-playground.js"],"names":["babelDefault","loc","range","isAExpr","leakingBindings","DependencyGraph","Morph","babel","COMPONENT_URL","lively4url","CodemirrorPlayground","editor","get","lcm","$","dependencyGraph","_deps","value","aexprs","_aexprs","collectAExpr","arr","textMarkers","_textMarkers","invalidateAST","initialize","windowTitle","livelyEditorStyle","codeMirrorStyle","shadowRoot","prepend","editorLoaded","delayedUpdate","args","debounce","addEventListener","instantUpdate","on","addKeyMap","cm","showAExprInfo","snapToNextAEXpr","allAExpr","inner","traverseAsAST","CallExpression","path","push","selectedAExpr","cursor","getCursor","find","node","contains","showAExprMarker","aexprRanges","map","length","rangeToSelect","r","isBehind","last","selectInCM","resetTextMarkers","pop","clear","aexpr","code","dep","deps","resolveDependencies","forEach","asCM","markText","css","dict","Map","lines","dependencies","_resolveDependencies","statement","set","tmp","aExprs","entries","line","start","aExpr","doc","clearGutter","drawAExprGutter","e","console","error","lively","warn","loadFile","urlString","setURL","augment","highlightText","setBookMark","identifierToRightGutter","lineWidget","notify","getAllMarks","ast_node","column","end","marker","isTraceMark","className","title","widget","evt","success","style","backgroundColor","bookmark","setBookmark","ch","insertLeft","handleMouseEvents","Identifier","_rightGutter","name","text","info","lineInfo","gutterMarkers","markerLine","rightgutter","document","createElement","fontSize","whiteSpace","classList","add","setGutterMarker","resultNode","textContent","stopPropagation","appendChild","_lineWidget","location","element","addLineWidget","indentation","left","livelyPreMigrate","livelyMigrate","other","getURL","livelyInspect","contentNode","inspector","livelyPrepareSave","livelyExample"],"mappings":"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","file":"codemirror-playground.js","sourcesContent":["\"enable aexpr\";\n\nimport babelDefault from 'systemjs-babel-build';\nconst babel = babelDefault.babel;\n\nimport { loc, range } from 'utils';\nimport { isAExpr, leakingBindings } from 'src/client/dependency-graph/ast-utils.js';\nimport { DependencyGraph } from 'src/client/dependency-graph/graph.js';\n\nimport Morph from 'src/components/widgets/lively-morph.js';\n\nconst COMPONENT_URL = `${lively4url}/src/babylonian-programming-editor`;\n\nexport default class CodemirrorPlayground extends Morph {\n\n  get editor() { return this.get('#editor'); }\n  get lcm() { return this.editor.get(\"lively-code-mirror\"); }\n  get $() { return this.lcm.editor; }\n  get dependencyGraph(){\n    return this._deps || (this._deps =  new DependencyGraph(this.lcm.value));\n  }\n  \n  get aexprs() {\n    return this._aexprs || (this._aexprs = this.collectAExpr());\n  }\n  \n  set aexprs(arr) {\n    this._aexprs = arr;\n  }\n  \n  get textMarkers() { return this._textMarkers = this._textMarkers || [] }\n  \n  invalidateAST(){\n    delete this._deps;\n    delete this._aexprs;\n  }\n\n  async initialize() {\n    this.windowTitle = \"CodemirrorPlayground\";\n\n    \n    // Inject styling into CodeMirror\n    const livelyEditorStyle = <link rel=\"stylesheet\" href={`${COMPONENT_URL}/lively-code-editor-inject-styles.css`}></link>;\n    const codeMirrorStyle = <link rel=\"stylesheet\" href={`${COMPONENT_URL}/codemirror-inject-styles.css`}></link>;\n    \n    this.editor.shadowRoot.prepend(livelyEditorStyle);    \n    this.lcm.shadowRoot.prepend(codeMirrorStyle);\n    await this.lcm.editorLoaded();\n    \n    const delayedUpdate = ((...args) => this.delayedUpdate(...args)).debounce(1000)\n    this.lcm.addEventListener('change', () => {\n      this.instantUpdate();\n      delayedUpdate();\n    });\n    this.$.on('cursorActivity', () => {\n      \n    });\n    \n    this.$.addKeyMap({\n      // #KeyboardShortcut Alt-A show additional info of this Active Expression\n      \"Alt-A\": cm => {\n        this.showAExprInfo();\n      },\n      // #KeyboardShortcut Alt-S snap to the next Active Expression\n      \"Alt-S\": cm => {\n        this.snapToNextAEXpr()\n      },\n      \n      // #KeyboardShortcut Alt-I invalidate AST\n      \"Alt-I\": cm => {\n        this.invalidateAST()\n      },\n    });\n  }\n  \n  collectAExpr() {\n    const allAExpr = [];\n    this.dependencyGraph.inner.traverseAsAST({\n      CallExpression(path) {\n        if (isAExpr(path) ) {\n          allAExpr.push(path);\n        }\n      }\n    });    \n    return allAExpr;    \n  }\n  \n  selectedAExpr() {\n    const cursor = this.$.getCursor();\n    return this.aexprs.find((path) => {\n      return range(path.node.loc).contains(cursor);\n    });\n  }\n  \n  // TODO delete lel\n  snapToNextAEXpr() {\n    \n    this.showAExprMarker()\n\n    const cursor = this.$.getCursor();\n    let aexprRanges = this.aexprs.map((path)=>range(path.node.loc));    \n    if (!aexprRanges.length) { return; }\n\n    const rangeToSelect = aexprRanges.find(r => r.contains(cursor)) ||\n      aexprRanges.find(r => r.isBehind(cursor)) ||\n      aexprRanges.last;\n    \n    rangeToSelect.selectInCM(this.$);\n  }\n  \n  resetTextMarkers() {\n    while (this.textMarkers.length) {\n      this.textMarkers.pop().clear();\n    }\n  }\n  \n  \n  showAExprInfo() {\n    this.resetTextMarkers();\n    \n    const aexpr = this.selectedAExpr();\n    if (!aexpr) return;\n    \n    range(aexpr.node.loc).selectInCM(this.$);\n    \n    const cursor = this.$.getCursor();\n    const code = this.lcm.value;\n    let dep = new DependencyGraph(code);\n    let deps = this.dependencyGraph.resolveDependencies(cursor);  \n    deps.forEach((path) => {\n      const r = range(path.node.loc).asCM();\n      this.textMarkers.push(this.$.markText(r[0], r[1], {\n        css: \"background-color: orange\",\n      }))\n    });\n  }\n  \n  \n  showAExprMarker() {\n    let dict = new Map();\n    let lines = [];    \n    \n    this.aexprs.forEach((path)=> {\n      let dependencies = this.dependencyGraph._resolveDependencies(path.get(\"arguments\")[0]);\n      \n      dependencies.forEach(statement => {\n        // keep node identity instead of nodepaths???\n        if (!dict.get(statement)) {\n          dict.set(statement, []);\n        }\n      \n        //for now store the aExpr directly as dep of the line.\n        let tmp = dict.get(statement);\n        tmp.push(path);\n      });\n    });\n    \n    for ( let [statement,aExprs] of dict.entries()){\n      let line = statement.node.loc.start.line - 1; \n      if (!lines[line]) {\n        lines[line] = [];\n      }\n      for (let aExpr of aExprs ){\n        lines[line].push(aExpr);\n      }\n    }\n    \n    this.$.doc.clearGutter('activeExpressionGutter');\n    lines.forEach((deps, line) => {\n      this.lcm.drawAExprGutter(line, deps);\n    })\n  }\n  \n  instantUpdate() {\n    this.invalidateAST();\n    try{\n      this.showAExprMarker();\n    } catch (e) {\n      console.error(e);\n    }\n    this.resetTextMarkers();\n    lively.warn('instant update');\n  }\n\n  delayedUpdate() {\n    lively.warn('delayed update');\n    // #TODO: reinitiate after text changes\n  }\n\n  async loadFile(urlString) {\n    this.editor.setURL(urlString)\n    await this.editor.loadFile()\n    await this.augment()\n  }\n\n  async augment() {\n    this.invalidateAST();\n    this.highlightText();\n    this.setBookMark();\n    \n    this.identifierToRightGutter();\n    \n    this.lineWidget();\n\n    lively.notify(this.$.getAllMarks())\n  }\n  \n  highlightText() {\n    const ast_node = {\n      loc: {\n        start: { line: 1, column: 1 },\n        end: { line: 1, column: 13 }\n      }\n    }\n    const marker = this.$.markText(\n      ...range(ast_node.loc).asCM(),\n      {\n        isTraceMark: true,\n        className: \"marked \" +  1,\n        css: \"background-color: rgba(255, 255, 0, 0.5); border: solid 0.1px red\",\n        title: 'This is some type'\n      });\n  }\n  \n  setBookMark() {\n    const widget = <span click={evt => lively.success('click')} mouseenter={evt => widget.style.backgroundColor = 'green'} mouseleave={evt => widget.style.backgroundColor = 'red'} style=\"width:20px; height:20px; background-color: red; border-radius: 3px;\" title=\"This is a Bookmark\">bookmark</span>;\n    const bookmark = this.$.setBookmark({line: 2, ch: 3}, {\n      widget,\n      insertLeft: true,\n      handleMouseEvents: true\n    })\n    \n  }\n\n  /*MD #### Right Gutter MD*/\n  identifierToRightGutter() {\n    this.lcm.value.traverseAsAST({\n      Identifier: path => {\n        this._rightGutter(path.node.loc.start.line-1, path.node.name)\n      }\n    });\n  }\n\n  _rightGutter(line, text) {\n    var info = this.$.lineInfo(line);\n    var gutterMarkers = info && info.gutterMarkers;\n    var markerLine = gutterMarkers && gutterMarkers.rightgutter\n    if (!markerLine) {\n        markerLine = document.createElement(\"div\")\n        // markerLine.style.backgroundColor = \"rgb(240,240,240)\"\n        markerLine.style.fontSize = \"8pt\"\n        markerLine.style.whiteSpace = \"nowrap\"\n        // markerLine.style.overflow = \"hidden\"\n        markerLine.classList.add(\"markerLine\")  // markerLine\n        this.$.setGutterMarker(line, \"rightgutter\", markerLine)\n    }\n    var resultNode = document.createElement(\"span\");\n    resultNode.classList.add(\"markerResult\")\n    resultNode.classList.add(\"markId_\" + 1)\n    \n    resultNode.textContent = text\n    \n    resultNode.addEventListener(\"click\", (evt) => {\n      lively.success('Rightgutter clicked: ' + text)\n        evt.stopPropagation()\n    })\n    markerLine.appendChild(resultNode)\n  }\n  \n  /*MD ## Line Widget MD*/\n  lineWidget() {\n    /*\n    this.lcm.value.traverseAsAST({\n      CallExpression: path => {\n        const callee = path.get('callee');\n        if (!callee) { return; }\n        \n        if (callee.isIdentifier() && callee.node.name === 'aexpr') {\n          const arrowFunction = path.get('arguments')[0];\n          if (arrowFunction.isArrowFunctionExpression()) {\n            const expression = arrowFunction.get('body');\n            expression.traverse({\n              Identifier: path => {\n                const clickCallback = async e => {\n                  this.lcm.ternWrapper.then(async tw => {\n                    const data = await tw.playgroundGetDefinition(\n                      this.$,\n                      this.lcm,\n                      path.node.loc\n                    );\n                    if (data) {\n                      range(data).selectInCM(this.$)\n                    }\n                  });\n                };\n\n                const element = <span\n                  class={\"widget \" + \"probe-example\"}\n                  click={clickCallback}\n                >find definition of {path.node.name}</span>;\n                this._lineWidget(path.node.loc, element);\n              }\n            });\n          }\n        }\n      }\n    });\n    */\n  }\n  \n  _lineWidget(location, element) {\n    const line = location.start.line - 1;\n    this.$.addLineWidget(line, element);\n    const indentation = location.start.column;\n    element.style.left = `${indentation}ch`;\n  }\n  \n  /* Lively-specific API */\n\n  livelyPreMigrate() {\n    // is called on the old object before the migration\n  }\n  \n  livelyMigrate(other) {\n    this.loadFile(other.editor.getURL());\n  }\n  \n  livelyInspect(contentNode, inspector) {\n    // do nothing\n  }\n  \n  livelyPrepareSave() {\n  }\n  \n  async livelyExample() {\n    this.loadFile(lively4url + \"/src/client/reactive/components/basic/codemirror-playground-example.js\")\n  }\n  \n  \n}"]}