Jump to content

Recommended Posts

 

I will admit that my familiarity with use and defs proves limited at this point in time. In an effort to make it easier for plebs like me, could you export it as a similar svg filter object? 

When I use Affinity to export a project to SVG it exports anything with a Layer Effect as: 

<use id="Square-2-On" serif:id="Square 2 On" xlink:href="#_Image1" x="288.16" y="485.161" width="64.275px" height="83.71px" transform="matrix(0.988839,0,0,0.996549,0,0)"/>
<defs>
    <image id="_Image1" width="65px" height="84px" xlink:href="data:image/png;base64,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"/>
</defs>

Currently I want to use it in d3 and, due to my ineptitude of either d3 or the underlying SVG, I cannot get it to work correctly. It would be nice to export this as a general svg format (I don't know how to explain this...) but as SVG and not an image. 
If you have the time, and if it doesn't cause misfortune or the project manager to have a stroke, can you add this feature?

Example of the same image with out the sweetness:

<g id="_87" serif:id="87" transform="matrix(0.522181,0,0,0.522181,216.702,382.197)">
    <path d="M223.005,256.375L223.005,327.42L161.455,291.884L161.455,220.839L223.005,256.375Z" style="fill:rgb(121,238,249);"/>
</g>

Share this post


Link to post
Share on other sites

I think I'm right in saying, adding Layer FX will rasterise any vector.

What are you trying to achieve visually?

Upload an example, you can also add code so that we can look at that code using the <>
1636094319_ScreenShot2019-05-25at08_58_31.png.c95313cf297550e3ca2bde706bf5de8d.png 

	<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE
svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%"
height="100%" viewBox="0 0 52 126" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
xmlns:serif="http://www.serif.com/"
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;
stroke-miterlimit:1.41421;"><rect x="0" y="0" width="51.976"
height="51.976" style="fill:#f20d0d;"/><use xlink:href="#_Image1"
x="0" y="72.945" width="51.976px" height="52.755px"
transform="matrix(0.999538,0,0,0.995383,5.68434e-14,-2.84217e-14)"/><
defs><image id="_Image1" width="52px" height="53px"
xlink:href="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAADQAAAA1CAYAAAAOJMhOAAAACXBIWXMAAA7EAAAOxAGVK
w4bAAAC4klEQVRoge2a0Y7iOBBFTxknQNOwtEbT3zL//zLS/
sN8QjPNAAGS2HcfymlG09I+W7u5UslGcqI6Kds83LK/
N5tvT2ZsQ2AbAk8hsAwBzDxq05RXjNC2sNnAfg9fv8LrK/
Egfe8BciYCjRktYNPDtckMQvCIEZrG530P7+/
EN4kBCMBK4gmwafFiUR9UCJ7XauXV2W5huYSc4Xh0oBGIwJPELgRfsF77GIK/
qBawCWa3g5cXz/Nygbc3uFyIPyUS0AAbib3kZdzt4PnZ57XAmD1ye32FL198q/
34AV0Hv34RTxICVsBW4pgS55R4Bv8aMdYF1LaP7bZew/UKp5NH1xE7wCTOwFnilBKH+
53N5eJnqbYKta3Pl0sYRzgc4Hh0sL4n9hKNGTfgBnQSp77n0HXsJRZN83hZDWoaB4GPbc
b57FtvHIkJGEsMEr3EPWe6vqcJgSYlzIwacAxox/
FRKcmhhgFSAokoYIpcxiSRJIacsQJUg8wMS4lmHB1iGLxaOfsCiTgt1p+j9PgtUYumvJA
+B/5/+p/
SDFS7ZqDaNQPVrhmods1AtWsGql0zUO2agWrXDFS7ZqDaNQPVrhmods1AtWsGql0zUO36
fwHVY3P9oX8x4CJ8TvzDppTcMavEkkQi/zb/
3bmb9MljzbjHOubMmBJAVaYxwGoY3PUuzjc5f4DFDOTSHjOY0UvccqYr1nkMoQoY8A8bQ
yDlzN7Mne+U3DwuUDEBA9ADN4nOjHPOMAxcU2JRSXUmLcw43e909zsvlwtrM+
h7lJJ3lE1AV+CMd2QB3FKizbmqa9DwW6w1473v+Xm9sguBNdAUSz+
OEtmMhcSxPHiTWJnRSFUCNWasc2abEn+
ZsTNjY8barHSSTDdZ6Z27AK1ErGy7TUBRYm3GVuJkxosZezO2ZsRAOUMFKknc8HazUF5S
G1TEj0ZXepRGIOE3dFyWyky33WBGLouCVBUM+
EdeAKMZKvnFEg3wD71Xg2MBeRSjAAAAAElFTkSuQmCC"/></defs></svg>

svg example with fx.svg The svg has a rectangle with no layer fx and one with a 3D layer fx applied, if you look at the More settings on the export panel it will have an option to rasterise unsupported properties, telling it not to will remove (ignore) any layer fx from that object.


iMac 27" Late 2015 Fully Loaded, iMac 27" Mid 2011 both running High Sierra 10.13.6 - Affinity Designer/Photo, Publisher Beta 1.7.0.140, Illustrator CC, Inkscape, Blender, Sketchup, Pepakura Designer, MTC, Pixelmator & Pixelmator Pro + more... XP-Pen Artist-22E, - iPad Pro 12.9 B|  

Affinity Help - Affinity Desktop Tutorials Instagram & Flickr - Affinity Live 19th June 2019

Share this post


Link to post
Share on other sites

I would prefer a non-rasterised version of the filter layers similar to the example below. I tried to recreate it but ended up going back to the image tag instead.

Example svg in prod: https://audiozoa.band/#/3dsquare

I attempted to recreate it with a filter but could not get it to look the same so I reverted back to the image. The rasterised image looks fine but it isn't scaleable (which is also fine). I just would prefer it to be for other application.

<button (click)="random()">Random</button>

<span *ngFor="let n of amount(101)">
  {{n}} |
</span>

<div style="display: flex; justify-content: center; margin-top: 40px">
  <svg width="30%" height="20%" viewBox="0 0 400 650" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">

  <!-- Holder of the full square -->
  <g id="Square-0" serif:id="Square 0" transform="matrix(3.23953,0,0,3.23953,-140.702,-645.488)">


    <g id="x1"></g>
    <g id="x2" transform="matrix(1,0,0,1,12.9212,8.7665)"> </g>
    <g id="x3" transform="matrix(1,0,0,1,25.8424,17.4988)"></g>
    <g id="x4" transform="matrix(1,0,0,1,38.7636,26.2653)"></g>
    <g id="x5" transform="matrix(1,0,0,1,51.6849,34.9976)"></g>
    <g id="x6" transform="matrix(1,0,0,1,64.6061,43.7641)"></g>
    <g id="x7" transform="matrix(1,0,0,1,77.5273,52.4964)"></g>
    <g id="x8" transform="matrix(1,0,0,1,90.4485,61.2629)"></g>

    <g *ngIf="false" id="_8" serif:id="8" transform="matrix(0.16119,0,0,0.16119,31.0512,270.426)">
      <!-- The svg way to do it. Doesn't look as good -->
      <g transform="matrix(1,0,0,1,-54,0)">
        <path id="example" d="M223.005,256.375L223.005,327.42L161.455,291.884L161.455,220.839L223.005,256.375Z" style="fill:rgb(121,238,249); filter: url(#glow);"></path>
        <path id="example" d="M223.005,256.375L223.005,327.42L161.455,291.884L161.455,220.839L223.005,256.375Z" style="fill:transparent; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 3;  filter: url(#dope);" stroke="white" stroke-width="2"></path>
      </g>
    </g>
  </g>

  <g id="Square-Test-On" serif:id="Square 2 On" transform="matrix(3.23953,0,0,3.23953,-140.702,-645.488)"></g>

  <defs>
    <image id="light" width="53px" height="77px" xlink:href="data:image/png;base64,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"/>

    <filter id="dope" width="300%" height="300%" x="-75%" y="-75%">
      <feMorphology operator="dilate" radius="3" in="SourceAlpha" result="thicken"></feMorphology>
      <feGaussianBlur stdDeviation="5" result="coloredBlur"></feGaussianBlur>
      <feFlood flood-color="rgb(121,238,249)" result="glowColor"></feFlood>
      <feComposite in="glowColor" in2="coloredBlur" operator="in" result="softGlow_colored"></feComposite>
      <feMerge>
        <feMergeNode in="softGlow_colored"></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
      </feMerge>
    </filter>

    <filter id="glow" width="300%" height="300%" x="-75%" y="-75%">
      <feMorphology operator="dilate" radius="4" in="SourceAlpha" result="thicken"></feMorphology>
      <feGaussianBlur stdDeviation="8" result="coloredBlur"></feGaussianBlur>
      <feFlood flood-color="rgb(121,238,249)" result="glowColor"></feFlood>
      <feComposite in="glowColor" in2="coloredBlur" operator="in" result="softGlow_colored"></feComposite>
      <feMerge>
        <feMergeNode in="softGlow_colored"></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
      </feMerge>
    </filter>
  </defs>
</svg>
</div>

 

Background angular/typescript code

 

import {Component, OnInit} from '@angular/core';
import {SquareFaceFactory} from '../domain/three-dsquare/square-face-factory.model';
import {SquareFaceDirection} from '../domain/three-dsquare/square-face-direction.enum';
import {SquareFace} from '../domain/three-dsquare/square-face.model';
import {generateInclusiveRange} from '../common/helpers/range';
import {SquareLightFactory} from '../domain/three-dsquare/square-light-factory.model';

import * as d3 from 'd3';
import {SquareLight} from '../domain/three-dsquare/square-light.model';

@Component({
  selector: 'app-three-dsquare',
  templateUrl: './three-dsquare.component.html',
  styleUrls: ['./three-dsquare.component.sass']
})
export class ThreeDSquareComponent implements OnInit {

  squareFaceConfig = [
    { transform: 'matrix(0.16119,0,0,0.16119,31.0512,270.426)', y: '8' },
    { transform: 'matrix(0.16119,0,0,0.16119,31.0512,255.97)',  y: '7' },
    { transform: 'matrix(0.16119,0,0,0.16119,31.0512,241.514)', y: '6' },
    { transform: 'matrix(0.16119,0,0,0.16119,31.0512,227.058)', y: '5' },
    { transform: 'matrix(0.16119,0,0,0.16119,31.0512,212.757)', y: '4' },
    { transform: 'matrix(0.16119,0,0,0.16119,31.0512,198.301)', y: '3' },
    { transform: 'matrix(0.16119,0,0,0.16119,31.0512,183.845)', y: '2' },
    { transform: 'matrix(0.16119,0,0,0.16119,31.0512,169.389)', y: '1' }
  ];

  squareFaceFactory = SquareFaceFactory.configure(
    'M223.005,185.277L284.554,220.813L284.554,291.884L223.005,327.42L161.455,291.884L161.455,220.813L223.005,185.277Z',
    'M223.005,256.375L223.005,327.42L161.455,291.884L161.455,220.839L223.005,256.375Z',
    'M284.554,291.884L223.005,327.42L223.005,256.375L284.554,220.839L284.554,291.884Z',
    'rgb(134,5,130)',
    'rgb(134,5,78)',
    'rgb(87,5,134)',
    'matrix(1,0,0,1,-54,0)'
  );

  squareLightFactory = SquareLightFactory.configure(
    'matrix(0.308686,-0,-0,0.308686,45.9024,199.254)',
    '#light',
    'matrix(0.987474,0,0,0.99982,0,0)',
    '41.474px',
    '64.988px'
  );

  yStart = 8;
  xStart = 0;

  yDiff = 28.5;
  xDiff = 46.6;

  xSpace = 42.25;

  // can generate dynamically - refactor
  x1 = this.getFirstColumn(this.xStart, 1);
  x2 = this.getFirstColumn(this.xStart, 2);
  x3 = this.getFirstColumn(this.xStart, 3);
  x4 = this.getFirstColumn(this.xStart, 4);
  x5 = this.getFirstColumn(this.xStart, 5);
  x6 = this.getFirstColumn(this.xStart, 6);
  x7 = this.getFirstColumn(this.xStart, 7);
  x8 = this.getFirstColumn(this.xStart, 8);

  // can generate dynamically - refactor
  y1 = this.getFirstRow(this.yStart, 1);
  y2 = this.getFirstRow(this.yStart, 2);
  y3 = this.getFirstRow(this.yStart, 3);
  y4 = this.getFirstRow(this.yStart, 4);
  y5 = this.getFirstRow(this.yStart, 5);
  y6 = this.getFirstRow(this.yStart, 6);
  y7 = this.getFirstRow(this.yStart, 7);
  y8 = this.getFirstRow(this.yStart, 8);

  blank = [];

  // can generate dynamically - refactor
  electricLights = {
    11: this.squareLightFactory.build(this.x1, this.getY(this.y1, 1), '11'),
    12: this.squareLightFactory.build(this.x1, this.getY(this.y2, 1), '12'),
    13: this.squareLightFactory.build(this.x1, this.getY(this.y3, 1), '13'),
    14: this.squareLightFactory.build(this.x1, this.getY(this.y4, 1), '14'),
    15: this.squareLightFactory.build(this.x1, this.getY(this.y5, 1), '15'),
    16: this.squareLightFactory.build(this.x1, this.getY(this.y6, 1), '16'),
    17: this.squareLightFactory.build(this.x1, this.getY(this.y7, 1), '17'),
    18: this.squareLightFactory.build(this.x1, this.getY(this.y8, 1), '18'),

    21: this.squareLightFactory.build(this.x2, this.getY(this.y1, 2), '21'),
    22: this.squareLightFactory.build(this.x2, this.getY(this.y2, 2), '22'),
    23: this.squareLightFactory.build(this.x2, this.getY(this.y3, 2), '23'),
    24: this.squareLightFactory.build(this.x2, this.getY(this.y4, 2), '24'),
    25: this.squareLightFactory.build(this.x2, this.getY(this.y5, 2), '25'),
    26: this.squareLightFactory.build(this.x2, this.getY(this.y6, 2), '26'),
    27: this.squareLightFactory.build(this.x2, this.getY(this.y7, 2), '27'),
    28: this.squareLightFactory.build(this.x2, this.getY(this.y8, 2), '28'),

    31: this.squareLightFactory.build(this.x3, this.getY(this.y1, 3), '31'),
    32: this.squareLightFactory.build(this.x3, this.getY(this.y2, 3), '32'),
    33: this.squareLightFactory.build(this.x3, this.getY(this.y3, 3), '33'),
    34: this.squareLightFactory.build(this.x3, this.getY(this.y4, 3), '34'),
    35: this.squareLightFactory.build(this.x3, this.getY(this.y5, 3), '35'),
    36: this.squareLightFactory.build(this.x3, this.getY(this.y6, 3), '36'),
    37: this.squareLightFactory.build(this.x3, this.getY(this.y7, 3), '37'),
    38: this.squareLightFactory.build(this.x3, this.getY(this.y8, 3), '38'),

    41: this.squareLightFactory.build(this.x4, this.getY(this.y1, 4), '41'),
    42: this.squareLightFactory.build(this.x4, this.getY(this.y2, 4), '42'),
    43: this.squareLightFactory.build(this.x4, this.getY(this.y3, 4), '43'),
    44: this.squareLightFactory.build(this.x4, this.getY(this.y4, 4), '37'),
    45: this.squareLightFactory.build(this.x4, this.getY(this.y5, 4), '45'),
    46: this.squareLightFactory.build(this.x4, this.getY(this.y6, 4), '37'),
    47: this.squareLightFactory.build(this.x4, this.getY(this.y7, 4), '47'),
    48: this.squareLightFactory.build(this.x4, this.getY(this.y8, 4), '37'),

    51: this.squareLightFactory.build(this.x5, this.getY(this.y1, 5), '51'),
    52: this.squareLightFactory.build(this.x5, this.getY(this.y2, 5), '52'),
    53: this.squareLightFactory.build(this.x5, this.getY(this.y3, 5), '53'),
    54: this.squareLightFactory.build(this.x5, this.getY(this.y4, 5), '54'),
    55: this.squareLightFactory.build(this.x5, this.getY(this.y5, 5), '41'),
    56: this.squareLightFactory.build(this.x5, this.getY(this.y6, 5), '56'),
    57: this.squareLightFactory.build(this.x5, this.getY(this.y7, 5), '41'),
    58: this.squareLightFactory.build(this.x5, this.getY(this.y8, 5), '41'),

    61: this.squareLightFactory.build(this.x6, this.getY(this.y1, 6), '61'),
    62: this.squareLightFactory.build(this.x6, this.getY(this.y2, 6), '62'),
    63: this.squareLightFactory.build(this.x6, this.getY(this.y3, 6), '63'),
    64: this.squareLightFactory.build(this.x6, this.getY(this.y4, 6), '51'),
    65: this.squareLightFactory.build(this.x6, this.getY(this.y5, 6), '65'),
    66: this.squareLightFactory.build(this.x6, this.getY(this.y6, 6), '51'),
    67: this.squareLightFactory.build(this.x6, this.getY(this.y7, 6), '51'),
    68: this.squareLightFactory.build(this.x6, this.getY(this.y8, 6), '68'),

    71: this.squareLightFactory.build(this.x7, this.getY(this.y1, 7), '71'),
    72: this.squareLightFactory.build(this.x7, this.getY(this.y2, 7), '72'),
    73: this.squareLightFactory.build(this.x7, this.getY(this.y3, 7), '73'),
    74: this.squareLightFactory.build(this.x7, this.getY(this.y4, 7), '74'),
    75: this.squareLightFactory.build(this.x7, this.getY(this.y5, 7), '51'),
    76: this.squareLightFactory.build(this.x7, this.getY(this.y6, 7), '51'),
    77: this.squareLightFactory.build(this.x7, this.getY(this.y7, 7), '51'),
    78: this.squareLightFactory.build(this.x7, this.getY(this.y8, 7), '78'),

    81: this.squareLightFactory.build(this.x8, this.getY(this.y1, 8), '81'),
    82: this.squareLightFactory.build(this.x8, this.getY(this.y2, 8), '82'),
    83: this.squareLightFactory.build(this.x8, this.getY(this.y3, 8), '83'),
    84: this.squareLightFactory.build(this.x8, this.getY(this.y4, 8), '51'),
    85: this.squareLightFactory.build(this.x8, this.getY(this.y5, 8), '51'),
    86: this.squareLightFactory.build(this.x8, this.getY(this.y6, 8), '86'),
    87: this.squareLightFactory.build(this.x8, this.getY(this.y7, 8), '87'),
    88: this.squareLightFactory.build(this.x8, this.getY(this.y8, 8), '88')
  };

  one = [
    this.electricLights['11'],
    this.electricLights['25'],
    this.electricLights['47'],
    this.electricLights['52'],
    this.electricLights['74'],
    this.electricLights['88']
  ];

  two = [
    this.electricLights['12'],
    this.electricLights['21'],
    this.electricLights['45'],
    this.electricLights['54'],
    this.electricLights['78'],
    this.electricLights['87']
  ];

  three = [
    this.electricLights['13'],
    this.electricLights['26'],
    this.electricLights['31'],
    this.electricLights['34'],
    this.electricLights['37'],
    this.electricLights['43'],
    this.electricLights['62'],
    this.electricLights['56'],
    this.electricLights['65'],
    this.electricLights['68'],
    this.electricLights['73'],
    this.electricLights['86']
  ];

  four = [
    this.electricLights['41'],
    this.electricLights['22'],
    this.electricLights['14'],
    this.electricLights['58'],
    this.electricLights['77'],
    this.electricLights['85']
  ];

  five = [
    this.electricLights['15'],
    this.electricLights['27'],
    this.electricLights['48'],
    this.electricLights['51'],
    this.electricLights['72'],
    this.electricLights['84']
  ];

  six = [
    this.electricLights['16'],
    this.electricLights['23'],
    this.electricLights['32'],
    this.electricLights['35'],
    this.electricLights['38'],
    this.electricLights['46'],
    this.electricLights['53'],
    this.electricLights['61'],
    this.electricLights['64'],
    this.electricLights['67'],
    this.electricLights['76'],
    this.electricLights['83']
  ];

  seven = [
    this.electricLights['17'],
    this.electricLights['28'],
    this.electricLights['44'],
    this.electricLights['55'],
    this.electricLights['71'],
    this.electricLights['82']
  ];

  eight = [
    this.electricLights['18'],
    this.electricLights['24'],
    this.electricLights['42'],
    this.electricLights['57'],
    this.electricLights['75'],
    this.electricLights['81']
  ];

  nine = [
    this.electricLights['33'],
    this.electricLights['66'],
    this.electricLights['63'],
    this.electricLights['36'],
  ];

  squareLightBoxes = [
    this.squareLightFactory.build(this.x8, '207', '71')
  ];

  x = [
    0, 42, 84, 126, 168, 210, 252, 294
  ];

  constructor() {
    console.log('WTF', this.squareLightFactory);
  }

  ngOnInit() {
    this.generate();
    // this.turnOnBlocks(Object.values(this.electricLights));
    // this.testBlur();
    // this.random();

    this.turnOnBlocks(this.nine);
  }

  getY(n: number, m: number) {
    return `${n + this.yDiff * (m - 1)}`;
  }

  getFirstRow(n: number, m: number) {
    return n + this.xDiff * (m - 1);
  }

  getFirstColumn(n: number, m: number) {
    return `${n + this.xSpace * (m - 1)}`;
  }

  amount(n: number) {
    return [n, n + 28.5, n + (2 * 28.5), n + (3 * 28.5), n + (4 * 28.5), n + (5 * 28.5), n + (6 * 28.5), n + (7 * 28.5)]
  }

  testBlur() {
    // d3.select('#example').style('filter', 'url(#dope)');
  }

  /** Builds a column of squares */
  buildColumn(x: number) {
    const c1 = d3.select(`#x${x}`);

    const columnBuilder = (config: { transform: string, y: string }) => {
      const xyConfigurations = `${x}${config.y}`;

      // order needs to stay TOP first due to layering
      const squareFaces: SquareFace[] = [
        this.squareFaceFactory.build(xyConfigurations, SquareFaceDirection.TOP),
        this.squareFaceFactory.build(xyConfigurations, SquareFaceDirection.LEFT),
        this.squareFaceFactory.build(xyConfigurations, SquareFaceDirection.RIGHT)
      ];

      // 1. creates a group
      c1.append('g')
      // 2. adds id with the x and y coordinates.  limits: (1 - 8)    examples: c1s1, c5s2, c8c8
        .attr('id', `x${x}y${config.y}`)
        // 3. moves the group by as specific amount - see matrix transformation
        .attr('transform', config.transform)
        // 4. adds 3 groups for each side of the square (set of square faces)
        .selectAll(`#x${x} g`)
        // 5. builds a square group using the xy coordinates for an id (11, 52, 88) and a position
        .data(squareFaces).enter().append('g')
          // 6. adds id from the square face to the group
          .attr('id', d => d.id)
          // 7. adds the transform position (relative to the parents transform)
          .attr('transform', d => d.transform)
          // 8. adds the xy coordinates as the class
          .attr('class', d => d.position)
          // 9. adds the path which draws the actual shape
          .append('path')
            // 10. adds the path coordinates to the path object which it will draw from
            .attr('d', d => d.pathCoordinates)
            // 11. adds the color to the path
            .attr('fill', d => d.fill)
        .exit();
    };

    this.squareFaceConfig.forEach(columnBuilder);
  }

  random() {
    const rand = Math.floor(Math.random() * Math.floor(10));

    const data = rand === 1 ? this.one :
                 rand === 2 ? this.two :
                 rand === 3 ? this.three :
                 rand === 4 ? this.four :
                 rand === 5 ? this.five :
                 rand === 6 ? this.six :
                 rand === 7 ? this.seven :
                 rand === 8 ? this.eight :
                 rand === 9 ? this.nine : [];

    this.clearLights();

    this.turnOnBlocks(data);
  }

  clearLights() {
    d3.select('#Square-Test-On').selectAll('g').remove();
  }

  turnOnBlocks(boxes: SquareLight[]) {
    // 1. gets all/appends group for each box in the data
    d3.select('#Square-Test-On').selectAll('g')
      // 2. adds the data as a set of light coordinates
      .data(boxes)
      .enter().append('g')
    	// 3. adds the lights id
        .attr('id', d => d.id)
    	// 4. adds the transformation matrix
        .attr('transform', this.squareLightFactory.groupMatrixTransform)
    	// 5. adds class
        .attr('class', 'lit')
    	// 6. appends a <use> tag
        .append('use')
    	  // 7. adds the image link to the use tag
          .attr('xlink:href', this.squareLightFactory.usedReference)
    	  // 8. adds the x coordinate
          .attr('x', d => d.x)
    	  // 9. adds the y coordinate
          .attr('y', d => d.y)
    	  // 10. adds the width
          .attr('width', d => d.width)
    	  // 11. adds the height
          .attr('height', d => d.height)
    	  // 12. adds the transform matrix
          .attr('transform', d => d.matrixTransform);
  }

  generate() {
    generateInclusiveRange(8, 1).forEach(i => {
      console.log('index', i);

      this.buildColumn(i);
    });
  }
}

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×