Category: javascript

I have a dynamic SVG which I’ve got as a return value from an API, this API contains several HTTP calls inside so I can’t display it in a <img src={svg} /> tag.

The SVG which I try to display can be found here: https://www.svgviewer.dev/s/g4PDWSVs

I use React Vite, with the SVGR plugin for Vite, when I copy the SVG data from the API, and store it as a file: ticket.svg, I am able to display it like this. However I don’t want to store it in a file before displaying it, I want to directly display it in my JSX without any manual work.

import { ReactComponent as Ticket } from "./../../assets/ticket.svg";

const TicketDetail = () => {
      const [ticketSvg, setTicketSvg] = useState();
    
      const getTicketSVG = () => {
        // ...fetching SVG here
    
        setTicketSvg(svg); // looks something like <svg> ...svgData here..</svg>
      };
    
      return (
        <header className={styles.header}>
          // display svg here
          <Ticket />
        </header>
      );
    };

I have also tried to use a tag, but in this case only the frame of the SVG will be displayed but the HTTP calls in the SVG won’t execute.

<img src={`data:image/svg+xml;utf8,${encodeURIComponent(ticketSvg)}`} />

Some of the resources I tried, but without result:

• Turning an SVG string into an image in a React component
• How to dynamically import SVG and render it inline
• Unable to import SVG with Vite as ReactComponent

Any help would be greatly appreciated!

So, I’m making this site on wordpress, and I want in tha card carousel for each item that has been selected the title to be different color, but I’m new to this and I don’t quite catch up with it.
So my question is can I make an array of className, because all of the items in carousel have the same class, but when the one item is selected, the all of the other items should be white or the color that it is i got this snippet here, this is jquery for connected items and templates, you’ll figure it out. I tried to assign “id” onclick but its not working for me here is the code that is working for connected elements
`

jQuery(document).ready(function(){
    jQuery('[data-showme]').on('click', function(){
        var showme = $(this).attr('data-showme')
    
        jQuery('.all-content').hide()
        jQuery('#' + showme).show()
 
    })
    jQuery(document).ready(function(){
    jQuery("#slide-selected-1").on('click', function(){
        jQuery(".all-content").hide()
         jQuery("#smartedgemain").show()
    })

})
})

</script>

`

I was adding array function and tried to change foreach but im still new in js and jquery so i just made a mess

Error:

index.js:2 Uncaught SyntaxError: The requested module ‘https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js’ does not provide an export named ‘getDatabase’ (at index.js:2:10)

import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js'
import { getDatabase, ref, push } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js'
const appSettings = {
    databaseURL : 'https://playground-5d1ab-default-rtdb.firebaseio.com/'
}
const app = initializeApp(appSettings);
const database = getDatabase(app);
const shoppingListInDB = ref(database, "shoppingList");

const inputBtn = document.getElementById("input-field");
const cartBtn = document.getElementById("button-id");
const shoppingListEl = document.getElementById("shopping-list");
cartBtn.addEventListener("click", function(){
    let inputValue = inputBtn.value;
    push(shoppingListInDB, inputValue);
    console.log(inputValue); 
    shoppingListEl.innerHTML += `<li>${inputValue}</li>`;
})

