add rect, #41

seiyria · Jan 12, 2019 · 6bf3ded · 6bf3ded
1 parent 1d1d7c3
commit 6bf3ded
Show file tree

Hide file tree

Showing 19 changed files with 211 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -5,3 +5,10 @@
 * clone repo
 * `npm i`
 * `npm start`
+
+## Adding a New Plugin
+
+* Create the `.ne` file in `decklang/plugins`
+* Include the `.ne` file in `decklang/_directives`
+* Add the new directive to the `Directives ->` line in `decklang/_directives`
+* Add a definition file in `src/decklang/plugins/`
diff --git a/decklang/_directives.ne b/decklang/_directives.ne
@@ -10,6 +10,7 @@
 @include "plugins/newcard.ne"
 @include "plugins/pagemargins.ne"
 @include "plugins/pagesize.ne"
+@include "plugins/rect.ne"
 @include "plugins/text.ne"
 @include "plugins/unit.ne"
-Directive -> border|cardmargins|cardrender|cardside|cardsize|cardsperpage|ellipse|font|image|newcard|pagemargins|pagesize|text|unit
+Directive -> border|cardmargins|cardrender|cardside|cardsize|cardsperpage|ellipse|font|image|newcard|pagemargins|pagesize|rect|text|unit
diff --git a/decklang/plugins/rect.ne b/decklang/plugins/rect.ne
@@ -0,0 +1,25 @@
+
+rect -> "rect" _ "="
+        _ PositiveIntegerVariable         # index
+        _ "," _ PositiveCssVariable       # x1 position
+        _ "," _ PositiveCssVariable       # y1 position
+        _ "," _ PositiveCssVariable       # x2 position
+        _ "," _ PositiveCssVariable       # y2 position
+      ( _ "," _ (PositiveCssValue):? ):?  # thickness
+      ( _ "," _ (CssColor):? ):?          # line color (optional, defaults to #000)
+      ( _ "," _ (CssColor):? ):?          # fill color (optional, defaults to #000)
+{%
+  function(d) {
+    return {
+      call: d[0],
+      index: d[4],
+      x1: d[8],
+      y1: d[12],
+      x2: d[16],
+      y2: d[20],
+      thickness: d[21] && d[21][3] ? d[21][3][0] : { val: 1, unit: 'px' },
+      lineColor: d[22] && d[22][3] ? d[22][3][0] : '#000',
+      fillColor: d[23] && d[23][3] ? d[23][3][0] : '#000'
+    }
+  }
+%}
diff --git a/src/app/_directives/_plugin.directive.ts b/src/app/_directives/_plugin.directive.ts
@@ -2,7 +2,8 @@ import { OnChanges, ElementRef, Renderer2 } from '@angular/core';
 
 export class PluginDirective implements OnChanges {
 
-  constructor(public elementRef: ElementRef, public renderer: Renderer2) {}
+  public renderer: Renderer2;
+  public elementRef: ElementRef;
 
   setStyle() { this.style(); }
 

diff --git a/src/app/_directives/image.directive.ts b/src/app/_directives/image.directive.ts
@@ -1,11 +1,13 @@
-import { Directive, Input } from '@angular/core';
+import { Directive, Input, Renderer2, ElementRef } from '@angular/core';
 import { PluginDirective } from './_plugin.directive';
 
 @Directive({
   selector: '[resultImage]'
 })
 export class ImageDirective extends PluginDirective {
 
+  constructor(public elementRef: ElementRef, public renderer: Renderer2) { super(); }
+
   @Input()
   public args: any;
 

diff --git a/src/app/_directives/shape.directive.ts b/src/app/_directives/shape.directive.ts
@@ -1,11 +1,13 @@
-import { Directive, Input } from '@angular/core';
+import { Directive, Input, ElementRef, Renderer2 } from '@angular/core';
 import { PluginDirective } from './_plugin.directive';
 
 @Directive({
   selector: '[resultShape]'
 })
 export class ShapeDirective extends PluginDirective {
 
+  constructor(public elementRef: ElementRef, public renderer: Renderer2) { super(); }
+
   @Input()
   public args: any;
 
@@ -20,6 +22,13 @@ export class ShapeDirective extends PluginDirective {
       return;
     }
 
+    if(args.shape === 'rect') {
+      args.position = 'absolute';
+      args['border-style'] = 'solid';
+      this.assignStyle(args);
+      return;
+    }
+
     this.assignStyle({});
 
   }

diff --git a/src/app/_directives/text.container.directive.ts b/src/app/_directives/text.container.directive.ts
@@ -1,14 +1,16 @@
 
 import { includes } from 'lodash';
 
-import { Directive, Input } from '@angular/core';
+import { Directive, Input, Renderer2, ElementRef } from '@angular/core';
 import { PluginDirective } from './_plugin.directive';
 
 @Directive({
   selector: '[resultTextContainer]'
 })
 export class TextContainerDirective extends PluginDirective {
 
+  constructor(public elementRef: ElementRef, public renderer: Renderer2) { super(); }
+
   @Input()
   public args: any;
 

diff --git a/src/app/_directives/text.directive.ts b/src/app/_directives/text.directive.ts
@@ -1,13 +1,15 @@
 
 import { includes } from 'lodash';
-import { Directive, Input } from '@angular/core';
+import { Directive, Input, Renderer2, ElementRef } from '@angular/core';
 import { PluginDirective } from './_plugin.directive';
 
 @Directive({
   selector: '[resultText]'
 })
 export class TextDirective extends PluginDirective {
 
+  constructor(public elementRef: ElementRef, public renderer: Renderer2) { super(); }
+
   @Input()
   public args: any;
 

diff --git a/src/app/create-container/create-container.component.ts b/src/app/create-container/create-container.component.ts
@@ -43,6 +43,8 @@ export class CreateContainerComponent implements OnInit {
     this.projectData = this.currentProjectService.getContent(this.projectId);
     this.projectData.valueChanges().subscribe(value => {
 
+      console.log(value, value.activeScriptId)
+
       this.project = value;
 
       const ownsProject = this.auth.owns(value);
@@ -57,7 +59,9 @@ export class CreateContainerComponent implements OnInit {
     this.resourceList = this.currentProjectService.getResourceList(this.projectId);
 
     this.api = {
-      changeActiveScript: (index)               => this.projectData.update({ activeScript: index }),
+      changeActiveScript: (index)               => {
+        return this.projectData.update({ activeScript: index });
+      },
       writeFile:          ({ contents, index }) => {
         const script = this.currentProjectService.getScript(this.projectId, index);
         return script.update({ contents });

diff --git a/src/app/create-sidebar/create-sidebar.component.ts b/src/app/create-sidebar/create-sidebar.component.ts
@@ -85,7 +85,7 @@ export class CreateSidebarComponent implements OnInit, OnDestroy {
       this.scripts = this.sortedScripts(scripts);
       this.validateScriptFilenameFn = this.validateScriptFilename.bind(this);
 
-      if(this.scripts[0] && !_.find(this.scripts, { activeScript: this.activeScript })) {
+      if(this.scripts[0] && !_.find(this.scripts, { $key: this.project.activeScript })) {
         this.activeScript.emit(this.scripts[0].$key);
       }
     });

diff --git a/src/app/create-toolbar/create-toolbar.component.ts b/src/app/create-toolbar/create-toolbar.component.ts
@@ -29,7 +29,7 @@ export class CreateToolbarComponent {
 
   constructor(public authService: AuthService) { }
 
-  private replaceName(filename) { return filename.split('.deck').join('.txt'); }
+  private replaceName(filename) { return filename; }
 
   download() {
     const zip = new JSZip();

diff --git a/src/app/help/help.json b/src/app/help/help.json
@@ -369,6 +369,63 @@
                 }
             ]
         ],
+        "rect": [
+            [
+                {
+                    "str": "rect",
+                    "commaBefore": false,
+                    "hasMore": false
+                },
+                {
+                    "str": "=",
+                    "commaBefore": false,
+                    "hasMore": false
+                },
+                {
+                    "str": "PositiveInteger",
+                    "commaBefore": false,
+                    "hasMore": false
+                },
+                {
+                    "str": "CssValue",
+                    "commaBefore": true,
+                    "hasMore": false
+                },
+                {
+                    "str": "CssValue",
+                    "commaBefore": true,
+                    "hasMore": false
+                },
+                {
+                    "str": "CssValue",
+                    "commaBefore": true,
+                    "hasMore": false
+                },
+                {
+                    "str": "CssValue",
+                    "commaBefore": true,
+                    "hasMore": false
+                },
+                {
+                    "str": "CssValue",
+                    "optional": true,
+                    "commaBefore": true,
+                    "hasMore": false
+                },
+                {
+                    "str": "CssColor",
+                    "optional": true,
+                    "commaBefore": true,
+                    "hasMore": false
+                },
+                {
+                    "str": "CssColor",
+                    "optional": true,
+                    "commaBefore": true,
+                    "hasMore": false
+                }
+            ]
+        ],
         "text": [
             [
                 {

diff --git a/src/decklang/_base/_plugin.js b/src/decklang/_base/_plugin.js
@@ -9,7 +9,9 @@ export class Plugin {
     return test || state.options.unit;
   }
 
-  static combineForUnit({ val, unit }, state) {
+  static combineForUnit(opts, state) {
+    if(!opts) opts = { val: 1, unit: this.resolveUnit(null, state) };
+    const { val, unit } = opts;
     return `${val}${this.resolveUnit(unit, state)}`;
   }
 

diff --git a/src/decklang/decklang.js b/src/decklang/decklang.js
@@ -197,6 +197,40 @@ function id(x) { return x[0]; }
           }
         }
         },
+    {"name": "rect$string$1", "symbols": [{"literal":"r"}, {"literal":"e"}, {"literal":"c"}, {"literal":"t"}], "postprocess": function joiner(d) {return d.join('');}},
+    {"name": "rect$ebnf$1$subexpression$1$ebnf$1$subexpression$1", "symbols": ["PositiveCssValue"]},
+    {"name": "rect$ebnf$1$subexpression$1$ebnf$1", "symbols": ["rect$ebnf$1$subexpression$1$ebnf$1$subexpression$1"], "postprocess": id},
+    {"name": "rect$ebnf$1$subexpression$1$ebnf$1", "symbols": [], "postprocess": function(d) {return null;}},
+    {"name": "rect$ebnf$1$subexpression$1", "symbols": ["_", {"literal":","}, "_", "rect$ebnf$1$subexpression$1$ebnf$1"]},
+    {"name": "rect$ebnf$1", "symbols": ["rect$ebnf$1$subexpression$1"], "postprocess": id},
+    {"name": "rect$ebnf$1", "symbols": [], "postprocess": function(d) {return null;}},
+    {"name": "rect$ebnf$2$subexpression$1$ebnf$1$subexpression$1", "symbols": ["CssColor"]},
+    {"name": "rect$ebnf$2$subexpression$1$ebnf$1", "symbols": ["rect$ebnf$2$subexpression$1$ebnf$1$subexpression$1"], "postprocess": id},
+    {"name": "rect$ebnf$2$subexpression$1$ebnf$1", "symbols": [], "postprocess": function(d) {return null;}},
+    {"name": "rect$ebnf$2$subexpression$1", "symbols": ["_", {"literal":","}, "_", "rect$ebnf$2$subexpression$1$ebnf$1"]},
+    {"name": "rect$ebnf$2", "symbols": ["rect$ebnf$2$subexpression$1"], "postprocess": id},
+    {"name": "rect$ebnf$2", "symbols": [], "postprocess": function(d) {return null;}},
+    {"name": "rect$ebnf$3$subexpression$1$ebnf$1$subexpression$1", "symbols": ["CssColor"]},
+    {"name": "rect$ebnf$3$subexpression$1$ebnf$1", "symbols": ["rect$ebnf$3$subexpression$1$ebnf$1$subexpression$1"], "postprocess": id},
+    {"name": "rect$ebnf$3$subexpression$1$ebnf$1", "symbols": [], "postprocess": function(d) {return null;}},
+    {"name": "rect$ebnf$3$subexpression$1", "symbols": ["_", {"literal":","}, "_", "rect$ebnf$3$subexpression$1$ebnf$1"]},
+    {"name": "rect$ebnf$3", "symbols": ["rect$ebnf$3$subexpression$1"], "postprocess": id},
+    {"name": "rect$ebnf$3", "symbols": [], "postprocess": function(d) {return null;}},
+    {"name": "rect", "symbols": ["rect$string$1", "_", {"literal":"="}, "_", "PositiveIntegerVariable", "_", {"literal":","}, "_", "PositiveCssVariable", "_", {"literal":","}, "_", "PositiveCssVariable", "_", {"literal":","}, "_", "PositiveCssVariable", "_", {"literal":","}, "_", "PositiveCssVariable", "rect$ebnf$1", "rect$ebnf$2", "rect$ebnf$3"], "postprocess": 
+        function(d) {
+          return {
+            call: d[0],
+            index: d[4],
+            x1: d[8],
+            y1: d[12],
+            x2: d[16],
+            y2: d[20],
+            thickness: d[21] && d[21][3] ? d[21][3][0] : { val: 1, unit: 'px' },
+            lineColor: d[22] && d[22][3] ? d[22][3][0] : '#000',
+            fillColor: d[23] && d[23][3] ? d[23][3][0] : '#000'
+          }
+        }
+        },
     {"name": "text$string$1", "symbols": [{"literal":"t"}, {"literal":"e"}, {"literal":"x"}, {"literal":"t"}], "postprocess": function joiner(d) {return d.join('');}},
     {"name": "text$ebnf$1$subexpression$1", "symbols": ["_", {"literal":","}, "_", "HorizontalAlignment"]},
     {"name": "text$ebnf$1", "symbols": ["text$ebnf$1$subexpression$1"], "postprocess": id},
@@ -240,6 +274,7 @@ function id(x) { return x[0]; }
     {"name": "Directive", "symbols": ["newcard"]},
     {"name": "Directive", "symbols": ["pagemargins"]},
     {"name": "Directive", "symbols": ["pagesize"]},
+    {"name": "Directive", "symbols": ["rect"]},
     {"name": "Directive", "symbols": ["text"]},
     {"name": "Directive", "symbols": ["unit"]},
     {"name": "Operand", "symbols": [{"literal":"*"}], "postprocess": id},

diff --git a/src/decklang/plugins.json b/src/decklang/plugins.json
@@ -1 +1 @@
-["border","cardmargins","cardrender","cardside","cardsize","cardsperpage","ellipse","font","image","newcard","pagemargins","pagesize","text","unit"]
+["border","cardmargins","cardrender","cardside","cardsize","cardsperpage","ellipse","font","image","newcard","pagemargins","pagesize","rect","text","unit"]
diff --git a/src/decklang/plugins/_plugins.js b/src/decklang/plugins/_plugins.js
@@ -13,5 +13,6 @@ export { NewCard } from './newcard';
 export { Image } from './image';
 export { PageMargins } from './pagemargins';
 export { PageSize } from './pagesize';
+export { Rect } from './rect';
 export { Text } from './text';
 export { Unit } from './unit';
diff --git a/src/decklang/plugins/ellipse.js b/src/decklang/plugins/ellipse.js
@@ -20,7 +20,7 @@ snippet ellipse
     super.operate(args, state, scope);
 
     const { x, y, w, h, thickness, outerColor, innerColor } = args;
-
+    
     const card = state.getCard(args.index);
     card.shapes.push({
       shape: 'ellipse',

diff --git a/src/decklang/plugins/rect.js b/src/decklang/plugins/rect.js
@@ -0,0 +1,40 @@
+
+import { Plugin } from '../_base/_plugin';
+
+export class Rect extends Plugin {
+
+  static get help() { return 'rect = index, x1, y1, x2, y2 [, borderWidth [, lineColor [, fillColor] ] ]'; }
+
+  static get docs() { return 'The rect directive is used to draw rects on a card. It can also be used to draw simple lines.'; }
+
+  static get examples() { return ['rect = 1, 1, 4, 4, 1px, #aca, #bab']; }
+
+  static get snippets() {
+    return [`
+snippet rect
+\rect = \${1:index}, \${2:x1}, \${3:y1}, \${4:x2}, \${5:y2}, \${6:borderWidth}, \${7:lineColor}, \${8:fillColor}
+    `];
+  }
+
+  static operate(args, state, scope) {
+    super.operate(args, state, scope);
+
+    const { x1, y1, x2, y2, thickness, lineColor, fillColor } = args;
+
+    const left = super.combineForUnit(x1, state);
+    const top = super.combineForUnit(y1, state);
+
+    const card = state.getCard(args.index);
+    card.shapes.push({
+      shape: 'rect',
+      left,
+      top,
+      width: `calc(${super.combineForUnit(x2, state)} - ${left})`,
+      height: `calc(${super.combineForUnit(y2, state)} - ${top})`,
+      'border-width': super.combineForUnit(thickness, state),
+      'border-color': lineColor,
+      background: fillColor || 'transparent'
+    });
+  }
+
+}
diff --git a/src/styles.scss b/src/styles.scss
@@ -41,4 +41,15 @@
   .no-print, .no-print * {
     display: none !important;
   }
+}
+
+.nav-pills .nav-link {
+
+  &:not(.active):hover {
+    background-color: #ccc;
+  }
+
+  &.active:hover {
+    color: #fff !important;
+  }
 }
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		["border","cardmargins","cardrender","cardside","cardsize","cardsperpage","ellipse","font","image","newcard","pagemargins","pagesize","text","unit"]
		["border","cardmargins","cardrender","cardside","cardsize","cardsperpage","ellipse","font","image","newcard","pagemargins","pagesize","rect","text","unit"]