Merge pull request #52 from palantir/bd/textshear-2

Add textShear option for shearing text
palantir · Feb 10, 2017 · 793bc9e · 793bc9e · blueprint-bot · Feb 10, 2017
2 parents a2b7191 + 6a50d4a
commit 793bc9e
Show file tree

Hide file tree

Showing 12 changed files with 219 additions and 118 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,6 +5,7 @@ build
 coverage
 preview/bundle.js
 svg-typewriter.js
+*.log
 
 # IDEs
 .idea/

diff --git a/circle.yml b/circle.yml
@@ -13,7 +13,8 @@ deployment:
   preview:
     branch: /.*/
     commands:
-      - ./preview.sh
+      - npm run preview # build the preview bundle
+      - ./preview/demo.js # comment back on github
   npm:
     tag: /release-.*/
     owner: palantir

diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "test": "npm-run-all build lint:ts test:mocha test:coverage",
     "test:coverage": "istanbul check-coverage",
     "test:mocha": "PATH=$PATH:$(npm bin) mochify --reporter spec --plugin [ mochify-istanbul --report text --report json --dir coverage --exclude '**/test/**/*' ] ${npm_package_testsGlob}",
+    "test:local": "PATH=$PATH:$(npm bin) mochify --reporter spec ${npm_package_testsGlob}",
     "test:sauce": "mochify  --reporter spec --wd ${npm_package_testsGlob}",
     "echo": "echo"
   },