I am expecting that the details would show when I console.log them on the screen and would get added to the firebase.

    `<template>
     <section class="speciality-area">
      <div class="container">
        <div class="row">
          <div class="row">
         <div class="col-lg-12 col-md-12 mt-2">
           <div class="archive-data-container" v-if="!listVisible && !paperPage"> 
            <div class="" v-for="year in years" :key="year">
            <h6>{{ year }}</h6>
             <div class="row"  
             v-for="(data, index) in archives[year]" :key="data.index">
              <div class="col-lg-3 databox m-1 issueButton"   v-for="issue in data.sort()"
                :key="issue.index"
                @click="viewIssueData(year, index, issue)"> 
                <p>Volume {{ index }} Issue {{ issue }}</p>
              </div> 

             </div>
           </div>

           </div>
       
         </div>
        
         <div class="paperlist-container " v-if="listVisible && !paperPage">
          <div class="row paperBox paperHeading mb-4 p-2 ">
            <h5 >{{ cYear }} | Volume {{ cVolume }} - Issue {{ cIssue }}</h5>
          </div>
          <div
            class="row paperBox mb-3"
            v-for="paper in papersList"
            :key="paper.paper_uniqueid"
          >
            <div class="col-9 p-3">
              <h4>{{ paper.paper_title }}</h4>
              <p><b>Author:</b> {{ paper.paper_author }}</p>
              <p><b>Article Type:</b> {{ paper.paper_articletype }}</p>
              <p><b>Pages:</b> {{ paper.paper_pages }}</p>
            </div>
            <div class="col-3 p-3">
              <b-button
                class="col-8 mb-2"
                variant="outline-primary"
                size="sm"
                @click="viewPaperDetails(paper.paper_id)"
                >Paper Details</b-button
              >
              <b-button
                class="col-8 mb-2"
                variant="outline-primary"
                size="sm"
                @click="downloadPDF(paper.paper_url)"
                >Download PDF</b-button
              >
              <b-button
                class="col-8"
                variant="outline-primary"
                size="sm"
                @click="googleSearch('https://www.google.com/search?q='+paper.paper_title)"
                >Google</b-button
              >
            </div>
          </div>
        </div>
        <div class="paperdetails-container" v-if="paperPage">
          <div class="row paperBox mb-4 p-3">
            <div class="header-container row justify-content-between rowSize">
              <h4 class="col-10 pr-2">{{ paperDetails.paper_title }}</h4>
              <div class="col-2" >
                <b-button 
                  variant="outline-primary"
                  
                  @click="downloadPDF(paperDetails.paper_url)"
                  >Download PDF</b-button
                >
              </div>
            </div>
            <div class="details-container mt-4 p-3">
              <!-- <div class="author-details pb-3"> -->
                <p class="pb-3"><b>Author(s) : </b>{{ paperDetails.paper_author }}</p>
              <!-- </div> -->
              <!-- <div class="submit-details pb-3"> -->
          <p class="pb-3"><b>Submission-Year,Month : 
             </b>{{ paperDetails.year }}, {{paperDetails.month }}</p> ` <
  !-- < /div> --> <
  !-- < div class = "author-details pb-3" > -->
  <
  p class = "pb-3" > < b > Pages: < /b>{{ paperDetails.paper_pages }}</p >
      <
      !-- < /div> --> <
      !-- < div class = "author-details pb-3" > -->
      <
      p class = "pb-3" > < b > Article Type: < /b>{{ paperDetails.paper_articletype }}</p >
      <
      !-- < /div> --> <
      !-- < div class = "author-details" > -->
      <
      p class = "pb-3" > < b > DOI: < /b>{{ paperDetails.paper_doi }}</p >
      <
      !-- < /div> --> <
      /div> <
      /div>  <
      div class = "row p-3 paperBox" >
      <
      h4 class = "mb-2" > Abstract < /h4> <
      p class = "abstract-details" > {
          {
              paperDetails.paper_abstract
          }
      } <
      /p> <
      /div> <
      /div> <
      /div> <
      /div> <
      /div>

      <
      /section> <
      /template>

      <
      script >
      export default {
          data: function () {
              return {
                  archives: {},
                  years: [],
                  papersList: [],
                  listVisible: false,
                  paperPage: false,
                  cYear: "",
                  cVolume: "",
                  cIssue: "",
                  paperDetails: {},
              };
          },
          methods: {
              getArchivesData: function () {
                  this.api.getDataModule("archives/3/getarchives", "journals/v1/").then(
                      (res) => {
                          console.log(res.data);
                          this.archives = res.data.archives;
                          this.sortData();
                      },
                      (err) => {
                          console.log(err);
                      }
                  );
              },
              getPapersList: function (year, volume, issue) {
                  this.api
                      .getDataModulePagination(
                          "archives/3/getpaperslist",
                          "journals/v1/",
                          "year=" + year + "&volume=" + volume + "&issue=" + issue
                      )
                      .then(
                          (res) => {
                              this.papersList = res.data.papersList;
                          },
                          (err) => {
                              console.log(err);
                          }
                      );
              },
              getPaperDetails: function (paperid) {
                  this.api
                      .getDataModulePagination(
                          "archives/3/getpaperdetails",
                          "journals/v1/",
                          "paperid=" + paperid
                      )
                      .then(
                          (res) => {
                              this.paperDetails = res.data.paperdetails;
                          },
                          (err) => {
                              console.log(err);
                          }
                      );
              },
              sortedIssues: function (val) {
                  return val.sort().reverse();
              },
              sortData: function () {
                  this.years = Object.keys(this.archives).sort().reverse();
              },
              viewIssueData: function (year, volume, issue) {
                  this.getPapersList(year, volume, issue);
                  this.cYear = year;
                  this.cVolume = volume;
                  this.cIssue = issue;
                  this.listVisible = true;
                  this.$router.push({
                      path: "archives",
                      query: {
                          year: year,
                          volume: volume,
                          issue: issue
                      },
                  });
              },
              viewPaperDetails: function (paperid) {
                  this.getPaperDetails(paperid);
                  this.paperPage = true;
                  this.$router.push({
                      path: "archives",
                      query: {
                          paperid: paperid
                      }
                  });
              },
              downloadPDF: function (paperURL) {
                  window.open(paperURL, "_blank");
              },
              googleSearch(url) {
                  window.open(url, "_blank");
              },
          },
          watch: {
              $route: function () {
                  console.log("here");
                  if (
                      !this.paperPage &&
                      this.listVisible &&
                      this.cYear == this.$route.query.year &&
                      this.cVolume == this.$route.query.volume &&
                      this.cIssue == this.$route.query.issue
                  ) {
                      this.listVisible = true;
                  } else {
                      this.listVisible = false;
                  }

                  if ("paperid" in this.$route.query) {
                      this.viewPaperDetails(this.$route.query.paperid);
                  } else {
                      this.paperPage = false;
                      this.getArchivesData();
                  }
              },
          },
          mounted: function () {
              if ("paperid" in this.$route.query) {
                  this.viewPaperDetails(this.$route.query.paperid);
              } else {
                  this.listVisible = false;
                  this.paperPage = false;
                  this.getArchivesData();
                  console.log("thre");
              }
          },
      }; <
  /script>