@@ -41,6 +42,7 @@
   "license": "MIT",
   "dependencies": {
     "@types/d3": "^3.5",
+    "circle-github-bot": "^0.4.0",
     "d3": "^3.5"
   },
   "devDependencies": {

diff --git a/preview.sh b/preview.sh
diff --git a/preview/demo.js b/preview/demo.js
@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+
+const bot = require("circle-github-bot").create();
+
+demos = [
+    bot.artifactLink('docs/fiddle.html', 'docs'),
+    bot.artifactLink('preview/index.html', 'dev'),
+];
+
+bot.comment(`
+<h3>${bot.env.commitMessage}</h3>
+Preview: <strong>${demos.join(' | ')}</strong>
+`);
diff --git a/preview/index.css b/preview/index.css
@@ -1,5 +1,5 @@
 body {
-    padding: 40px 20px 20px 20px;
+    padding: 20px 20px 20px 20px;
     background:#EEE;
     font-family: sans-serif;
 }
@@ -13,7 +13,7 @@ textarea {
 svg {
     display: inline-block;
     background: #FFF;
-    width: 120px;
+    width: 100px;
     height: 100px;
 }
 
@@ -22,6 +22,11 @@ svg.big {
     height: 200px;
 }
 
+label {
+    display: inline-block;
+    width: 120px;
+}
+
 .panel {
     position: relative;
     height: 600px;

diff --git a/preview/index.html b/preview/index.html
@@ -8,22 +8,55 @@
 </head>
 <body>
     <div>
-        <h1>SVGTypewriter</h1>
-
         <div class="panel">
             <div class="fill-half-left">
                 <h5>Input text here</h5>
                 <textarea id="input-text">
 Lorem ipsum dolor sit amet, convenire iracundia ex ius, his at ipsum invidunt. Eam eu case oratio recusabo, pri melius fuisset indoctum et. Mea errem phaedrum rationibus ut, eu corrumpit dissentiet duo. Aperiam denique ad mei, no altera periculis pro. Ex commune percipitur his, an dolore quaeque eam. An veri sale solum eos, sea et volutpat theophrastus. Mea cetero epicuri deleniti id, cu appareat vivendum consectetuer usu.
                 </textarea>
+
+                <input type="button" value="Lorem Ipsum" data-text="Lorem ipsum dolor sit amet, convenire iracundia ex ius, his at ipsum invidunt. Eam eu case oratio recusabo, pri melius fuisset indoctum et. Mea errem phaedrum rationibus ut, eu corrumpit dissentiet duo. Aperiam denique ad mei, no altera periculis pro. Ex commune percipitur his, an dolore quaeque eam. An veri sale solum eos, sea et volutpat theophrastus. Mea cetero epicuri deleniti id, cu appareat vivendum consectetuer usu." />
+
+                <input type="button" value="Ellipseees" data-text="................................................................................................................................................................................................................................................................................................................................................................................................................................................................" />
+
             </div>
             <div class="fill-half-right">
                 <h5>SVG output here</h5>
                 <svg id="svg1" class="big"></svg>
-                <svg id="svg2" style="fill: dodgerblue"></svg>
-                <svg id="svg3" style="fill: indigo"></svg>
-                <svg id="svg4" style="fill: maroon; font-size: 2em;"></svg>
-                <svg id="svg5" style="fill: rebeccapurple;"></svg>
+                <br/>
+                <svg id="svg2" style="fill: dodgerblue; font-size: 2em;"></svg>
+                <svg id="svg3" style="fill: rebeccapurple;"></svg>
+
+                <h5>Configurable</h5>
+                <svg id="svg6" class="big">
+                    <rect fill="none" stroke="lime" x=150 y=50 width=100 height=100></rect>
+                    <g id="shearPreview" transform="translate(150, 50)" fill="deeppink"></g>
+                </svg>
+                <br/>
+
+                <label>Shear Angle</label>
+                <input type="range" id="shear" min="-80" max="80" value="60" />
+                <br/>
+
+                <label>Text Rotation</label>
+                <input type="button" data-rotation="0" value="0" />
+                <input type="button" data-rotation="90" value="90" />
+                <input type="button" data-rotation="180" value="180" />
+                <input type="button" data-rotation="-90" value="-90" />
+                <br/>
+
+                <label>X Alignment</label>
+                <input type="button" data-x-alignment="left" value="left" />
+                <input type="button" data-x-alignment="center" value="center" />
+                <input type="button" data-x-alignment="right" value="right" />
+                <br/>
+
+                <label>Y Alignment</label>
+                <input type="button" data-y-alignment="top" value="top" />
+                <input type="button" data-y-alignment="center" value="center" />
+                <input type="button" data-y-alignment="bottom" value="bottom" />
+                <br/>
+
             </div>
     </div>
 </body>

diff --git a/preview/preview.js b/preview/preview.js
@@ -15,30 +15,88 @@ function createUpdater(selector, options) {
     const wrapper = new SVGTypewriter.Wrapper();
     const writer = new SVGTypewriter.Writer(measurer, wrapper);
 
-    return function(text) {
-        const rect = element.getBoundingClientRect();
+    const update = function() {
+        const rect = writeOptions.rect == null ? element.getBoundingClientRect() : writeOptions.rect;
         selection.selectAll("*").remove()
-        writer.write(text, rect.width, rect.height, writeOptions);
-    }
+        writer.write(this.text, rect.width, rect.height, this.options);
+    };
+
+    return {
+        update,
+        text: "",
+        options: writeOptions,
+    };
 }
 
 const updatables = [
     createUpdater("#svg1"),
-    createUpdater("#svg2"),
-    createUpdater("#svg3", {textRotation: 90}),
-    createUpdater("#svg4", {textRotation: -90}),
-    createUpdater("#svg5", {xAlign: "right"}),
+    createUpdater("#svg2", {textRotation: -90}),
+    createUpdater("#svg3", {xAlign: "right"}),
 ];
+const configurable = createUpdater("#shearPreview", {
+    textRotation: -90,
+    textShear: 0,
+    xAlign: "right",
+    rect: {
+        width: 100,
+        height: 100
+    }
+});
+updatables.push(configurable);
 
+// bind text area
 const textArea = document.querySelector("textarea");
-
-function update() {
+function updateText() {
     const text = textArea.value;
-    updatables.forEach(function (updatable) {
-        updatable(text);
+    updatables.forEach((u) => {
+        u.text = text;
+        u.update.apply(u);
     });
 };
+textArea.addEventListener("change", updateText);
+textArea.addEventListener("keyup", updateText);
+updateText();
 
-textArea.addEventListener("change", update);
-textArea.addEventListener("keyup", update);
-update();
+// bind text setters
+const textSetters = document.querySelectorAll("input[data-text]");
+Array.prototype.forEach.call(textSetters, (textSetter) => {
+    textSetter.addEventListener("click", () => {
+        textArea.value = textSetter.getAttribute("data-text");
+        updateText();
+    });
+});
+
+// bind shear slider
+const slider = document.querySelector("input#shear");
+function updateShear() {
+    const value = parseInt(slider.value);
+    configurable.options.textShear = value;
+    configurable.update.apply(configurable);
+};
+slider.addEventListener("input", updateShear);
+updateShear();
+
+// bind angles
+const rotationSetters = document.querySelectorAll("input[data-rotation]");
+Array.prototype.forEach.call(rotationSetters, (button) => {
+    button.addEventListener("click", () => {
+        configurable.options.textRotation = parseInt(button.getAttribute("data-rotation"));
+        configurable.update.apply(configurable);
+    });
+});
+
+// bind x alignment
+Array.prototype.forEach.call(document.querySelectorAll("input[data-x-alignment]"), (button) => {
+    button.addEventListener("click", () => {
+        configurable.options.xAlign = button.getAttribute("data-x-alignment");
+        configurable.update.apply(configurable);
+    });
+});
+
+// bind y alignment
+Array.prototype.forEach.call(document.querySelectorAll("input[data-y-alignment]"), (button) => {
+    button.addEventListener("click", () => {
+        configurable.options.yAlign = button.getAttribute("data-y-alignment");
+        configurable.update.apply(configurable);
+    });
+});
diff --git a/src/wrappers/wrapper.ts b/src/wrappers/wrapper.ts
@@ -133,9 +133,7 @@ export class Wrapper {
     state.wrapping.noLines += +(wrappedText !== "");
 
     if (state.wrapping.noLines === state.availableLines && this._textTrimming !== "none" && hasNextLine) {
-      const ellipsisResult = this.addEllipsis(wrappedText, state.availableWidth, measurer);
-      state.wrapping.wrappedText += ellipsisResult.wrappedToken;
-      state.wrapping.truncatedText += ellipsisResult.remainingToken;
+      // Note: no need to add more ellipses, they were added in `wrapNextToken`
       state.canFitText = false;
     } else {
       state.wrapping.wrappedText += wrappedText;
@@ -162,6 +160,7 @@ export class Wrapper {
     }
     let truncatedLine = line.substring(0).trim();
     let lineWidth = measurer.measure(truncatedLine).width;
+
     const ellipsesWidth = measurer.measure("...").width;
     const prefix = (line.length > 0 && line[0] === "\n") ? "\n" : "";
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,6 +5,7 @@ build @@
     coverage
     preview/bundle.js
     svg-typewriter.js
+    *.log
     # IDEs
     .idea/
@@ Expand Down @@