Error: [Vue warn]: You may have an infinite update loop in a component render function.

found in

at src/components/page_components/Archives/Archives.vue
‘Its perfectly running in the local host but in the production build its occuring infinite loop
I want to find out why the above code is infinite loop while on the production and I’m getting the waring also in the console. Need to fix this`. Just this was not working while on the production build need to rectify this. what changes need to do and why this was happening while on the production

My app is written in Ruby on a Sinatra framework. One of the functions in my app displays javascript code. That javascript code is called by remote websites. In Ruby, I need to know the full URL of the remote website calling the javascript code so that I can make changes to the javascript code. I have tried retrieving the request.referrer and request.env["HTTP_REFERER"] but they only seem to retrieve the schema and domain of the referring domain. How do I get the full referring URL?

For reference, here is the Sinatra file that I am using to test this:

require 'sinatra'

get %r{/test} do
    debug = {:referrer => request.referrer, :http_referer => request.env["HTTP_REFERER"], :path_info => request.path_info, :query_string => request.query_string, :host => request.host, :url => request.url, :path => request.path}
    STDERR.puts debug.inspect
    erb "test"
end

If this Sinatra file was hosted at http://www.server.com, you should be able to access this function by going to http://www.server.com/test

Then, if there was a remote website at http://www.remote.com/url-with-test-code.html with the following HTML:

<!DOCTYPE html>
<html>
<body>
<script src="http://www.server.com/test">
test
</body>
</html>

For this example, this is the results I am seeing:

{:referrer=>”https://www.remote.com/”, :http_referer=>”https://www.remote.com/”, :path_info=>”/test”, :query_string=>””, :host=>”www.server.com”, :url=>”https://www.server.com/test”, :path=>”/test”}

But I would expect the “referrer” key to be “https://www.remote.com/url-with-test-code.html”

I did authorization using next auth, everything is exactly the same as in the documentation and video. When I wanted to make middleware in next js, nothing happened at first, but when I add:

export { default } from "next-auth/middleware";

or add withAuth(), I get an error:

./node_modules/next-auth/next/middleware.js
Module parse failed: Identifier ‘NextResponse’ has already been declared (3:6)
| “use strict”;
| const NextResponse = require(“next/dist/server/web/spec-extension/response”).NextResponse;

const NextResponse = require(“next/dist/server/web/spec-extension/response”).NextResponse;
| var _interopRequireDefault = require(“@babel/runtime/helpers/interopRequireDefault”);
| Object.defineProperty(exports, “__esModule”, {

error

I wanted to make a middleware in which I will redirect the user depending on the session in the next auth.

I want allow my PWA to accept all possible file format, but “application/*” don’t works (on file like “application/octet-stream” my PWA don’t is into share menu:

"share_target": {
    "action": "/?pwa=share_target",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "files": [
        {
          "name": "file",
          "accept": [
            "image/*", "video/*", "audio/*", "application/*", "text/*", "font/*"
          ]
        }
      ]
    }
  }

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});

const openai = new OpenAIApi(configuration);

process.env.HTTP_PROXY = 'http://127.0.0.1:1087';
process.env.HTTPS_PROXY = 'http://127.0.0.1:1087';

const completion = await openai.createCompletion({
  model: "text-davinci-003",
  prompt: 'hello chatgpt',
  temperature: 0.6,
});

const res = completion.data.choices[0].text //TypeError: Cannot read properties of undefined (reading '0')

I checked “completion.data”, it’s a empty string like ”, does anybody has the same question? 🙁

the code is too simple , I have no ideas what to try

I am a beginner in javascript and I am writing code where a white screen opens when clicked on a button, first time when i called the onclick function, it worked but when added one more onclick function, it doesn’t working. The animation in second onclick function “exploreButton.onclick()” is not working.

<script>
        spaceButton = document.querySelector('.spacebttn');
        exploreButton = document.querySelector('.explorebttn');
        crack = document.querySelector('.crack');
        crackLeft = document.querySelector('.crackLeft');
        crackRight = document.querySelector('.crackRight');
        
        spaceButton.onclick = function(){
            crack.style.animation = "crackVisible 1s forwards";
            crackLeft.style.animation = "openingLeft 2s 1s forwards";
            crackRight.style.animation = "openingRight 2s 1s forwards";
        };
        
        //THIS FUNCTION IS NOT WORKING ⬇, THE ANIMATION IS PLAYING IN AN INSTANT AND I DON'T KNOW WHY
        exploreButton.onclick = function(){
            crackRight.style.animation = "closingLeft 2s";
            crackLeft.style.animation = "closingRight 2s";
            crack.style.animation = "crackInvisible 1s 2s"
        };
    </script>

This is its html code:-

<section class="header">
        <img class="crack" src="images/crack3.png">
        <img class="crackLeft" src="images/crackRight.png">
        <img class="crackRight" src="images/crackLeft.png">
        <video class='video' autoplay muted loop>
            <source src="images/the-last-dark-knight-moewalls.com.mp4">
        </video>
        <nav>
            <div class='nav-links'>
                <ul>
                    <li><a class="explorebttn" href="#">EXPLORE</a></li>
                    <li><a class="spacebttn" href="#">SPACE</a></li>
                    <li><a href="#section2">ABOUT</a></li>
                    <li><a href="#">FEEDBACK</a></li>
                </ul>
            </div>
        </nav>
</section>
<section class="sec2" id="section2">
        <video class='video2' autoplay muted loop>
            <source src="images/galaxy-moewalls.com.mp4">
        </video>
</section>

This is its CSS code

        @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');

        *{
            margin: 0;
            padding: 0;
            scroll-behavior: smooth;
        }

        .header{
            height: 100vh;
            width: 100%;
            /*background-image: url('images/space 2.jpg');
            background-position: center;
            background-size: cover;*/
            display: flex;
            justify-content: center;
        }

        .sec2{
            height: 100vh;
            width: 100%;
        }

        #section2{
            transition: 0.5s;
        }

        nav{
            display: flex;
            padding: 0% 5%;
            justify-content: space-between;
/*          align-items: center;*/
/*          backdrop-filter: blur(2px);*/
        }

        .nav-links{
            flex: 1;
            text-align: center;
        }

        li{
            list-style: none;
            display: inline-block;
            padding: 25px 50px;
        }

        .nav-links ul li a{
            color: white;
            font-size: 27px;
            font-family: 'Bebas Neue', cursive;
            cursor: pointer;
            position: relative;
            text-decoration: none;
            mix-blend-mode: difference;
        }

        .nav-links ul li a:after{
            content: '';
            position: absolute;
            width: 100%;
            height: 10%;
            top: 100%;
            left: 0;
            background: white;
            transition: 0.2s;
            transform: scale(0,1);
        }

        .nav-links ul li a:hover:after{
            transform: scale(1,1);
            transition: transform 0.2s ease;
        }

        .video{
            object-fit: cover;
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

        .video2{
            object-fit: cover;
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

        .crack{
            position: absolute;
            height: 100%;
            justify-content: center;
            opacity: 0;
        }

        .crackRight{
            position: absolute;
            height: 100%;
            left: 0;
            transform: translate(46.5%);
            clip: rect(0, 0, 1080px, 0);
        }

        .crackLeft{
            position: absolute;
            height: 100%;
            transform: translate(-45.5%);
            clip: rect(0, 1400px, 900px, 1400px);
        }

        @keyframes crackVisible {
            100%{
                opacity: 100%;
            }
        }

        @keyframes crackInvisible{
            100%{
                opacity: 0;
            }
        }

        @keyframes openingRight{
            100%{
/*              left: -1400px;*/
                clip: rect(0, 773px, 1080px, 0);
            }
        }

        @keyframes closingRight{
            100%{
                clip: rect(0, 0, 1080px, 0);
            }
        }

        @keyframes openingLeft{
            100%{
/*              left: -1400px;*/
                clip: rect(0, 1400px, 900px, 625px);
            }
        }

        @keyframes closingLeft{
            100%{
                clip: rect(0, 1400px, 900px, 1400px);
            }
        }

how’s it going? I ask you a question. I need to clear the PayPal credentials info on a React site. How could I do to eliminate them after having previously made an authentication? I’m seeing (but I’m not 100% sure) that they must be saved in cookies and I would need to delete them. Maybe, these cookies belong to other sites with a different domain than the React site that contains the string “paypal”. That’s possible?

I have an array of objects in my Javascript/React app:

[
 {type: 'TypeOne'} 
 {type: 'TypeFive'}
 {type: 'TypeTen'}
]

How to return a boolean true if the array contains an object with key/value type: 'TypeTen'?

I am trying to seed a DynamoDB table named weather with a list of items from a file named cities.csv, but it seems like the write operation never completes and so the mapped async function never moves past the following statement

const response = await docClient.send(new PutCommand(params));

for each item in the list. As a result, I am left with an empty, unseeded DynamoDB table. Any ideas what is going on here? I have been pulling my hair out over this.

I reproduced the code from my lambda function named seedDynamo below:

// es6 syntax for including modules
import * as fs from 'fs';

// es6 syntax for including modules
import {DynamoDB, PutItemCommand, DynamoDBClient} from "@aws-sdk/client-dynamodb";

import { PutCommand, DynamoDBDocumentClient } from "@aws-sdk/lib-dynamodb";

export const handler = async(event, callback) => {

     console.log("entered handler function");

     const DDB = new DynamoDBClient({region: 'us-east-1'});
     const docClient = DynamoDBDocumentClient.from(DDB);
     let params = {};

     const fileContents = fs.readFileSync("cities.csv", "utf8").split('n').map(async (item_str) => {
          params.ReturnConsumedCapacity = "TOTAL";
          params.TableName = "weather";
          params.Item = {
              "sc": {
                  "S": item_str.split(",")[0]
              },
              "t": {
                  "N": String(item_str.split(",")[1])
              }
          };
 //         console.log(params);
          try {
              const response = await docClient.send(new PutCommand(params));
              console.log(response);
          } catch (err) {
              console.log("Error", err);
          } finally {
              console.log("Success");
          }
      });
      
   setTimeout(function(){
       callback(null, "ok");
   }, 1000 * 10);
  
};

Here is a list of items (cities.csv) containing a subset of the records I used.

AGUADA,53
AKRON,22
ALTO,47
ANAHEIM,62
ANCHORAGE,57
ANN ARBOR,73
APPLE VALLEY,38
AUGUSTA,52
BARCELONETA,23
BERKELEY,60

Here is an execution log.

Test Event Name
seedDYnamoDB

Response
null

Function Logs
START RequestId: 71627f6e-f384-4f6d-aa81-95588d90710d Version: $LATEST
2023-06-07T13:42:00.121Z    71627f6e-f384-4f6d-aa81-95588d90710d    INFO    entered handler function
END RequestId: 71627f6e-f384-4f6d-aa81-95588d90710d
REPORT RequestId: 71627f6e-f384-4f6d-aa81-95588d90710d  Duration: 1574.02 ms    Billed Duration: 1575 ms    Memory Size: 128 MB Max Memory Used: 105 MB Init Duration: 506.99 ms

Request ID
71627f6e-f384-4f6d-aa81-95588d90710d

This is my code

const sequelize = require("./dbConnect");
const Admin = require("./model/adminModel");
const Banner = require("./model/bannerModel");
const Blogs = require("./model/blogsModel");
const BlogType = require("./model/blogtypeModel");
const md5 = require("md5");
(async function () {
  // Set the association relationship of the table

  BlogType.hasMany(Blogs, {
    foreignKey: "categoryId",
    targetKey: "id",
  });
  Blogs.belongsTo(BlogType, {
    foreignKey: "categoryId",
    targetKey: "id",
    as: "category",
  });

  // sync
  await sequelize.sync({
    alter: true,
  });
  const adminNumber = await Admin.count();
  if (!adminNumber) {
    await Admin.create({
      name: "MY,
      loginId: "root",
      loginPwd: md5("123456"),
    });
    console.log("Successful...");
  }
  // 
  const bannerNumber = await Banner.count();
  if (!bannerNumber) {
    await Banner.bulkCreate([
      {
        midImg: "/static/images/bg1_mid.jpg",
        bigImg: "/static/images/bg1_big.jpg",
        title: "Hello",
        description: "nothing",
      },
    ]);
    console.log("OK1...");
  }
  console.log("Over...");
})();

The problem lies here
When I am developing a server using Nodejs, the foreign key ‘foreign’ of the table blogs in my MySQL database will be duplicated

BlogType.hasMany(Blogs, {
    foreignKey: "categoryId",
    targetKey: "id",
  });
  Blogs.belongsTo(BlogType, {
    foreignKey: "categoryId",
    targetKey: "id",
    as: "category",
  });

The tables in my database are like this, and the names of foreign keys will keep changing when I restart the server

Table Blogs

How can I implement this JS file:

http://www.turnjs.com/

Into my apex page?
I’ve addded the .js file into the App static files and this to the page HTML Header:

<script src="https://cdnjs.cloudfare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="turn.min.js"></script>
<script> $('#album').turn({gradients: true, acceleration: true}); </script>

This to the Javascript Files URL:

#APP_FILES#turn.min.js

And a static region with the following:

<div id="album">
        <div style="background-image: url(#APP_FILES#image1.JPG);">a</div>
        <div style="background-image: url(#APP_FILES#image2.png);">b</div>
        <div style="background-image: url(#APP_FILES#image3.JPG);">c</div>
</div>

But it doesn’t work.
Anybody knows what am I doing wrong?

Thanks

I want just text from array. The array can contains group which contains text and more groups. E.g

[
{
“index”: 3,
“uid”: “188960ecb29_00562b0c”,
“x”: 18.651406278454424,
“y”: 44.14920570161545,
“width”: 180.14783325004774,
“height”: 53.336747638012184,
“items”: [
{
“uid”: “18895f59b1a_2c5a5c7a”,
“locked”: false,
“rotation”: 0,
“type”: “text”,
“text”: [
“abc”
],
“x”: 154.37927087307924,
“y”: 0,
“width”: 25.768562376968507,
“height”: 20.90412770669292,
“sampleTextChanged”: true,
“fontSize”: 15.590551181102365,
“fontFamily”: “NimbusSansME”,
“textBold”: false,
“textItalic”: false,
“textUnderline”: false,
“textAlignment”: “TEXT_ALIGN_LEFT”,
“textLetterSpacing”: 0,
“textLineSpacing”: 1,
“color”: {
“red”: 0,
“green”: 0,
“blue”: 0,
“class“: “RGBAColor”,
“alpha”: 1
},
“placeholderText”: [
“Text”
],
“isPlaceholderTextActive”: false,
“translationKey”: “”,
“newPathCalculation”: true,
“shadow”: {
“blur”: 0,
“color”: “{“red”:255,”green”:255,”blue”:255,”transparent”:0}”,
“coords”: {
“x”: 0,
“y”: 0
},
“distance”: 0,
“opacity”: 1
},
“index”: 0,
“originalTextItem”: [
“abc”
],
“originalXcoords”: [
[
0,
8.25203001968504,
17.47085691437008,
25.768562376968507
]
]
},
{
“index”: 1,
“uid”: “1889607cfdf_091e59ca”,
“x”: 0,
“y”: 32.432619931319266,
“width”: 22.175427534448822,
“height”: 20.90412770669292,
“items”: [
{
“uid”: “18895ecc7c7_2d5440b6”,
“locked”: false,
“rotation”: 0,
“type”: “text”,
“text”: [
“xyz”
],
“x”: 0,
“y”: 0,
“width”: 22.175427534448822,
“height”: 20.90412770669292,
“sampleTextChanged”: true,
“fontSize”: 15.590551181102365,
“fontFamily”: “NimbusSansME”,
“textBold”: false,
“textItalic”: false,
“textUnderline”: false,
“textAlignment”: “TEXT_ALIGN_LEFT”,
“textLetterSpacing”: 0,
“textLineSpacing”: 1,
“color”: {
“red”: 0,
“green”: 0,
“blue”: 0,
“class“: “RGBAColor”,
“alpha”: 1
},
“placeholderText”: [
“Text”
],
“isPlaceholderTextActive”: false,
“translationKey”: “”,
“newPathCalculation”: true,
“shadow”: {
“blur”: 0,
“color”: “{“red”:255,”green”:255,”blue”:255,”transparent”:0}”,
“coords”: {
“x”: 0,
“y”: 0
},
“distance”: 0,
“opacity”: 1
},
“index”: 0,
“originalTextItem”: [
“xyz”
],
“originalXcoords”: [
[
0,
7.54406065452756,
14.95870755413386,
22.175427534448822
]
]
}
],
“type”: “group”,
“rotation”: 0
},
{
“index”: 2,
“uid”: “188960e945c_35ab99fa”,
“x”: 44.108363106593984,
“y”: 15.56765756703328,
“width”: 56.72123163199389,
“height”: 35.17448047647336,
“items”: [
{
“uid”: “18896072844_1298562b”,
“locked”: false,
“rotation”: 0,
“type”: “text”,
“text”: [
“group”
],
“x”: 15.567657567033265,
“y”: 14.270352769780445,
“width”: 41.15357406496064,
“height”: 20.90412770669292,
“sampleTextChanged”: true,
“fontSize”: 15.590551181102365,
“fontFamily”: “NimbusSansME”,
“textBold”: false,
“textItalic”: false,
“textUnderline”: false,
“textAlignment”: “TEXT_ALIGN_LEFT”,
“textLetterSpacing”: 0,
“textLineSpacing”: 1,
“color”: {
“red”: 0,
“green”: 0,
“blue”: 0,
“class“: “RGBAColor”,
“alpha”: 1
},
“placeholderText”: [
“Text”
],
“isPlaceholderTextActive”: false,
“translationKey”: “”,
“newPathCalculation”: true,
“shadow”: {
“blur”: 0,
“color”: “{“red”:255,”green”:255,”blue”:255,”transparent”:0}”,
“coords”: {
“x”: 0,
“y”: 0
},
“distance”: 0,
“opacity”: 1
},
“originalTextItem”: [
“group”
],
“originalXcoords”: [
[
0,
9.013287401574805,
14.342089074803152,
23.241187869094492,
31.9195220226378,
41.15357406496064
]
],
“index”: 2
},
{
“index”: 3,
“uid”: “188960e5f49_2341c362”,
“x”: 0,
“y”: 0,
“width”: 29.803226500984252,
“height”: 20.90412770669292,
“items”: [
{
“uid”: “188958badfe_3a73220b”,
“locked”: false,
“rotation”: 0,
“type”: “text”,
“text”: [
“Text”
],
“x”: 0,
“y”: 0,
“width”: 29.803226500984255,
“height”: 20.90412770669292,
“sampleTextChanged”: false,
“fontSize”: 15.590551181102365,
“fontFamily”: “NimbusSansME”,
“textBold”: false,
“textItalic”: false,
“textUnderline”: false,
“textAlignment”: “TEXT_ALIGN_LEFT”,
“textLetterSpacing”: 0,
“textLineSpacing”: 1,
“color”: {
“red”: 0,
“green”: 0,
“blue”: 0,
“class“: “RGBAColor”,
“alpha”: 1
},
“placeholderText”: [
“Text”
],
“isPlaceholderTextActive”: false,
“translationKey”: “”,
“newPathCalculation”: true,
“shadow”: {
“blur”: 0,
“color”: “{“red”:255,”green”:255,”blue”:255,”transparent”:0}”,
“coords”: {
“x”: 0,
“y”: 0
},
“distance”: 0,
“opacity”: 1
},
“index”: 0,
“istextCircularMode”: false,
“originalTextItem”: [
“Text”
],
“originalXcoords”: [
[
0,
9.119863435039372,
17.60027066929134,
25.1443313238189,
29.803226500984255
]
]
}
],
“type”: “group”,
“rotation”: 0
}
],
“type”: “group”,
“rotation”: 0
}
],
“type”: “group”,
“rotation”: 0
}
]